Vue 2 から 3 への移行は 意外と怖くありません

PWA Night vol.54 ～移行〜 の登壇資料です。
https://pwanight.connpass.com/event/291223/

元記事
https://tech.spacely.co.jp/entry/2023/06/30/145133

Transcript

1. Vue 2 ͔Β 3 ΁ͷҠߦ͸ 
 ҙ֎ͱා͋͘Γ·ͤΜ ͨͩ͠ Vue ຊମͷߋ৽ʹݶΔ גࣜձࣾεϖʔεϦʔɹٶࡔ
2. ࣗݾ঺հ • ٶࡔ (@myanzaka) • εϖʔεϦʔͷϑϩϯτΤϯυΤϯδχΞ • jQueryੈ୅ͷੜ͖࢒Γ • Vue.js͕޷͖Ͱ͕͢ɺ࠷ۙ͸ReactͱBabylon.jsΛগʑ • ϓϥΠϕʔτͰ͸։ൃΑΓ΋໺ௗΛ୳ͯ͠͹͔Γ
3. ࠓ೔͓఻͍͑ͨ͜͠ͱ 1
4. Options API ͷ·· 
 Vue 3 ʹΞοϓσʔτͯ͠΋ 
 ͍͍ΜͰ͢
5. Կ͕͋ͬͨ • Vue 2 ͕2023೥12݄31೔ͰEOL • Never-Ending Support ͕༗ঈͰఏڙ͞ΕΔ • Ұ൪͍҆CorporateϓϥϯͰ΋͍͍݄ͩͨ7ສԁ͘Β͍ʁ
6. ٕज़ελοΫ (৽͠ΊͷϓϩμΫτ) TypeScript Vue 3.2 (Composition API) Pinia Vuetify SCSS A-Frame Vue CLI Github Actions AWS S3, CloudFront ࠓճ͸ແӨڹ
7. ٕज़ελοΫ (ࠓճҠߦ͢Δ΍ͭ) Ruby on Rails JavaScript Vue 2.6 (Options API) Vuex Vuetify SCSS / CSS Webpack Ұ෦React Ұ෦jQuery Ұ෦Bootstrap AWS CodePipeline Ͱ rails assets:precompileͯ͠Δ Webpacker͸͕Μ͹ͬͯ୤ͨ͠
8. ϋγϒτΨϥε %FBUI
   fi SF
   CJSE ũƄũƄ
   
   ŴƅŴƅŖ
9. ՝୊ͷ੔ཧ • ࠓճରԠ͠ͳ͚Ε͹͍͚ͳ͍ͷ͸͋͘·Ͱ Vue 2 -> 3 ͷΞοϓσʔτ 
 ͦΕҎ֎͸ඞཁͳ͜ͱ͚ͩ΍Ε͹͍͍ • ৽ن։ൃ΍վળΛࢭΊͳ͍ͷͰରԠείʔϓΛߜΓ͍ͨ • ίʔυ͕͍͘Β͖Ε͍ʹͳͬͯ΋ 
 ͦͷؒʹϓϩμΫτ͕ചΕͳ͘ͳͬͨΒҙຯ͕ͳ͍ • खݩͷϦιʔε͸५୔͡Όͳ͍ • ޻਺ΛଟΊʹऔΔͱ։ൃεέδϡʔϧʹѱӨڹ͕ग़Δ • ࣗ෼͕࣮ࡍͷҠߦ࡞ۀΛͰ͖ͣɺϨʔϧΛෑ͍ͨΒखΛ཭͢ඞཁ͕͋Δ
10. ݱঢ়ͷ೺Ѳ 
 1. ίʔυྔͱ૝ఆ޻਺ • ίʔυ͕ଟ͍ɻϑΝΠϧ਺ʹͯ͠਺ඦ • ϩδοΫΛେ͖͘ॻ͖׵͍͑ͯͨΒEOLʹؒʹ߹Θͳ͍ • MPAͳͷͰΤϯτϦʔϙΠϯτ͝ͱͷҠߦ͸Մೳ • ෦෼తʹ React ͕࢖ΘΕ͍ͯΔ • IE11ରԠ͸طʹ΍Ί͍ͯΔ
11. ݱঢ়ͷ೺Ѳ 
 2. νʔϜϝϯόʔͷٕज़ελοΫ • ϑϩϯτΤϯυΤϯδχΞ͸ʢݞॻͱͯ͠͸ʣ·ͩࣗ෼Ұਓ • ࠓճߋ৽͢ΔϓϩμΫτ͸ࣗ෼ͱผͷνʔϜ͕؅ཧ͍ͯ͠Δ • ͦͷνʔϜʹෛ୲Λ͔͚ͣʹҠߦΛਐΊΔඞཁ͕͋Δ • ͦͷνʔϜʹϑϩϯτΤϯυΤϯδχΞ͸͍ͳ͍ • ٕज़ελοΫΛେ͖͘ม͑Δͱֶशίετ͕͔͔Δ • ʮComposition API Λֶͼͳ͕Βॻ͖׵͍͑ͯͩ͘͞ʯ͸ 
 ৽ͨͳόάΛੜΉϦεΫ΋
12. ݱঢ়ͷ೺Ѳ 
 3. ϥΠϒϥϦ͕࢖ΘΕ͍ͯΔ • ͦΕ͸ͦ͏ • NESΛܖ໿͢Δಈػ͕ബ͘ͳΔ • ֎෦ϥΠϒϥϦͷ໘౗·Ͱ͸ݟͯ͘Εͳ͍ͷͰ 
 ͦͪΒʹ੬ऑੑ͕ग़Ε͹ผϥΠϒϥϦͷબఆ͔Vueͷߋ৽͔Λ 
 ݁ہ͸ഭΒΕΔ • ͦ΋ͦ΋ Vue 2 ޲͚ͷϥΠϒϥϦ͕͍ͭ·Ͱอक͞ΕΔͷ͔
13. Options API ͷ·· 
 ࠷খ޻਺ͰҠߦ͠Α͏
14. Options API Ͱ΋େৎ෉ʁ • େৎ෉Ͱ͢ • Vue 3 Ͱ΋ Options API ͸ಈ࡞͢Δ • Vue 2 ͔Β 3 ΁ͷΞοϓάϨʔυͱ Options API ͔Β Composition API ΁ͷॻ͖׵͕͑ 
 ͬͪ͝ΌʹͳͬͯΔਓ΋͍Δ • ॻ͚Δਓͩͱ Composition API ʹॻ͖׵͑ͨ͘ͳΔͱࢥ͍·͕͢ɺͦͷؾ࣋ͪ͸͍ͬͨΜ࿬ʹ͓͍͓ͯ͘ • Options API ͕ඇਪ঑ʹͳΔ༧ఆ͸ͳ͍ • Options API ͷ·· Pinia Λ࢖͑Δ͠ɺͳΜͳΒ Vuex ͱ΋ซ༻Ͱ͖ͨ • ࢀߟ: Vue3ͷਰୀΛট͍ͨͷ͸<script setup>ͱCompositionAPI͔΋͠Εͳ͍ ͱ͍͏ߟ࡯ 

15. Ͳ ͏ ॻ ͖ ͔ ͑ Δ ͔
    Θ ͔ Μ ͳ ͍ Α ͏
16. Ͳ ͏ ॻ ͖ ͔ ͑ Δ ͔
    Θ ͔ Μ ͳ ͍ Α ͏ Θ Γ ͱ ͦ ͷ · ·
    ͏ ͝ ͘ Α
17. Ҡߦํ਑ • ผͷσΟϨΫτϦʹ৽͘͠؀ڥߏங͠ɺҠߦ͢Δίʔυ͚ͩίϐʔͯ͠࡞ ۀ͢Δ • Ҡߦ͸ΤϯτϦʔϙΠϯτ୯ҐͰߦ͏ • ػೳ௥Ճ΍վળͷअຐΛ͠ͳ͍ͨΊʹ࡞ۀεέδϡʔϧΛͣΒ͍ͨ͠ • ҰؾʹҠߦͯ͠ग़ͤΔίʔυྔͰ͸ͳ͍ • Vue ͷҠߦϏϧυ͸࢖Θͳ͍ • ࠓ࢖͍ͬͯΔϥΠϒϥϦ͕ಈ͔͘Ͳ͏͔ͷݕূ޻਺͕݁ہ͔͔Δ͔Β
18. ਐΊํ • ࣗ෼Ͱ΍Δ͜ͱ • Ҡߦํ਑ͷݕ౼ɾܾఆ • ϥΠϒϥϦͷݕূʢVue 3 ରԠόʔ δϣϯ͕͋Δ͔ɾͳ͚Ε͹ҠߦͰ͖Δ ผϥΠϒϥϦ͸͋Δ͔ʣ • ৽͍͠։ൃ؀ڥͷߏங • Ҡߦαϯϓϧͷ࡞੒ • ίʔυϨϏϡʔ • ਓʹ͓ئ͍͢Δ͜ͱ • αϯϓϧҎ֎ͷҠߦ࡞ۀ
19. ม͑Δ΋ͷ • Vue.js 2 -> 3 • ϥΠϒϥϦҰࣜ • Webpack -> Vite • Vue 3 ͷ؀ڥߏஙָ͕ • ͜͜Λม͑ͯ΋νʔϜϝϯόʔͷෛ୲ʹ͸ͳΒͣɺԸܙ͚͕ͩ͋Δ • Vue CLI Ͱߏங͢Δͱ React ޲͚ͷઃఆΛॻ͖ͮΒͦ͏ • Simpacker -> Minipack • Ҡߦத͸ manifest.json ͕2ͭʹͳΔ͕ɺ Simpacker Ͱ͸ରԠͰ͖ͳ͍ • Vite Ruby ͸σΟϨΫτϦͷ੍໿ͷͨΊ͔ಈ͔ͤͣɺͦ΋ͦ΋΄͍͠ͷ͸λάϔϧύʔ͚ͩͳͷͰ 
 ͦ͜·Ͱػೳ੝Γͩ͘͞Μ͡Όͳͯ͘΋͍͍
20. ࣮ࡍʹॻ͖׵͑ͯΈͨ
21. Login.vue <!— before —> <script> export default { /* தུ */ }; </script> <!— after —> <script> import { defineComponent } from "vue"; export default defineComponent({ /* தུ */ }); </script>
22. ͜Ε͚ͩ
23. ͜Ε͚ͩͱ͍ͬͯ΋ • Vue 3 Ͱഁյతʹมߋ͞Εͨίʔυ͕΄΅࢖ΘΕ͍ͯͳ͔ͬͨ • v-bind.sync ΍ fi lter ɺؔ਺ܕίϯϙʔωϯτ͕ͳ͔ͬͨ • form ͕ଟ͘ v-bind.sync ΍ v-model ͕ଟ਺࢖ΘΕ͍ͯͨΒେม͔ͩͬͨ΋ • destroyed, beforeDestroy, v-deep ͳͲ͕࢖ΘΕ͍ͯΔSFC͸͋Δ͕ɺ͜ΕΒ͸ػցతͳஔ׵ͰࡁΉ • Vue.set() ͕͋·Γ࢖ΘΕ͍ͯͳ͔ͬͨ • mixin ͕͚ͬ͜͏࢖ΘΕ͍ͯΔͷ͸͠ΜͲͦ͏ • ͳ͓ mixin ࣗମ͸ಈ͘͠ global mixin ΋ಈ͘ʢඇਪ঑ʣ • ࢀߟ: Vue 3 ҠߦΨΠυ
24. Options API ͔ͩΒͱ 
 ৺഑͠ͳ͍Ͱ 
 Ҡߦͪ͠Ό͍·͠ΐ͏
25. ΍ͬͨͥ
26. ΍ͬͨͥ……ʁ
27. ŗ ŗ ŗ …
28. ŗʃŗʃŗʃŗʃŗʃ
29. ࠓ೔͓఻͍͑ͨ͜͠ͱ 2
30. ഁյతมߋ͕͠ΜͲ͍ͷ͸ 
 ϥΠϒϥϦ΋Ͱ͢
31. ࠓճͱ͘ʹӨڹΛड͚ͨϥΠϒϥϦ • Vuetify 2 -> 3 • ഁյతมߋ͕ଟ͍ • ಋೖ͚ͩͳΒϘΠϥʔϓϨʔτͰ؆୯ʹͰ͖Δ • ίϯϙʔωϯτͷ૿ݮ͕͋Δɻະ࣮૷ίϯϙʔωϯτ͸ݮ͖͍ͬͯͯΔ • ϝδϟʔΞοϓσʔτ͕ൺֱత࠷ۙͳͷͰ·ͩ৘ใ͕গͳ͍ • ࠓ͸ެࣜυΩϡϝϯτ͕͋Δ • ผ݅Ͱbeta൛Λ࢖ͬͨͱ͖͸಺෦ίʔυΛಡΈͳ͕ΒͳΜͱ͔ॻ͍ͯͨ • eslint-plugin-vuetify ͕ͱͯ΋͋Γ͕͍ͨɻػցతͳҠߦ͕͋Δఔ౓Ͱ͖Δɻ͋Δఔ౓ • Vee-Validate 3 -> 4 • ഁյతมߋ͕ଟ͍ • ެࣜυΩϡϝϯτ͕͋Δ͠ղઆهࣄ΋ଟ͍ • ಈ͔ͳ͚Ε͹͙͢Θ͔ΔͷͰൺֱత·͠
32. VTextField <!— before —> <v-text-field v-model="password" hide-details="false" label="ύεϫʔυ" outlined :append-icon=" showPassword ? 'mdi-eye' : 'mdi-eye-off' " :type="showPassword ? 'text' : 'password'" @click:append=" showPassword = !showPassword " /> <!— after —> <v-text-field v-model="password" hide-details="false" label="ύεϫʔυ" variant="outlined" color="water-blue" :append-inner-icon=" showPassword ? 'mdi-eye' : ‘mdi-eye-off' " :type="showPassword ? 'text' : 'password'" @click:append-inner=" showPassword = !showPassword " />
33. VTextField • outlined -> variant=“outlined” • Ξ΢τϥΠϯ৭͕ࠇʹͳͬͨͷͰ color=“water_blue” Λ௥Ճ • theme ͷݟ௚͕͠ඞཁ͔΋ • append-icon -> append-inner-icon • ΞΠίϯ͕ϑΟʔϧυͷ֎ʹදࣔ͞ΕΔͱ͍͏ෆྀͷมԽ͕͋ͬͨ • ܕΤϥʔͰ͸ͳ͍
34. VBtn <!— before —> <v-btn outlined width="100%" class="spacely_pink" dark @click="submit" >ϩάΠϯ</v-btn > <!— after —> <v-btn type="submit" variant="flat" color="spacely_pink" width="100%" theme="dark" >ϩάΠϯ</v-btn >
35. VBtn • dark -> theme=”dark” • ϘλϯͷจࣈΛനൈ͖ʹ͢ΔͨΊʹࢦఆ͞Ε͍ͯͨ ʢΑ͘͸ͳ͍ʣ • outlined -> variant=“ fl at” • ͓ͦΒ͘ outlined ͱ dark ͷෳ߹ͰϘλϯͷഎܠ৭͕ృΓͭͿ͞Ε͍ͯͨʁ • Ξ΢τϥΠϯͷΈ৭͕ͭ͘Α͏ʹͳͬͨͷͰɺ fl at ʹม͑Δඞཁ͕͋ͬͨɻਖ਼͍͠มԽͰ͸͋Δ • variant=“outlined” Ͱ΋ܕΤϥʔͰ͸ͳ͍ • class=“spacely_pink” -> color=“spacely_pink” • എܠ৭Λม͑ΔͨΊʹඞཁ • ܕΤϥʔͰ͸ͳ͍
36. Τϥʔ͕ݕग़͞ΕΕ͹ 
 ·͍͍ͩ
37. ͭΒ͍ͷ͸ Τϥʔ͕ͳ͍ͷʹ 
 ݟͨ໨͕มΘΔ͜ͱ
38. ΤϥʔʹͳΒͣʹࠔͬͨ͜ͱ • ࡞ۀྔͷݟੵ΋Γ͕มΘͬͨ • eslint-plugin-vuetify ͰػցతʹҠߦͰ͖ͦ͏ʹࢥ͍͕ͬͯͨɺ 
 ݱߦσβΠϯͱ໨ࢹͰݟൺ΂Δख͕ؒੜͨ͡ • ໰୊Λػցతʹݕग़ͮ͠Β͍ 
 ͱ͘ʹ Vue Test Utils ͰԾ૝DOMͷςετ͚͍ͩͯ͠Δ৔߹ɺ 
 ςετࣗମ͸௨ͬͯ͠·͏ • Visual Regression Test Λॻ͍͍ͯΕ͹ࠔΒͳ͔ͬͨ΋͠Εͳ͍
39. ·ͱΊ • Ұ֓ʹ͸ݴ͑·ͤΜ͕ Vue.js ຊମͷΞοϓάϨʔυ͸ҙ֎ͱා͘ͳ͍ • ࣌ؒతɾਓతϦιʔε͕ͳͯ͘΋ɺػೳ։ൃΛࢭΊΒΕͳͯ͘΋ 
 είʔϓΛߜΕ͹ͳΜͱ͔ͳΔ͔΋ • Vue 2 / 3 ͱ Optons API / Composition API ͸ผͷ໰୊ͱͯ͠ߟ͍͍͑ͯ • ഁյతมߋ͸͋Δ΋ͷͷɺࠓ͋Δίʔυ͕ҙ֎ͱಈ͘ͷͰ 
 ࢼ͠ʹҠߦͯ͠Έ͔ͯΒख਺Λݟੵ΋ͬͯ΋͍͍ͷͰ͸ • ϥΠϒϥϦͷΞοϓάϨʔυͰ޻਺ΛଟΊʹݟੵ΋Βͳ͍ͱ͜Θ͍ • ͱ͘ʹUIϑϨʔϜϫʔΫɻΤϥʔ͕ͳ͘ͳ͔ͬͯΒ͕ຊ൪ • νʔϜ΍ձࣾɺϓϩμΫτͷ਺͚ͩҠߦͷ͔͕ͨ͋͠Δ • ΋ͬͱ͍͍΍Γ͔ͨ͋ͬͨΒͥͻڭ͍͑ͯͩ͘͞
40. ࢀߟ • Vue 3 Migration Guide 
 https://v3-migration.vuejs.org/ • Vue3ͷਰୀΛট͍ͨͷ͸<script setup>ͱCompositionAPI͔΋͠Εͳ͍ ͱ͍͏ߟ࡯ 
 https://qiita.com/fruitriin/items/81691ce68cf3678f3bda • ओྗ੡඼ͷ Vue 3 & Vuetify 3 ΁ͷϚΠάϨʔγϣϯશه࿥ 
 https://zenn.dev/longrun_jp/articles/c951f1546873d4 • Vue 2 ͔Β 3 ΁Ҡߦ͠Α͏ͱͨ͠Β͍ͪ͹Μେมͳͷ͕ Vuetify 2 ͔Β 3 ΁ͷҠߦͩͬͨ࿩ ʢݩهࣄʣ 
 https://tech.spacely.co.jp/entry/2023/06/30/145133