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.1k
Vue.js 続・大規模アプリ開発
kazupon
December 04, 2018
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.4k
Vue 3.4
kazupon
13
4.4k
Vue & Vite Rustify
kazupon
4
2.1k
Vue.jsエコシステム動向2023
kazupon
17
7.4k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
980
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
540
まちにまった Vue.js 3
kazupon
14
5.5k
Other Decks in Programming
See All in Programming
Beyond Laravel Octane - Hyperf for Laravel Artisans
albertcht
1
150
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
120
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
300
rtcamp 10 (vk-illuminati)
yumcyawiz
0
160
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
560
CSC509 Lecture 02
javiergs
PRO
0
170
空間の中でアイドルとレッスンする技術 - 1st "Vision" / Spatial Lesson technologies with my idol - 1st "Vision"
banjun
PRO
0
180
CSC509 Lecture 06
javiergs
PRO
0
110
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
230
PHPを書く理由、PHPを書いていて良い理由 / Reasons to write PHP and why it is good to write PHP
seike460
PRO
5
490
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
680
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
140
Featured
See All Featured
Designing for Performance
lara
604
68k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Debugging Ruby Performance
tmm1
73
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Become a Pro
speakerdeck
PRO
24
4.9k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
BBQ
matthewcrist
85
9.2k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ