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

CaT vol.7 登壇資料です。

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
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
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