Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

More Decks by Potato4d(Hanatani Takuma)

Other Decks in Programming

Transcript

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

    View Slide

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

    • FrontEnd / Node.js / PHP/ AWS / etc…

    • Vue.js೔ຊޠެࣜυΩϡϝϯτϝϯςφ

    • Vue.js Japan User Group ελοϑ

    • nuxt/docs ӳ/࿨υΩϡϝϯτߩݙ

    • Nuxt tech book Author

    View Slide

  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, ΄΅৮ͬͯͳ͍

    View Slide

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

    View Slide

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

    View Slide

  6. ࠓ೔࿩͢͜ͱ

    View Slide

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

    View Slide

  8. Why?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. վΊͯࠓ೔࿩͢͜ͱ
    • ʮVue.js͸୭Ͱ΋؆୯ʹ࡞ΕΔ͚Ͳখن໛޲͚ʯ͸ຊ౰͔

    • աڈͷϓϩδΣΫτͷ൓ল͔ΒΈΔ Vue.js ͷఆઆͷධՁ

    • Vuex ͕͋ͬͯ΋ͳͯ͘΋ྑ͍͸ຊ౰͔ʁ

    • σβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δ͸ຊ౰͔ʁ

    • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯ΁ͷͪΐ͍ೖΕʹڧ͍͸ຊ౰͔ʁ

    • Vue.js Λ৽نͰ࢖͏৔߹ʹબ୒͢΂͖͜ͱ

    View Slide

  13. ૝ఆλʔήοτ(1)
    • Ϟμϯ JavaScript ͱઃܭʹ͍ͭͯ࠷௿ݶ஌͍ͬͯΔਓ

    • ʮReact, Vue, Angular ͬͯ΍͕ͭਓؾͳΜͰ͠ΐʯ

    • ʮVue.js͸؆୯ʹ͔͚ͯϋʔυϧ͕௿͍ॳ৺ऀ޲͚ͷ΍ͭͰ͠ΐʯ

    • ʮ FluxύλʔϯͬͯγϯάϧτϯͰҰํ޲ͳ΍ͭͰ͠ΐʯ

    Έ͍ͨͳࡶͳೝࣝఔ౓Ͱ΋࿩ͷ൒෼͸Θ͔ΔͷͰOK

    View Slide

  14. ૝ఆλʔήοτ(2)
    • Vue.js ͰͭΒ͍ࢥ͍Λͦ͠͏ͳਓɾͨ͠ਓ

    • ঢ়ଶ؅ཧͰ೰ΜͰ͍Δਓ

    • ϓϩδΣΫτͷن໛ײɾνʔϜײͰͲ͏ͨ͠Βྑ͍͔Θ͔Βͳ͍ਓ

    ͜Ε͔Βͷ։ൃΛॿ͚ʹͳΕΔ͸ͣ

    View Slide

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

    • Vuex ͕͋ͬͯ΋ͳͯ͘΋ྑ͍͸ຊ౰͔ʁ

    • σβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δ͸ຊ౰͔ʁ

    • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯ΁ͷͪΐ͍ೖΕʹڧ͍͸ຊ౰͔ʁ

    • Vue.js Λ৽نͰ࢖͏৔߹ʹબ୒͢΂͖͜ͱ

    View Slide

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

    View Slide

  17. A. ͦ͏Ͱ΋ͳ͍

    View Slide

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

    View Slide

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

    View Slide

  20. ͋͑ͯ໌ݴ͢Δ ಛ௃

    View Slide

  21. Vue.js is
    • ʮࡶʹ૊΋͏ͱ͢Δͱͱ͜ͱΜࡶʹ૊Ή͜ͱ͕շదʹͰ͖Δʯ

    • ʮࡶʹ૊Ήͱ؆୯ʹϓϩδΣΫτΛരൃͤ͞Δʯ͜ͱ͕Ͱ͖Δ

    • ʮരൃ͠ͳ͍ϓϩδΣΫτΛ࡞Ζ͏ͱ͢Δͱۃ୺ʹ೉͘͠ͳΔʯ

    • ʮ༉அ͢Δͱരൃ͢Δ͚Ͳ PHP ΄Ͳരൃͯ͠ࠔͬͨ࿩Λ͕ͨ͠Βͳ͍ʯ

    View Slide

  22. Vue.js is
    • ʮࡶʹ૊΋͏ͱ͢Δͱͱ͜ͱΜࡶʹ૊Ή͜ͱ͕շదʹͰ͖Δʯ

    • ʮࡶʹ૊Ήͱ؆୯ʹϓϩδΣΫτΛരൃͤ͞Δʯ͜ͱ͕Ͱ͖Δ

    • ʮരൃ͠ͳ͍ϓϩδΣΫτΛ࡞Ζ͏ͱ͢Δͱۃ୺ʹ೉͘͠ͳΔʯ

    • ʮ༉அ͢Δͱരൃ͢Δ͚Ͳ PHP ΄Ͳരൃͯ͠ࠔͬͨ࿩Λ͕ͨ͠Βͳ͍ʯ

    View Slide

  23. ࠔͬͨ࿩ with ఆઆ

    View Slide

  24. ࠓ೔࿩͢͜ͱ
    • ʮVue.js͸୭Ͱ΋؆୯ʹ࡞ΕΔ͚Ͳখن໛޲͚ʯ͸ຊ౰͔

    • աڈͷϓϩδΣΫτͷ൓ল͔ΒΈΔ Vue.js ͷఆઆͷධՁ
    • Vuex ͕͋ͬͯ΋ͳͯ͘΋ྑ͍͸ຊ౰͔ʁ
    • σβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δ͸ຊ౰͔ʁ
    • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯ΁ͷͪΐ͍ೖΕʹڧ͍͸ຊ౰͔ʁ
    • Vue.js Λ৽نͰ࢖͏৔߹ʹબ୒͢΂͖͜ͱ

    View Slide

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

    View Slide

  26. ר͖Ͱ 3 ͭ঺հ

    View Slide

  27. 1 / 3

    View Slide

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

    View Slide

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

    View Slide

  30. Vuex࢖Θͣരൃͨ͠࿩

    View Slide

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

    • Vuex Λ Flux తʹ Single source of truth ʹ͢Δ࣌୅ͷ΄͏͕ଟ͔ͬͨࠒͷ࿩

    • Single source of truth Λ९क͢Δͷ͸΍Γ͗ͩ͢ͱࢥ͍ Pure JavaScript Object Ͱͷ
    Store ૚Λ࡞੒

    • σʔλͱͯ֬͠ఆͨ͠৘ใͷΈΛ֨ೲɻҰ࣌εςʔτ͸Vueίϯϙʔωϯτʹ࣋ͨͤͨ

    • require/import ͸ࢀর౉͠ʹʹͳΔͷͰॻ͖׵͑Δͱ͏·͍۩߹ʹ૒ํ޲όΠϯσΟϯ
    άͱטΈ߹ͬͯ͘ΕΔ

    View Slide

  32. Vuex Λ࢖Θͳ͍Ͱരൃͨ͠࿩(2)
    • ॳظ։ൃ͸ JS Object Β͍͠औΓճ͠ͱޮ཰ͷྑ͕͞͏·͘ޮ͍͍ͯͨ

    • ૒ํ޲όΠϯσΟϯάͷԸܙ΋͋ͬͯɺ Reactivity Λશ໘ʹ׆༻ͨ͠ίʔ
    υ͕ॻ͚͍ͯͨ

    View Slide

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

    • ࢖ΘΕ͍ͯͳ͍֬ূΛಘΔ͜ͱ͕೉͘͠ɺஈʑͱ։ൃ͕ͭΒ͘……

    • େ͖͘ͳΔΞϓϦέʔγϣϯ͸ Vuex ΛೖΕ͓ͯ͘΂͖ͩͬͨ

    View Slide

  34. രൃͤ͞ͳ͍ͨΊʹ

    View Slide

  35. ʮVuex Λ࢖Θͳ͍ͰരൃʯΛ๷͙(1)
    • SPA Ͱ΋ Vuex ͳͯ͘΋ JS Object ΍ετΞύλʔϯͰ͍͚Δ͸େମӕ
    • ͱΓ͋͑ͣ Vuex ͸ඞͣೖΕ͓͍ͯͯɺεςʔτͷར༻Λߟ͑Δ

    • Vuex ͸ެࣜʹSingle source of truthʹ߆Δඞཁ͸ͳ͍ͱ໌ݴ͍ͯ͠Δͷ
    ͰɺϩʔΧϧεςʔτͷੋඇͰ Vuex ΛೖΕΔ͔ܾΊͳ͍Ͱ૊Έ߹ΘͤΔ

    • ࣗ෼͕ؔΘΔϓϩδΣΫτ͸ݱࡏશͯ Vuex + ϩʔΧϧεςʔτͰӡ༻த

    View Slide

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

    • ϩʔΧϧεςʔτΛ࢖͏͜ͱΛڐ༰͢ΔͱʮͦͷίϯϙʔωϯτͰ͔͠࢖ΘΕ
    ͳ͍ʯͱ͍͏ঢ়ଶΛͬ͞͞ͱഁغͰ͖ΔͷͰ։ൃϨϕϧࠩҟΛٵऩͰ͖Δ

    • Vuex ͸υϝΠϯ૚ͱࣄ࣮Λ Store ʹɺϓϨθϯςʔγϣϯ૚ͱঢ়ଶΛϩʔΧ
    ϧεςʔτʹ࣋ͨͤΔ΂͖

    • ͱ͸͍͑ͲͷΈͪVue ͸೴಺ͷ RAM ༰ྔ͕େ͖͍ਓ޲͚ͷϑϨʔϜϫʔΫͳ
    ͷ͸ؒҧ͍ͳ͍

    View Slide

  37. ༨ஊ) Vuex Λ࢖ͬͯ΋രൃͤ͞Δํ๏
    • Single source of truth Λ׬શʹ९क͢Δͱɺ Redux ΄Ͳ໊લۭؒΛࡉ͔
    ͘෼ׂ͠ͳ͍౎߹্େମ state ͕ա࿑ࢮ͢Δ

    • createPostForm ͬͯதʹϑΥʔϜͷཁૉ͍ͬͺ͍ೖͬͯΔ͚Ͳ౤ߘ࡞ͬ
    ͯΔՕॴͱ͔5ݸҎ্͋Δ͠Ͳ͜ͷϑΥʔϜͩΑ

    • ϓϨθϯςʔγϣϯ૚ͷ౎߹͕Կނ͔υϝΠϯ૚ʹॻ͔Ε͍ͯͨΓͯ͠ഁ
    ໓ͯ͘͠Δ

    • ϨΠϠʔ͸෼͚·͠ΐ͏

    View Slide

  38. 2 / 3

    View Slide

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

    View Slide

  40. A. Ϛδদ

    View Slide

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

    View Slide

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

    • ejs / erb / jade / Smarty / mustache ͱςϯϓϨʔτΤϯδϯΛ౉͖ͬͯͨϚʔ
    ΫΞοϓͷਓؒͰ͋Ε͹ॻ͘ʹ͋ͨͬͯԿ΋໰୊͸ͳ͍

    • ʮσβΠϯ͸Ұྲྀ͚ͩͲϚʔΫΞοϓ͸ෆ׳ΕʯͰ΋ Scoped CSS Ͱष͍΋
    ͷʹ֖ΛͰ͖Δͷ͸࠷ߴ

    • ͜͜Ͱ΋ʮ͜͜Ͱ͔͠࢖ΘΕ͍ͯͳ͍΋ͷʯΛ؆୯ʹഁغͰ͖Δࠩҟٵऩ͕ޮ
    ͍ͯ͘Δ

    View Slide

  43. σβΠφʔͱҰॹʹ࢓ࣄ͢Δͱരൃͨ͠Γ͠ͳ͔ͬͨΓ͢Δ(2)
    • ͍͍ͩͨ໰୊͕ൃੜ͢Δͷ͸ Node ؀ڥͷ࿩ͳͷͰ؀ڥͷߏங͸୅ߦ͢Δ

    • Storybook ͷ stories ͷॻ͖ํ·Ͱڭ͑ͯӠʑΧϯψϯ……ͱ͔΍Γͩ͢ͱ
    టপԽ͢Δ

    • ద౰ͳ Sandbox ίϯϙʔωϯτΛ࡞Δ͔ stories ͸ FE ͕ॻ͍ͯͦ͜Ͱແݶ
    ʹॻ͍ͯ΋Βͬͨ΄͏͕݁Ռతʹ޾෱ʹͳΔ

    • ςετΛॻ͍ͯͨΒςετ͸ͿͬյΕΔͷͰ௚͢

    • ͜Ε͑͞΍Ε͹രൃ͠ͳ͍ʢςετ͸രൃ͢Δ͔΋ʣ

    View Slide

  44. 3 / 3

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  48. Web ΞϓϦʹ Vue.js Λࠩ͠ࠐΉͱരൃ͠ͳ͘ͳΔ࿩(1)
    ςϯϓϨʔτه๏͕ͦͦ͜͜ϞμϯͰ࢖͍΍͍͢
    • αʔόʔαΠυத৺ͷ(Slim ΍ Blade ͳͲ͔Β HTML Λग़ྗ͍ͯ͠Δ)ϓϩδΣΫτʹ
    Ұ෦ JS ΛೖΕΔͳΒ Vue.js ͸࠷ߴ

    • [v-cloak] Λ࢖ͬͯςϯϓϨʔτͷ࿐ग़Λ๷͗ͭͭɺόοΫΤϯυͷςϯϓϨʔτΤ
    ϯδϯͱ૊Έ߹Θͤ΍͍͢ͷ͕ૉఢʢ΍Γ͗͢Δͱരൃ͢Δʣ

    • σϦϛλ( {{}} )Λࣗ༝ʹม͑ΒΕΔ( [[]] ͳͲ)ͷͰͲͷςϯϓϨʔτΤϯδϯͱ΋͔ͪ
    ߹Θͳ͍

    View Slide

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

    • this.setState() Έ͍ͨͳ֓೦͕ͳ͘ɺద౰ʹάϩʔόϧʹঢ়ଶΛల։͢ΔͱͦΕ͚ͩ
    ͰετΞ૚Λల։Ͱ͖Δ

    • window.store Λ࡞Γग़ͯ͠ബ͍ετΞ૚Λ࡞Δͷ͕͓͢͢Ί

    View Slide

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

    • SPA ͷ৔߹͸ Vuex ͕ͳ͍ͱരൃ͕ͨ͠ɺͪΐ͍ೖΕͳΒͦ͜·ͰΫϦςΟΧϧͳӨ
    ڹ͸ͳ͍

    • ଟ͘ͷॻ͖ํΛڐ༰͍ͯ͠Δར఺Λ׆͔ͯ͠ϓϩδΣΫτن໛ʹϚονͨ͠։ൃελ
    ΠϧΛऔΔͱடংΛ࡞Γ΍͍͢

    View Slide

  51. ͦͷଞʹ……
    ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ
    • ϓϥάΠϯ΍ϧʔςΟϯάϑοΫ͕ΦϨΦϨߏ੒ͷ࿩

    • utils σΟϨΫτϦ͕Ͱ͖ͨΓ؅ཧγεςϜ่͕յͯ͠രൃ͢Δ

    View Slide

  52. ͦͷଞʹ……
    ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ
    • ϓϥάΠϯ΍ϧʔςΟϯάϑοΫ͕ΦϨΦϨߏ੒ͷ࿩

    • utils σΟϨΫτϦ͕Ͱ͖ͨΓ؅ཧγεςϜ่͕յͯ͠രൃ͢Δ

    • utils ͷരൃͷ࿩͸ŠŧŽˠ https://slides.com/potato4d/vuejs_meetup7

    View Slide

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

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

    View Slide

  54. ͦͷଞʹ……
    ҎԼͷ࿩͸࣌ؒͷ౎߹্੝ΓࠐΉ༨༟͕ͳ͔ͬͨͷͰ࠙਌ձͰ
    • ςετ

    • ॳݟͰ΍Δͱେମരൃ͢Δ

    View Slide

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

    View Slide

  56. ࠓ೔࿩͢͜ͱ
    • ʮVue.js͸୭Ͱ΋؆୯ʹ࡞ΕΔ͚Ͳখن໛޲͚ʯ͸ຊ౰͔

    • աڈͷϓϩδΣΫτͷ൓ল͔ΒΈΔ Vue.js ͷఆઆͷධՁ

    • Vuex ͕͋ͬͯ΋ͳͯ͘΋ྑ͍͸ຊ౰͔ʁ

    • σβΠφʔͰ΋৮ΕͯҰॹʹ࢓ࣄͰ͖Δ͸ຊ౰͔ʁ

    • όοΫΤϯυத৺ͷWebΞϓϦέʔγϣϯ΁ͷͪΐ͍ೖΕʹڧ͍͸ຊ౰͔ʁ

    • Vue.js Λ৽نͰ࢖͏৔߹ʹબ୒͢΂͖͜ͱ

    View Slide

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

    View Slide

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

    • SPA ͡Όͳ͍ฤ

    View Slide

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

    View Slide

  60. SPA ฤ
    ࠷௿ݶ΍͓ͬͯ͘΂͖͜ͱ
    • ಡΈऔΓઐ༻ͷΞϓϦέʔγϣϯͰ΋ͳ͍ݶΓ͸ Vuex ͸ඞͣಋೖ͢Δ

    • ΦϨΦϨϨΠϠʔΛ࡞Γग़ͦ͠͏ͳ෦෼ʹ͍ͭͯ͸ۃྗΑͦͷ࣮૷Λࢀߟʹͯ͠ʮॻ
    ͍ͨ΍͔ͭ͠Θ͔Βͳ͍ʯΛආ͚Δ

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

    • Nuxt.js Λ࢖͏

    View Slide

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

    View Slide

  62. View Slide

  63. Nuxt.js ͱ͸
    • Vue based ͳϑϧελοΫϑϩϯτΤϯυϑϨʔϜϫʔΫ

    • SPA ઐ༻ɻͪΐ͍ೖΕ͸ෆՄɻ

    • Vue + Vue Router + Vuex + SSR ؀ڥ͕σϑΥϧτ

    • ΦϨΦϨϓϥάΠϯϨΠϠʔͳͲ΋ Nuxt.js ͕ٵऩ

    • ن໿ϕʔεͷΞʔΩςΫνϟʹΑͬͯن໿ΛकΔͱ୭Ͱ΋ߴ඼࣭ͳίʔυ
    ͕ॻ͚Δ

    View Slide

  64. SPA ޲͚ͷ։ൃηοτ

    View Slide

  65. Nuxt.js Λ࢖͏ͱخ͍͜͠ͱ
    • ن໿͕ΦϨΦϨΞʔΩςΫνϟ͔ΒϓϩδΣΫτΛकͬͯ͘ΕΔ

    • ෭࢈෺ͱͯ͠ҎԼͷΑ͏ͳศརػೳ͕͍ͭͯ͘Δ

    • ϧʔςΟϯάͷࣗಈੜ੒ػೳʢϧʔςΟϯά؅ཧ༻ͷϨΠϠΛফͤΔʣ

    • Vuex ετΞΛѻ͍΍͘͢͢ΔΦʔτϩʔσΟϯάʢಋೖ͕໘౗͡Όͳ͍ʣ

    • ๛෋ͳϓϥάΠϯʗΤίγεςϜ

    View Slide

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

    View Slide

  67. SPA ͸ Nuxt.js Ͱྑ͍

    View Slide

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

    • SPA ͡Όͳ͍ฤ

    View Slide

  69. SPA ͡Όͳ͍ฤ
    • ͪΐ͍ೖΕͷ৔߹͸େମ͖ͬ͞·Ͱॻ͍ͨ௨Γ

    • ૉ๿ͳʮετΞύλʔϯʯͰ࣮૷͢Δ

    • ͲͷΈͪ jQuery ͷίʔυͳͲ͔ΒσʔλΛ͍͘͡Γճͨ͘͠ͳΔʢମݧ
    ஊʣͷͰ Readonly ΛੜΈग़͢ Vuex ͸࢖Θͳ͍

    • new Vue ({}) ͸͍ͭͯ͘͠΋ྑ͍ͷͰίϯϙʔωϯτಉ࢜͸ૄ݁߹Ͱ࡞Δ

    View Slide

  70. SPA ͡Όͳ͍ฤ
    • ͜Ε͔Β࣮૷͢Δਓ޲͚ͷ௥Ճ Tips

    • Smarty, Slim, Blade ͳͲͱҰॹʹ࢖͏ͳΒͰ͖Δ͚ͩҰͭͷ HTML ߏ଄
    Λ͓ޓ͍ʹॻ͖׵͑Δͷ͸΍ΊΔ

    • Λ༻ҙͯ͠ɺ $
    (‘#initialState’).innerHTML ͰऔΓग़ͯ͠ Vue ίϯϙʔωϯτʹྲྀ͠ࠐΉઃ
    ܭͰ࡞Δ

    View Slide

  71. ऴΘΓʹ

    View Slide

  72. Vue.js ͸Մ೩ੑ

    View Slide

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

    View Slide

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

    View Slide

  75. Thank you!

    View Slide