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
590
施策を止めるな!Vue2からVue3への移行@Vue Fes 2022
Shiga
October 13, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
A Gopher's Guide to Vibe Coding
danicat
0
180
🔨 小さなビルドシステムを作る
momeemt
2
570
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
310
コンテキストエンジニアリング Cursor編
kinopeee
1
720
Updates on MLS on Ruby (and maybe more)
sylph01
1
110
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
920
MLH State of the League: 2026 Season
theycallmeswift
0
160
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
コーディングエージェント時代のNeovim
key60228
1
110
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Code Review Best Practice
trishagee
70
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Bash Introduction
62gerente
614
210k
Balancing Empowerment & Direction
lara
2
590
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͕ಈ͍ͨޙෳਓͰฒߦͯ͠ਐΊΒΕΔͣ • ʑϥΠϒϥϦͷΞοϓσʔτେࣄ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ