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
スマホから Youtube Shortsを見られないようにする
lemolatoon
20
20k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
140
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
980
Serena MCPのすすめ
wadakatu
4
960
Le côté obscur des IA génératives
pascallemerrer
0
140
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
490
CSC509 Lecture 05
javiergs
PRO
0
300
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
440
Swift Concurrency - 状態監視の罠
objectiveaudio
2
510
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
280
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Unsuck your backbone
ammeep
671
58k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Building Adaptive Systems
keathley
43
2.8k
4 Signs Your Business is Dying
shpigford
185
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
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͕ಈ͍ͨޙෳਓͰฒߦͯ͠ਐΊΒΕΔͣ • ʑϥΠϒϥϦͷΞοϓσʔτେࣄ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ