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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. Vue3ͱ͸ʁ
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. Vue3ʹΞοϓσʔτ͍͕ͨ͠
    ͳ͔ͳ͔ग़དྷͳ͍໰୊
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. Vue3ԽΛ࢝ΊͨΩοΧέ
    ʮVue3Խͱ͸ʁʯ

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

    View Slide

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

    View Slide

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

    View Slide

22. ۩ମతʹߦͬͨҠߦखॱ
    

    View Slide

23. ۩ମతʹߦͬͨҠߦखॱ
    ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ
    ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ
    ᶅ Vue3Ͱಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼
    ᶆ ݕূɾίʔυϨϏϡʔ
    ᶇ ϦϦʔε
    

    View Slide

24. ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ
    ͓ళ؅ཧը໘ͷVue3Խʹ௅ઓ👊
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ
    Vuex ͷΠϯετʔϧ ϓϩηε͕มߋ͞ΕͨͷͰमਖ਼
    

    View Slide

29. ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ
    ϏϧυͰ͖ΔΑ͏ʹͳͬͨ🚀
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

37. ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼
    Ұ௨Γಈ͘Α͏ʹͳͬͨ🚀
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. Ҡߦલʹ஌ΕͨΒྑ͔ͬͨ͜ͱ
    

    View Slide

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

    View Slide

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

    View Slide

45. ·ͱΊ
    

    View Slide

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

    View Slide

47. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide