Nuxt は簡単に SPA 作れるけど、アプリケーションが簡単に作れると思ったら大間違いだった / 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

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