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

by kazupon

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

͸͡Ίʹ

Slide 5

Slide 5 text

ςʔϚ: Frontend Reliability

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

• தɾେن໛޲͚ͷΞ ϓϦ։ൃʹ͍ͭͯ • Vue.jsೖ໳:  8ষɺ9ষɺ10ষ ʹ ର͢Δิ଍తͳ͜ͱ Λ ࠓ೔࿩͢͜ͱ

Slide 9

Slide 9 text

தɾେن໛޲͚ ΞϓϦ։ൃ ʹ͍ͭͯ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Vue CLI ͷ ৽چͷҧ͍

Slide 24

Slide 24 text

• Vue CLI v1 ʙ v2 • ςϯϓϨʔτϕʔε • pros:  ॊೈੑ͕ߴ͍  ςϯϓϨʔτ࣍ୈͰࣗ༝ʹΧελϚΠζͰ͖Δ • cons:  ϝϯςφϯε͕େม  πʔϧ΍αʔυϕϯμͷϥΠϒϥϦΛࣗ෼Ͱόʔδϣϯ؅ ཧ͠ͳ͍ͱ͍͚ͳ͍ چ Vue CLI

Slide 25

Slide 25 text

• Vue CLI v3 ʙ • ϓϥάΠϯϕʔε • pros:  ։ൃ؀ڥͷߏஙɺ֦ுɺϝϯςφϯεָ͕  ΄ͱΜͲ Vue CLI ͕໘౗ݟͯ͘ΕΔ • cons:  ΤοδͳΧελϚΠζ͕ࠔ೉  Vue CLI ͷϨʔϧ͔Β֎ΕΔ͜ͱ͸Ͱ͖ͳ͍ ৽ Vue CLI

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Vue CLI UI ʹ͍ͭͯ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ϓϩδΣΫτ؅ཧ

Slide 37

Slide 37 text

GUIϕʔεͷઃఆ

Slide 38

Slide 38 text

CLIϓϥάΠϯݕࡧˍҰཡ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

͞ΒͳΔ ։ൃ؀ڥͷڧԽ

Slide 42

Slide 42 text

• Visual Studio Code + Vetur ૊Έ߹Θͤਪ ঑ • Vue ޲͚ʹ࠷దՄ͞Εͨίʔυิ׬ • SFCͷγϯλοΫεϋΠϥΠτ • ڧྗͳ TypeScript ͷܕαϙʔτ ίʔσΟϯά؀ڥ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

• Vuex ͸ Vue CLI v3 ܦ༝ͰಋೖͰ͖ΔΑ͏ʹ ͳ͍ͬͯΔ • σΟϨΫτϦߏ଄Խ͸Ϣʔβʔ೚ҙ • Vuex ͷ TypeScript ؀ڥ ͕ਏ͍ͳΒɺVue.js ެࣜͰ͸ͳ͍͕ɺϔϧύΛ࢖͏ख΋͋Δ  https://github.com/ktsn/vuex-type-helper ঢ়ଶ؅ཧϥΠϒϥϦ

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

• Vue CLI v3 Ͱ͸ɺCypress ΋࢖͑ΔΑ͏ ʹͳͬͨ • Cypress ͷϓϥάΠϯͰE2E؀ڥΛڧԽ͠ ͍ͨ৔߹͸ɺͦͷྲّྀʹै͏ඞཁ͕͋Δ  https://docs.cypress.io/guides/tooling/plugins-guide.html#Use-Cases E2Eςετ؀ڥ

Slide 49

Slide 49 text

ΞϓϦ։ൃ: ઃܭ

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

ίϯϙʔωϯτ ઃܭ

Slide 52

Slide 52 text

• Ұ؏ੑ  ΞϓϦέʔγϣϯશମͰ౷Ұײͷ͋ΔίϯϙʔωϯτΛ ։ൃͰ͖Δ • ॏෳഉআ  ಉ͡Α͏ͳػೳΛఏڙ͢Δίϯϙʔωϯτ։ൃΛഉআͰ ͖Δ • ੜ࢈ੑ޲্  νʔϜͰ։ൃ͢Δίϯϙʔωϯτͷେ࿮Λڞ༗͢Δ͜ͱ Ͱ։ൃޮ཰ΛߴΊΒΕΔ ίϯϙʔωϯτઃܭͷҙٛ

Slide 53

Slide 53 text

• ίϯϙʔωϯτ ͷཻ౓ͱ෼ྨ͸ Atomic Design ʹै͍ɺSFCͱ ͯ͠நग़ • ίϯϙʔωϯτ ͷAPIΛઃܭ Atomic Design

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

ঢ়ଶϞσϦϯά ͱ σʔλϑϩʔઃܭ

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

ϧʔςΟϯά ઃܭ

Slide 61

Slide 61 text

• Scrolling Amnesia • ϒϥ΢βͷ໭ΔϘλϯ Λԡͨ࣌͠ʹظ଴͢Δ HTML͕ϩʔυ͞Εͳ ͔ͬͨ࣌ʹى͜Δ໰୊ • Α͋͘Δέʔε:  ແݶϖʔδωʔγϣϯ εΫϩʔϧҐஔͷ૕ࣦ໰୊ 7 Principles of Rich Web Applications  https://rauchg.com/2014/7-principles-of-rich-web-applications#dont-break-history-enhance-it

Slide 62

Slide 62 text

• UI࢓༷ݕ౼࣌ͷ֬ೝ  ྫ: ແݶϖʔδωʔγϣϯͷ༗ແ & ڍಈ • αϙʔτ͢Δϒϥ΢βͷ֬ೝ  https://developer.mozilla.org/ja/docs/Web/API/History#ϒϥ΢βʔ࣮૷ঢ়گ • ϧʔςΟϯάϥΠϒϥϦͷରॲ๏ͷ֬ೝ  https://router.vuejs.org/ja/guide/advanced/scroll-behavior.html ࣄલʹରԠՄೳ͔֬ೝඞਢ

Slide 63

Slide 63 text

ΞϓϦ։ൃ: ࣮૷

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

࣮૷શൠ ʹ͍ͭͯ

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

• ίϯϙʔωϯτͷ࣮૷: • Storybook + reg-suite (ଞʹ΋͋Δ) ʹΑΔ Visual Regression Testing    https://github.com/mojoaxel/awesome-regression-testing • σʔλϑϩʔͱϧʔςΟϯάͷ࣮૷ • TDDͰϩδοΫͷڍಈΛνΣοΫ TDD͸͏·͘࢖͍෼͚Δͱ͍͍͔΋

Slide 69

Slide 69 text

։ൃαʔό ͱ σόοά

Slide 70

Slide 70 text

• Vue DevTools v5 ʹ͸ҎԼͷػೳ͕ೖΔ༧ఆ   (ݱࡏbeta) • ϧʔςΟϯάཤྺ • ύϑΥʔϚϯεଌఆ • Vuexͷঢ়ଶ஋ฤू • …ͳͲ σόοΨ

Slide 71

Slide 71 text

E2Eςετ

Slide 72

Slide 72 text

• Cypress:  Vue CLI v3 ͰެࣜʹηοτΞοϓΛఏڙ • Puppeteer:  ಠࣗʹ؀ڥߏங͕ඞཁ NightWatchҎ֎ʹ΋͋Δ

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

• ΩϟογϡઓུɺΞʔΩςΫνϟͳͲʹ ͍ͭͯ͸ɺҎԼࢿྉ͕ࢀߟʹͳΔ͔΋    ޫΛ௒͑ΔͨΊͷϑϩϯτΤϯυΞʔΩςΫνϟ  https://speakerdeck.com/mizchi/guang-wochao-erutamefalsehurontoendoakitekutiya ύϑΥʔϚϯεͷΞʔΩςΫνϟ࿦

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

• ॻ੶ͷίϥϜʹ΋ॻ͍͕ͨɺ৭ʑͱେม ͳͷͰཁݕ౼͢Δ͜ͱ • ҎԼURLͷεϥΠυ΋ࢀߟʹ  You Need to know SSR  https://speakerdeck.com/yosuke_furukawa/you-need-to-know-ssr ಋೖ͢Δ/͠ͳ͍͸ݕ౼͢Δ͜ͱ

Slide 81

Slide 81 text

·ͱΊ

Slide 82

Slide 82 text

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