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

by Shiga

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ࣗݾ঺հ ࢤլ ᇈଠʢ͕͠ ͚͍ͨʣ ● Rettyגࣜձࣾ ৽ଔ2೥໨ ● WebΤϯδχΞ ● eεϙʔπ/FPS͕޷͖

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

[toB] ͓ళ؅ཧը໘ɾࣾ಺؅ཧը໘ [toC] Webϖʔδ Retty

Slide 6

Slide 6 text

[toB] ͓ళ؅ཧը໘ɾࣾ಺؅ཧը໘ [toC] Webϖʔδ Retty ͪ͜Βͷ͓࿩

Slide 7

Slide 7 text

໨࣍ 1. Vue3ͱ͸ 2. Vue3ʹΞοϓσʔτ͍͕ͨ͠தʑग़དྷͳ͍໰୊ 3. ͲͷΑ͏ʹVue3ΞοϓσʔτΛணखͰ͖ΔΑ͏ʹͳͬͨͷ͔ 4. ۩ମతʹߦͬͨҠߦखॱ 5. Ҡߦલʹ஌ΕͨΒྑ͔ͬͨ͜ͱ

Slide 8

Slide 8 text

Vue3ͱ͸ʁ

Slide 9

Slide 9 text

Vue3ͱ͸ 2020/09/19ʹVue.jsͷversion3.0.0͕ਖ਼ࣜϦϦʔε🎉 https://github.com/vuejs/core/releases/tag/v3.0.0

Slide 10

Slide 10 text

Vue3ͱ͸ ● ύϑΥʔϚϯεͷ޲্ ● อकੑΛ্͛ΔͨΊͷ࢓૊Έվળ Teleport Composition API Fragment Suspense Typescriptͷαϙʔτ όϯυϧαΠζͷ࠷খԽ filterͷഇࢭ

Slide 11

Slide 11 text

Vue3ͱ͸ ● ύϑΥʔϚϯεͷ޲্ ● อकੑΛ্͛ΔͨΊͷ࢓૊Έվળ Teleport Composition API Fragment Suspense Typescriptͷαϙʔτ όϯυϧαΠζͷ࠷খԽ filterͷഇࢭ ΍Δ͔͠ͳ͍🔥

Slide 12

Slide 12 text

Vue3ʹΞοϓσʔτ͍͕ͨ͠ ͳ͔ͳ͔ग़དྷͳ͍໰୊

Slide 13

Slide 13 text

Vue3ʹ͍͚ͨ͠Ͳ... ● ଟ͘ͷഁյతมߋ ● Vue3Ͱ͸ಈ͔ͳ͍ϥΠϒϥϦ Ξοϓσʔτ͢ΔͨΊͷ࣌ؒΛ֬อ͢Δඞཁ͕͋Δ ͚ͩͰ͸ಈ͔ͳ͍

Slide 14

Slide 14 text

։ൃମ੍ͷ঺հ Retty͸εΫϥϜΛ༻͍ͯΞδϟΠϧͳ։ൃΛ໨ࢦ͍ͯ͠Δ ։ൃ͸ϓϩμΫτόοΫϩά͔Β༏ઌ౓͕ߴ͍ॱʹணख ϓϩμΫτόοΫϩά ࢪࡦ ΤϯδχΞ

Slide 15

Slide 15 text

։ൃମ੍ͷ঺հ Retty͸εΫϥϜΛ༻͍ͯΞδϟΠϧͳ։ൃΛ໨ࢦ͍ͯ͠Δ ։ൃ͸ϓϩμΫτόοΫϩά͔Β༏ઌ౓͕ߴ͍ॱʹணख ϓϩμΫτόοΫϩά ࢪࡦ ΤϯδχΞ ϝΠϯࢪࡦͱͯ͠ਐΊ͍ͯͬͨΒྑ͍ͷͰ͸ʁ 🤔

Slide 16

Slide 16 text

ϝΠϯࢪࡦͰVue3ΞοϓσʔτΛߟ͑ͨ ● ࣄۀΠϯύΫτ͕਺஋ͱͯ͠ݱΕ΍͍͢΋ͷͰ͸ͳ͍ ○ ࣄۀձࣾͱͯ͠རӹΛग़͍͖͍ͯͨ͠ ● ظݶ͕௚લʹഭ͍ͬͯΔΘ͚Ͱ͸ͳ͍ ϝΠϯࢪࡦͱͯ͠ Vue3ΞοϓσʔτΛಇ͖͔͚Δͷ͸೉͍͠ͱ൑அ ϥΠϒϥϦͷΞοϓσʔτ͸ଞࢪࡦΑΓ༏ઌ౓Λ্͛ʹ͍͘

Slide 17

Slide 17 text

ͲͷΑ͏ʹVue3ΞοϓσʔτΛ ணखͰ͖ΔΑ͏ʹͳͬͨͷ͔

Slide 18

Slide 18 text

Vue3ԽΛ࢝ΊͨΩοΧέ ΩοΧέ͸ʮϨτϩεϖΫςΟϒʯ

Slide 19

Slide 19 text

Vue3ԽΛ࢝ΊͨΩοΧέ ʮVue3Խͱ͸ʁʯ  ʮԿ͔ྑ͍͜ͱ͋Δͷʁʯ Vue3Խʹ͍ͭͯνʔϜ͕ڵຯΛ࣋ͬͯ͘Εͨ🚀 ʮVue v3ͷ͜ͱͰɺϝϦοτ͸˓˓Ͱʯ ʮVue3ྑͦ͞͏ʯ ʮ΍ͬͯΈΑ͏ʯ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

۩ମతʹߦͬͨҠߦखॱ

Slide 23

Slide 23 text

۩ମతʹߦͬͨҠߦखॱ ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ ᶅ Vue3Ͱಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ ᶆ ݕূɾίʔυϨϏϡʔ ᶇ ϦϦʔε

Slide 24

Slide 24 text

ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ͓ళ؅ཧը໘ͷVue3Խʹ௅ઓ👊

Slide 25

Slide 25 text

ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ϓϩδΣΫτ͕σΧ͗ͯ͢ݫ͔ͬͨ͠...💦 ● ґଘؔ܎ͷΤϥʔͰ·͘Γ ○ ࢖༻͍ͯ͠ΔϥΠϒϥϦͷόʔδϣϯ͕ݹ͍ ● Vue3ॳͷࢼΈͷͨΊઌ͕ݟ͑ͳ͍ ○ ʮ͍ͭ·Ͱ͔͔Γͦ͏͔ʯʮͲ͜·Ͱ΍Ε͹Α͍͔ʯΑ͘෼͔Βͳ͍ ○ ϦϦʔεޙʹ໰୊͕͋ͬͨ৔߹ͷଛ֐͕େ͖͍

Slide 26

Slide 26 text

ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ࣾ಺؅ཧը໘ʢVue.js + Vuex + Laravel + Laravel MixʣͰ࠶౓௅ઓ👊 ● ϓϩδΣΫτ͕খ͍͞ʢ໿150ݸͷVueϑΝΠϧʣ ○ Ҡߦ͠΍͍͢ ○ Ҡߦʹ໰୊͕͋ͬͯ΋ӨڹൣғΛࣾ಺ʹ཈͑ΒΕΔ

Slide 27

Slide 27 text

ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ެࣜͷΞοϓάϨʔυϫʔΫϑϩʔΛݟͳ͕ΒϥΠϒϥϦͷόʔδϣϯΞοϓhttps:// v3.ja.vuejs.org/guide/migration/migration-build.html

Slide 28

Slide 28 text

ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ Vuex ͷΠϯετʔϧ ϓϩηε͕มߋ͞ΕͨͷͰमਖ਼

Slide 29

Slide 29 text

ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ϏϧυͰ͖ΔΑ͏ʹͳͬͨ🚀

Slide 30

Slide 30 text

ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ Composition APIͰॻ͍ͨ࠷খݶͷαϯϓϧίϯϙʔωϯτΛ༻ҙ

Slide 31

Slide 31 text

ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ αϯϓϧίϯϙʔωϯτΛݺͼग़͢Α͏ʹमਖ਼ ΞϓϦέʔγϣϯΠϯελϯεͷੜ੒ํ๏΋มߋ

Slide 32

Slide 32 text

ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ Vue3ͷComposition APIͰಈ͘Α͏ʹͳͬͨ🚀

Slide 33

Slide 33 text

ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ ͜ͷޙͷमਖ਼΋ࣗ෼ҰਓͰશ෦΍Δ͜ͱ΋ෆՄೳͰ͸ͳ͍ͱࢥ͕ͬͨ… ● ϖʔδ਺͕ଟ͘ɺbreaking change͕ଟ͍ͷͰ࡞ۀن໛͕େ͖ͦ͏ ○ ෆ࣮֬ੑ͕௿͘ɺฒߦͯ͠࡞ۀͰ͖Δ͸ͣ ● ૣ͘Ҡߦ͍ͨ͠ ○ ϝΠϯࢪࡦΛૄ͔ʹ͠ͳ͍ ○ ແཧͳ࢒ۀΛ͠ͳ͍ νʔϜͷڠྗΛಘΔํ਑ͰਐΊͨ

Slide 34

Slide 34 text

ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ Vue.jsΛ࢖͍ͬͯΔϖʔδΛϦετԽɺ̍ͭͣͭमਖ਼

Slide 35

Slide 35 text

ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ มߋͨ͠఺ ● VueΞϓϦέʔγϣϯͷΠϯελϯεੜ੒ํ๏ͷมߋʹ൐͏मਖ਼ ● $listeners͕$attrsʹؚ·ΕΔΑ͏ʹͳͬͨमਖ਼ ● v-modelͷ࢓༷มߋʹ൐͏मਖ਼ ’’ ҠߦϏϧυ v-model | Vue.js https://v3.ja.vuejs.org/guide/migration/v-model.html

Slide 36

Slide 36 text

ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ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

Slide 37

Slide 37 text

ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ Ұ௨Γಈ͘Α͏ʹͳͬͨ🚀

Slide 38

Slide 38 text

ᶆ ݕূɾίʔυϨϏϡʔ Vue.js͕࢖ΘΕ͍ͯΔશURLΛϦετԽͯ͠ݕূ

Slide 39

Slide 39 text

ᶆ ݕূɾίʔυϨϏϡʔ Vue3ʹରԠͨ͠Vue.js devtools͕͋ΓɺStoreͷத਎΋ݟΕΔ ● ϖʔδΛ։͚ͯɺσβΠϯͷ่Ε͕ͳ͍͔ ● ϑΥʔϜ͕ೖྗͰ͖ɺద੾ͳ஋͕౤͛ΒΕ͍ͯΔ͔ ● JavaScriptͰૢ࡞͍ͯ͠ΔՕॴ͕ਖ਼ৗʹಈ͔͘ ○ emit͕ద੾ʹൃՐ͢Δ͔ ○ ϖʔδϯά΍ΧϨϯμʔ ● ϒϥ΢βͷDevTools্ͰWarning, Errorϩά͕ྲྀΕ͍ͯͳ͍͔ ݕূͨ͠఺ https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

Slide 40

Slide 40 text

ᶆ ݕূɾίʔυϨϏϡʔ ίʔυϨϏϡʔ͸ؾ߹ ʮݕূͰ໰୊ͳ͘ಈ͘ʯʮύοͱݟΑͦ͞͏ʯͰ͋Ε͹OKͰਐΊͨ 71ϑΝΠϧมߋ ΄΅package-lock.jsonͷมߋ मਖ਼ͨ͠ͷ͸1000ߦ͘Β͍

Slide 41

Slide 41 text

ᶇ ϦϦʔε ● Vue3Ξοϓσʔτʹ໿1ϲ݄൒͔͔ͬͨ ● 1͚ͭͩෆ۩߹͕ى͖ͨ ○ Vue2ͷ࢓༷Ͱ৽͍͠ϖʔδΛ࡞͍ͬͯͨͨΊಈ͔ͳ͔ͬͨ ■ ݕূ࿙Ε ○ ฒྻͰࢪࡦ͕૸͍ͬͯΔ৔߹͸஫ҙ 🎉 ͍ͭʹϦϦʔε 🎉

Slide 42

Slide 42 text

Ҡߦલʹ஌ΕͨΒྑ͔ͬͨ͜ͱ

Slide 43

Slide 43 text

Ҡߦલʹ஌ΕͨΒྑ͔ͬͨ͜ͱ ● ࢪࡦͰมߋ͕ೖΔՕॴͱVue3Խ͕όοςΟϯά ○ ίϯϑϦΫτ΍༧ظ͠ͳ͍όά ϝΠϯࢪࡦͱฒߦ͢Δ৔߹ͷ஫ҙ఺ ରࡦํ๏ ϦεΫ ● খ͘͞ϦϦʔεΛॏͶΔํ਑͕ྑ͍ ○ Vue2ͱVue3Λڞଘͯ͠ϦϦʔε͢Δํ๏͕͋ΔʢެࣜͷҠߦϏϧυʣ ○ ґଘϥΠϒϥϦͷΞοϓσʔτΛઌʹϦϦʔε ○ Vue3ͷഁյతมߋΛݟӽͯ͠ίʔυΛमਖ਼

Slide 44

Slide 44 text

Ҡߦલʹ஌ΕͨΒྑ͔ͬͨ͜ͱ ● খ͞ͳϓϩδΣΫτ͔ΒҠߦ͠Α͏ ○ Ұ౓Ҡߦͯ͠ΈΔͱ஌ࣝྔ͕૿͑Δ ● ೔ʑϥΠϒϥϦͷΞοϓσʔτେࣄ ○ ϥΠϒϥϦͷΞοϓσʔτΛߦΘͳ͍ͱෛ࠴Խ͕࢝·Δ

Slide 45

Slide 45 text

·ͱΊ

Slide 46

Slide 46 text

·ͱΊ ● RettyͰ͸ʮϝΠϯͷࢪࡦΛࢭΊΔ͜ͱͳ͘ʯʮେ͖ͳෆ۩߹Λى͜͢͜ͱͳ͘ʯ Vue3ʹΞοϓσʔτ͢Δ͜ͱ͕Ͱ͖ͨ ○ ۭ͖࣌ؒΛݟ͚ͭͯɺҰਓͰ΍Ζ͏ͱ͠ͳ͔ͬͨ ● νʔϜʹ͸Vue3Խ͍ͨ͜͠ͱΛখग़͢͠ΔͱνʔϜͷڠྗɾཧղΛಘΒΕ΍͍͢ ● Vue3ͷComposition API͕ಈ͍ͨޙ͸ෳ਺ਓͰฒߦͯ͠ਐΊΒΕΔ͸ͣ ● ೔ʑϥΠϒϥϦͷΞοϓσʔτେࣄ

Slide 47

Slide 47 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ