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
470
Vapor Revolution
kazupon
3
3.4k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.6k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.8k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
710
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
エラーって何種類あるの?
kajitack
5
150
A comprehensive view of refactoring
marabesi
0
480
Bytecode Manipulation 으로 생산성 높이기
bigstark
1
340
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
22
6.1k
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
190
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
230
Perlで痩せる
yuukis
1
680
WindowInsetsだってテストしたい
ryunen344
1
170
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
370
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
170
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Being A Developer After 40
akosma
90
590k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Designing Experiences People Love
moore
142
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Automating Front-end Workflow
addyosmani
1370
200k
Code Reviewing Like a Champion
maltzj
524
40k
Designing for humans not robots
tammielis
253
25k
Building Adaptive Systems
keathley
43
2.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ