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
580
施策を止めるな!Vue2からVue3への移行@Vue Fes 2022
Shiga
October 13, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.1k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
Hack Claude Code with Claude Code
choplin
7
2.6k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
10
4.3k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
200
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
KATA
mclloyd
30
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Visualization
eitanlees
146
16k
A Tale of Four Properties
chriscoyier
160
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
How STYLIGHT went responsive
nonsquared
100
5.6k
How GitHub (no longer) Works
holman
314
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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͕ಈ͍ͨޙෳਓͰฒߦͯ͠ਐΊΒΕΔͣ • ʑϥΠϒϥϦͷΞοϓσʔτେࣄ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ