Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7

Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / CaT vol.7

CaT vol.7 登壇資料です。

E03953e0c18d776fead147601fdc3899?s=128

Toro_Unit (Hiroshi Urabe)

August 17, 2019
Tweet

Transcript

  1. Nuxt ͸ ؆୯ʹSPA࡞ΕΔ͚Ͳɺ ΞϓϦέʔγϣϯ͕؆୯ʹ࡞ΕΔͱ ࢥͬͨΒେؒҧ͍ͩͬͨ Toro_Unit @ CaT vol.7 1

  2. $ whoami 2

  3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • Frontend Engineer • WordPress

    Plugin and Theme Developer Github: @torounit Twitter: @Toro_Unit 3
  4. ௕໺ݝদຊࢢ͔Β͖·ͨ͠ • ࠷ۙɺچ։ஐֶߍߍࣷͱ͍͏໌࣏ͷ ݐங͕ࠃๅʹͳΓ·ͨ͠ɻ • 8/29~9/9 ϏʔϧࡇΓ(দຊαϚʔϑΣ ετ) • 9/20~23

    ΫϥϑτϏʔϧϑΣε 4
  5. ϑϩϯτΤϯυΤϯδχΞͱͯ͠ • WebαΠτͷCSSઃܭ • WordPress αΠτ্ͰɺReact ϕʔεͰͷ UI ։ൃʢ REST

    API ͰΫΠζͱ͔ͷ UI ʣ • ͍Ζ͍ΖϏδϡΞϥΠζͰΰϦΰϦಈ͘ɺݕࡧը໘ ʢ React ʣ • WordPress ͷΧελϜϒϩοΫ։ൃ / ϒϩοΫΤσΟλʢ Gutenberg ʣ΁ͷߩ ݙɻ • ϨΨγʔͳWEBΞϓϦͷJSվम • WP Meetup Map ( React + WordPress.org API ) • etc… 5
  6. ࠓ͔Β࿩͢࿩͸ฃಆهɾࣦഊஊͰ͢ɻ স͍ͳ͕Βฉ͍ͯ΋Β͑Ε͹͍͞Θ͍ɻ 6

  7. 2018೥ ๭೔ ͱ͋ΔελʔτΞοϓͷɺ • AWS Lambda + API Gateway Ͱͷ

    API • ೝূܥ͸ Cognito • ϑϩϯτΤϯυ͸ɺS3 ʹ഑ஔͯ͠ɺCloudFront Ͱ഑৴ɻ ͳɺ WEBΞϓϦέʔγϣϯ ͷϑϩϯτΤϯυΛ୲౰͢Δ͜ͱ ʹɻ 7
  8. • APIɺόοΫΤϯυɺΠϯϑϥ͸ઌํ͕։ൃɻ • Bootstrap ͰͷϞοΫΞοϓͳͲ΋ଘࡏɻ 8

  9. Nuxt.js + Vuex Λ࠾༻͢Δ͜ͱʹɻ 9

  10. 10

  11. Nuxt.js • Next.js ʹӨڹΛड͚ͨɺVue.js ͰΞ ϓϦέʔγϣϯΛ࡞ΔͨΊͷϑϨʔ ϜϫʔΫɻ • Ϗϧυͷઃఆͱ͔શ෦΍ͬͯ͘ΕΔ •

    Vue Router ΋ built-in. • URLͷࣗಈੜ੒ɻ $ npx create-nuxt-app <project-name> 11
  12. URL ͷࣗಈੜ੒ɻ pages σΟϨΫτϦʹҎԼͷΑ͏ͳίϯϙʔωϯτΛ࡞੒͢Δͱ • pages/ • user/ • index.vue

    • one.vue • index.vue 12
  13. ͜ͷΑ͏ͳܗͰURL͕ੜ੒͞ΕΔɻ • / • /user/ • /user/one 13

  14. σΟϨΫτϦ໊ɺίϯϙʔωϯτͷϑΝΠϧ໊ʹ _id ౳ͱ͢Δ ͱɺม਺ͱͯ͠ಈతͳURL Λ࡞੒Մೳɻ • pages/ • user/ •

    _id.vue /user/1 ౳ͷಈతͳURLΛ࡞੒Մೳɻ this.$nuxt.$route.params.hoge Ͱɺύϥϝʔλʔऔಘग़དྷΔɻ 14
  15. Vuex • Vue.js ΞϓϦέʔγϣϯͷͨΊͷ ঢ় ଶ؅ཧύλʔϯ + ϥΠϒϥϦɻ • Vue.js

    ༻ͷ Flux ࣮૷ɻ • Vue ͷίϯϙʔωϯτ͔Β੾Γ཭͠ ͨঢ়ଶ؅ཧɻ 15
  16. Vue.js / Vuex / Nuxt.js ͍͢͝ɻ 16

  17. Vue ͕ղܾͯ͘͠ΕΔ͜ͱ • ૒ํ޲σʔλόΠϯσΟϯά • σʔλมߋ → HTML ͷϨϯμϦϯά •

    ϑΥʔϜͷมߋ → v-model ͳͲͰ؆୯ʹ஋Λऔಘ 17
  18. Nuxt.js ͕ղܾͯ͘͠ΕΔ͜ͱ • WebPack ͷઃఆ ( CSS / JS /

    Vue SFC ) • ϧʔςΟϯά • URL + Vue SFC ͱͷؔ࿈෇͚ ( page ) 18
  19. Vuex ͕ղܾͯ͘͠ΕΔ͜ͱ • ঢ়ଶΛ Vue ίϯϙʔωϯτ͔Β੾Γ཭ͯ͠ಠཱͤ͞Δɻ • ෳ਺ͷ Vue ίϯϙʔωϯτΛލ͍ͩঢ়ଶ؅ཧɻ

    19
  20. ͍͚͢͝Ͳɻ 20

  21. ͍͢͝Μ͚ͩͲɻ • ͜ΕΒ͕ղܾ͢Δͷ͸ɺWEBΞϓϦέʔγϣϯͷ View ͷ໰ ୊ɻ • Rails ΍ɺ LaravelɺDjango

    ౳Ͱݴ͏ MVC ͷ View ͷϨΠ Ϡʔɻ ͦΕ͚ͩɻ 21
  22. case.1 ϓϩδΣΫτ΁ͷޡղ 22

  23. • ϞοΫΞοϓΛ͔ͬ͜Α͘ʹͯ͠ɺAPI ͷ஋Λ Vue Ͱදࣔ͢ Δɺͨ·ʔʹɺϑΥʔϜͰ ஋Λૹ৴͢Δ؆୯ͳ͓࢓ࣄͩͱ ࢥͬͨɻ 23

  24. ਺ϲ݄ɾɾɾɾ • มߋ͞ΕΔཁ݅ • ౰ॳͷ໘Ө΋ͳ͍ 24

  25. ઌํͷ API ઃܭɺۀ຿ϑϩʔઃܭɺͳͲ΋͔ͬ͠Γఆٛ͞Εͯ ͍ΔϞϊͩͱࢥͬͯͨɻ • ελʔτΞοϓ + ৽نͰαʔϏεΛ্ཱͪ͛Δ࣌఺ͰɺͦΜ ͳΘ͚ͳ͍ɻ 25

  26. ૝ఆͱҟͳΔ࢓༷ɻ • ͜ͱ͹͕௨͡ΔϞϊͩͱࢥ͍ͬͯͨ • ΤϯδχΞͷৗࣝ != ੈؒͷৗࣝ • WEBαΠτ։ൃͷৗࣝ !=

    WEBαʔϏεͷৗࣝ • αΠτͱαʔϏεͷҧ͍ • ಉٕ͡ज़Λ༻͍ΔׂʹɺϊϦɺཁٻ͞ΕΔϞϊ͕ผ෺ɻ 26
  27. ڭ܇ 1. • ΞϓϦέʔγϣϯͷશମ૾ɺۀ຿ͷϑϩʔͳͲΛ͔ͬ͠Γͭ ͔ΜͰ࢓༷ܾఆɻ • γεςϜઃܭɺۀ຿ઃܭɺ࣮૷ίετΛߟٕ͑ͨज़બఆΛɻ • ͦ΋ͦ΋ JAMStack

    Λબ୒͢Δඞཁ͕͋Δͷʁ • Rails ΍ Laravel ౳ɺϊ΢ϋ΢ͷ͋Δ WEBΞϓϦέʔγϣϯ ϑϨʔϜϫʔΫ(WAF) ͰΑ͔ͬͨͷͰ͸ʁ 27
  28. JAMStack ͳ։ൃ͸ɺطଘͷ WAF ʹൺ΂ͯ • ඇಉظॲཧ΁ͷରԠ • σʔλͷϥΠϑαΠΫϧ • ϑϩϯτΤϯυͱόοΫΤϯυͷ໾ׂͷఆٛ

    • etc... ౳ɺߟ͑Δ͜ͱ΋ଟ͍ɻ 28
  29. case.2 Vue.js / Nuxt Ͱͷ։ൃʹ͓͚Δࣦഊ 29

  30. ίϯϙʔωϯτઃܭͷࣦഊɻ • <my-list> Έ͍ͨͳෳ਺ͷϞϊΛѻ͏ίϯϙʔωϯτ͸ɺࡶ ʹ࡞ΔͱɺΧΦεʹͳΓ͕ͪɻ • ཁૉશମ΁ͷૢ࡞ͱɺ୯ମ΁ͷૢ࡞͕ͪ͝Όͪ͝Όʹɻ 30

  31. But Pattern <template> <div v-for="(items, i) in items" :key="i"> <div>{{

    hoge(item) }}</div> </div> </template> export default { methods: { hoge(item) {} // <-͜Ε͸୯ମ΁ͷૢ࡞ɻ } } 31
  32. ಠཱͨ͠ίϯϙʔωϯτʹɻ <template> <div v-for="(items, i) in items" :key="i"> <my-list-item :item="item"

    /> </div> </template> ୯ҰͷΞΠςϜ͸ɺͦΕ͚ͩͰίϯϙʔωϯτԽɻ 32
  33. ڭ܇ 2. v-for ͕ग़͖ͯͨΒɺத਎Λಠཱͨ͠ίϯϙʔωϯτʹɻv- for ͷத਎Λɺmethod Ͱ͍͡Δͷ͸ɺݟ௨͠ͱ࠶ར༻ੑΛѱ ͘͢Δɻ • MyList.vue

    • MyListItem.vue ͷΑ͏ʹɺ෼཭ɻ 33
  34. Nuxt ศར͚ͩͲɻ Կ΋ߟ͑ͣʹ࡞͍ͬͯ͘ͱɺNuxt ͷ Page ίϯϙʔωϯτ͕ං େԽɻ Կ΋ϑϨʔϜϫʔΫΛ࢖Θͳ͍ PHP Έ͍ͨʹͳΔɻ

    index.php edit.php create.php తͳϊϦɻ 34
  35. ڭ܇ 3. • খ͞ͳίϯϙʔωϯτ͔Β࡞ͬͯɺͦΕΛPageͰར༻ɻ • σβΠϯσʔλۦಈɺը໘ۦಈͳ։ൃ͸τϥϒϧͷݩɻ 35

  36. case.3 Vuex ͱͷ෇͖߹͍ํͰͷࣦഊ 36

  37. ͳΜͰ΋͔ΜͰ΋ Vuex Α͘ͳ͍ɻ • Vuex ͷ Action ʹ৭ΜͳϩδοΫ͕ࡌΔ͕ɺංେԽ͢Δɻ • Vuex

    ʹࡌͤΔ΂͖͸ɺϓϨθϯςʔγϣϯ૚ɻ • Vuex ͷ Action ͸ɺVuex Λ௨͔ͯ͠͠࠶ར༻ग़དྷͳ͍ɻ 37
  38. ྫ • Vuex Store ʹͷΈೝূܥͷ৘ใΛ࣋ͨͤΔͱɺVuex Λ௨͠ ͔ͯ͠ར༻Ͱ͖ͳ͍ɻ • ͳΜͰ΋͔ΜͰ΋ Vuex

    Λܦ༝͢Δ͸Ίʹͳͬͯݟ௨͠ͱ࠶ ར༻ੑ͕࠷ѱʹɾɾɾɾ 38
  39. ڭ܇ 4 • ϏδωεϩδοΫɺσʔλΞΫηε૚ͳͲ͸ɺVuex ʹґଘ͠ ͳ͍࣮૷ɻ • ͦΕΒΛɺVuex Action ౳͔Βݺͼग़ͯ͠࢖͏ɻ

    39
  40. but 40

  41. Good 41

  42. ͍͞͝ʹ ϚʔΫΞοϓ -> WordPress -> ϑϩϯτΤϯυΈ͍ͨͳΩϟϦΞͳ ͷͰɺΞϓϦέʔγϣϯઃܭͳͲΛ͔ͬ͠Γཧղ͍ͯ͠Δͱ͸ݴ͍ ͕͍ͨɻվΊͯɺΞϓϦέʔγϣϯઃܭͳͲΛษڧ͢ΔඞཁੑΛײ ͡Δࠓ೔͜ͷࠒɻ •

    ΤϦοΫɾΤϰΝϯεͷυϝΠϯۦಈઃܭ • Clean Architecture ୡਓʹֶͿιϑτ΢ΣΞͷߏ଄ͱઃܭ ͋ͨΓΛಡΈ࢝Ί·ͨ͠ɻ͜͜Βลͷ஌͕ࣝ໾ʹཱ͔ͭ΋ʁଟ෼ɻ 42
  43. 43

  44. ·ͱΊ 44

  45. • ΞϓϦέʔγϣϯɾͦͷϏδωεͷϑϩʔͳͲͷઃܭେࣄɻWEB αΠτɺCMSͷΧελϚΠζͷϊϦͰ΍Δͱ௧͍໨ΛݟΔɻ • ͦ΋ͦ΋ɺNuxt Ͱ΍Δ΂͖ʁ Λ͔ͬ͠Γߟ͑ͨબ୒Λɻ • ը໘ۦಈ։ൃ΁ͷ༠࿭Λஅͪ੾Δɻ •

    ԿͰ΋͔ΜͰ΋ Vuex ͸஍ཕɻϏδωεϩδοΫͱϓϨθϯςʔ γϣϯϩδοΫΛ੾Γ෼͚ɻ • DDD ͱ͔ Clean Architecture ͱ͔ OOP ͱ͔͸վΊͯͪΌΜͱ ษڧ͠௚ͨ͠ํ͕ྑ͛͞ɻ 45
  46. Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 46