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

CaT vol.7 登壇資料です。

Transcript

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

   View Slide

2. $ whoami
   2
   

   View Slide

3. Toro_Unit
   ઎෦ ߛ (͏Β΂ ͻΖ͠)
   • Frontend Engineer
   • WordPress Plugin and Theme
   Developer
   Github: @torounit
   Twitter: @Toro_Unit
   3
   

   View Slide

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

   View Slide

5. ϑϩϯτΤϯυΤϯδχΞͱͯ͠
   • WebαΠτͷCSSઃܭ
   • WordPress αΠτ্ͰɺReact ϕʔεͰͷ UI ։ൃʢ REST API ͰΫΠζͱ͔ͷ UI ʣ
   • ͍Ζ͍ΖϏδϡΞϥΠζͰΰϦΰϦಈ͘ɺݕࡧը໘ ʢ React ʣ
   • WordPress ͷΧελϜϒϩοΫ։ൃ / ϒϩοΫΤσΟλʢ Gutenberg ʣ΁ͷߩ
   ݙɻ
   • ϨΨγʔͳWEBΞϓϦͷJSվम
   • WP Meetup Map ( React + WordPress.org API )
   • etc…
   5
   

   View Slide

6. ࠓ͔Β࿩͢࿩͸ฃಆهɾࣦഊஊͰ͢ɻ
   স͍ͳ͕Βฉ͍ͯ΋Β͑Ε͹͍͞Θ͍ɻ
   6
   

   View Slide

7. 2018೥ ๭೔
   ͱ͋ΔελʔτΞοϓͷɺ
   • AWS Lambda + API Gateway Ͱͷ API
   • ೝূܥ͸ Cognito
   • ϑϩϯτΤϯυ͸ɺS3 ʹ഑ஔͯ͠ɺCloudFront Ͱ഑৴ɻ
   ͳɺ WEBΞϓϦέʔγϣϯ ͷϑϩϯτΤϯυΛ୲౰͢Δ͜ͱ
   ʹɻ
   7
   

   View Slide

8. • APIɺόοΫΤϯυɺΠϯϑϥ͸ઌํ͕։ൃɻ
   • Bootstrap ͰͷϞοΫΞοϓͳͲ΋ଘࡏɻ
   8
   

   View Slide

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

   View Slide

10. View Slide

11. Nuxt.js
    • Next.js ʹӨڹΛड͚ͨɺVue.js ͰΞ
    ϓϦέʔγϣϯΛ࡞ΔͨΊͷϑϨʔ
    ϜϫʔΫɻ
    • Ϗϧυͷઃఆͱ͔શ෦΍ͬͯ͘ΕΔ
    • Vue Router ΋ built-in.
    • URLͷࣗಈੜ੒ɻ
    $ npx create-nuxt-app
    11
    

    View Slide

12. URL ͷࣗಈੜ੒ɻ
    pages σΟϨΫτϦʹҎԼͷΑ͏ͳίϯϙʔωϯτΛ࡞੒͢Δͱ
    • pages/
    • user/
    • index.vue
    • one.vue
    • index.vue
    12
    

    View Slide

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

    View Slide

14. σΟϨΫτϦ໊ɺίϯϙʔωϯτͷϑΝΠϧ໊ʹ _id ౳ͱ͢Δ
    ͱɺม਺ͱͯ͠ಈతͳURL Λ࡞੒Մೳɻ
    • pages/
    • user/
    • _id.vue
    /user/1 ౳ͷಈతͳURLΛ࡞੒Մೳɻ
    this.$nuxt.$route.params.hoge Ͱɺύϥϝʔλʔऔಘग़དྷΔɻ
    14
    

    View Slide

15. Vuex
    • Vue.js ΞϓϦέʔγϣϯͷͨΊͷ ঢ়
    ଶ؅ཧύλʔϯ + ϥΠϒϥϦɻ
    • Vue.js ༻ͷ Flux ࣮૷ɻ
    • Vue ͷίϯϙʔωϯτ͔Β੾Γ཭͠
    ͨঢ়ଶ؅ཧɻ
    15
    

    View Slide

16. Vue.js / Vuex / Nuxt.js ͍͢͝ɻ
    16
    

    View Slide

17. Vue ͕ղܾͯ͘͠ΕΔ͜ͱ
    • ૒ํ޲σʔλόΠϯσΟϯά
    • σʔλมߋ → HTML ͷϨϯμϦϯά
    • ϑΥʔϜͷมߋ → v-model ͳͲͰ؆୯ʹ஋Λऔಘ
    17
    

    View Slide

18. Nuxt.js ͕ղܾͯ͘͠ΕΔ͜ͱ
    • WebPack ͷઃఆ ( CSS / JS / Vue SFC )
    • ϧʔςΟϯά
    • URL + Vue SFC ͱͷؔ࿈෇͚ ( page )
    18
    

    View Slide

19. Vuex ͕ղܾͯ͘͠ΕΔ͜ͱ
    • ঢ়ଶΛ Vue ίϯϙʔωϯτ͔Β੾Γ཭ͯ͠ಠཱͤ͞Δɻ
    • ෳ਺ͷ Vue ίϯϙʔωϯτΛލ͍ͩঢ়ଶ؅ཧɻ
    19
    

    View Slide

20. ͍͚͢͝Ͳɻ
    20
    

    View Slide

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

    View Slide

22. case.1 ϓϩδΣΫτ΁ͷޡղ
    22
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. ૝ఆͱҟͳΔ࢓༷ɻ
    • ͜ͱ͹͕௨͡ΔϞϊͩͱࢥ͍ͬͯͨ
    • ΤϯδχΞͷৗࣝ != ੈؒͷৗࣝ
    • WEBαΠτ։ൃͷৗࣝ != WEBαʔϏεͷৗࣝ
    • αΠτͱαʔϏεͷҧ͍
    • ಉٕ͡ज़Λ༻͍ΔׂʹɺϊϦɺཁٻ͞ΕΔϞϊ͕ผ෺ɻ
    26
    

    View Slide

27. ڭ܇ 1.
    • ΞϓϦέʔγϣϯͷશମ૾ɺۀ຿ͷϑϩʔͳͲΛ͔ͬ͠Γͭ
    ͔ΜͰ࢓༷ܾఆɻ
    • γεςϜઃܭɺۀ຿ઃܭɺ࣮૷ίετΛߟٕ͑ͨज़બఆΛɻ
    • ͦ΋ͦ΋ JAMStack Λબ୒͢Δඞཁ͕͋Δͷʁ
    • Rails ΍ Laravel ౳ɺϊ΢ϋ΢ͷ͋Δ WEBΞϓϦέʔγϣϯ
    ϑϨʔϜϫʔΫ(WAF) ͰΑ͔ͬͨͷͰ͸ʁ
    27
    

    View Slide

28. JAMStack ͳ։ൃ͸ɺطଘͷ WAF ʹൺ΂ͯ
    • ඇಉظॲཧ΁ͷରԠ
    • σʔλͷϥΠϑαΠΫϧ
    • ϑϩϯτΤϯυͱόοΫΤϯυͷ໾ׂͷఆٛ
    • etc...
    ౳ɺߟ͑Δ͜ͱ΋ଟ͍ɻ
    28
    

    View Slide

29. case.2 Vue.js / Nuxt Ͱͷ։ൃʹ͓͚Δࣦഊ
    29
    

    View Slide

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

    View Slide

31. But Pattern
    
    
    {{ hoge(item) }}
    
    
    export default {
    methods: {
    hoge(item) {} // <-͜Ε͸୯ମ΁ͷૢ࡞ɻ
    }
    }
    31
    

    View Slide

32. ಠཱͨ͠ίϯϙʔωϯτʹɻ
    
    
    
    
    
    ୯ҰͷΞΠςϜ͸ɺͦΕ͚ͩͰίϯϙʔωϯτԽɻ
    32
    

    View Slide

33. ڭ܇ 2.
    v-for ͕ग़͖ͯͨΒɺத਎Λಠཱͨ͠ίϯϙʔωϯτʹɻv-
    for ͷத਎Λɺmethod Ͱ͍͡Δͷ͸ɺݟ௨͠ͱ࠶ར༻ੑΛѱ
    ͘͢Δɻ
    • MyList.vue
    • MyListItem.vue
    ͷΑ͏ʹɺ෼཭ɻ
    33
    

    View Slide

34. Nuxt ศར͚ͩͲɻ
    Կ΋ߟ͑ͣʹ࡞͍ͬͯ͘ͱɺNuxt ͷ Page ίϯϙʔωϯτ͕ං
    େԽɻ
    Կ΋ϑϨʔϜϫʔΫΛ࢖Θͳ͍ PHP Έ͍ͨʹͳΔɻ
    index.php
    edit.php
    create.php
    తͳϊϦɻ
    34
    

    View Slide

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

    View Slide

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

    View Slide

37. ͳΜͰ΋͔ΜͰ΋ Vuex Α͘ͳ͍ɻ
    • Vuex ͷ Action ʹ৭ΜͳϩδοΫ͕ࡌΔ͕ɺංେԽ͢Δɻ
    • Vuex ʹࡌͤΔ΂͖͸ɺϓϨθϯςʔγϣϯ૚ɻ
    • Vuex ͷ Action ͸ɺVuex Λ௨͔ͯ͠͠࠶ར༻ग़དྷͳ͍ɻ
    37
    

    View Slide

38. ྫ
    • Vuex Store ʹͷΈೝূܥͷ৘ใΛ࣋ͨͤΔͱɺVuex Λ௨͠
    ͔ͯ͠ར༻Ͱ͖ͳ͍ɻ
    • ͳΜͰ΋͔ΜͰ΋ Vuex Λܦ༝͢Δ͸Ίʹͳͬͯݟ௨͠ͱ࠶
    ར༻ੑ͕࠷ѱʹɾɾɾɾ
    38
    

    View Slide

39. ڭ܇ 4
    • ϏδωεϩδοΫɺσʔλΞΫηε૚ͳͲ͸ɺVuex ʹґଘ͠
    ͳ͍࣮૷ɻ
    • ͦΕΒΛɺVuex Action ౳͔Βݺͼग़ͯ͠࢖͏ɻ
    39
    

    View Slide

40. but
    40
    

    View Slide

41. Good
    41
    

    View Slide

42. ͍͞͝ʹ
    ϚʔΫΞοϓ -> WordPress -> ϑϩϯτΤϯυΈ͍ͨͳΩϟϦΞͳ
    ͷͰɺΞϓϦέʔγϣϯઃܭͳͲΛ͔ͬ͠Γཧղ͍ͯ͠Δͱ͸ݴ͍
    ͕͍ͨɻվΊͯɺΞϓϦέʔγϣϯઃܭͳͲΛษڧ͢ΔඞཁੑΛײ
    ͡Δࠓ೔͜ͷࠒɻ
    • ΤϦοΫɾΤϰΝϯεͷυϝΠϯۦಈઃܭ
    • Clean Architecture ୡਓʹֶͿιϑτ΢ΣΞͷߏ଄ͱઃܭ
    ͋ͨΓΛಡΈ࢝Ί·ͨ͠ɻ͜͜Βลͷ஌͕ࣝ໾ʹཱ͔ͭ΋ʁଟ෼ɻ
    42
    

    View Slide

43. View Slide

44. ·ͱΊ
    44
    

    View Slide

45. • ΞϓϦέʔγϣϯɾͦͷϏδωεͷϑϩʔͳͲͷઃܭେࣄɻWEB
    αΠτɺCMSͷΧελϚΠζͷϊϦͰ΍Δͱ௧͍໨ΛݟΔɻ
    • ͦ΋ͦ΋ɺNuxt Ͱ΍Δ΂͖ʁ Λ͔ͬ͠Γߟ͑ͨબ୒Λɻ
    • ը໘ۦಈ։ൃ΁ͷ༠࿭Λஅͪ੾Δɻ
    • ԿͰ΋͔ΜͰ΋ Vuex ͸஍ཕɻϏδωεϩδοΫͱϓϨθϯςʔ
    γϣϯϩδοΫΛ੾Γ෼͚ɻ
    • DDD ͱ͔ Clean Architecture ͱ͔ OOP ͱ͔͸վΊͯͪΌΜͱ
    ษڧ͠௚ͨ͠ํ͕ྑ͛͞ɻ
    45
    

    View Slide

46. Thanks!
    Github: @torounit
    Twitter: @Toro_Unit
    Facebook: fb.me/torounit
    Blog: https://torounit.com
    46
    

    View Slide