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

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

Avatar for Shiga Shiga
October 13, 2022

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

Avatar for Shiga

Shiga

October 13, 2022
Tweet

Other Decks in Programming

Transcript

  1. Vue3ͱ͸ • ύϑΥʔϚϯεͷ޲্ • อकੑΛ্͛ΔͨΊͷ࢓૊Έվળ Teleport Composition API Fragment Suspense

    Typescriptͷαϙʔτ όϯυϧαΠζͷ࠷খԽ filterͷഇࢭ ΍Δ͔͠ͳ͍🔥
  2. ։ൃମ੍ͷ঺հ 1िؒͷಈ͖ ݄ Ր ਫ ໦ ۚ 🌄 ேձ 🍽

    ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 10:00ࠒ 19:00ࠒ 🌄 ேձ 🍽 ϥϯν εϓϦϯτ ϨϏϡʔ Ϩτϩεϖ ΫςΟϒ εϓϦϯτ ϓϥϯχϯ ά
  3. ։ൃମ੍ͷ঺հ 1िؒͷಈ͖ ݄ Ր ਫ ໦ ۚ 🌄 ேձ 🍽

    ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 10:00ࠒ 19:00ࠒ 🌄 ேձ 🍽 ϥϯν εϓϦϯτ ϨϏϡʔ Ϩτϩεϖ ΫςΟϒ εϓϦϯτ ϓϥϯχϯ ά ͜ͷลΓ ͜ͷลΓ ͜ͷลΓ ͜ͷลΓ
  4. ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ࣾ಺؅ཧը໘ʢVue.js + Vuex + Laravel + Laravel MixʣͰ࠶౓௅ઓ👊

    • ϓϩδΣΫτ͕খ͍͞ʢ໿150ݸͷVueϑΝΠϧʣ ◦ Ҡߦ͠΍͍͢ ◦ Ҡߦʹ໰୊͕͋ͬͯ΋ӨڹൣғΛࣾ಺ʹ཈͑ΒΕΔ
  5. ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ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
  6. ᶆ ݕূɾίʔυϨϏϡʔ Vue3ʹରԠͨ͠Vue.js devtools͕͋ΓɺStoreͷத਎΋ݟΕΔ • ϖʔδΛ։͚ͯɺσβΠϯͷ่Ε͕ͳ͍͔ • ϑΥʔϜ͕ೖྗͰ͖ɺద੾ͳ஋͕౤͛ΒΕ͍ͯΔ͔ • JavaScriptͰૢ࡞͍ͯ͠ΔՕॴ͕ਖ਼ৗʹಈ͔͘

    ◦ emit͕ద੾ʹൃՐ͢Δ͔ ◦ ϖʔδϯά΍ΧϨϯμʔ • ϒϥ΢βͷDevTools্ͰWarning, Errorϩά͕ྲྀΕ͍ͯͳ͍͔ ݕূͨ͠఺ https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
  7. Ҡߦલʹ஌ΕͨΒྑ͔ͬͨ͜ͱ • ࢪࡦͰมߋ͕ೖΔՕॴͱVue3Խ͕όοςΟϯά ◦ ίϯϑϦΫτ΍༧ظ͠ͳ͍όά ϝΠϯࢪࡦͱฒߦ͢Δ৔߹ͷ஫ҙ఺ ରࡦํ๏ ϦεΫ • খ͘͞ϦϦʔεΛॏͶΔํ਑͕ྑ͍

    ◦ Vue2ͱVue3Λڞଘͯ͠ϦϦʔε͢Δํ๏͕͋ΔʢެࣜͷҠߦϏϧυʣ ◦ ґଘϥΠϒϥϦͷΞοϓσʔτΛઌʹϦϦʔε ◦ Vue3ͷഁյతมߋΛݟӽͯ͠ίʔυΛमਖ਼