Vue.js プロジェクトの爆発させかた #ichigayageek / How to explosion Vue.js project

potato4d(Takuma HANATANI)

June 26, 2018

Tweet Share

Transcript

1. Vue.jsϓϩδΣΫτͷ രൃ͔ͤͨ͞ 2018.06.26 Ϛδკ #ichigayageek HANATANI Takuma(@potato4d) https://unsplash.com/photos/hLUTRzcVkqg

2. ࣗݾ঺հ HANATANI Takuma(@potato4d) • ϑϦʔϥϯεͷWebΤϯδχΞ • FrontEnd / Node.js /

   PHP/ AWS / etc… • Vue.js೔ຊޠެࣜυΩϡϝϯτϝϯςφ • Vue.js Japan User Group ελοϑ • nuxt/docs ӳ/࿨υΩϡϝϯτߩݙ • Nuxt tech book Author

3. JS History • Vue.js 2015 ~ • Rails & Vue,

   SPA, SPA + SSR, Nuxt.js, with TypeScript • React 2016 ~ • SPA, PHP & React, Rails & React, with TypeScript, with Flow • Angular 2017 ~ • SPA, ΄΅৮ͬͯͳ͍

4. Vue:React:Angular=14:4:1 ͳײ͡

5. https://potato4d.booth.pm/items/824745

6. ࠓ೔࿩͢͜ͱ

7. Vue.jsϓϩδΣΫτͷ രഁํ๏

8. Why?

9. Vue.jsΛ๙ΊΔ৘ใ͸ ͍͘ΒͰ΋͋ΔͷͰ……

10. https://ichigayageek.connpass.com/event/87792/

11. ໌೔໾ʹཱͨͳ͍͚Ͳ ͍͔ͭ໾ʹཱͭ࿩

12. վΊͯࠓ೔࿩͢͜ͱ • ʮVue.js͸୭Ͱ΋؆୯ʹ࡞ΕΔ͚Ͳখن໛޲͚ʯ͸ຊ౰͔ • աڈͷϓϩδΣΫτͷ൓ল͔ΒΈΔ Vue.js ͷఆઆͷධՁ • Vuex ͕͋ͬͯ΋ͳͯ͘΋ྑ͍͸ຊ౰͔ʁ

    • σβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δ͸ຊ౰͔ʁ • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯ΁ͷͪΐ͍ೖΕʹڧ͍͸ຊ౰͔ʁ • Vue.js Λ৽نͰ࢖͏৔߹ʹબ୒͢΂͖͜ͱ

13. ૝ఆλʔήοτ(1) • Ϟμϯ JavaScript ͱઃܭʹ͍ͭͯ࠷௿ݶ஌͍ͬͯΔਓ • ʮReact, Vue, Angular ͬͯ΍͕ͭਓؾͳΜͰ͠ΐʯ

    • ʮVue.js͸؆୯ʹ͔͚ͯϋʔυϧ͕௿͍ॳ৺ऀ޲͚ͷ΍ͭͰ͠ΐʯ • ʮ FluxύλʔϯͬͯγϯάϧτϯͰҰํ޲ͳ΍ͭͰ͠ΐʯ Έ͍ͨͳࡶͳೝࣝఔ౓Ͱ΋࿩ͷ൒෼͸Θ͔ΔͷͰOK

14. ૝ఆλʔήοτ(2) • Vue.js ͰͭΒ͍ࢥ͍Λͦ͠͏ͳਓɾͨ͠ਓ • ঢ়ଶ؅ཧͰ೰ΜͰ͍Δਓ • ϓϩδΣΫτͷن໛ײɾνʔϜײͰͲ͏ͨ͠Βྑ͍͔Θ͔Βͳ͍ਓ ͜Ε͔Βͷ։ൃΛॿ͚ʹͳΕΔ͸ͣ

15. ࠓ೔࿩͢͜ͱ • ʮVue.js͸୭Ͱ΋؆୯ʹ࡞ΕΔ͚Ͳখن໛޲͚ʯ͸ຊ౰͔ • աڈͷϓϩδΣΫτͷ൓ল͔ΒΈΔ Vue.js ͷఆઆͷධՁ • Vuex ͕͋ͬͯ΋ͳͯ͘΋ྑ͍͸ຊ౰͔ʁ

    • σβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δ͸ຊ౰͔ʁ • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯ΁ͷͪΐ͍ೖΕʹڧ͍͸ຊ౰͔ʁ • Vue.js Λ৽نͰ࢖͏৔߹ʹબ୒͢΂͖͜ͱ

16. ʮ݁ہVue.jsͬͯখن໛޲͚ͳΜͰ͠ΐʯ

17. A. ͦ͏Ͱ΋ͳ͍

18. A. ͦ͏Ͱ΋ͳ͍͕ ʮͪΌΜͱ։ൃʯ͢Δͷʹίπ͕ඞཁ

19. Vue.js ͸ PHP ͱΑ͘ࣅ͍ͯΔ

20. ͋͑ͯ໌ݴ͢Δ ಛ௃

21. Vue.js is • ʮࡶʹ૊΋͏ͱ͢Δͱͱ͜ͱΜࡶʹ૊Ή͜ͱ͕շదʹͰ͖Δʯ • ʮࡶʹ૊Ήͱ؆୯ʹϓϩδΣΫτΛരൃͤ͞Δʯ͜ͱ͕Ͱ͖Δ • ʮരൃ͠ͳ͍ϓϩδΣΫτΛ࡞Ζ͏ͱ͢Δͱۃ୺ʹ೉͘͠ͳΔʯ • ʮ༉அ͢Δͱരൃ͢Δ͚Ͳ

    PHP ΄Ͳരൃͯ͠ࠔͬͨ࿩Λ͕ͨ͠Βͳ͍ʯ

22. Vue.js is • ʮࡶʹ૊΋͏ͱ͢Δͱͱ͜ͱΜࡶʹ૊Ή͜ͱ͕շదʹͰ͖Δʯ • ʮࡶʹ૊Ήͱ؆୯ʹϓϩδΣΫτΛരൃͤ͞Δʯ͜ͱ͕Ͱ͖Δ • ʮരൃ͠ͳ͍ϓϩδΣΫτΛ࡞Ζ͏ͱ͢Δͱۃ୺ʹ೉͘͠ͳΔʯ • ʮ༉அ͢Δͱരൃ͢Δ͚Ͳ

    PHP ΄Ͳരൃͯ͠ࠔͬͨ࿩Λ͕ͨ͠Βͳ͍ʯ

23. ࠔͬͨ࿩ with ఆઆ

24. ࠓ೔࿩͢͜ͱ • ʮVue.js͸୭Ͱ΋؆୯ʹ࡞ΕΔ͚Ͳখن໛޲͚ʯ͸ຊ౰͔ • աڈͷϓϩδΣΫτͷ൓ল͔ΒΈΔ Vue.js ͷఆઆͷධՁ • Vuex ͕͋ͬͯ΋ͳͯ͘΋ྑ͍͸ຊ౰͔ʁ

    • σβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δ͸ຊ౰͔ʁ • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯ΁ͷͪΐ͍ೖΕʹڧ͍͸ຊ౰͔ʁ • Vue.js Λ৽نͰ࢖͏৔߹ʹબ୒͢΂͖͜ͱ

25. աڈͷϓϩδΣΫτͷരൃ͔ΒΈΔ Vue.js ͷఆઆͷධՁ

26. ר͖Ͱ 3 ͭ঺հ

27. 1 / 3

28. ʮVuex ͋ͬͯ΋ͳͯ͘΋ྑ͍આʯ

29. A. 80%͙Β͍ͷ֬཰ͰӕʹͳΔ

30. Vuex࢖Θͣരൃͨ͠࿩

31. Vuex Λ࢖Θͳ͍Ͱരൃͨ͠࿩(1) • 2016೥͙Β͍ͷ։ൃͷ࿩ • Vuex Λ Flux తʹ Single

    source of truth ʹ͢Δ࣌୅ͷ΄͏͕ଟ͔ͬͨࠒͷ࿩ • Single source of truth Λ९क͢Δͷ͸΍Γ͗ͩ͢ͱࢥ͍ Pure JavaScript Object Ͱͷ Store ૚Λ࡞੒ • σʔλͱͯ֬͠ఆͨ͠৘ใͷΈΛ֨ೲɻҰ࣌εςʔτ͸Vueίϯϙʔωϯτʹ࣋ͨͤͨ • require/import ͸ࢀর౉͠ʹʹͳΔͷͰॻ͖׵͑Δͱ͏·͍۩߹ʹ૒ํ޲όΠϯσΟϯ άͱטΈ߹ͬͯ͘ΕΔ

32. Vuex Λ࢖Θͳ͍Ͱരൃͨ͠࿩(2) • ॳظ։ൃ͸ JS Object Β͍͠औΓճ͠ͱޮ཰ͷྑ͕͞͏·͘ޮ͍͍ͯͨ • ૒ํ޲όΠϯσΟϯάͷԸܙ΋͋ͬͯɺ Reactivity

    Λશ໘ʹ׆༻ͨ͠ίʔ υ͕ॻ͚͍ͯͨ

33. Vuex Λ࢖Θͳ͍Ͱരൃͨ͠࿩(3) • ࢓༷͕มΘͬͨΓɺಛఆͷ API Ϧιʔεͷۃ୺ͳංେԽʹΑͬͯ Pure JS ΦϒδΣΫτ͔ΒಡΈऔΕͳ͍͜ͱ͕ଟ͘ͳͬͯ͘Δ •

    ࢖ΘΕ͍ͯͳ͍֬ূΛಘΔ͜ͱ͕೉͘͠ɺஈʑͱ։ൃ͕ͭΒ͘…… • େ͖͘ͳΔΞϓϦέʔγϣϯ͸ Vuex ΛೖΕ͓ͯ͘΂͖ͩͬͨ

34. രൃͤ͞ͳ͍ͨΊʹ

35. ʮVuex Λ࢖Θͳ͍ͰരൃʯΛ๷͙(1) • SPA Ͱ΋ Vuex ͳͯ͘΋ JS Object ΍ετΞύλʔϯͰ͍͚Δ͸େମӕ

    • ͱΓ͋͑ͣ Vuex ͸ඞͣೖΕ͓͍ͯͯɺεςʔτͷར༻Λߟ͑Δ • Vuex ͸ެࣜʹSingle source of truthʹ߆Δඞཁ͸ͳ͍ͱ໌ݴ͍ͯ͠Δͷ ͰɺϩʔΧϧεςʔτͷੋඇͰ Vuex ΛೖΕΔ͔ܾΊͳ͍Ͱ૊Έ߹ΘͤΔ • ࣗ෼͕ؔΘΔϓϩδΣΫτ͸ݱࡏશͯ Vuex + ϩʔΧϧεςʔτͰӡ༻த

36. ʮVuex Λ࢖Θͳ͍ͰരൃʯΛ๷͙(2) • ϩʔΧϧεςʔτΛશ͘࢖Θͳ͍։ൃ͸ർฐ͢ΔɻͦΕΛ΍ΔͳΒ React Ͱ ྑ͍ͷͰ Vue ͸ϩʔΧϧεςʔτΛ͏·͘ѻ͏΋ͷͱͯ͠࢖͏͜ͱ •

    ϩʔΧϧεςʔτΛ࢖͏͜ͱΛڐ༰͢ΔͱʮͦͷίϯϙʔωϯτͰ͔͠࢖ΘΕ ͳ͍ʯͱ͍͏ঢ়ଶΛͬ͞͞ͱഁغͰ͖ΔͷͰ։ൃϨϕϧࠩҟΛٵऩͰ͖Δ • Vuex ͸υϝΠϯ૚ͱࣄ࣮Λ Store ʹɺϓϨθϯςʔγϣϯ૚ͱঢ়ଶΛϩʔΧ ϧεςʔτʹ࣋ͨͤΔ΂͖ • ͱ͸͍͑ͲͷΈͪVue ͸೴಺ͷ RAM ༰ྔ͕େ͖͍ਓ޲͚ͷϑϨʔϜϫʔΫͳ ͷ͸ؒҧ͍ͳ͍

37. ༨ஊ) Vuex Λ࢖ͬͯ΋രൃͤ͞Δํ๏ • Single source of truth Λ׬શʹ९क͢Δͱɺ Redux

    ΄Ͳ໊લۭؒΛࡉ͔ ͘෼ׂ͠ͳ͍౎߹্େମ state ͕ա࿑ࢮ͢Δ • createPostForm ͬͯதʹϑΥʔϜͷཁૉ͍ͬͺ͍ೖͬͯΔ͚Ͳ౤ߘ࡞ͬ ͯΔՕॴͱ͔5ݸҎ্͋Δ͠Ͳ͜ͷϑΥʔϜͩΑ • ϓϨθϯςʔγϣϯ૚ͷ౎߹͕Կނ͔υϝΠϯ૚ʹॻ͔Ε͍ͯͨΓͯ͠ഁ ໓ͯ͘͠Δ • ϨΠϠʔ͸෼͚·͠ΐ͏

38. 2 / 3

39. ʮσβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δʯ આ

40. A. Ϛδদ

41. σβΠφʔͱҰॹʹ࢓ࣄ͢Δͱ രൃͨ͠Γ͠ͳ͔ͬͨΓ͢Δ

42. σβΠφʔͱҰॹʹ࢓ࣄ͢Δͱരൃͨ͠Γ͠ͳ͔ͬͨΓ͢Δ(1) • ਖ਼௚σβΠφʔ + ϚʔΫΞοϓΤϯδχΞ͕Ͱ͖Δਓ͸ Vue ίϯϙʔωϯτ ͸͔͚Δ • ejs

    / erb / jade / Smarty / mustache ͱςϯϓϨʔτΤϯδϯΛ౉͖ͬͯͨϚʔ ΫΞοϓͷਓؒͰ͋Ε͹ॻ͘ʹ͋ͨͬͯԿ΋໰୊͸ͳ͍ • ʮσβΠϯ͸Ұྲྀ͚ͩͲϚʔΫΞοϓ͸ෆ׳ΕʯͰ΋ Scoped CSS Ͱष͍΋ ͷʹ֖ΛͰ͖Δͷ͸࠷ߴ • ͜͜Ͱ΋ʮ͜͜Ͱ͔͠࢖ΘΕ͍ͯͳ͍΋ͷʯΛ؆୯ʹഁغͰ͖Δࠩҟٵऩ͕ޮ ͍ͯ͘Δ

43. σβΠφʔͱҰॹʹ࢓ࣄ͢Δͱരൃͨ͠Γ͠ͳ͔ͬͨΓ͢Δ(2) • ͍͍ͩͨ໰୊͕ൃੜ͢Δͷ͸ Node ؀ڥͷ࿩ͳͷͰ؀ڥͷߏங͸୅ߦ͢Δ • Storybook ͷ stories ͷॻ͖ํ·Ͱڭ͑ͯӠʑΧϯψϯ……ͱ͔΍Γͩ͢ͱ

    టপԽ͢Δ • ద౰ͳ Sandbox ίϯϙʔωϯτΛ࡞Δ͔ stories ͸ FE ͕ॻ͍ͯͦ͜Ͱແݶ ʹॻ͍ͯ΋Βͬͨ΄͏͕݁Ռతʹ޾෱ʹͳΔ • ςετΛॻ͍ͯͨΒςετ͸ͿͬյΕΔͷͰ௚͢ • ͜Ε͑͞΍Ε͹രൃ͠ͳ͍ʢςετ͸രൃ͢Δ͔΋ʣ

44. 3 / 3

45. Vue.js طଘͷ Web ΞϓϦͷ Τοδར༻ JS ͱͯ͠࠷ڧઆ

46. A. ͍͍ͩͨ͋ͬͯΔ

47. Web ΞϓϦʹ Vue.js Λ ࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ࿩

48. Web ΞϓϦʹ Vue.js Λࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ࿩(1) ςϯϓϨʔτه๏͕ͦͦ͜͜ϞμϯͰ࢖͍΍͍͢ • αʔόʔαΠυத৺ͷ(Slim ΍ Blade ͳͲ͔Β

    HTML Λग़ྗ͍ͯ͠Δ)ϓϩδΣΫτʹ Ұ෦ JS ΛೖΕΔͳΒ Vue.js ͸࠷ߴ • [v-cloak] Λ࢖ͬͯςϯϓϨʔτͷ࿐ग़Λ๷͗ͭͭɺόοΫΤϯυͷςϯϓϨʔτΤ ϯδϯͱ૊Έ߹Θͤ΍͍͢ͷ͕ૉఢʢ΍Γ͗͢Δͱരൃ͢Δʣ • σϦϛλ( {{}} )Λࣗ༝ʹม͑ΒΕΔ( [[]] ͳͲ)ͷͰͲͷςϯϓϨʔτΤϯδϯͱ΋͔ͪ ߹Θͳ͍

49. Web ΞϓϦʹ Vue.js Λࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ࿩(2) ঢ়ଶ؅ཧΛࡶʹͰ͖Δͷ͕ྑ͍ • ૒ํ޲όΠϯσΟϯάΛར༻͢Δͱద౰ʹσʔλΛͿͪࠐΉͱద౰ʹϦΞϧλΠϜͰ ൓ө͞ΕΔ • this.setState()

    Έ͍ͨͳ֓೦͕ͳ͘ɺద౰ʹάϩʔόϧʹঢ়ଶΛల։͢ΔͱͦΕ͚ͩ ͰετΞ૚Λల։Ͱ͖Δ • window.store Λ࡞Γग़ͯ͠ബ͍ετΞ૚Λ࡞Δͷ͕͓͢͢Ί

50. Web ΞϓϦʹ Vue.js Λࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ࿩(1) ϩʔΧϧεςʔτͱ͍͏֓೦͕͋ΔͷͰ new Vue ͠΍͍͢ͷ͕ྑ͍ • ϩʔΧϧεςʔτΛڐ༰͢Δٕज़Ͱ͋ΔͨΊؾܰʹ

    new Vue Λͯ͠ബ͍ಠࣗετΞ ͱ૊Έ߹ΘͤΔͱշదʹ։ൃ͕Ͱ͖Δ • SPA ͷ৔߹͸ Vuex ͕ͳ͍ͱരൃ͕ͨ͠ɺͪΐ͍ೖΕͳΒͦ͜·ͰΫϦςΟΧϧͳӨ ڹ͸ͳ͍ • ଟ͘ͷॻ͖ํΛڐ༰͍ͯ͠Δར఺Λ׆͔ͯ͠ϓϩδΣΫτن໛ʹϚονͨ͠։ൃελ ΠϧΛऔΔͱடংΛ࡞Γ΍͍͢

51. ͦͷଞʹ…… ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ • ϓϥάΠϯ΍ϧʔςΟϯάϑοΫ͕ΦϨΦϨߏ੒ͷ࿩ • utils σΟϨΫτϦ͕Ͱ͖ͨΓ؅ཧγεςϜ่͕յͯ͠രൃ͢Δ

52. ͦͷଞʹ…… ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ • ϓϥάΠϯ΍ϧʔςΟϯάϑοΫ͕ΦϨΦϨߏ੒ͷ࿩ • utils σΟϨΫτϦ͕Ͱ͖ͨΓ؅ཧγεςϜ่͕յͯ͠രൃ͢Δ • utils ͷരൃͷ࿩͸ŠŧŽˠ

    https://slides.com/potato4d/vuejs_meetup7

53. ͦͷଞʹ…… ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ • Vue + TypeScript Ͱ޾ͤʹͳΖ͏ͱ͢Δ࿩ • Vuex +

    TypeScript Ͱ mapGetters / mapActions ͕ any ʹͳͬͯരൃ͢ Δ࿩

54. ͦͷଞʹ…… ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ • ςετ • ॳݟͰ΍Δͱେମരൃ͢Δ

55. ͦͷଞʹ΋ฉ͍ͯΈ͍ͨ࿩͸ ͓ؾܰʹͲ͏ͧ

56. ࠓ೔࿩͢͜ͱ • ʮVue.js͸୭Ͱ΋؆୯ʹ࡞ΕΔ͚Ͳখن໛޲͚ʯ͸ຊ౰͔ • աڈͷϓϩδΣΫτͷ൓ল͔ΒΈΔ Vue.js ͷఆઆͷධՁ • Vuex ͕͋ͬͯ΋ͳͯ͘΋ྑ͍͸ຊ౰͔ʁ

    • σβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δ͸ຊ౰͔ʁ • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯ΁ͷͪΐ͍ೖΕʹڧ͍͸ຊ౰͔ʁ • Vue.js Λ৽نͰ࢖͏৔߹ʹબ୒͢΂͖͜ͱ

57. Vue.js Λ৽نͰ ಋೖ͢Δ৔߹ʹબ୒͢΂͖͜ͱ

58. Vue.js Λ৽نͰಋೖ͢Δ৔߹ʹબ୒͢΂͖͜ͱ • SPA ฤ • SPA ͡Όͳ͍ฤ

59. Vue.js Λ৽نͰಋೖ͢Δ৔߹ʹબ୒͢΂͖͜ͱ • SPA ฤ • SPA ͡Όͳ͍ฤ

60. SPA ฤ ࠷௿ݶ΍͓ͬͯ͘΂͖͜ͱ • ಡΈऔΓઐ༻ͷΞϓϦέʔγϣϯͰ΋ͳ͍ݶΓ͸ Vuex ͸ඞͣಋೖ͢Δ • ΦϨΦϨϨΠϠʔΛ࡞Γग़ͦ͠͏ͳ෦෼ʹ͍ͭͯ͸ۃྗΑͦͷ࣮૷Λࢀߟʹͯ͠ʮॻ ͍ͨ΍͔ͭ͠Θ͔Βͳ͍ʯΛආ͚Δ

    • σβΠφʔʹίϯϙʔωϯτΛ࡞ͬͯ΋Β͏ͱ͖͸ॻ͘·ͰͷϋʔυϧΛ࠷େݶԼ͛ Δ • Nuxt.js Λ࢖͏

61. ফ໣ͨ͘͠ͳ͍ͳΒ Nuxt.js

62. None

63. Nuxt.js ͱ͸ • Vue based ͳϑϧελοΫϑϩϯτΤϯυϑϨʔϜϫʔΫ • SPA ઐ༻ɻͪΐ͍ೖΕ͸ෆՄɻ •

    Vue + Vue Router + Vuex + SSR ؀ڥ͕σϑΥϧτ • ΦϨΦϨϓϥάΠϯϨΠϠʔͳͲ΋ Nuxt.js ͕ٵऩ • ن໿ϕʔεͷΞʔΩςΫνϟʹΑͬͯن໿ΛकΔͱ୭Ͱ΋ߴ඼࣭ͳίʔυ ͕ॻ͚Δ

64. SPA ޲͚ͷ։ൃηοτ

65. Nuxt.js Λ࢖͏ͱخ͍͜͠ͱ • ن໿͕ΦϨΦϨΞʔΩςΫνϟ͔ΒϓϩδΣΫτΛकͬͯ͘ΕΔ • ෭࢈෺ͱͯ͠ҎԼͷΑ͏ͳศརػೳ͕͍ͭͯ͘Δ • ϧʔςΟϯάͷࣗಈੜ੒ػೳʢϧʔςΟϯά؅ཧ༻ͷϨΠϠΛফͤΔʣ • Vuex

    ετΞΛѻ͍΍͘͢͢ΔΦʔτϩʔσΟϯάʢಋೖ͕໘౗͡Όͳ͍ʣ • ๛෋ͳϓϥάΠϯʗΤίγεςϜ

66. खͬऔΓૣ͘ େମͷ໰୊ΛղফͰ͖Δ

67. SPA ͸ Nuxt.js Ͱྑ͍

68. Vue.js Λ৽نͰಋೖ͢Δ৔߹ʹબ୒͢΂͖͜ͱ • SPA ฤ • SPA ͡Όͳ͍ฤ

69. SPA ͡Όͳ͍ฤ • ͪΐ͍ೖΕͷ৔߹͸େମ͖ͬ͞·Ͱॻ͍ͨ௨Γ • ૉ๿ͳʮετΞύλʔϯʯͰ࣮૷͢Δ • ͲͷΈͪ jQuery ͷίʔυͳͲ͔ΒσʔλΛ͍͘͡Γճͨ͘͠ͳΔʢମݧ

    ஊʣͷͰ Readonly ΛੜΈग़͢ Vuex ͸࢖Θͳ͍ • new Vue ({}) ͸͍ͭͯ͘͠΋ྑ͍ͷͰίϯϙʔωϯτಉ࢜͸ૄ݁߹Ͱ࡞Δ

70. SPA ͡Όͳ͍ฤ • ͜Ε͔Β࣮૷͢Δਓ޲͚ͷ௥Ճ Tips • Smarty, Slim, Blade ͳͲͱҰॹʹ࢖͏ͳΒͰ͖Δ͚ͩҰͭͷ

    HTML ߏ଄ Λ͓ޓ͍ʹॻ͖׵͑Δͷ͸΍ΊΔ • <script id=“initialState” type=“text/x-template”></script>Λ༻ҙͯ͠ɺ $ (‘#initialState’).innerHTML ͰऔΓग़ͯ͠ Vue ίϯϙʔωϯτʹྲྀ͠ࠐΉઃ ܭͰ࡞Δ

71. ऴΘΓʹ

72. Vue.js ͸Մ೩ੑ

73. Ե4ͱ͔ͬͯΒ௅Έ·͠ΐ͏

74. https://www.shoubo-shiken.or.jp/

75. Thank you!