Vue.jsଓɾେنΞϓϦ։ൃ2018.12.04@kazuponReproTech #5
View Slide
ࣗݾհ
kazuponVue.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 UtilsVue.js͕ఏڙ͢Δ༰
• Ϗϧυ(όϯυϥ): Vue Loader / rollup-plugin-vue• ΤσΟλ֦ு: Vetur• αʔόʔαΠυϨϯμϦϯάVue.js͕ఏڙ͢Δ༰͜ΕΒɺαʔυύʔςΟͷͷΛඞཁʹԠͯ͡ಋೖͯ͠ΞϓϦ։ൃΛ͍ͯ͘͠
ΞϓϦ։ൃ:։ൃڥηοτΞοϓ
ΞϓϦ։ൃʹඞཁͳͷ• ίʔςΟϯάڥ• UIϏϧμ• ςετ & CI ڥ• σόοΨ / ϓϩϑΝΠϥ• Ϗϧμ• γϡϛϨʔλ
ΞϓϦ։ൃʹඞཁͳͷ• ίʔυཧπʔϧ• Ξηοτཧ• ઃఆཧ• ࠃࡍԽϦιʔεཧ͜͏ͨ͠αϙʔτΛड͚ΒΕΔɺΞϓϦ։ൃͷͨΊͷπʔϧ͕ඞཁ
ΞϓϦ։ൃΛαϙʔτ͢Δπʔϧ
• IDE• GUI ϕʔεͷ౷߹։ൃڥ• CLI• λʔϛφϧΛϕʔεͱͨ͠։ൃڥҰൠతʹఏڙ͞Ε͍ͯΔ։ൃڥπʔϧ
• iOS: XCode• Android: Android Studio• Windows: Visual Studio• Web: Web StormIDE
• Ruby on Rails• Angular CLI• Create React AppCLI
• Vue CLI• Vue CLI UIVue.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 CLIv3 ͱݺͿ) ͷํ͕ɺ֨ஈʹָʂ• Ҏ߱Ͱɺ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 i18nvue-cli-plugin-i18n my-app1scafollding&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 ͱ VueCLI 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-CasesE2Eςετڥ
ΞϓϦ։ൃ:ઃܭ
• ॻ੶ͰҎԼͷ߲ͷઃܭʹ͍ͭͯղઆ• ίϯϙʔωϯτઃܭ• ঢ়ଶϞσϦϯάͱσʔλϑϩʔઃܭ• ϧʔςΟϯάઃܭΞϓϦέʔγϣϯઃܭ
ίϯϙʔωϯτઃܭ
• Ұ؏ੑ ΞϓϦέʔγϣϯશମͰ౷Ұײͷ͋ΔίϯϙʔωϯτΛ։ൃͰ͖Δ• ॏෳഉআ ಉ͡Α͏ͳػೳΛఏڙ͢Δίϯϙʔωϯτ։ൃΛഉআͰ͖Δ• ੜ࢈ੑ্ νʔϜͰ։ൃ͢ΔίϯϙʔωϯτͷେΛڞ༗͢Δ͜ͱͰ։ൃޮΛߴΊΒΕΔίϯϙʔωϯτઃܭͷҙٛ
• ίϯϙʔωϯτͷཻͱྨ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 OpenAPIGenerator• Consumer DrivenContractಉ࣌ʹ։ൃΛਐΊΔͨΊʹʁ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 Fundamentalshttps://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
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
kazupon
fornewid
tomokusaba
quramy
jmatsu
hschwentner
loic425
ivargrimstad
mot_techtalk
tkhs0604
lnit
iimokoy
hsawaji
revolveconf
dotmariusz
edds
sugarenia
ammeep
shlominoach
maltzj
lemiorhan
jponch
thoeni
lynnandtonic
philhawksworth