Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Shiga
October 13, 2022

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

Shiga

October 13, 2022
Tweet

Other Decks in Programming

Transcript

  1. ࢪࡦΛࢭΊΔͳʂ Vue2͔ΒVue3΁ͷҠߦ Rettyגࣜձࣾ ࢤլ ᇈଠ 2022/10/16

  2. ຊηογϣϯͷ֓ཁ RettyͰ͸ʮϝΠϯͷࢪࡦΛࢭΊΔ͜ͱͳ͘ʯʮେ͖ͳෆ۩߹Λى͜͢͜ͱͳ͘ʯVue3 ʹΞοϓσʔτ͢Δ͜ͱ͕Ͱ͖ͨ • ͲͷΑ͏ʹVue3ΞοϓσʔτΛਐΊ͍ͯͬͨͷ͔ • ۩ମతͳVue3ΞοϓσʔτͷҠߦखॱ • Vue3΁Ҡߦલʹ஌͓͚ͬͯ͹Α͔ͬͨ͜ͱ •

    νʔϜͰͷҠߦ͢Δ࣌ͷϙΠϯτ
  3. ࣗݾ঺հ ࢤլ ᇈଠʢ͕͠ ͚͍ͨʣ • Rettyגࣜձࣾ ৽ଔ2೥໨ • WebΤϯδχΞ •

    eεϙʔπ/FPS͕޷͖
  4. None
  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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ