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

Vue.js 続・大規模アプリ開発

kazupon
December 04, 2018

Vue.js 続・大規模アプリ開発

kazupon

December 04, 2018
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. Vue.js
    ଓɾେن໛ΞϓϦ։ൃ
    2018.12.04
    @kazupon
    ReproTech #5

    View Slide

  2. ࣗݾ঺հ

    View Slide

  3. kazupon
    Vue.js ίΞνʔϜϝϯό
    Vue.js ೔ຊϢʔβʔάϧʔϓ୅ද
    vue-i18n OSS։ൃऀ
    vuejs/jp.vuejs.org ϝϯςφ
    @kazu_pon kazupon

    View Slide

  4. ͸͡Ίʹ

    View Slide

  5. ςʔϚ: Frontend Reliability

    View Slide

  6. Vue.jsຊମ Vue Router Vuex Vue CLI
    ༷ʑͳن໛ʹରԠ͠΍͘͢ɺ͔ͭॊೈੑΛ͍࣋ͬͯΔ
    খن໛ େن໛
    ϓϩάϨογϒϑϨʔϜϫʔΫ
    தن໛

    View Slide

  7. • தɾେن໛޲͚ͳΞϓϦ։ൃ͸ɺ݁ߏΧ
    ΦεʹͳΓ΍͍͢
    ॊೈ͗͢Δ൓໘…

    View Slide

  8. • தɾେن໛޲͚ͷΞ
    ϓϦ։ൃʹ͍ͭͯ
    • Vue.jsೖ໳:

    8ষɺ9ষɺ10ষ ʹ
    ର͢Δิ଍తͳ͜ͱ
    Λ
    ࠓ೔࿩͢͜ͱ

    View Slide

  9. தɾେن໛޲͚
    ΞϓϦ։ൃ
    ʹ͍ͭͯ

    View Slide

  10. • Ұൠతʹதن໛Ҏ্ͷΞϓϦ։ൃͰ͸ɺ
    ෳ਺ਓͰ։ൃ͢Δ
    • ͜ͷͨΊɺΞϓϦέʔγϣϯϑϨʔϜϫʔ
    ΫͰ͸ɺੜ࢈ੑ΍ϝϯςφϯεੑΛߟྀ
    ͨ͠΋ͷʹͳ͍ͬͯΔ
    ҰൠతͳΞϓϦέʔγϣϯϑϨʔϜϫʔΫ

    View Slide

  11. • ։ൃπʔϧ
    • ܕγεςϜ
    • σʔλӬଓԽ
    • ςετ
    • σόοά
    • Ϗϧυ
    ΞϓϦέʔγϣϯϑϨʔϜϫʔΫ͕ఏڙ͢Δ߲໨
    • ίʔσΟϯάΨΠυ
    ϥΠϯ
    • ن໿
    • σβΠϯύλʔϯ
    • ϕετϓϥΫςΟε
    • ࠃࡍԽ

    View Slide

  12. • ࠷ॳ͔ΒϑϧελοΫʹαϙʔτ͍ͯ͠
    ͳ͍
    • ͨͩɺVue.jsͱͯ͠ެࣜʹఏڙ͍ͯ͠Δ΋
    ͷ͕͋Δ
    Vue.js͸ϓϩάϨογϒϑϨʔϜϫʔΫ

    View Slide

  13. • ։ൃπʔϧ: Vue CLI
    • ελΠϧΨΠυ / ίʔσΟϯάΨΠυϥΠϯ:

    eslint-plugin-vue
    • ίϯϙʔωϯτγεςϜ:୯ҰϑΝΠϧίϯϙʔωϯτ
    • ϧʔςΟϯά: Vue Router
    • ঢ়ଶ؅ཧͱσʔλϑϩʔ: Vuex
    • ςετϢʔςΟϦςΟ: Vue Test Utils
    Vue.js͕ఏڙ͢Δ಺༰

    View Slide

  14. • Ϗϧυ(όϯυϥ): 

    Vue Loader / rollup-plugin-vue
    • ΤσΟλ֦ு: Vetur
    • αʔόʔαΠυϨϯμϦϯά
    Vue.js͕ఏڙ͢Δ಺༰
    ͜ΕΒ΍ɺαʔυύʔςΟͷ΋ͷΛඞཁ
    ʹԠͯ͡ಋೖͯ͠ΞϓϦ։ൃΛ͍ͯ͘͠

    View Slide

  15. ΞϓϦ։ൃ:
    ։ൃ؀ڥηοτΞοϓ

    View Slide

  16. ΞϓϦ։ൃʹඞཁͳ΋ͷ
    • ίʔςΟϯά؀ڥ
    • UIϏϧμ
    • ςετ & CI ؀ڥ
    • σόοΨ / ϓϩϑΝΠϥ
    • Ϗϧμ
    • γϡϛϨʔλ

    View Slide

  17. ΞϓϦ։ൃʹඞཁͳ΋ͷ
    • ίʔυ؅ཧπʔϧ
    • Ξηοτ؅ཧ
    • ઃఆ؅ཧ
    • ࠃࡍԽϦιʔε؅ཧ
    ͜͏ͨ͠αϙʔτΛड͚ΒΕΔɺΞϓ
    Ϧ։ൃͷͨΊͷπʔϧ͕ඞཁ

    View Slide

  18. ΞϓϦ։ൃΛ
    αϙʔτ͢Δπʔϧ

    View Slide

  19. • IDE
    • GUI ϕʔεͷ౷߹։ൃ؀ڥ
    • CLI
    • λʔϛφϧΛϕʔεͱͨ͠։ൃ؀ڥ
    Ұൠతʹఏڙ͞Ε͍ͯΔ։ൃ؀ڥπʔϧ

    View Slide

  20. • iOS: XCode
    • Android: Android Studio
    • Windows: Visual Studio
    • Web: Web Storm
    IDE

    View Slide

  21. • Ruby on Rails
    • Angular CLI
    • Create React App
    CLI

    View Slide

  22. • Vue CLI
    • Vue CLI UI
    Vue.js͕ఏڙ͢Δ։ൃ؀ڥπʔϧ
    ͜͏ͨ͠πʔϧͰΞϓϦ։ൃ
    ϓϩδΣΫτΛߏங͠ɺ
    ඞཁʹԠͯ͡ଞͷϥΠϒϥϦɺ
    πʔϧΛ૊Έ߹ΘͤΔ

    View Slide

  23. Vue CLI ͷ
    ৽چͷҧ͍

    View Slide

  24. • Vue CLI v1 ʙ v2
    • ςϯϓϨʔτϕʔε
    • pros:

    ॊೈੑ͕ߴ͍

    ςϯϓϨʔτ࣍ୈͰࣗ༝ʹΧελϚΠζͰ͖Δ
    • cons:

    ϝϯςφϯε͕େม

    πʔϧ΍αʔυϕϯμͷϥΠϒϥϦΛࣗ෼Ͱόʔδϣϯ؅
    ཧ͠ͳ͍ͱ͍͚ͳ͍
    چ Vue CLI

    View Slide

  25. • Vue CLI v3 ʙ
    • ϓϥάΠϯϕʔε
    • pros:

    ։ൃ؀ڥͷߏஙɺ֦ுɺϝϯςφϯεָ͕

    ΄ͱΜͲ Vue CLI ͕໘౗ݟͯ͘ΕΔ
    • cons:

    ΤοδͳΧελϚΠζ͕ࠔ೉

    Vue CLI ͷϨʔϧ͔Β֎ΕΔ͜ͱ͸Ͱ͖ͳ͍
    ৽ Vue CLI

    View Slide

  26. • چ Vue CLI ͱ Vue.js ެࣜ webpack ςϯϓ
    ϨʔτΑΓ΋ɺ৽ Vue CLI (Ҏ߱ Vue CLI
    v3 ͱݺͿ) ͷํ͕ɺ֨ஈʹָʂ
    • Ҏ߱Ͱ͸ɺVue CLI v3 ʹΑΔ։ൃ؀ڥ઀
    ηοτΞοϓʹ͍ͭͯิ଍͢Δ

    View Slide

  27. Vue CLI Ͱ
    ߏஙͰ͖Δ
    ඪ४։ൃ؀ڥ

    View Slide

  28. • τϥϯεύΠϥ: Babel
    • ܕγεςϜ: TypeScript
    • Ϧϯτ: ESLint
    • ίʔυϑΥʔϚολ: Prettier
    • ୯ମςετ: Chai / Mocha / Jest
    • E2Eςετ: NightWatch / Cypress
    • Ϗϧυ: webapck
    ։ൃπʔϧ

    View Slide

  29. • ϧʔςΟϯά: Vue Router
    • ঢ়ଶ؅ཧ: Vuex
    • ୯ମςετϢʔςΟϦςΟ: Vue Test Utils
    ϥΠϒϥϦ

    View Slide

  30. • npm / yarn ͷίϚϯυొ࿥
    • ؀ڥม਺ʹΑΔΞϓϦઃఆ؅ཧ
    • .env Ͱ؅ཧՄೳ
    • όοΫΤϯυͷ API ϓϩΩγ؀ڥͷఏڙ
    • vue.config.js Ͱͷઃఆ
    ͦͷଞ

    View Slide

  31. CLIϓϥάΠϯʹΑΔ֦ு
    • ྫ: ࠃࡍԽͷ࢓૊Έ(i18n)Λಋೖ
    vue add i18n
    vue-cli-plugin-i18n my-app1
    scafollding
    &
    Env settings

    View Slide

  32. Vue CLI UI
    ʹ͍ͭͯ

    View Slide

  33. Vue CLI UI
    vue ui
    ίϚϯυ࣮ߦ…
    Webϒϥ΢βʹGUIΞϓϦ͕ىಈ

    View Slide

  34. Vue CLI UI Ͱग़དྷΔࣄ
    • Vue CLI ͷ CLI ϕʔεͰग़དྷΔࣄ͸ͻͱ௨
    ΓͰ͖Δ (Vue CLI Λϥοϓͯ͠ಈ࡞)
    • ΞϓϦ։ൃϓϩδΣΫτ࡞੒
    • CLIϓϥάΠϯ௥Ճ
    • ։ൃαʔόͷىಈ
    • ΞϓϦͷϏϧυ
    • webpackͷΠϯεϖΫγϣϯ …ͳͲ

    View Slide

  35. CLI ൛ʹ͸ͳ͍ػೳͷఏڙ
    • GUIϕʔεͷಛੑΛੜ͔ͯ͠ɺҎԼͷΑ͏
    ͳ༷ʑͳػೳΛఏڙ͍ͯ͠Δ
    • ϓϩδΣΫτ؅ཧ
    • GUIϕʔεͷઃఆ
    • CLIϓϥάΠϯͷݕࡧˍҰཡ
    • CLIϓϥάΠϯͷΞοϓσʔτ
    • CLIϓϥάΠϯʹΑΔ։ൃࢧԉ֦ு … ͳͲ

    View Slide

  36. ϓϩδΣΫτ؅ཧ

    View Slide

  37. GUIϕʔεͷઃఆ

    View Slide

  38. CLIϓϥάΠϯݕࡧˍҰཡ

    View Slide

  39. Vue CLI UI ʹΑΔ։ൃࢧԉ
    • i18nϦιʔεͷ؅ཧ (CLIϓϥάΠϯ)

    View Slide

  40. • λʔϛφϧͰ͸ͳ͘ɺGUI ϕʔεͳͷͰί
    Ϛϯυ࣮ߦ͕ۤखͳਓʹ͸༏͍͠
    • ։ൃνʔϜͰۤखҙࣝͷํ͕͍Δ৔߹͸ɺ
    ࢖ͬͯੜ࢈ੑΛߴΊΔͱΑ͍
    • ߏஙͨ͠ϓϩδΣΫτͷ Vue CLI ͱ Vue
    CLI UI ͷฒଘར༻͸Մ
    Vue CLI UI ͸༏͍͠

    View Slide

  41. ͞ΒͳΔ
    ։ൃ؀ڥͷڧԽ

    View Slide

  42. • Visual Studio Code + Vetur ૊Έ߹Θͤਪ

    • Vue ޲͚ʹ࠷దՄ͞Εͨίʔυิ׬
    • SFCͷγϯλοΫεϋΠϥΠτ
    • ڧྗͳ TypeScript ͷܕαϙʔτ
    ίʔσΟϯά؀ڥ

    View Slide

  43. • Chrome + Vue DevTools ਪ঑
    • Chrome DevTools ʹΑΔϓϩϑΝΠϦϯ
    ά
    • Vue DevToolsʹΑΔڧྗͳσόοά؀ڥ
    σόοΨͱϓϩϑΝΠϦϯά

    View Slide

  44. • σϑΥϧτͰ͸ essntial ʹઃఆ͞Ε͍ͯ
    Δ
    • recommended Λਪ঑
    • Vue.js։ൃऀͱίϛϡχςΟʹରͯ͠ཧղ
    Ͱ͖ΔҰ؏ੑΛ࣋ͬͨίʔυ
    eslint-plugin-vueͷϧʔϧΧςΰϦ

    View Slide

  45. • RESTful ͳ API ʹରͯ͠͸ axios
    • GraphQL ͳέʔεʹରͯ͠͸ɺvue-apollo
    ͱ͔
    ௨৴ϥΠϒϥϦ

    View Slide

  46. • Vuex ͸ Vue CLI v3 ܦ༝ͰಋೖͰ͖ΔΑ͏ʹ
    ͳ͍ͬͯΔ
    • σΟϨΫτϦߏ଄Խ͸Ϣʔβʔ೚ҙ
    • Vuex ͷ TypeScript ؀ڥ ͕ਏ͍ͳΒɺVue.js
    ެࣜͰ͸ͳ͍͕ɺϔϧύΛ࢖͏ख΋͋Δ

    https://github.com/ktsn/vuex-type-helper
    ঢ়ଶ؅ཧϥΠϒϥϦ

    View Slide

  47. • Vue CLI v3 ʹ͓͍ͯ΋ weback-dev-server
    Λར༻͍ͯ͠ΔͨΊɺϓϩΩγઃఆ͸ै
    དྷͲ͓Γ
    • ։ൃ؀ڥ޲͚ʹmock࣮૷ͨ͠ Express ͷ
    ίʔυ͸ vue.config.js ʹઃఆ͢Δ
    όοΫΤϯυͱͷϓϩΩγ؀ڥߏங

    View Slide

  48. • Vue CLI v3 Ͱ͸ɺCypress ΋࢖͑ΔΑ͏
    ʹͳͬͨ
    • Cypress ͷϓϥάΠϯͰE2E؀ڥΛڧԽ͠
    ͍ͨ৔߹͸ɺͦͷྲّྀʹै͏ඞཁ͕͋Δ

    https://docs.cypress.io/guides/tooling/plugins-guide.html#Use-Cases
    E2Eςετ؀ڥ

    View Slide

  49. ΞϓϦ։ൃ:
    ઃܭ

    View Slide

  50. • ॻ੶Ͱ͸ҎԼͷ߲໨ͷઃܭʹ͍ͭͯղઆ
    • ίϯϙʔωϯτઃܭ
    • ঢ়ଶϞσϦϯάͱσʔλϑϩʔઃܭ
    • ϧʔςΟϯάઃܭ
    ΞϓϦέʔγϣϯઃܭ

    View Slide

  51. ίϯϙʔωϯτ
    ઃܭ

    View Slide

  52. • Ұ؏ੑ

    ΞϓϦέʔγϣϯશମͰ౷Ұײͷ͋ΔίϯϙʔωϯτΛ
    ։ൃͰ͖Δ
    • ॏෳഉআ

    ಉ͡Α͏ͳػೳΛఏڙ͢Δίϯϙʔωϯτ։ൃΛഉআͰ
    ͖Δ
    • ੜ࢈ੑ޲্

    νʔϜͰ։ൃ͢Δίϯϙʔωϯτͷେ࿮Λڞ༗͢Δ͜ͱ
    Ͱ։ൃޮ཰ΛߴΊΒΕΔ
    ίϯϙʔωϯτઃܭͷҙٛ

    View Slide

  53. • ίϯϙʔωϯτ
    ͷཻ౓ͱ෼ྨ͸
    Atomic Design
    ʹै͍ɺSFCͱ
    ͯ͠நग़
    • ίϯϙʔωϯτ
    ͷAPIΛઃܭ
    Atomic Design

    View Slide

  54. • No
    • ։ൃϓϩδΣΫτʹ͓͍ͯίϯϙʔωϯτ
    ͷடংΛҡ࣋Ͱ͖ΔͳΒɺଞͷ෼ྨख๏͕
    ͋Ε͹ͦΕΛ࢖͑͹Α͍
    • ૊৫ಠࣗʹΦϨΦϨ෼ྨख๏Ͱ΍͍ͬͯ͘
    ࣗ৴͕͋ΔͳΒ͹ɺͦΕͰ΋͍͍ͱࢥ͏
    ඞͣAtomic DesignͰͳ͚Ε͹͍͚ͳ͍ͷ͔ʁ

    View Slide

  55. • Basic
    • Components
    • Containers
    • Pages
    ࢀߟ: ίϯϙʔωϯτͷ෼ྨ๏
    ޙչ͠ͳ͍ͨΊͷ Vue ίϯϙʔωϯτઃܭ: nakajmgࢯ
    https://ponyhead.booth.pm/items/1028529

    View Slide

  56. ঢ়ଶϞσϦϯά
    ͱ
    σʔλϑϩʔઃܭ

    View Slide

  57. • ΞϓϦͷUI࢓༷͔
    Βঢ়ଶ(Ϟσϧ)ʹ
    མͱ͠ࠐΉ
    • σʔλϑϩʔͷ؍
    ఺͔Β͍ͭͰʹɺ
    API΋͜͏ͳΔ΂
    ͖ͱઃܭ͕ͪ͠
    ϞσϦϯάͱσʔλϑϩʔ

    View Slide

  58. • ઃܭͨ͠ϞσϧͱAPI͸ɺϑϩϯτΤϯυࢹ఺
    ʹΑΔઃܭ
    • མͱ͠ࠐΜͩϞσϧͱAPIͷ࢓༷͸ɺόοΫΤ
    ϯυଆͱೝࣝᴥᴪ͕ͳ͍Α͏ʹ͠ͳ͍ͱ͍͚ͳ
    ͍
    • ίϛϡχέʔγϣϯ΋ॏཁͰ͋Δ͕ɺόοΫΤ
    ϯυଆͱೝࣝᴥᴪΛݮΒ͢޻෉(࢓૊Έ)΋ඞཁ
    όοΫΤϯυଆͱڠௐ͢Δʹ͸ʁ

    View Slide

  59. • ҎԼ͕ࢀߟʹͳΔ
    • swagger ΍
    OpenAPI
    Generator
    • Consumer Driven
    Contract
    ಉ࣌ʹ։ൃΛਐΊΔͨΊʹ͸ʁ
    BFFʢBackends For Frontendsʣ࣮ફʹ͓͚Δ3ͭͷΞϯνύλʔϯͱɺͦͷճආࡦ: ݹ઒ཅհࢯ
    http://www.atmarkit.co.jp/ait/articles/1808/31/news013.html

    View Slide

  60. ϧʔςΟϯά
    ઃܭ

    View Slide

  61. • Scrolling Amnesia
    • ϒϥ΢βͷ໭ΔϘλϯ
    Λԡͨ࣌͠ʹظ଴͢Δ
    HTML͕ϩʔυ͞Εͳ
    ͔ͬͨ࣌ʹى͜Δ໰୊
    • Α͋͘Δέʔε:

    ແݶϖʔδωʔγϣϯ
    εΫϩʔϧҐஔͷ૕ࣦ໰୊
    7 Principles of Rich Web Applications

    https://rauchg.com/2014/7-principles-of-rich-web-applications#dont-break-history-enhance-it

    View Slide

  62. • UI࢓༷ݕ౼࣌ͷ֬ೝ

    ྫ: ແݶϖʔδωʔγϣϯͷ༗ແ & ڍಈ
    • αϙʔτ͢Δϒϥ΢βͷ֬ೝ

    https://developer.mozilla.org/ja/docs/Web/API/History#ϒϥ΢βʔ࣮૷ঢ়گ
    • ϧʔςΟϯάϥΠϒϥϦͷରॲ๏ͷ֬ೝ

    https://router.vuejs.org/ja/guide/advanced/scroll-behavior.html
    ࣄલʹରԠՄೳ͔֬ೝඞਢ

    View Slide

  63. ΞϓϦ։ൃ:
    ࣮૷

    View Slide

  64. • ݎݻͳΞϓϦ։ൃʹ͢ΔͨΊʹ͸ɺಋೖ
    ͢΂͖
    • Vue CLI v3 ͳΒ؆୯ʹಋೖ͢Δ͜ͱ͕Ͱ
    ͖Δ
    • Visual Studio Code + Vetur Ͱੜ࢈ੑߴ͍
    ։ൃ͕Մೳͳͷ͸ɺલʹઆ໌ͨ͠ͱ͓Γ
    TypeScriptͷಋೖ

    View Slide

  65. ࣮૷શൠ
    ʹ͍ͭͯ

    View Slide

  66. • ॻ੶Ͱ͸ vue init Ͱ karma + mocha ͳ؀ڥͰ
    ͷTDD؀ڥΛߏஙͨ͠
    • ࠓޙ͸ Jest Λਪ঑͢Δ
    • εφοϓγϣοτςετ͕ศར
    • Assertion / Mock ΋๊߹͍ͯͯ͠ɺ͜Εܥͷ
    ϥΠϒϥϦͲΕ࢖͏͔೰·ͳ͍͍ͯ͘
    ϑϩϯτΤϯυʹ͓͚ΔTDD

    View Slide

  67. • ίϯϙʔωϯτɺσʔλϑϩʔɺϧʔςΟϯάͷ
    ࣮૷͸TDDͰ΍͍ͬͯΔ͕શͯ΍Δඞཁͳ͍ͱߟ
    ͍͑ͯΔ
    • ҰൠతʹUIͷ࢓༷͸සൟʹଟ͘ൃੜ͢ΔͨΊຖճ
    ςετมߋίετ͕େม
    • ·ͨTDDͰUIͷߏ଄΍ݟͨ໨΍Ξχϝʔγϣϯͳ
    ͲͷڍಈΛ֬ೝ͢Δͷ͸ਏ͍ͱ͍͏໰୊͕͋Δ
    TDDʹΑΔΞϓϦ։ൃ

    View Slide

  68. • ίϯϙʔωϯτͷ࣮૷:
    • Storybook + reg-suite (ଞʹ΋͋Δ) ʹΑΔ
    Visual Regression Testing


    https://github.com/mojoaxel/awesome-regression-testing
    • σʔλϑϩʔͱϧʔςΟϯάͷ࣮૷
    • TDDͰϩδοΫͷڍಈΛνΣοΫ
    TDD͸͏·͘࢖͍෼͚Δͱ͍͍͔΋

    View Slide

  69. ։ൃαʔό
    ͱ
    σόοά

    View Slide

  70. • Vue DevTools v5 ʹ͸ҎԼͷػೳ͕ೖΔ༧ఆ 

    (ݱࡏbeta)
    • ϧʔςΟϯάཤྺ
    • ύϑΥʔϚϯεଌఆ
    • Vuexͷঢ়ଶ஋ฤू
    • …ͳͲ
    σόοΨ

    View Slide

  71. E2Eςετ

    View Slide

  72. • Cypress:

    Vue CLI v3 ͰެࣜʹηοτΞοϓΛఏڙ
    • Puppeteer:

    ಠࣗʹ؀ڥߏங͕ඞཁ
    NightWatchҎ֎ʹ΋͋Δ

    View Slide

  73. ύϑΥʔϚϯεͷ
    ଌఆɾվળ

    View Slide

  74. • Performance API
    ʹΑΔଌఆՕॴ
    • ύϑΥʔϚϯεվ
    ળϙΠϯτ
    Vue ʹ͓͚ΔύϑΥʔϚϯεଌఆ

    View Slide

  75. • ύϑΥʔϚϯεଌఆػೳ͕ೖΔ༧ఆ
    Vue DevTools v5 ͰΑΓศརʹ
    FPS ίϯϙʔωϯτͷඳը଎౓

    View Slide

  76. • ௒଎ຊʂϑϩϯτΤϯυΤϯδχΞඞಡ
    ҰൠతͳύϑΥʔϚϯεଌఆɾվળ
    https://webperf.guide/

    View Slide

  77. • ύϑΥʔϚϯεʹؔ͢Δ৘ใͷๅݿ
    Google Web Fundamentals
    https://developers.google.com/web/fundamentals/performance/

    View Slide

  78. • ΩϟογϡઓུɺΞʔΩςΫνϟͳͲʹ
    ͍ͭͯ͸ɺҎԼࢿྉ͕ࢀߟʹͳΔ͔΋


    ޫΛ௒͑ΔͨΊͷϑϩϯτΤϯυΞʔΩςΫνϟ

    https://speakerdeck.com/mizchi/guang-wochao-erutamefalsehurontoendoakitekutiya
    ύϑΥʔϚϯεͷΞʔΩςΫνϟ࿦

    View Slide

  79. αʔόʔαΠυ
    ϨϯμϦϯά

    View Slide

  80. • ॻ੶ͷίϥϜʹ΋ॻ͍͕ͨɺ৭ʑͱେม
    ͳͷͰཁݕ౼͢Δ͜ͱ
    • ҎԼURLͷεϥΠυ΋ࢀߟʹ

    You Need to know SSR

    https://speakerdeck.com/yosuke_furukawa/you-need-to-know-ssr
    ಋೖ͢Δ/͠ͳ͍͸ݕ౼͢Δ͜ͱ

    View Slide

  81. ·ͱΊ

    View Slide

  82. • Vue.jsೖ໳ͷதɾେن໛ΞϓϦ։ൃʹର͢Δิ଍
    ಺༰Λ࿩ͨ͠
    • ؀ڥηοτΞοϓʹ͍ͭͯ͸Vue CLI v3 ϕʔεͰ
    ͸େ෼ָʹͳΔ
    • ઃܭʹ͍ͭͯ͸ɺࢀߟʹͳΔצॴʹ͍ͭͯ࿩ͨ͠
    • ࣮૷ʹ͍ͭͯ͸ɺ࣮૷ͷ࢓ํɺ࣌ظπʔϧͷαϙʔ
    τ͞ΕΔ಺༰ɺଞͷํ๏ʹ͍ͭͯ࿩ͨ͠
    ·ͱΊ

    View Slide

  83. Vue.jsೖ໳ + ຊ೔ͷิ଍Talk ಺༰Ͱ
    େن໛։ൃ΍͍͖ͬͯ·͠ΐ͏ʂ

    View Slide

  84. Patreonͷࢧԉ
    ͓଴͓ͪͯ͠Γ·͢ʂ
    https://www.patreon.com/kazupon

    View Slide

  85. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View Slide