Tweet
Tweet

Slide 1

Slide 1 text

΋͏Ұ౓JSON Schemaͷ࿩Λ͠Α͏ ~ Form / Validation / View ~ Meguro.es #8 2017/2/7 Akatsuki Inc.ɹߴদ ਅฏ

Slide 2

Slide 2 text

■ ߴদ ਅฏ (@shimpeiws) ■ WebΤϯδχΞ @ ΞΧπΩ LXࣄۀ෦ ɹɾRailsͱJavaScriptΛ൒ʑ͘Β͍ॻ͍͍ͯΔ ■ LX(ϥΠϒΤΫεϖϦΤϯε)ࣄۀ෦ ɹɾཱྀφΧɾΞΫςΟϏςΟɺཱྀߦɺΠϯό΢ϯυͳͲ ɹɾϦΞϧͳମݧͷػձΛఏڙ͢ΔαʔϏε౳Λ޿ؚ͘Ή ࢲ͸୭

Slide 3

Slide 3 text

໨࣍ 1. ͜Μͳ͜ͱ͕͔ͨͬͨ͠ 3. Form / Validation / View 2. ΋͏Ұ౓JSON Schemaͷ࿩Λ͠Α͏

Slide 4

Slide 4 text

1. ͜Μͳ͜ͱ͕͔ͨͬͨ͠

Slide 5

Slide 5 text

■ ࠷ۙͷ։ൃͰۀ຿ཁ্݅ ͳ͜ͱ͕ͨ͘͠ͳͬͨ ɹɾΞΠςϜϚελొ࿥࣌ʹબ͹ΕͨΧςΰϦʹԠͯ͡… ɹɹɾΞΠςϜͷҰ෦ͷৄࡉ৘ใͷೖྗ߲໨͕Մม͢Δ ɹɹɾՄมͨ͠ೖྗ߲໨ʹରͯ͠όϦσʔγϣϯ͍ͨ͠ ɹɹɾೖྗ߲ͨ͠໨͸೔ຊޠͷϥϕϧΛ͚ͭͯϢʔβʹදࣔ͢Δ ͜Μͳ͜ͱ͕͔ͨͬͨ͠

Slide 6

Slide 6 text

■ ͭ·Γ࣮૷తʹ͸ ɹɾΧςΰϦຖʹRDBͷεΩʔϚ੾Δͷ͸ඇݱ࣮త͔ͩΒ… ɹɹɾεΩʔϚϨεͷΑ͏ͳࣗ༝౓Λอͪͭͭɺ ɹɾͰ΋ΧςΰϦຖʹϑΥʔϚοτ͸ग़དྷΔݶΓ౷Ұ͍͔ͨ͠Β… ɹɹɾೖྗ࣌ʹ͸όϦσʔγϣϯ͸ͭͭ͠ɺ ɹɾ΋ͪΖΜϢʔβʹදࣔ΋͢ΔͷͰ… ɹɹɾΧςΰϦʹԠͯ͡ग़ྗϑΥʔϚοτ΋มΘΔ ͱ͍͏ͷΛ࣮ݱ͍ͨ͠!!! ͜Μͳ͜ͱ͕͔ͨͬͨ͠

Slide 7

Slide 7 text

■ ߟ͑ͨ ɹɾεΩʔϚϨεʹ͢Δʹ͸… ɹɹɾྫ͑͹MongoDB ɹɹ ɾ3.2͔ΒೖͬͨυΩϡϝϯτόϦσʔγϣϯ͸ͪΐͬͱັྗ ɹɹ ɾMongoDBΒ͍͠෦෼͸ඞཁͱ͍ͯ͠ͳ͍(JSONͷΩʔͰҾ͚Δͱ͔ɺੑ ೳ໘ͱ͔…) ɹɹɾӡ༻΋ߟ͑ͯطଘͷMySQLͷJSONܕΛ࢖͏ͷ͕མͱ͠ॴʹͳͬͨ ɹɹ ɾ߲໨ͷఆٛͱόϦσʔγϣϯ͸Ͳ͏͠Α͏͔…. ɹɹ ɾͦ͜ͰJSON Schemaͷ࿩!!! ͜Μͳ͜ͱ͕͔ͨͬͨ͠

Slide 8

Slide 8 text

2. ΋͏Ұ౓JSON Schemaͷ࿩Λ͠Α͏

Slide 9

Slide 9 text

■ JSON Schema ɹɾਓؒʹ΋Ϛγϯʹ΋ϦʔμϒϧͳυΩϡϝϯτ ɹɾvallidation͕Ͱ͖Δ ɹɾJSON Schemaࣗ਎΋JSON ΋͏Ұ౓+40/4DIFNBͷ࿩Λ͠Α͏ http://json-schema.org/

Slide 10

Slide 10 text

■ JSON Schema ΋͏Ұ౓+40/4DIFNBͷ࿩Λ͠Α͏ http://json-schema.org/examples.html http://json-schema.org/latest/json- schema-core.html#rfc.section.4.2

Slide 11

Slide 11 text

■ ͜͏͍͏จ຺Ͱ࠷ۙྑ͘ฉ͘ͷ͸… ΋͏Ұ౓+40/4DIFNBͷ࿩Λ͠Α͏ http://swagger.io/ https://apiblueprint.org

Slide 12

Slide 12 text

■ ͜ΕΒͷπʔϧͷఏڙ͢Δ΋ͷ ɹɾυΩϡϝϯτͷࣗಈੜ੒ ɹɾAPIΫϥΠΞϯτͷࣗಈੜ੒ ɹɾόϦσʔγϣϯΛ͔͚Δ -> ࠓճ͸Ұ൪ॏཁ!!! ɹɾϞοΫαʔόͷ࡞੒ ΋͏Ұ౓+40/4DIFNBͷ࿩Λ͠Α͏ http://qiita.com/taizo/items/5a969ace57394a2d5b4a

Slide 13

Slide 13 text

■ Rubyؔ࿈ ΋͏Ұ౓+40/4DIFNBͷ࿩Λ͠Α͏ Ruby༻ͷJSON SchemaόϦσʔγϣϯϥΠϒϥϦ JSON Schemaपลπʔϧ + ֦ு - ϑΝΠϧ෼ׂ - Markdownܗࣜͷ࢓༷ॻͷग़ྗ - ͳͲͳͲ

Slide 14

Slide 14 text

■ Reactؔ࿈ ΋͏Ұ౓+40/4DIFNBͷ࿩Λ͠Α͏ JSON Schema͔ΒReactͷϑΥʔϜΛੜ੒???

Slide 15

Slide 15 text

3. Form / Validation / View

Slide 16

Slide 16 text

■ From ɹɾmozilla-services/react-jsonschema-form ɹɾJSON Schema͔ΒFormΛಈతʹੜ੒ ■ Validation ɹɾruby-json-schema/json-schema ɹɾJSON SchemaͰValidationΛ͔͚ͯActive Record΁ͷܨࠐΈΛࣗ࡞ ■ View ɹɾFrom͔Βདྷͨ஋͸ɺMySQLͷJSONܕʹอ࣋ ɹɾ߲໨ͷ೔ຊޠϥϕϧ͸JSON SchemaͷtitleଐੑΛ࢖͏ 'PSN7BMJEBUJPO7JFX

Slide 17

Slide 17 text

■ Form (mozilla-services/react-jsonschema-form) ɹɾఏڙ͞ΕͨFormίϯϙʔωϯτʹϓϩύςΟΛ౉͢ɺͦΕ͚ͩ 'PSN7BMJEBUJPO7JFX

Slide 18

Slide 18 text

■ Form (mozilla-services/react-jsonschema-form) 'PSN7BMJEBUJPO7JFX JSON Schem UI Schema

Slide 19

Slide 19 text

■ Form (mozilla-services/react-jsonschema-form) 'PSN7BMJEBUJPO7JFX Custom Widgets

Slide 20

Slide 20 text

■ Form (mozilla-services/react-jsonschema-form) ɹɾϑΥʔϜ͕ग़ͨ!!! 'PSN7BMJEBUJPO7JFX

Slide 21

Slide 21 text

■ Form (mozilla-services/react-jsonschema-form) ɹɾجຊతʹJSON SchemaΛ༩͑Ε͹ಈ͘ ɹɾΧελϜ΢ΟδΣοτΛ࢖ͬͯmaterial-uiΛ࢖ͬͨUIʹࠩ͠ସ͍͑ͯΔ ɹɾϦΞϧλΠϜόϦσʔγϣϯՄೳ ɹɾsubmit͢Δͱఆٛͨ͠JSON SchemaͷܗͰσʔλ͕औಘͰ͖Δ 'PSN7BMJEBUJPO7JFX

Slide 22

Slide 22 text

■ Validation(ruby-json-schema/json-schema ͔Β Active Record΁) ɹɾϛχϚϜͰ ͰόϦσʔγϣϯ͸Ͱ͖Δ ɹɾͨͩɺΤϥʔϝοηʔδ͕ͪΐͬͱ…. 'PSN7BMJEBUJPO7JFX "The property '#/' did not contain a required property of 'other' in schema 4487c1b4-3407-5554-8231- de446fe62cee"

Slide 23

Slide 23 text

■ Validation(ruby-json-schema/json-schema ͔Β Active Record΁) ɹɾதͰΤϥʔϝοηʔδ͕૊ΈཱͯΒΕͯ͠·͍ͬͯΔ… ɹɾIssue͸ɺ͋Δ (https://github.com/ruby-json-schema/json-schema/issues/247) 'PSN7BMJEBUJPO7JFX

Slide 24

Slide 24 text

■ Validation(ruby-json-schema/json-schema ͔Β Active Record΁) ɹɾΦϒδΣΫτ͔ΒΤϥʔՕॴΛ୳ͯࣗ͠෼ͰΤϥʔΛ٧ΊΔValidatorΛ࡞੒ 'PSN7BMJEBUJPO7JFX

Slide 25

Slide 25 text

■ View ɹɾ೔ຊޠͷϥϕϧ໊ΛͲ͜Ͱ؅ཧ͢Δ΂͖͔ɺ໰୊ ɹɾJSON Schema಺ʹtitleଐੑ͕͚ͭΒΕΔͷͰͦΕΛ࢖͏(͸ͣ..) 'PSN7BMJEBUJPO7JFX titleଐੑʹϥϕϧΛ͓࣋ͬͯ͜͏͔ͱ

Slide 26

Slide 26 text

■ JSON SchemaΛى఺ʹ ɹɾΞΠςϜϚελొ࿥࣌ʹબ͹ΕͨΧςΰϦʹԠͯ͡… ɹɹɾΞΠςϜͷҰ෦ͷৄࡉ৘ใͷೖྗ߲໨͕Մม͢Δ ɹɹɾՄมͨ͠ೖྗ߲໨ʹରͯ͠όϦσʔγϣϯ͍ͨ͠ ɹɹɾೖྗ߲ͨ͠໨͸೔ຊޠͷϥϕϧΛ͚ͭͯϢʔβʹදࣔ͢Δ ͱ͍͏ͷΛ࣮ݱͨ͠!!! ·ͱΊ

Slide 27

Slide 27 text

8FBSFIJSJOH