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

38bee248082f6071230de65e9d74a944?s=47 kazupon
December 04, 2018

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

38bee248082f6071230de65e9d74a944?s=128

kazupon

December 04, 2018
Tweet

Transcript

  1. 11.

    • ։ൃπʔϧ • ܕγεςϜ • σʔλӬଓԽ • ςετ • σόοά

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

    • ։ൃπʔϧ: Vue CLI • ελΠϧΨΠυ / ίʔσΟϯάΨΠυϥΠϯ:
 eslint-plugin-vue •

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

    • Ϗϧυ(όϯυϥ): 
 Vue Loader / rollup-plugin-vue • ΤσΟλ֦ு: Vetur

    • αʔόʔαΠυϨϯμϦϯά Vue.js͕ఏڙ͢Δ಺༰ ͜ΕΒ΍ɺαʔυύʔςΟͷ΋ͷΛඞཁ ʹԠͯ͡ಋೖͯ͠ΞϓϦ։ൃΛ͍ͯ͘͠
  4. 16.

    ΞϓϦ։ൃʹඞཁͳ΋ͷ • ίʔςΟϯά؀ڥ • UIϏϧμ • ςετ & CI ؀ڥ

    • σόοΨ / ϓϩϑΝΠϥ • Ϗϧμ • γϡϛϨʔλ
  5. 24.

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


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

    • Vue CLI v3 ʙ • ϓϥάΠϯϕʔε • pros:
 ։ൃ؀ڥͷߏஙɺ֦ுɺϝϯςφϯεָ͕


    ΄ͱΜͲ Vue CLI ͕໘౗ݟͯ͘ΕΔ • cons:
 ΤοδͳΧελϚΠζ͕ࠔ೉
 Vue CLI ͷϨʔϧ͔Β֎ΕΔ͜ͱ͸Ͱ͖ͳ͍ ৽ Vue CLI
  7. 26.

    • چ Vue CLI ͱ Vue.js ެࣜ webpack ςϯϓ ϨʔτΑΓ΋ɺ৽

    Vue CLI (Ҏ߱ Vue CLI v3 ͱݺͿ) ͷํ͕ɺ֨ஈʹָʂ • Ҏ߱Ͱ͸ɺVue CLI v3 ʹΑΔ։ൃ؀ڥ઀ ηοτΞοϓʹ͍ͭͯิ଍͢Δ
  8. 28.

    • τϥϯεύΠϥ: Babel • ܕγεςϜ: TypeScript • Ϧϯτ: ESLint •

    ίʔυϑΥʔϚολ: Prettier • ୯ମςετ: Chai / Mocha / Jest • E2Eςετ: NightWatch / Cypress • Ϗϧυ: webapck ։ൃπʔϧ
  9. 30.

    • npm / yarn ͷίϚϯυొ࿥ • ؀ڥม਺ʹΑΔΞϓϦઃఆ؅ཧ • .env Ͱ؅ཧՄೳ

    • όοΫΤϯυͷ API ϓϩΩγ؀ڥͷఏڙ • vue.config.js Ͱͷઃఆ ͦͷଞ
  10. 34.

    Vue CLI UI Ͱग़དྷΔࣄ • Vue CLI ͷ CLI ϕʔεͰग़དྷΔࣄ͸ͻͱ௨

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

    CLI ൛ʹ͸ͳ͍ػೳͷఏڙ • GUIϕʔεͷಛੑΛੜ͔ͯ͠ɺҎԼͷΑ͏ ͳ༷ʑͳػೳΛఏڙ͍ͯ͠Δ • ϓϩδΣΫτ؅ཧ • GUIϕʔεͷઃఆ •

    CLIϓϥάΠϯͷݕࡧˍҰཡ • CLIϓϥάΠϯͷΞοϓσʔτ • CLIϓϥάΠϯʹΑΔ։ൃࢧԉ֦ு … ͳͲ
  12. 42.

    • Visual Studio Code + Vetur ૊Έ߹Θͤਪ ঑ • Vue

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

    • Chrome + Vue DevTools ਪ঑ • Chrome DevTools ʹΑΔϓϩϑΝΠϦϯ

    ά • Vue DevToolsʹΑΔڧྗͳσόοά؀ڥ σόοΨͱϓϩϑΝΠϦϯά
  14. 46.

    • Vuex ͸ Vue CLI v3 ܦ༝ͰಋೖͰ͖ΔΑ͏ʹ ͳ͍ͬͯΔ • σΟϨΫτϦߏ଄Խ͸Ϣʔβʔ೚ҙ

    • Vuex ͷ TypeScript ؀ڥ ͕ਏ͍ͳΒɺVue.js ެࣜͰ͸ͳ͍͕ɺϔϧύΛ࢖͏ख΋͋Δ
 https://github.com/ktsn/vuex-type-helper ঢ়ଶ؅ཧϥΠϒϥϦ
  15. 47.
  16. 48.

    • Vue CLI v3 Ͱ͸ɺCypress ΋࢖͑ΔΑ͏ ʹͳͬͨ • Cypress ͷϓϥάΠϯͰE2E؀ڥΛڧԽ͠

    ͍ͨ৔߹͸ɺͦͷྲّྀʹै͏ඞཁ͕͋Δ
 https://docs.cypress.io/guides/tooling/plugins-guide.html#Use-Cases E2Eςετ؀ڥ
  17. 55.

    • Basic • Components • Containers • Pages ࢀߟ: ίϯϙʔωϯτͷ෼ྨ๏

    ޙչ͠ͳ͍ͨΊͷ Vue ίϯϙʔωϯτઃܭ: nakajmgࢯ https://ponyhead.booth.pm/items/1028529
  18. 59.

    • ҎԼ͕ࢀߟʹͳΔ • swagger ΍ OpenAPI Generator • Consumer Driven

    Contract ಉ࣌ʹ։ൃΛਐΊΔͨΊʹ͸ʁ BFFʢBackends For Frontendsʣ࣮ફʹ͓͚Δ3ͭͷΞϯνύλʔϯͱɺͦͷճආࡦ: ݹ઒ཅհࢯ http://www.atmarkit.co.jp/ait/articles/1808/31/news013.html
  19. 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
  20. 62.

    • UI࢓༷ݕ౼࣌ͷ֬ೝ
 ྫ: ແݶϖʔδωʔγϣϯͷ༗ແ & ڍಈ • αϙʔτ͢Δϒϥ΢βͷ֬ೝ
 https://developer.mozilla.org/ja/docs/Web/API/History#ϒϥ΢βʔ࣮૷ঢ়گ •

    ϧʔςΟϯάϥΠϒϥϦͷରॲ๏ͷ֬ೝ
 https://router.vuejs.org/ja/guide/advanced/scroll-behavior.html ࣄલʹରԠՄೳ͔֬ೝඞਢ
  21. 64.

    • ݎݻͳΞϓϦ։ൃʹ͢ΔͨΊʹ͸ɺಋೖ ͢΂͖ • Vue CLI v3 ͳΒ؆୯ʹಋೖ͢Δ͜ͱ͕Ͱ ͖Δ •

    Visual Studio Code + Vetur Ͱੜ࢈ੑߴ͍ ։ൃ͕Մೳͳͷ͸ɺલʹઆ໌ͨ͠ͱ͓Γ TypeScriptͷಋೖ
  22. 66.

    • ॻ੶Ͱ͸ vue init Ͱ karma + mocha ͳ؀ڥͰ ͷTDD؀ڥΛߏஙͨ͠

    • ࠓޙ͸ Jest Λਪ঑͢Δ • εφοϓγϣοτςετ͕ศར • Assertion / Mock ΋๊߹͍ͯͯ͠ɺ͜Εܥͷ ϥΠϒϥϦͲΕ࢖͏͔೰·ͳ͍͍ͯ͘ ϑϩϯτΤϯυʹ͓͚ΔTDD
  23. 68.

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

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

    • Vue DevTools v5 ʹ͸ҎԼͷػೳ͕ೖΔ༧ఆ 
 (ݱࡏbeta) • ϧʔςΟϯάཤྺ •

    ύϑΥʔϚϯεଌఆ • Vuexͷঢ়ଶ஋ฤू • …ͳͲ σόοΨ
  25. 71.
  26. 80.

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


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

    • Vue.jsೖ໳ͷதɾେن໛ΞϓϦ։ൃʹର͢Δิ଍ ಺༰Λ࿩ͨ͠ • ؀ڥηοτΞοϓʹ͍ͭͯ͸Vue CLI v3 ϕʔεͰ ͸େ෼ָʹͳΔ •

    ઃܭʹ͍ͭͯ͸ɺࢀߟʹͳΔצॴʹ͍ͭͯ࿩ͨ͠ • ࣮૷ʹ͍ͭͯ͸ɺ࣮૷ͷ࢓ํɺ࣌ظπʔϧͷαϙʔ τ͞ΕΔ಺༰ɺଞͷํ๏ʹ͍ͭͯ࿩ͨ͠ ·ͱΊ