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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ