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/

Transcript

  1. 2.

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

    PHP/ AWS / etc… • Vue.js೔ຊޠެࣜυΩϡϝϯτϝϯςφ • Vue.js Japan User Group ελοϑ • nuxt/docs ӳ/࿨υΩϡϝϯτߩݙ • Nuxt tech book Author
  2. 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, ΄΅৮ͬͯͳ͍
  3. 8.
  4. 12.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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