施策を止めるな！Vue2からVue3への移行@Vue Fes 2022

Transcript

1. ࢪࡦΛࢭΊΔͳʂ Vue2͔ΒVue3΁ͷҠߦ Rettyגࣜձࣾ ࢤլ ᇈଠ 2022/10/16
2. ຊηογϣϯͷ֓ཁ RettyͰ͸ʮϝΠϯͷࢪࡦΛࢭΊΔ͜ͱͳ͘ʯʮେ͖ͳෆ۩߹Λى͜͢͜ͱͳ͘ʯVue3 ʹΞοϓσʔτ͢Δ͜ͱ͕Ͱ͖ͨ • ͲͷΑ͏ʹVue3ΞοϓσʔτΛਐΊ͍ͯͬͨͷ͔ • ۩ମతͳVue3ΞοϓσʔτͷҠߦखॱ • Vue3΁Ҡߦલʹ஌͓͚ͬͯ͹Α͔ͬͨ͜ͱ • νʔϜͰͷҠߦ͢Δ࣌ͷϙΠϯτ
3. ࣗݾ঺հ ࢤլ ᇈଠʢ͕͠ ͚͍ͨʣ • Rettyגࣜձࣾ ৽ଔ2೥໨ • WebΤϯδχΞ • eεϙʔπ/FPS͕޷͖
5. [toB] ͓ళ؅ཧը໘ɾࣾ಺؅ཧը໘ [toC] Webϖʔδ Retty
6. [toB] ͓ళ؅ཧը໘ɾࣾ಺؅ཧը໘ [toC] Webϖʔδ Retty ͪ͜Βͷ͓࿩
7. ໨࣍ 1. Vue3ͱ͸ 2. Vue3ʹΞοϓσʔτ͍͕ͨ͠தʑग़དྷͳ͍໰୊ 3. ͲͷΑ͏ʹVue3ΞοϓσʔτΛணखͰ͖ΔΑ͏ʹͳͬͨͷ͔ 4. ۩ମతʹߦͬͨҠߦखॱ 5. Ҡߦલʹ஌ΕͨΒྑ͔ͬͨ͜ͱ
8. Vue3ͱ͸ʁ
9. Vue3ͱ͸ 2020/09/19ʹVue.jsͷversion3.0.0͕ਖ਼ࣜϦϦʔε🎉 https://github.com/vuejs/core/releases/tag/v3.0.0
10. Vue3ͱ͸ • ύϑΥʔϚϯεͷ޲্ • อकੑΛ্͛ΔͨΊͷ࢓૊Έվળ Teleport Composition API Fragment Suspense Typescriptͷαϙʔτ όϯυϧαΠζͷ࠷খԽ filterͷഇࢭ
11. Vue3ͱ͸ • ύϑΥʔϚϯεͷ޲্ • อकੑΛ্͛ΔͨΊͷ࢓૊Έվળ Teleport Composition API Fragment Suspense Typescriptͷαϙʔτ όϯυϧαΠζͷ࠷খԽ filterͷഇࢭ ΍Δ͔͠ͳ͍🔥
12. Vue3ʹΞοϓσʔτ͍͕ͨ͠ ͳ͔ͳ͔ग़དྷͳ͍໰୊
13. Vue3ʹ͍͚ͨ͠Ͳ... • ଟ͘ͷഁյతมߋ • Vue3Ͱ͸ಈ͔ͳ͍ϥΠϒϥϦ Ξοϓσʔτ͢ΔͨΊͷ࣌ؒΛ֬อ͢Δඞཁ͕͋Δ ͚ͩͰ͸ಈ͔ͳ͍
14. ։ൃମ੍ͷ঺հ Retty͸εΫϥϜΛ༻͍ͯΞδϟΠϧͳ։ൃΛ໨ࢦ͍ͯ͠Δ ։ൃ͸ϓϩμΫτόοΫϩά͔Β༏ઌ౓͕ߴ͍ॱʹணख ϓϩμΫτόοΫϩά ࢪࡦ ΤϯδχΞ
15. ։ൃମ੍ͷ঺հ Retty͸εΫϥϜΛ༻͍ͯΞδϟΠϧͳ։ൃΛ໨ࢦ͍ͯ͠Δ ։ൃ͸ϓϩμΫτόοΫϩά͔Β༏ઌ౓͕ߴ͍ॱʹணख ϓϩμΫτόοΫϩά ࢪࡦ ΤϯδχΞ ϝΠϯࢪࡦͱͯ͠ਐΊ͍ͯͬͨΒྑ͍ͷͰ͸ʁ 🤔
16. ϝΠϯࢪࡦͰVue3ΞοϓσʔτΛߟ͑ͨ • ࣄۀΠϯύΫτ͕਺஋ͱͯ͠ݱΕ΍͍͢΋ͷͰ͸ͳ͍ ◦ ࣄۀձࣾͱͯ͠རӹΛग़͍͖͍ͯͨ͠ • ظݶ͕௚લʹഭ͍ͬͯΔΘ͚Ͱ͸ͳ͍ ϝΠϯࢪࡦͱͯ͠ Vue3ΞοϓσʔτΛಇ͖͔͚Δͷ͸೉͍͠ͱ൑அ ϥΠϒϥϦͷΞοϓσʔτ͸ଞࢪࡦΑΓ༏ઌ౓Λ্͛ʹ͍͘
17. ͲͷΑ͏ʹVue3ΞοϓσʔτΛ ணखͰ͖ΔΑ͏ʹͳͬͨͷ͔
18. Vue3ԽΛ࢝ΊͨΩοΧέ ΩοΧέ͸ʮϨτϩεϖΫςΟϒʯ
19. Vue3ԽΛ࢝ΊͨΩοΧέ ʮVue3Խͱ͸ʁʯ
 ʮԿ͔ྑ͍͜ͱ͋Δͷʁʯ Vue3Խʹ͍ͭͯνʔϜ͕ڵຯΛ࣋ͬͯ͘Εͨ🚀 ʮVue v3ͷ͜ͱͰɺϝϦοτ͸˓˓Ͱʯ ʮVue3ྑͦ͞͏ʯ ʮ΍ͬͯΈΑ͏ʯ
20. ։ൃମ੍ͷ঺հ 1िؒͷಈ͖ ݄ Ր ਫ ໦ ۚ 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 10:00ࠒ 19:00ࠒ 🌄 ேձ 🍽 ϥϯν εϓϦϯτ ϨϏϡʔ Ϩτϩεϖ ΫςΟϒ εϓϦϯτ ϓϥϯχϯ ά
21. ։ൃମ੍ͷ঺հ 1िؒͷಈ͖ ݄ Ր ਫ ໦ ۚ 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 10:00ࠒ 19:00ࠒ 🌄 ேձ 🍽 ϥϯν εϓϦϯτ ϨϏϡʔ Ϩτϩεϖ ΫςΟϒ εϓϦϯτ ϓϥϯχϯ ά ͜ͷลΓ ͜ͷลΓ ͜ͷลΓ ͜ͷลΓ
22. ۩ମతʹߦͬͨҠߦखॱ
23. ۩ମతʹߦͬͨҠߦखॱ ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ ᶅ Vue3Ͱಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ ᶆ ݕূɾίʔυϨϏϡʔ ᶇ ϦϦʔε
24. ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ͓ళ؅ཧը໘ͷVue3Խʹ௅ઓ👊
25. ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ϓϩδΣΫτ͕σΧ͗ͯ͢ݫ͔ͬͨ͠...💦 • ґଘؔ܎ͷΤϥʔͰ·͘Γ ◦ ࢖༻͍ͯ͠ΔϥΠϒϥϦͷόʔδϣϯ͕ݹ͍ • Vue3ॳͷࢼΈͷͨΊઌ͕ݟ͑ͳ͍ ◦ ʮ͍ͭ·Ͱ͔͔Γͦ͏͔ʯʮͲ͜·Ͱ΍Ε͹Α͍͔ʯΑ͘෼͔Βͳ͍ ◦ ϦϦʔεޙʹ໰୊͕͋ͬͨ৔߹ͷଛ֐͕େ͖͍
26. ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ࣾ಺؅ཧը໘ʢVue.js + Vuex + Laravel + Laravel MixʣͰ࠶౓௅ઓ👊 • ϓϩδΣΫτ͕খ͍͞ʢ໿150ݸͷVueϑΝΠϧʣ ◦ Ҡߦ͠΍͍͢ ◦ Ҡߦʹ໰୊͕͋ͬͯ΋ӨڹൣғΛࣾ಺ʹ཈͑ΒΕΔ
27. ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ެࣜͷΞοϓάϨʔυϫʔΫϑϩʔΛݟͳ͕ΒϥΠϒϥϦͷόʔδϣϯΞοϓhttps:// v3.ja.vuejs.org/guide/migration/migration-build.html
28. ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ Vuex ͷΠϯετʔϧ ϓϩηε͕มߋ͞ΕͨͷͰमਖ਼
29. ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ϏϧυͰ͖ΔΑ͏ʹͳͬͨ🚀
30. ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ Composition APIͰॻ͍ͨ࠷খݶͷαϯϓϧίϯϙʔωϯτΛ༻ҙ
31. ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ αϯϓϧίϯϙʔωϯτΛݺͼग़͢Α͏ʹमਖ਼ ΞϓϦέʔγϣϯΠϯελϯεͷੜ੒ํ๏΋มߋ
32. ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ Vue3ͷComposition APIͰಈ͘Α͏ʹͳͬͨ🚀
33. ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ ͜ͷޙͷमਖ਼΋ࣗ෼ҰਓͰશ෦΍Δ͜ͱ΋ෆՄೳͰ͸ͳ͍ͱࢥ͕ͬͨ… • ϖʔδ਺͕ଟ͘ɺbreaking change͕ଟ͍ͷͰ࡞ۀن໛͕େ͖ͦ͏ ◦ ෆ࣮֬ੑ͕௿͘ɺฒߦͯ͠࡞ۀͰ͖Δ͸ͣ • ૣ͘Ҡߦ͍ͨ͠ ◦ ϝΠϯࢪࡦΛૄ͔ʹ͠ͳ͍ ◦ ແཧͳ࢒ۀΛ͠ͳ͍ νʔϜͷڠྗΛಘΔํ਑ͰਐΊͨ
34. ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ Vue.jsΛ࢖͍ͬͯΔϖʔδΛϦετԽɺ̍ͭͣͭमਖ਼
35. ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ มߋͨ͠఺ • VueΞϓϦέʔγϣϯͷΠϯελϯεੜ੒ํ๏ͷมߋʹ൐͏मਖ਼ • $listeners͕$attrsʹؚ·ΕΔΑ͏ʹͳͬͨमਖ਼ • v-modelͷ࢓༷มߋʹ൐͏मਖ਼ ’’ ҠߦϏϧυ v-model | Vue.js https://v3.ja.vuejs.org/guide/migration/v-model.html
36. ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ ࢖͍ͬͯΔϥΠϒϥϦ্ͰΤϥʔ͕ى͖͍ͯΔέʔεʹૺ۰ • vuejs-datepicker vue3-datepicke r • vuejs-paginate vuejs-paginate-next 1. https://github.com/charliekassel/vuejs-datepicker 2. https://github.com/icehaunter/vue3-datepicker 3. https://github.com/lokyoung/vuejs-paginate 4. https://github.com/cloudeep/vuejs-paginate-next 1 2 ௕ظؒϝϯςφϯε͞Ε͓ͯΒͣɺVue2Ͱ͔͠ಈ͔ͳ͍ͨΊผϥΠϒϥϦʹҠߦ 3 4
37. ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ Ұ௨Γಈ͘Α͏ʹͳͬͨ🚀
38. ᶆ ݕূɾίʔυϨϏϡʔ Vue.js͕࢖ΘΕ͍ͯΔશURLΛϦετԽͯ͠ݕূ
39. ᶆ ݕূɾίʔυϨϏϡʔ Vue3ʹରԠͨ͠Vue.js devtools͕͋ΓɺStoreͷத਎΋ݟΕΔ • ϖʔδΛ։͚ͯɺσβΠϯͷ่Ε͕ͳ͍͔ • ϑΥʔϜ͕ೖྗͰ͖ɺద੾ͳ஋͕౤͛ΒΕ͍ͯΔ͔ • JavaScriptͰૢ࡞͍ͯ͠ΔՕॴ͕ਖ਼ৗʹಈ͔͘ ◦ emit͕ద੾ʹൃՐ͢Δ͔ ◦ ϖʔδϯά΍ΧϨϯμʔ • ϒϥ΢βͷDevTools্ͰWarning, Errorϩά͕ྲྀΕ͍ͯͳ͍͔ ݕূͨ͠఺ https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
40. ᶆ ݕূɾίʔυϨϏϡʔ ίʔυϨϏϡʔ͸ؾ߹ ʮݕূͰ໰୊ͳ͘ಈ͘ʯʮύοͱݟΑͦ͞͏ʯͰ͋Ε͹OKͰਐΊͨ 71ϑΝΠϧมߋ ΄΅package-lock.jsonͷมߋ मਖ਼ͨ͠ͷ͸1000ߦ͘Β͍
41. ᶇ ϦϦʔε • Vue3Ξοϓσʔτʹ໿1ϲ݄൒͔͔ͬͨ • 1͚ͭͩෆ۩߹͕ى͖ͨ ◦ Vue2ͷ࢓༷Ͱ৽͍͠ϖʔδΛ࡞͍ͬͯͨͨΊಈ͔ͳ͔ͬͨ ▪ ݕূ࿙Ε ◦ ฒྻͰࢪࡦ͕૸͍ͬͯΔ৔߹͸஫ҙ 🎉 ͍ͭʹϦϦʔε 🎉
42. Ҡߦલʹ஌ΕͨΒྑ͔ͬͨ͜ͱ
43. Ҡߦલʹ஌ΕͨΒྑ͔ͬͨ͜ͱ • ࢪࡦͰมߋ͕ೖΔՕॴͱVue3Խ͕όοςΟϯά ◦ ίϯϑϦΫτ΍༧ظ͠ͳ͍όά ϝΠϯࢪࡦͱฒߦ͢Δ৔߹ͷ஫ҙ఺ ରࡦํ๏ ϦεΫ • খ͘͞ϦϦʔεΛॏͶΔํ਑͕ྑ͍ ◦ Vue2ͱVue3Λڞଘͯ͠ϦϦʔε͢Δํ๏͕͋ΔʢެࣜͷҠߦϏϧυʣ ◦ ґଘϥΠϒϥϦͷΞοϓσʔτΛઌʹϦϦʔε ◦ Vue3ͷഁյతมߋΛݟӽͯ͠ίʔυΛमਖ਼
44. Ҡߦલʹ஌ΕͨΒྑ͔ͬͨ͜ͱ • খ͞ͳϓϩδΣΫτ͔ΒҠߦ͠Α͏ ◦ Ұ౓Ҡߦͯ͠ΈΔͱ஌ࣝྔ͕૿͑Δ • ೔ʑϥΠϒϥϦͷΞοϓσʔτେࣄ ◦ ϥΠϒϥϦͷΞοϓσʔτΛߦΘͳ͍ͱෛ࠴Խ͕࢝·Δ
45. ·ͱΊ
46. ·ͱΊ • RettyͰ͸ʮϝΠϯͷࢪࡦΛࢭΊΔ͜ͱͳ͘ʯʮେ͖ͳෆ۩߹Λى͜͢͜ͱͳ͘ʯ Vue3ʹΞοϓσʔτ͢Δ͜ͱ͕Ͱ͖ͨ ◦ ۭ͖࣌ؒΛݟ͚ͭͯɺҰਓͰ΍Ζ͏ͱ͠ͳ͔ͬͨ • νʔϜʹ͸Vue3Խ͍ͨ͜͠ͱΛখग़͢͠ΔͱνʔϜͷڠྗɾཧղΛಘΒΕ΍͍͢ • Vue3ͷComposition API͕ಈ͍ͨޙ͸ෳ਺ਓͰฒߦͯ͠ਐΊΒΕΔ͸ͣ • ೔ʑϥΠϒϥϦͷΞοϓσʔτେࣄ
47. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ