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

2018.06.26 に #ichigayageek で話したスライドです。
https://ichigayageek.connpass.com/event/87792/

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