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

Transcript

1. Vue.js ଓɾେن໛ΞϓϦ։ൃ 2018.12.04 @kazupon ReproTech #5
2. ࣗݾ঺հ
3. kazupon Vue.js ίΞνʔϜϝϯό Vue.js ೔ຊϢʔβʔάϧʔϓ୅ද vue-i18n OSS։ൃऀ vuejs/jp.vuejs.org ϝϯςφ @kazu_pon kazupon
4. ͸͡Ίʹ
5. ςʔϚ: Frontend Reliability
6. Vue.jsຊମ Vue Router Vuex Vue CLI ༷ʑͳن໛ʹରԠ͠΍͘͢ɺ͔ͭॊೈੑΛ͍࣋ͬͯΔ খن໛ େن໛ ϓϩάϨογϒϑϨʔϜϫʔΫ தن໛
7. • தɾେن໛޲͚ͳΞϓϦ։ൃ͸ɺ݁ߏΧ ΦεʹͳΓ΍͍͢ ॊೈ͗͢Δ൓໘…
8. • தɾେن໛޲͚ͷΞ ϓϦ։ൃʹ͍ͭͯ • Vue.jsೖ໳:
 8ষɺ9ষɺ10ষ ʹ ର͢Δิ଍తͳ͜ͱ Λ ࠓ೔࿩͢͜ͱ
9. தɾେن໛޲͚ ΞϓϦ։ൃ ʹ͍ͭͯ
10. • Ұൠతʹதن໛Ҏ্ͷΞϓϦ։ൃͰ͸ɺ ෳ਺ਓͰ։ൃ͢Δ • ͜ͷͨΊɺΞϓϦέʔγϣϯϑϨʔϜϫʔ ΫͰ͸ɺੜ࢈ੑ΍ϝϯςφϯεੑΛߟྀ ͨ͠΋ͷʹͳ͍ͬͯΔ ҰൠతͳΞϓϦέʔγϣϯϑϨʔϜϫʔΫ
11. • ։ൃπʔϧ • ܕγεςϜ • σʔλӬଓԽ • ςετ • σόοά • Ϗϧυ ΞϓϦέʔγϣϯϑϨʔϜϫʔΫ͕ఏڙ͢Δ߲໨ • ίʔσΟϯάΨΠυ ϥΠϯ • ن໿ • σβΠϯύλʔϯ • ϕετϓϥΫςΟε • ࠃࡍԽ
12. • ࠷ॳ͔ΒϑϧελοΫʹαϙʔτ͍ͯ͠ ͳ͍ • ͨͩɺVue.jsͱͯ͠ެࣜʹఏڙ͍ͯ͠Δ΋ ͷ͕͋Δ Vue.js͸ϓϩάϨογϒϑϨʔϜϫʔΫ
13. • ։ൃπʔϧ: Vue CLI • ελΠϧΨΠυ / ίʔσΟϯάΨΠυϥΠϯ:
 eslint-plugin-vue • ίϯϙʔωϯτγεςϜ:୯ҰϑΝΠϧίϯϙʔωϯτ • ϧʔςΟϯά: Vue Router • ঢ়ଶ؅ཧͱσʔλϑϩʔ: Vuex • ςετϢʔςΟϦςΟ: Vue Test Utils Vue.js͕ఏڙ͢Δ಺༰
14. • Ϗϧυ(όϯυϥ): 
 Vue Loader / rollup-plugin-vue • ΤσΟλ֦ு: Vetur • αʔόʔαΠυϨϯμϦϯά Vue.js͕ఏڙ͢Δ಺༰ ͜ΕΒ΍ɺαʔυύʔςΟͷ΋ͷΛඞཁ ʹԠͯ͡ಋೖͯ͠ΞϓϦ։ൃΛ͍ͯ͘͠
15. ΞϓϦ։ൃ: ։ൃ؀ڥηοτΞοϓ
16. ΞϓϦ։ൃʹඞཁͳ΋ͷ • ίʔςΟϯά؀ڥ • UIϏϧμ • ςετ & CI ؀ڥ • σόοΨ / ϓϩϑΝΠϥ • Ϗϧμ • γϡϛϨʔλ
17. ΞϓϦ։ൃʹඞཁͳ΋ͷ • ίʔυ؅ཧπʔϧ • Ξηοτ؅ཧ • ઃఆ؅ཧ • ࠃࡍԽϦιʔε؅ཧ ͜͏ͨ͠αϙʔτΛड͚ΒΕΔɺΞϓ Ϧ։ൃͷͨΊͷπʔϧ͕ඞཁ
18. ΞϓϦ։ൃΛ αϙʔτ͢Δπʔϧ
19. • IDE • GUI ϕʔεͷ౷߹։ൃ؀ڥ • CLI • λʔϛφϧΛϕʔεͱͨ͠։ൃ؀ڥ Ұൠతʹఏڙ͞Ε͍ͯΔ։ൃ؀ڥπʔϧ
20. • iOS: XCode • Android: Android Studio • Windows: Visual Studio • Web: Web Storm IDE
21. • Ruby on Rails • Angular CLI • Create React App CLI
22. • Vue CLI • Vue CLI UI Vue.js͕ఏڙ͢Δ։ൃ؀ڥπʔϧ ͜͏ͨ͠πʔϧͰΞϓϦ։ൃ ϓϩδΣΫτΛߏங͠ɺ ඞཁʹԠͯ͡ଞͷϥΠϒϥϦɺ πʔϧΛ૊Έ߹ΘͤΔ
23. Vue CLI ͷ ৽چͷҧ͍
24. • Vue CLI v1 ʙ v2 • ςϯϓϨʔτϕʔε • pros:
 ॊೈੑ͕ߴ͍
 ςϯϓϨʔτ࣍ୈͰࣗ༝ʹΧελϚΠζͰ͖Δ • cons:
 ϝϯςφϯε͕େม
 πʔϧ΍αʔυϕϯμͷϥΠϒϥϦΛࣗ෼Ͱόʔδϣϯ؅ ཧ͠ͳ͍ͱ͍͚ͳ͍ چ Vue CLI
25. • Vue CLI v3 ʙ • ϓϥάΠϯϕʔε • pros:
 ։ൃ؀ڥͷߏஙɺ֦ுɺϝϯςφϯεָ͕
 ΄ͱΜͲ Vue CLI ͕໘౗ݟͯ͘ΕΔ • cons:
 ΤοδͳΧελϚΠζ͕ࠔ೉
 Vue CLI ͷϨʔϧ͔Β֎ΕΔ͜ͱ͸Ͱ͖ͳ͍ ৽ Vue CLI
26. • چ Vue CLI ͱ Vue.js ެࣜ webpack ςϯϓ ϨʔτΑΓ΋ɺ৽ Vue CLI (Ҏ߱ Vue CLI v3 ͱݺͿ) ͷํ͕ɺ֨ஈʹָʂ • Ҏ߱Ͱ͸ɺVue CLI v3 ʹΑΔ։ൃ؀ڥ઀ ηοτΞοϓʹ͍ͭͯิ଍͢Δ
27. Vue CLI Ͱ ߏஙͰ͖Δ ඪ४։ൃ؀ڥ
28. • τϥϯεύΠϥ: Babel • ܕγεςϜ: TypeScript • Ϧϯτ: ESLint • ίʔυϑΥʔϚολ: Prettier • ୯ମςετ: Chai / Mocha / Jest • E2Eςετ: NightWatch / Cypress • Ϗϧυ: webapck ։ൃπʔϧ
29. • ϧʔςΟϯά: Vue Router • ঢ়ଶ؅ཧ: Vuex • ୯ମςετϢʔςΟϦςΟ: Vue Test Utils ϥΠϒϥϦ
30. • npm / yarn ͷίϚϯυొ࿥ • ؀ڥม਺ʹΑΔΞϓϦઃఆ؅ཧ • .env Ͱ؅ཧՄೳ • όοΫΤϯυͷ API ϓϩΩγ؀ڥͷఏڙ • vue.config.js Ͱͷઃఆ ͦͷଞ
31. CLIϓϥάΠϯʹΑΔ֦ு • ྫ: ࠃࡍԽͷ࢓૊Έ(i18n)Λಋೖ vue add i18n vue-cli-plugin-i18n my-app1 scafollding & Env settings
32. Vue CLI UI ʹ͍ͭͯ
33. Vue CLI UI vue ui ίϚϯυ࣮ߦ… Webϒϥ΢βʹGUIΞϓϦ͕ىಈ
34. Vue CLI UI Ͱग़དྷΔࣄ • Vue CLI ͷ CLI ϕʔεͰग़དྷΔࣄ͸ͻͱ௨ ΓͰ͖Δ (Vue CLI Λϥοϓͯ͠ಈ࡞) • ΞϓϦ։ൃϓϩδΣΫτ࡞੒ • CLIϓϥάΠϯ௥Ճ • ։ൃαʔόͷىಈ • ΞϓϦͷϏϧυ • webpackͷΠϯεϖΫγϣϯ …ͳͲ
35. CLI ൛ʹ͸ͳ͍ػೳͷఏڙ • GUIϕʔεͷಛੑΛੜ͔ͯ͠ɺҎԼͷΑ͏ ͳ༷ʑͳػೳΛఏڙ͍ͯ͠Δ • ϓϩδΣΫτ؅ཧ • GUIϕʔεͷઃఆ • CLIϓϥάΠϯͷݕࡧˍҰཡ • CLIϓϥάΠϯͷΞοϓσʔτ • CLIϓϥάΠϯʹΑΔ։ൃࢧԉ֦ு … ͳͲ
36. ϓϩδΣΫτ؅ཧ
37. GUIϕʔεͷઃఆ
38. CLIϓϥάΠϯݕࡧˍҰཡ
39. Vue CLI UI ʹΑΔ։ൃࢧԉ • i18nϦιʔεͷ؅ཧ (CLIϓϥάΠϯ)
40. • λʔϛφϧͰ͸ͳ͘ɺGUI ϕʔεͳͷͰί Ϛϯυ࣮ߦ͕ۤखͳਓʹ͸༏͍͠ • ։ൃνʔϜͰۤखҙࣝͷํ͕͍Δ৔߹͸ɺ ࢖ͬͯੜ࢈ੑΛߴΊΔͱΑ͍ • ߏஙͨ͠ϓϩδΣΫτͷ Vue CLI ͱ Vue CLI UI ͷฒଘར༻͸Մ Vue CLI UI ͸༏͍͠
41. ͞ΒͳΔ ։ൃ؀ڥͷڧԽ
42. • Visual Studio Code + Vetur ૊Έ߹Θͤਪ ঑ • Vue ޲͚ʹ࠷దՄ͞Εͨίʔυิ׬ • SFCͷγϯλοΫεϋΠϥΠτ • ڧྗͳ TypeScript ͷܕαϙʔτ ίʔσΟϯά؀ڥ
43. • Chrome + Vue DevTools ਪ঑ • Chrome DevTools ʹΑΔϓϩϑΝΠϦϯ ά • Vue DevToolsʹΑΔڧྗͳσόοά؀ڥ σόοΨͱϓϩϑΝΠϦϯά
44. • σϑΥϧτͰ͸ essntial ʹઃఆ͞Ε͍ͯ Δ • recommended Λਪ঑ • Vue.js։ൃऀͱίϛϡχςΟʹରͯ͠ཧղ Ͱ͖ΔҰ؏ੑΛ࣋ͬͨίʔυ eslint-plugin-vueͷϧʔϧΧςΰϦ
45. • RESTful ͳ API ʹରͯ͠͸ axios • GraphQL ͳέʔεʹରͯ͠͸ɺvue-apollo ͱ͔ ௨৴ϥΠϒϥϦ
46. • Vuex ͸ Vue CLI v3 ܦ༝ͰಋೖͰ͖ΔΑ͏ʹ ͳ͍ͬͯΔ • σΟϨΫτϦߏ଄Խ͸Ϣʔβʔ೚ҙ • Vuex ͷ TypeScript ؀ڥ ͕ਏ͍ͳΒɺVue.js ެࣜͰ͸ͳ͍͕ɺϔϧύΛ࢖͏ख΋͋Δ
 https://github.com/ktsn/vuex-type-helper ঢ়ଶ؅ཧϥΠϒϥϦ
47. • Vue CLI v3 ʹ͓͍ͯ΋ weback-dev-server Λར༻͍ͯ͠ΔͨΊɺϓϩΩγઃఆ͸ै དྷͲ͓Γ • ։ൃ؀ڥ޲͚ʹmock࣮૷ͨ͠ Express ͷ ίʔυ͸ vue.config.js ʹઃఆ͢Δ όοΫΤϯυͱͷϓϩΩγ؀ڥߏங
48. • Vue CLI v3 Ͱ͸ɺCypress ΋࢖͑ΔΑ͏ ʹͳͬͨ • Cypress ͷϓϥάΠϯͰE2E؀ڥΛڧԽ͠ ͍ͨ৔߹͸ɺͦͷྲّྀʹै͏ඞཁ͕͋Δ
 https://docs.cypress.io/guides/tooling/plugins-guide.html#Use-Cases E2Eςετ؀ڥ
49. ΞϓϦ։ൃ: ઃܭ
50. • ॻ੶Ͱ͸ҎԼͷ߲໨ͷઃܭʹ͍ͭͯղઆ • ίϯϙʔωϯτઃܭ • ঢ়ଶϞσϦϯάͱσʔλϑϩʔઃܭ • ϧʔςΟϯάઃܭ ΞϓϦέʔγϣϯઃܭ
51. ίϯϙʔωϯτ ઃܭ
52. • Ұ؏ੑ
 ΞϓϦέʔγϣϯશମͰ౷Ұײͷ͋ΔίϯϙʔωϯτΛ ։ൃͰ͖Δ • ॏෳഉআ
 ಉ͡Α͏ͳػೳΛఏڙ͢Δίϯϙʔωϯτ։ൃΛഉআͰ ͖Δ • ੜ࢈ੑ޲্
 νʔϜͰ։ൃ͢Δίϯϙʔωϯτͷେ࿮Λڞ༗͢Δ͜ͱ Ͱ։ൃޮ཰ΛߴΊΒΕΔ ίϯϙʔωϯτઃܭͷҙٛ
53. • ίϯϙʔωϯτ ͷཻ౓ͱ෼ྨ͸ Atomic Design ʹै͍ɺSFCͱ ͯ͠நग़ • ίϯϙʔωϯτ ͷAPIΛઃܭ Atomic Design
54. • No • ։ൃϓϩδΣΫτʹ͓͍ͯίϯϙʔωϯτ ͷடংΛҡ࣋Ͱ͖ΔͳΒɺଞͷ෼ྨख๏͕ ͋Ε͹ͦΕΛ࢖͑͹Α͍ • ૊৫ಠࣗʹΦϨΦϨ෼ྨख๏Ͱ΍͍ͬͯ͘ ࣗ৴͕͋ΔͳΒ͹ɺͦΕͰ΋͍͍ͱࢥ͏ ඞͣAtomic DesignͰͳ͚Ε͹͍͚ͳ͍ͷ͔ʁ
55. • Basic • Components • Containers • Pages ࢀߟ: ίϯϙʔωϯτͷ෼ྨ๏ ޙչ͠ͳ͍ͨΊͷ Vue ίϯϙʔωϯτઃܭ: nakajmgࢯ https://ponyhead.booth.pm/items/1028529
56. ঢ়ଶϞσϦϯά ͱ σʔλϑϩʔઃܭ
57. • ΞϓϦͷUI࢓༷͔ Βঢ়ଶ(Ϟσϧ)ʹ མͱ͠ࠐΉ • σʔλϑϩʔͷ؍ ఺͔Β͍ͭͰʹɺ API΋͜͏ͳΔ΂ ͖ͱઃܭ͕ͪ͠ ϞσϦϯάͱσʔλϑϩʔ
58. • ઃܭͨ͠ϞσϧͱAPI͸ɺϑϩϯτΤϯυࢹ఺ ʹΑΔઃܭ • མͱ͠ࠐΜͩϞσϧͱAPIͷ࢓༷͸ɺόοΫΤ ϯυଆͱೝࣝᴥᴪ͕ͳ͍Α͏ʹ͠ͳ͍ͱ͍͚ͳ ͍ • ίϛϡχέʔγϣϯ΋ॏཁͰ͋Δ͕ɺόοΫΤ ϯυଆͱೝࣝᴥᴪΛݮΒ͢޻෉(࢓૊Έ)΋ඞཁ όοΫΤϯυଆͱڠௐ͢Δʹ͸ʁ
59. • ҎԼ͕ࢀߟʹͳΔ • swagger ΍ OpenAPI Generator • Consumer Driven Contract ಉ࣌ʹ։ൃΛਐΊΔͨΊʹ͸ʁ BFFʢBackends For Frontendsʣ࣮ફʹ͓͚Δ3ͭͷΞϯνύλʔϯͱɺͦͷճආࡦ: ݹ઒ཅհࢯ http://www.atmarkit.co.jp/ait/articles/1808/31/news013.html
60. ϧʔςΟϯά ઃܭ
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
62. • UI࢓༷ݕ౼࣌ͷ֬ೝ
 ྫ: ແݶϖʔδωʔγϣϯͷ༗ແ & ڍಈ • αϙʔτ͢Δϒϥ΢βͷ֬ೝ
 https://developer.mozilla.org/ja/docs/Web/API/History#ϒϥ΢βʔ࣮૷ঢ়گ • ϧʔςΟϯάϥΠϒϥϦͷରॲ๏ͷ֬ೝ
 https://router.vuejs.org/ja/guide/advanced/scroll-behavior.html ࣄલʹରԠՄೳ͔֬ೝඞਢ
63. ΞϓϦ։ൃ: ࣮૷
64. • ݎݻͳΞϓϦ։ൃʹ͢ΔͨΊʹ͸ɺಋೖ ͢΂͖ • Vue CLI v3 ͳΒ؆୯ʹಋೖ͢Δ͜ͱ͕Ͱ ͖Δ • Visual Studio Code + Vetur Ͱੜ࢈ੑߴ͍ ։ൃ͕Մೳͳͷ͸ɺલʹઆ໌ͨ͠ͱ͓Γ TypeScriptͷಋೖ
65. ࣮૷શൠ ʹ͍ͭͯ
66. • ॻ੶Ͱ͸ vue init Ͱ karma + mocha ͳ؀ڥͰ ͷTDD؀ڥΛߏஙͨ͠ • ࠓޙ͸ Jest Λਪ঑͢Δ • εφοϓγϣοτςετ͕ศར • Assertion / Mock ΋๊߹͍ͯͯ͠ɺ͜Εܥͷ ϥΠϒϥϦͲΕ࢖͏͔೰·ͳ͍͍ͯ͘ ϑϩϯτΤϯυʹ͓͚ΔTDD
67. • ίϯϙʔωϯτɺσʔλϑϩʔɺϧʔςΟϯάͷ ࣮૷͸TDDͰ΍͍ͬͯΔ͕શͯ΍Δඞཁͳ͍ͱߟ ͍͑ͯΔ • ҰൠతʹUIͷ࢓༷͸සൟʹଟ͘ൃੜ͢ΔͨΊຖճ ςετมߋίετ͕େม • ·ͨTDDͰUIͷߏ଄΍ݟͨ໨΍Ξχϝʔγϣϯͳ ͲͷڍಈΛ֬ೝ͢Δͷ͸ਏ͍ͱ͍͏໰୊͕͋Δ TDDʹΑΔΞϓϦ։ൃ
68. • ίϯϙʔωϯτͷ࣮૷: • Storybook + reg-suite (ଞʹ΋͋Δ) ʹΑΔ Visual Regression Testing
 
 https://github.com/mojoaxel/awesome-regression-testing • σʔλϑϩʔͱϧʔςΟϯάͷ࣮૷ • TDDͰϩδοΫͷڍಈΛνΣοΫ TDD͸͏·͘࢖͍෼͚Δͱ͍͍͔΋
69. ։ൃαʔό ͱ σόοά
70. • Vue DevTools v5 ʹ͸ҎԼͷػೳ͕ೖΔ༧ఆ 
 (ݱࡏbeta) • ϧʔςΟϯάཤྺ • ύϑΥʔϚϯεଌఆ • Vuexͷঢ়ଶ஋ฤू • …ͳͲ σόοΨ
71. E2Eςετ
72. • Cypress:
 Vue CLI v3 ͰެࣜʹηοτΞοϓΛఏڙ • Puppeteer:
 ಠࣗʹ؀ڥߏங͕ඞཁ NightWatchҎ֎ʹ΋͋Δ
73. ύϑΥʔϚϯεͷ ଌఆɾվળ
74. • Performance API ʹΑΔଌఆՕॴ • ύϑΥʔϚϯεվ ળϙΠϯτ Vue ʹ͓͚ΔύϑΥʔϚϯεଌఆ
75. • ύϑΥʔϚϯεଌఆػೳ͕ೖΔ༧ఆ Vue DevTools v5 ͰΑΓศརʹ FPS ίϯϙʔωϯτͷඳը଎౓
76. • ௒଎ຊʂϑϩϯτΤϯυΤϯδχΞඞಡ ҰൠతͳύϑΥʔϚϯεଌఆɾվળ https://webperf.guide/
77. • ύϑΥʔϚϯεʹؔ͢Δ৘ใͷๅݿ Google Web Fundamentals https://developers.google.com/web/fundamentals/performance/
78. • ΩϟογϡઓུɺΞʔΩςΫνϟͳͲʹ ͍ͭͯ͸ɺҎԼࢿྉ͕ࢀߟʹͳΔ͔΋
 
 ޫΛ௒͑ΔͨΊͷϑϩϯτΤϯυΞʔΩςΫνϟ
 https://speakerdeck.com/mizchi/guang-wochao-erutamefalsehurontoendoakitekutiya ύϑΥʔϚϯεͷΞʔΩςΫνϟ࿦
79. αʔόʔαΠυ ϨϯμϦϯά
80. • ॻ੶ͷίϥϜʹ΋ॻ͍͕ͨɺ৭ʑͱେม ͳͷͰཁݕ౼͢Δ͜ͱ • ҎԼURLͷεϥΠυ΋ࢀߟʹ
 You Need to know SSR
 https://speakerdeck.com/yosuke_furukawa/you-need-to-know-ssr ಋೖ͢Δ/͠ͳ͍͸ݕ౼͢Δ͜ͱ
81. ·ͱΊ
82. • Vue.jsೖ໳ͷதɾେن໛ΞϓϦ։ൃʹର͢Δิ଍ ಺༰Λ࿩ͨ͠ • ؀ڥηοτΞοϓʹ͍ͭͯ͸Vue CLI v3 ϕʔεͰ ͸େ෼ָʹͳΔ • ઃܭʹ͍ͭͯ͸ɺࢀߟʹͳΔצॴʹ͍ͭͯ࿩ͨ͠ • ࣮૷ʹ͍ͭͯ͸ɺ࣮૷ͷ࢓ํɺ࣌ظπʔϧͷαϙʔ τ͞ΕΔ಺༰ɺଞͷํ๏ʹ͍ͭͯ࿩ͨ͠ ·ͱΊ
83. Vue.jsೖ໳ + ຊ೔ͷิ଍Talk ಺༰Ͱ େن໛։ൃ΍͍͖ͬͯ·͠ΐ͏ʂ
84. Patreonͷࢧԉ ͓଴͓ͪͯ͠Γ·͢ʂ https://www.patreon.com/kazupon
85. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ