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
480
施策を止めるな!Vue2からVue3への移行@Vue Fes 2022
Shiga
October 13, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
Trial
cairolibrary720
1
130
How to use Macrobenchmark
veronikapj
0
160
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
最近追加した型の紹介とその振り返り
aki19035vc
0
170
CSC307 Lecture 12
javiergs
PRO
0
220
英語
s_shimotori
1
220
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
A Tale of Four Properties
chriscoyier
155
22k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Six Lessons from altMBA
skipperchong
24
3.2k
Agile that works and the tools we love
rasmusluckow
325
20k
It's Worth the Effort
3n
181
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
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͕ಈ͍ͨޙෳਓͰฒߦͯ͠ਐΊΒΕΔͣ • ʑϥΠϒϥϦͷΞοϓσʔτେࣄ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ