Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js 続・大規模アプリ開発
Search
kazupon
December 04, 2018
Programming
15
6.2k
Vue.js 続・大規模アプリ開発
kazupon
December 04, 2018
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
500
Vapor Revolution
kazupon
3
3.6k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.9k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
AIのメモリー
watany
12
1.2k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
2
460
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
350
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
920
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
270
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
6
1.6k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
800
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
Being A Developer After 40
akosma
90
590k
KATA
mclloyd
31
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Why Our Code Smells
bkeepers
PRO
337
57k
Writing Fast Ruby
sferik
628
62k
Raft: Consensus for Rubyists
vanstee
140
7k
Designing for Performance
lara
610
69k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Balancing Empowerment & Direction
lara
1
530
A designer walks into a library…
pauljervisheath
207
24k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Transcript
Vue.js ଓɾେنΞϓϦ։ൃ 2018.12.04 @kazupon ReproTech #5
ࣗݾհ
kazupon Vue.js ίΞνʔϜϝϯό Vue.js ຊϢʔβʔάϧʔϓද vue-i18n OSS։ൃऀ vuejs/jp.vuejs.org ϝϯςφ @kazu_pon
kazupon
͡Ίʹ
ςʔϚ: Frontend Reliability
Vue.jsຊମ Vue Router Vuex Vue CLI ༷ʑͳنʹରԠ͘͢͠ɺ͔ͭॊೈੑΛ͍࣋ͬͯΔ খن େن ϓϩάϨογϒϑϨʔϜϫʔΫ
தن
• தɾେن͚ͳΞϓϦ։ൃɺ݁ߏΧ ΦεʹͳΓ͍͢ ॊೈ͗͢Δ໘…
• தɾେن͚ͷΞ ϓϦ։ൃʹ͍ͭͯ • Vue.jsೖ: 8ষɺ9ষɺ10ষ ʹ ର͢Δิతͳ͜ͱ Λ ࠓ͢͜ͱ
தɾେن͚ ΞϓϦ։ൃ ʹ͍ͭͯ
• ҰൠతʹதنҎ্ͷΞϓϦ։ൃͰɺ ෳਓͰ։ൃ͢Δ • ͜ͷͨΊɺΞϓϦέʔγϣϯϑϨʔϜϫʔ ΫͰɺੜ࢈ੑϝϯςφϯεੑΛߟྀ ͨ͠ͷʹͳ͍ͬͯΔ ҰൠతͳΞϓϦέʔγϣϯϑϨʔϜϫʔΫ
• ։ൃπʔϧ • ܕγεςϜ • σʔλӬଓԽ • ςετ • σόοά
• Ϗϧυ ΞϓϦέʔγϣϯϑϨʔϜϫʔΫ͕ఏڙ͢Δ߲ • ίʔσΟϯάΨΠυ ϥΠϯ • ن • σβΠϯύλʔϯ • ϕετϓϥΫςΟε • ࠃࡍԽ
• ࠷ॳ͔ΒϑϧελοΫʹαϙʔτ͍ͯ͠ ͳ͍ • ͨͩɺVue.jsͱͯ͠ެࣜʹఏڙ͍ͯ͠Δ ͷ͕͋Δ Vue.jsϓϩάϨογϒϑϨʔϜϫʔΫ
• ։ൃπʔϧ: Vue CLI • ελΠϧΨΠυ / ίʔσΟϯάΨΠυϥΠϯ: eslint-plugin-vue •
ίϯϙʔωϯτγεςϜ:୯ҰϑΝΠϧίϯϙʔωϯτ • ϧʔςΟϯά: Vue Router • ঢ়ଶཧͱσʔλϑϩʔ: Vuex • ςετϢʔςΟϦςΟ: Vue Test Utils Vue.js͕ఏڙ͢Δ༰
• Ϗϧυ(όϯυϥ): Vue Loader / rollup-plugin-vue • ΤσΟλ֦ு: Vetur
• αʔόʔαΠυϨϯμϦϯά Vue.js͕ఏڙ͢Δ༰ ͜ΕΒɺαʔυύʔςΟͷͷΛඞཁ ʹԠͯ͡ಋೖͯ͠ΞϓϦ։ൃΛ͍ͯ͘͠
ΞϓϦ։ൃ: ։ൃڥηοτΞοϓ
ΞϓϦ։ൃʹඞཁͳͷ • ίʔςΟϯάڥ • UIϏϧμ • ςετ & CI ڥ
• σόοΨ / ϓϩϑΝΠϥ • Ϗϧμ • γϡϛϨʔλ
ΞϓϦ։ൃʹඞཁͳͷ • ίʔυཧπʔϧ • Ξηοτཧ • ઃఆཧ • ࠃࡍԽϦιʔεཧ ͜͏ͨ͠αϙʔτΛड͚ΒΕΔɺΞϓ
Ϧ։ൃͷͨΊͷπʔϧ͕ඞཁ
ΞϓϦ։ൃΛ αϙʔτ͢Δπʔϧ
• IDE • GUI ϕʔεͷ౷߹։ൃڥ • CLI • λʔϛφϧΛϕʔεͱͨ͠։ൃڥ Ұൠతʹఏڙ͞Ε͍ͯΔ։ൃڥπʔϧ
• iOS: XCode • Android: Android Studio • Windows: Visual
Studio • Web: Web Storm IDE
• Ruby on Rails • Angular CLI • Create React
App CLI
• Vue CLI • Vue CLI UI Vue.js͕ఏڙ͢Δ։ൃڥπʔϧ ͜͏ͨ͠πʔϧͰΞϓϦ։ൃ ϓϩδΣΫτΛߏங͠ɺ
ඞཁʹԠͯ͡ଞͷϥΠϒϥϦɺ πʔϧΛΈ߹ΘͤΔ
Vue CLI ͷ ৽چͷҧ͍
• Vue CLI v1 ʙ v2 • ςϯϓϨʔτϕʔε • pros:
ॊೈੑ͕ߴ͍ ςϯϓϨʔτ࣍ୈͰࣗ༝ʹΧελϚΠζͰ͖Δ • cons: ϝϯςφϯε͕େม πʔϧαʔυϕϯμͷϥΠϒϥϦΛࣗͰόʔδϣϯ ཧ͠ͳ͍ͱ͍͚ͳ͍ چ Vue CLI
• Vue CLI v3 ʙ • ϓϥάΠϯϕʔε • pros: ։ൃڥͷߏஙɺ֦ுɺϝϯςφϯεָ͕
΄ͱΜͲ Vue CLI ͕໘ݟͯ͘ΕΔ • cons: ΤοδͳΧελϚΠζ͕ࠔ Vue CLI ͷϨʔϧ͔Β֎ΕΔ͜ͱͰ͖ͳ͍ ৽ Vue CLI
• چ Vue CLI ͱ Vue.js ެࣜ webpack ςϯϓ ϨʔτΑΓɺ৽
Vue CLI (Ҏ߱ Vue CLI v3 ͱݺͿ) ͷํ͕ɺ֨ஈʹָʂ • Ҏ߱ͰɺVue CLI v3 ʹΑΔ։ൃڥ ηοτΞοϓʹ͍ͭͯิ͢Δ
Vue CLI Ͱ ߏஙͰ͖Δ ඪ४։ൃڥ
• τϥϯεύΠϥ: Babel • ܕγεςϜ: TypeScript • Ϧϯτ: ESLint •
ίʔυϑΥʔϚολ: Prettier • ୯ମςετ: Chai / Mocha / Jest • E2Eςετ: NightWatch / Cypress • Ϗϧυ: webapck ։ൃπʔϧ
• ϧʔςΟϯά: Vue Router • ঢ়ଶཧ: Vuex • ୯ମςετϢʔςΟϦςΟ: Vue
Test Utils ϥΠϒϥϦ
• npm / yarn ͷίϚϯυొ • ڥมʹΑΔΞϓϦઃఆཧ • .env ͰཧՄೳ
• όοΫΤϯυͷ API ϓϩΩγڥͷఏڙ • vue.config.js Ͱͷઃఆ ͦͷଞ
CLIϓϥάΠϯʹΑΔ֦ு • ྫ: ࠃࡍԽͷΈ(i18n)Λಋೖ vue add i18n vue-cli-plugin-i18n my-app1 scafollding
& Env settings
Vue CLI UI ʹ͍ͭͯ
Vue CLI UI vue ui ίϚϯυ࣮ߦ… WebϒϥβʹGUIΞϓϦ͕ىಈ
Vue CLI UI Ͱग़དྷΔࣄ • Vue CLI ͷ CLI ϕʔεͰग़དྷΔࣄͻͱ௨
ΓͰ͖Δ (Vue CLI Λϥοϓͯ͠ಈ࡞) • ΞϓϦ։ൃϓϩδΣΫτ࡞ • CLIϓϥάΠϯՃ • ։ൃαʔόͷىಈ • ΞϓϦͷϏϧυ • webpackͷΠϯεϖΫγϣϯ …ͳͲ
CLI ൛ʹͳ͍ػೳͷఏڙ • GUIϕʔεͷಛੑΛੜ͔ͯ͠ɺҎԼͷΑ͏ ͳ༷ʑͳػೳΛఏڙ͍ͯ͠Δ • ϓϩδΣΫτཧ • GUIϕʔεͷઃఆ •
CLIϓϥάΠϯͷݕࡧˍҰཡ • CLIϓϥάΠϯͷΞοϓσʔτ • CLIϓϥάΠϯʹΑΔ։ൃࢧԉ֦ு … ͳͲ
ϓϩδΣΫτཧ
GUIϕʔεͷઃఆ
CLIϓϥάΠϯݕࡧˍҰཡ
Vue CLI UI ʹΑΔ։ൃࢧԉ • i18nϦιʔεͷཧ (CLIϓϥάΠϯ)
• λʔϛφϧͰͳ͘ɺGUI ϕʔεͳͷͰί Ϛϯυ࣮ߦ͕ۤखͳਓʹ༏͍͠ • ։ൃνʔϜͰۤखҙࣝͷํ͕͍Δ߹ɺ ͬͯੜ࢈ੑΛߴΊΔͱΑ͍ • ߏஙͨ͠ϓϩδΣΫτͷ Vue
CLI ͱ Vue CLI UI ͷฒଘར༻Մ Vue CLI UI ༏͍͠
͞ΒͳΔ ։ൃڥͷڧԽ
• Visual Studio Code + Vetur Έ߹Θͤਪ • Vue
͚ʹ࠷దՄ͞Εͨίʔυิ • SFCͷγϯλοΫεϋΠϥΠτ • ڧྗͳ TypeScript ͷܕαϙʔτ ίʔσΟϯάڥ
• Chrome + Vue DevTools ਪ • Chrome DevTools ʹΑΔϓϩϑΝΠϦϯ
ά • Vue DevToolsʹΑΔڧྗͳσόοάڥ σόοΨͱϓϩϑΝΠϦϯά
• σϑΥϧτͰ essntial ʹઃఆ͞Ε͍ͯ Δ • recommended Λਪ • Vue.js։ൃऀͱίϛϡχςΟʹରͯ͠ཧղ
Ͱ͖ΔҰ؏ੑΛ࣋ͬͨίʔυ eslint-plugin-vueͷϧʔϧΧςΰϦ
• RESTful ͳ API ʹରͯ͠ axios • GraphQL ͳέʔεʹରͯ͠ɺvue-apollo ͱ͔
௨৴ϥΠϒϥϦ
• Vuex Vue CLI v3 ܦ༝ͰಋೖͰ͖ΔΑ͏ʹ ͳ͍ͬͯΔ • σΟϨΫτϦߏԽϢʔβʔҙ
• Vuex ͷ TypeScript ڥ ͕ਏ͍ͳΒɺVue.js ެࣜͰͳ͍͕ɺϔϧύΛ͏ख͋Δ https://github.com/ktsn/vuex-type-helper ঢ়ଶཧϥΠϒϥϦ
• Vue CLI v3 ʹ͓͍ͯ weback-dev-server Λར༻͍ͯ͠ΔͨΊɺϓϩΩγઃఆै དྷͲ͓Γ • ։ൃڥ͚ʹmock࣮ͨ͠
Express ͷ ίʔυ vue.config.js ʹઃఆ͢Δ όοΫΤϯυͱͷϓϩΩγڥߏங
• Vue CLI v3 ͰɺCypress ͑ΔΑ͏ ʹͳͬͨ • Cypress ͷϓϥάΠϯͰE2EڥΛڧԽ͠
͍ͨ߹ɺͦͷྲّྀʹै͏ඞཁ͕͋Δ https://docs.cypress.io/guides/tooling/plugins-guide.html#Use-Cases E2Eςετڥ
ΞϓϦ։ൃ: ઃܭ
• ॻ੶ͰҎԼͷ߲ͷઃܭʹ͍ͭͯղઆ • ίϯϙʔωϯτઃܭ • ঢ়ଶϞσϦϯάͱσʔλϑϩʔઃܭ • ϧʔςΟϯάઃܭ ΞϓϦέʔγϣϯઃܭ
ίϯϙʔωϯτ ઃܭ
• Ұ؏ੑ ΞϓϦέʔγϣϯશମͰ౷Ұײͷ͋ΔίϯϙʔωϯτΛ ։ൃͰ͖Δ • ॏෳഉআ ಉ͡Α͏ͳػೳΛఏڙ͢Δίϯϙʔωϯτ։ൃΛഉআͰ ͖Δ • ੜ࢈ੑ্
νʔϜͰ։ൃ͢ΔίϯϙʔωϯτͷେΛڞ༗͢Δ͜ͱ Ͱ։ൃޮΛߴΊΒΕΔ ίϯϙʔωϯτઃܭͷҙٛ
• ίϯϙʔωϯτ ͷཻͱྨ Atomic Design ʹै͍ɺSFCͱ ͯ͠நग़ • ίϯϙʔωϯτ ͷAPIΛઃܭ
Atomic Design
• No • ։ൃϓϩδΣΫτʹ͓͍ͯίϯϙʔωϯτ ͷடংΛҡ࣋Ͱ͖ΔͳΒɺଞͷྨख๏͕ ͋ΕͦΕΛ͑Α͍ • ৫ಠࣗʹΦϨΦϨྨख๏Ͱ͍ͬͯ͘ ࣗ৴͕͋ΔͳΒɺͦΕͰ͍͍ͱࢥ͏ ඞͣAtomic
DesignͰͳ͚Ε͍͚ͳ͍ͷ͔ʁ
• Basic • Components • Containers • Pages ࢀߟ: ίϯϙʔωϯτͷྨ๏
ޙչ͠ͳ͍ͨΊͷ Vue ίϯϙʔωϯτઃܭ: nakajmgࢯ https://ponyhead.booth.pm/items/1028529
ঢ়ଶϞσϦϯά ͱ σʔλϑϩʔઃܭ
• ΞϓϦͷUI༷͔ Βঢ়ଶ(Ϟσϧ)ʹ མͱ͠ࠐΉ • σʔλϑϩʔͷ؍ ͔Β͍ͭͰʹɺ API͜͏ͳΔ ͖ͱઃܭ͕ͪ͠ ϞσϦϯάͱσʔλϑϩʔ
• ઃܭͨ͠ϞσϧͱAPIɺϑϩϯτΤϯυࢹ ʹΑΔઃܭ • མͱ͠ࠐΜͩϞσϧͱAPIͷ༷ɺόοΫΤ ϯυଆͱೝࣝᴥᴪ͕ͳ͍Α͏ʹ͠ͳ͍ͱ͍͚ͳ ͍ • ίϛϡχέʔγϣϯॏཁͰ͋Δ͕ɺόοΫΤ ϯυଆͱೝࣝᴥᴪΛݮΒ͢(Έ)ඞཁ
όοΫΤϯυଆͱڠௐ͢Δʹʁ
• ҎԼ͕ࢀߟʹͳΔ • swagger OpenAPI Generator • Consumer Driven
Contract ಉ࣌ʹ։ൃΛਐΊΔͨΊʹʁ BFFʢBackends For Frontendsʣ࣮ફʹ͓͚Δ3ͭͷΞϯνύλʔϯͱɺͦͷճආࡦ: ݹཅհࢯ http://www.atmarkit.co.jp/ait/articles/1808/31/news013.html
ϧʔςΟϯά ઃܭ
• Scrolling Amnesia • ϒϥβͷΔϘλϯ Λԡͨ࣌͠ʹظ͢Δ HTML͕ϩʔυ͞Εͳ ͔ͬͨ࣌ʹى͜Δ • Α͋͘Δέʔε:
ແݶϖʔδωʔγϣϯ εΫϩʔϧҐஔͷࣦ 7 Principles of Rich Web Applications https://rauchg.com/2014/7-principles-of-rich-web-applications#dont-break-history-enhance-it
• UI༷ݕ౼࣌ͷ֬ೝ ྫ: ແݶϖʔδωʔγϣϯͷ༗ແ & ڍಈ • αϙʔτ͢Δϒϥβͷ֬ೝ https://developer.mozilla.org/ja/docs/Web/API/History#ϒϥβʔ࣮ঢ়گ •
ϧʔςΟϯάϥΠϒϥϦͷରॲ๏ͷ֬ೝ https://router.vuejs.org/ja/guide/advanced/scroll-behavior.html ࣄલʹରԠՄೳ͔֬ೝඞਢ
ΞϓϦ։ൃ: ࣮
• ݎݻͳΞϓϦ։ൃʹ͢ΔͨΊʹɺಋೖ ͖͢ • Vue CLI v3 ͳΒ؆୯ʹಋೖ͢Δ͜ͱ͕Ͱ ͖Δ •
Visual Studio Code + Vetur Ͱੜ࢈ੑߴ͍ ։ൃ͕Մೳͳͷɺલʹઆ໌ͨ͠ͱ͓Γ TypeScriptͷಋೖ
࣮શൠ ʹ͍ͭͯ
• ॻ੶Ͱ vue init Ͱ karma + mocha ͳڥͰ ͷTDDڥΛߏஙͨ͠
• ࠓޙ Jest Λਪ͢Δ • εφοϓγϣοτςετ͕ศར • Assertion / Mock ๊߹͍ͯͯ͠ɺ͜Εܥͷ ϥΠϒϥϦͲΕ͏͔·ͳ͍͍ͯ͘ ϑϩϯτΤϯυʹ͓͚ΔTDD
• ίϯϙʔωϯτɺσʔλϑϩʔɺϧʔςΟϯάͷ ࣮TDDͰ͍ͬͯΔ͕શͯΔඞཁͳ͍ͱߟ ͍͑ͯΔ • ҰൠతʹUIͷ༷සൟʹଟ͘ൃੜ͢ΔͨΊຖճ ςετมߋίετ͕େม • ·ͨTDDͰUIͷߏݟͨΞχϝʔγϣϯͳ ͲͷڍಈΛ֬ೝ͢Δͷਏ͍ͱ͍͏͕͋Δ
TDDʹΑΔΞϓϦ։ൃ
• ίϯϙʔωϯτͷ࣮: • Storybook + reg-suite (ଞʹ͋Δ) ʹΑΔ Visual Regression
Testing https://github.com/mojoaxel/awesome-regression-testing • σʔλϑϩʔͱϧʔςΟϯάͷ࣮ • TDDͰϩδοΫͷڍಈΛνΣοΫ TDD͏·͍͚͘Δͱ͍͍͔
։ൃαʔό ͱ σόοά
• Vue DevTools v5 ʹҎԼͷػೳ͕ೖΔ༧ఆ (ݱࡏbeta) • ϧʔςΟϯάཤྺ •
ύϑΥʔϚϯεଌఆ • Vuexͷঢ়ଶฤू • …ͳͲ σόοΨ
E2Eςετ
• Cypress: Vue CLI v3 ͰެࣜʹηοτΞοϓΛఏڙ • Puppeteer: ಠࣗʹڥߏங͕ඞཁ NightWatchҎ֎ʹ͋Δ
ύϑΥʔϚϯεͷ ଌఆɾվળ
• Performance API ʹΑΔଌఆՕॴ • ύϑΥʔϚϯεվ ળϙΠϯτ Vue ʹ͓͚ΔύϑΥʔϚϯεଌఆ
• ύϑΥʔϚϯεଌఆػೳ͕ೖΔ༧ఆ Vue DevTools v5 ͰΑΓศརʹ FPS ίϯϙʔωϯτͷඳը
• ຊʂϑϩϯτΤϯυΤϯδχΞඞಡ ҰൠతͳύϑΥʔϚϯεଌఆɾվળ https://webperf.guide/
• ύϑΥʔϚϯεʹؔ͢Δใͷๅݿ Google Web Fundamentals https://developers.google.com/web/fundamentals/performance/
• ΩϟογϡઓུɺΞʔΩςΫνϟͳͲʹ ͍ͭͯɺҎԼࢿྉ͕ࢀߟʹͳΔ͔ ޫΛ͑ΔͨΊͷϑϩϯτΤϯυΞʔΩςΫνϟ https://speakerdeck.com/mizchi/guang-wochao-erutamefalsehurontoendoakitekutiya ύϑΥʔϚϯεͷΞʔΩςΫνϟ
αʔόʔαΠυ ϨϯμϦϯά
• ॻ੶ͷίϥϜʹॻ͍͕ͨɺ৭ʑͱେม ͳͷͰཁݕ౼͢Δ͜ͱ • ҎԼURLͷεϥΠυࢀߟʹ You Need to know SSR
https://speakerdeck.com/yosuke_furukawa/you-need-to-know-ssr ಋೖ͢Δ/͠ͳ͍ݕ౼͢Δ͜ͱ
·ͱΊ
• Vue.jsೖͷதɾେنΞϓϦ։ൃʹର͢Δิ ༰Λͨ͠ • ڥηοτΞοϓʹ͍ͭͯVue CLI v3 ϕʔεͰ େָʹͳΔ •
ઃܭʹ͍ͭͯɺࢀߟʹͳΔצॴʹ͍ͭͯͨ͠ • ࣮ʹ͍ͭͯɺ࣮ͷํɺ࣌ظπʔϧͷαϙʔ τ͞ΕΔ༰ɺଞͷํ๏ʹ͍ͭͯͨ͠ ·ͱΊ
Vue.jsೖ + ຊͷิTalk ༰Ͱ େن։ൃ͍͖ͬͯ·͠ΐ͏ʂ
Patreonͷࢧԉ ͓͓ͪͯ͠Γ·͢ʂ https://www.patreon.com/kazupon
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ