Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
施策を止めるな!Vue2からVue3への移行@Vue Fes 2022
Search
Shiga
October 13, 2022
Programming
0
600
施策を止めるな!Vue2からVue3への移行@Vue Fes 2022
Shiga
October 13, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
800
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Six and a half ridiculous things to do with Quarkus
hollycummins
0
140
CSC305 Lecture 03
javiergs
PRO
0
240
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
私はどうやって技術力を上げたのか
yusukebe
43
18k
CSC305 Lecture 06
javiergs
PRO
0
210
Devvox Belgium - Agentic AI Patterns
kdubois
1
100
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
420
XP, Testing and ninja testing ZOZ5
m_seki
3
570
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
540
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
390
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Done Done
chrislema
185
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Transcript
ࢪࡦΛࢭΊΔͳʂ Vue2͔ΒVue3ͷҠߦ Rettyגࣜձࣾ ࢤլ ᇈଠ 2022/10/16
ຊηογϣϯͷ֓ཁ RettyͰʮϝΠϯͷࢪࡦΛࢭΊΔ͜ͱͳ͘ʯʮେ͖ͳෆ۩߹Λى͜͢͜ͱͳ͘ʯVue3 ʹΞοϓσʔτ͢Δ͜ͱ͕Ͱ͖ͨ • ͲͷΑ͏ʹVue3ΞοϓσʔτΛਐΊ͍ͯͬͨͷ͔ • ۩ମతͳVue3ΞοϓσʔτͷҠߦखॱ • Vue3Ҡߦલʹ͓͚ͬͯΑ͔ͬͨ͜ͱ •
νʔϜͰͷҠߦ͢Δ࣌ͷϙΠϯτ
ࣗݾհ ࢤլ ᇈଠʢ͕͠ ͚͍ͨʣ • Rettyגࣜձࣾ ৽ଔ2 • WebΤϯδχΞ •
eεϙʔπ/FPS͕͖
None
[toB] ͓ళཧը໘ɾࣾཧը໘ [toC] Webϖʔδ Retty
[toB] ͓ళཧը໘ɾࣾཧը໘ [toC] Webϖʔδ Retty ͪ͜Βͷ͓
࣍ 1. Vue3ͱ 2. Vue3ʹΞοϓσʔτ͍͕ͨ͠தʑग़དྷͳ͍ 3. ͲͷΑ͏ʹVue3ΞοϓσʔτΛணखͰ͖ΔΑ͏ʹͳͬͨͷ͔ 4. ۩ମతʹߦͬͨҠߦखॱ 5.
ҠߦલʹΕͨΒྑ͔ͬͨ͜ͱ
Vue3ͱʁ
Vue3ͱ 2020/09/19ʹVue.jsͷversion3.0.0͕ਖ਼ࣜϦϦʔε🎉 https://github.com/vuejs/core/releases/tag/v3.0.0
Vue3ͱ • ύϑΥʔϚϯεͷ্ • อकੑΛ্͛ΔͨΊͷΈվળ Teleport Composition API Fragment Suspense
Typescriptͷαϙʔτ όϯυϧαΠζͷ࠷খԽ filterͷഇࢭ
Vue3ͱ • ύϑΥʔϚϯεͷ্ • อकੑΛ্͛ΔͨΊͷΈվળ Teleport Composition API Fragment Suspense
Typescriptͷαϙʔτ όϯυϧαΠζͷ࠷খԽ filterͷഇࢭ Δ͔͠ͳ͍🔥
Vue3ʹΞοϓσʔτ͍͕ͨ͠ ͳ͔ͳ͔ग़དྷͳ͍
Vue3ʹ͍͚ͨ͠Ͳ... • ଟ͘ͷഁյతมߋ • Vue3Ͱಈ͔ͳ͍ϥΠϒϥϦ Ξοϓσʔτ͢ΔͨΊͷ࣌ؒΛ֬อ͢Δඞཁ͕͋Δ ͚ͩͰಈ͔ͳ͍
։ൃମ੍ͷհ RettyεΫϥϜΛ༻͍ͯΞδϟΠϧͳ։ൃΛࢦ͍ͯ͠Δ ։ൃϓϩμΫτόοΫϩά͔Β༏ઌ͕ߴ͍ॱʹணख ϓϩμΫτόοΫϩά ࢪࡦ ΤϯδχΞ
։ൃମ੍ͷհ RettyεΫϥϜΛ༻͍ͯΞδϟΠϧͳ։ൃΛࢦ͍ͯ͠Δ ։ൃϓϩμΫτόοΫϩά͔Β༏ઌ͕ߴ͍ॱʹணख ϓϩμΫτόοΫϩά ࢪࡦ ΤϯδχΞ ϝΠϯࢪࡦͱͯ͠ਐΊ͍ͯͬͨΒྑ͍ͷͰʁ 🤔
ϝΠϯࢪࡦͰVue3ΞοϓσʔτΛߟ͑ͨ • ࣄۀΠϯύΫτ͕ͱͯ͠ݱΕ͍͢ͷͰͳ͍ ◦ ࣄۀձࣾͱͯ͠རӹΛग़͍͖͍ͯͨ͠ • ظݶ͕લʹഭ͍ͬͯΔΘ͚Ͱͳ͍ ϝΠϯࢪࡦͱͯ͠ Vue3ΞοϓσʔτΛಇ͖͔͚Δͷ͍͠ͱஅ ϥΠϒϥϦͷΞοϓσʔτଞࢪࡦΑΓ༏ઌΛ্͛ʹ͍͘
ͲͷΑ͏ʹVue3ΞοϓσʔτΛ ணखͰ͖ΔΑ͏ʹͳͬͨͷ͔
Vue3ԽΛ࢝ΊͨΩοΧέ ΩοΧέʮϨτϩεϖΫςΟϒʯ
Vue3ԽΛ࢝ΊͨΩοΧέ ʮVue3Խͱʁʯ ʮԿ͔ྑ͍͜ͱ͋Δͷʁʯ Vue3Խʹ͍ͭͯνʔϜ͕ڵຯΛ࣋ͬͯ͘Εͨ🚀 ʮVue v3ͷ͜ͱͰɺϝϦοτ˓˓Ͱʯ ʮVue3ྑͦ͞͏ʯ ʮͬͯΈΑ͏ʯ
։ൃମ੍ͷհ 1िؒͷಈ͖ ݄ Ր ਫ ۚ 🌄 ேձ 🍽
ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 10:00ࠒ 19:00ࠒ 🌄 ேձ 🍽 ϥϯν εϓϦϯτ ϨϏϡʔ Ϩτϩεϖ ΫςΟϒ εϓϦϯτ ϓϥϯχϯ ά
։ൃମ੍ͷհ 1िؒͷಈ͖ ݄ Ր ਫ ۚ 🌄 ேձ 🍽
ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 🌄 ேձ 🍽 ϥϯν 💻 ։ൃ 🙆 MTG 10:00ࠒ 19:00ࠒ 🌄 ேձ 🍽 ϥϯν εϓϦϯτ ϨϏϡʔ Ϩτϩεϖ ΫςΟϒ εϓϦϯτ ϓϥϯχϯ ά ͜ͷลΓ ͜ͷลΓ ͜ͷลΓ ͜ͷลΓ
۩ମతʹߦͬͨҠߦखॱ
۩ମతʹߦͬͨҠߦखॱ ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ ᶅ Vue3Ͱಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ ᶆ ݕূɾίʔυϨϏϡʔ
ᶇ ϦϦʔε
ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ͓ళཧը໘ͷVue3Խʹઓ👊
ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ϓϩδΣΫτ͕σΧ͗ͯ͢ݫ͔ͬͨ͠...💦 • ґଘؔͷΤϥʔͰ·͘Γ ◦ ༻͍ͯ͠ΔϥΠϒϥϦͷόʔδϣϯ͕ݹ͍ • Vue3ॳͷࢼΈͷͨΊઌ͕ݟ͑ͳ͍ ◦
ʮ͍ͭ·Ͱ͔͔Γͦ͏͔ʯʮͲ͜·ͰΕΑ͍͔ʯΑ͔͘Βͳ͍ ◦ ϦϦʔεޙʹ͕͋ͬͨ߹ͷଛ͕େ͖͍
ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ࣾཧը໘ʢVue.js + Vuex + Laravel + Laravel MixʣͰ࠶ઓ👊
• ϓϩδΣΫτ͕খ͍͞ʢ150ݸͷVueϑΝΠϧʣ ◦ Ҡߦ͍͢͠ ◦ Ҡߦʹ͕͋ͬͯӨڹൣғΛࣾʹ͑ΒΕΔ
ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ެࣜͷΞοϓάϨʔυϫʔΫϑϩʔΛݟͳ͕ΒϥΠϒϥϦͷόʔδϣϯΞοϓhttps:// v3.ja.vuejs.org/guide/migration/migration-build.html
ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ Vuex ͷΠϯετʔϧ ϓϩηε͕มߋ͞ΕͨͷͰमਖ਼
ᶃ Vue3ͰϏϧυग़དྷΔΑ͏ʹ ϏϧυͰ͖ΔΑ͏ʹͳͬͨ🚀
ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ Composition APIͰॻ͍ͨ࠷খݶͷαϯϓϧίϯϙʔωϯτΛ༻ҙ
ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ αϯϓϧίϯϙʔωϯτΛݺͼग़͢Α͏ʹमਖ਼ ΞϓϦέʔγϣϯΠϯελϯεͷੜํ๏มߋ
ᶄ Vue3ͷComposition APIΛಈ͔ͤΔΑ͏ʹ Vue3ͷComposition APIͰಈ͘Α͏ʹͳͬͨ🚀
ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ ͜ͷޙͷमਖ਼ࣗҰਓͰશ෦Δ͜ͱෆՄೳͰͳ͍ͱࢥ͕ͬͨ… • ϖʔδ͕ଟ͘ɺbreaking change͕ଟ͍ͷͰ࡞ۀن͕େ͖ͦ͏ ◦ ෆ࣮֬ੑ͕͘ɺฒߦͯ͠࡞ۀͰ͖Δͣ • ૣ͘Ҡߦ͍ͨ͠
◦ ϝΠϯࢪࡦΛૄ͔ʹ͠ͳ͍ ◦ ແཧͳۀΛ͠ͳ͍ νʔϜͷڠྗΛಘΔํͰਐΊͨ
ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ Vue.jsΛ͍ͬͯΔϖʔδΛϦετԽɺ̍ͭͣͭमਖ਼
ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ มߋͨ͠ • VueΞϓϦέʔγϣϯͷΠϯελϯεੜํ๏ͷมߋʹ͏मਖ਼ • $listeners͕$attrsʹؚ·ΕΔΑ͏ʹͳͬͨमਖ਼ • v-modelͷ༷มߋʹ͏मਖ਼ ’’
ҠߦϏϧυ v-model | Vue.js https://v3.ja.vuejs.org/guide/migration/v-model.html
ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ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
ᶅ ಈ͔ͳ͘ͳͬͨϖʔδΛ1ͭͣͭमਖ਼ Ұ௨Γಈ͘Α͏ʹͳͬͨ🚀
ᶆ ݕূɾίʔυϨϏϡʔ Vue.js͕ΘΕ͍ͯΔશURLΛϦετԽͯ͠ݕূ
ᶆ ݕূɾίʔυϨϏϡʔ Vue3ʹରԠͨ͠Vue.js devtools͕͋ΓɺStoreͷதݟΕΔ • ϖʔδΛ։͚ͯɺσβΠϯͷ่Ε͕ͳ͍͔ • ϑΥʔϜ͕ೖྗͰ͖ɺదͳ͕͛ΒΕ͍ͯΔ͔ • JavaScriptͰૢ࡞͍ͯ͠ΔՕॴ͕ਖ਼ৗʹಈ͔͘
◦ emit͕దʹൃՐ͢Δ͔ ◦ ϖʔδϯάΧϨϯμʔ • ϒϥβͷDevTools্ͰWarning, Errorϩά͕ྲྀΕ͍ͯͳ͍͔ ݕূͨ͠ https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
ᶆ ݕূɾίʔυϨϏϡʔ ίʔυϨϏϡʔؾ߹ ʮݕূͰͳ͘ಈ͘ʯʮύοͱݟΑͦ͞͏ʯͰ͋ΕOKͰਐΊͨ 71ϑΝΠϧมߋ ΄΅package-lock.jsonͷมߋ मਖ਼ͨ͠ͷ1000ߦ͘Β͍
ᶇ ϦϦʔε • Vue3Ξοϓσʔτʹ1ϲ݄͔͔ͬͨ • 1͚ͭͩෆ۩߹͕ى͖ͨ ◦ Vue2ͷ༷Ͱ৽͍͠ϖʔδΛ࡞͍ͬͯͨͨΊಈ͔ͳ͔ͬͨ ▪ ݕূ࿙Ε
◦ ฒྻͰࢪࡦ͕͍ͬͯΔ߹ҙ 🎉 ͍ͭʹϦϦʔε 🎉
ҠߦલʹΕͨΒྑ͔ͬͨ͜ͱ
ҠߦલʹΕͨΒྑ͔ͬͨ͜ͱ • ࢪࡦͰมߋ͕ೖΔՕॴͱVue3Խ͕όοςΟϯά ◦ ίϯϑϦΫτ༧ظ͠ͳ͍όά ϝΠϯࢪࡦͱฒߦ͢Δ߹ͷҙ ରࡦํ๏ ϦεΫ • খ͘͞ϦϦʔεΛॏͶΔํ͕ྑ͍
◦ Vue2ͱVue3Λڞଘͯ͠ϦϦʔε͢Δํ๏͕͋ΔʢެࣜͷҠߦϏϧυʣ ◦ ґଘϥΠϒϥϦͷΞοϓσʔτΛઌʹϦϦʔε ◦ Vue3ͷഁյతมߋΛݟӽͯ͠ίʔυΛमਖ਼
ҠߦલʹΕͨΒྑ͔ͬͨ͜ͱ • খ͞ͳϓϩδΣΫτ͔ΒҠߦ͠Α͏ ◦ ҰҠߦͯ͠ΈΔͱࣝྔ͕૿͑Δ • ʑϥΠϒϥϦͷΞοϓσʔτେࣄ ◦ ϥΠϒϥϦͷΞοϓσʔτΛߦΘͳ͍ͱෛ࠴Խ͕࢝·Δ
·ͱΊ
·ͱΊ • RettyͰʮϝΠϯͷࢪࡦΛࢭΊΔ͜ͱͳ͘ʯʮେ͖ͳෆ۩߹Λى͜͢͜ͱͳ͘ʯ Vue3ʹΞοϓσʔτ͢Δ͜ͱ͕Ͱ͖ͨ ◦ ۭ͖࣌ؒΛݟ͚ͭͯɺҰਓͰΖ͏ͱ͠ͳ͔ͬͨ • νʔϜʹVue3Խ͍ͨ͜͠ͱΛখग़͢͠ΔͱνʔϜͷڠྗɾཧղΛಘΒΕ͍͢ • Vue3ͷComposition
API͕ಈ͍ͨޙෳਓͰฒߦͯ͠ਐΊΒΕΔͣ • ʑϥΠϒϥϦͷΞοϓσʔτେࣄ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ