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
Vue.js最新動向
Search
kazupon
April 24, 2024
3
1.6k
Vue.js最新動向
kazupon
April 24, 2024
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
510
Vapor Revolution
kazupon
3
3.6k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.9k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
State of Vue I18n
kazupon
3
640
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.7k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Producing Creativity
orderedlist
PRO
347
40k
Building an army of robots
kneath
306
45k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Unsuck your backbone
ammeep
671
58k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
810
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Transcript
Vue.js ࠷৽ಈ TechFeed Experts Night #27 2024.04.24 @kazupon
ࣗݾհ
PLAID, inc. Vue.js Core Team Member Nuxt Community team
Vue.js Japan User Group Organizer Creator of Vue I18n & Intlify Maintainer of Nuxt I18n @kazu_pon kazupon kazupon
͡Ίʹ
TechFeed Experts Night #2 https://speakerdeck.com/kazupon/reactivity-transform
ࠓ͢͜ͱ • Ҏલͷ TechFeed exports Night #2 Ҏ͔߱Βࠓ· Ͱͷ Vue.js
ͷϦϦʔεঢ়گ • Vue.js ͷࠓޙ
Vue Fes Japan 2024 ։࠵͠·͢ʂ
Vue 3 ͷϦϦʔελΠϜϥΠϯ • 2021/08/05: 3.2 2022/08/17: TechFeed
Experts Night #2 • 2023/05/11: 3.3 • 2023/12/28: 3.4 2024/04/24: TechFeed Experts Night #27
Vue 3 ͷϦϦʔελΠϜϥΠϯ • 2021/08/05: 3.2 2022/08/17: TechFeed
Experts Night #2 • 2023/05/11: 3.3 • 2023/12/28: 3.4 2024/04/24: TechFeed Experts Night #27 3.3. ϦϦʔε·Ͱ2͔͔ۙ͘Γ·ͨ͠ɻ ͳͥͰ͠ΐ͏ʁ
Vue 3.2 ۄ • SFC <script setup> • 3.2 Ҏલ·Ͱ
setup ͷதʹॻ͍ͯ ͍ͨ • script setup ͷొ ʹΑΓγϯϓϧʹ ͳͬͨ 3.2 Ҏલ 3.2
ͨͩɺSFC पΓͰ·͕ͩ… • TypeScript • ܕ͕ޮ͔ͳ͍෦͕·ͩ͋Δ (ྫ: slots) • API
• ײతͰͳ͍ͯͮ͘Β͍෦͕͋Δ (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ)
ͨͩɺSFCपΓͰ·͕ͩ… • TypeScript • ܕ͕ޮ͔ͳ͍෦͕·ͩ͋Δ (ྫ: slots) • API •
ײతͰͳ͍ͯͮ͘Β͍෦͕͋Δ (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ) SFC Vue ͷίϯηϓτͰ͋ΓίΞػೳͰ͋Δ Α͍ DX Λఏڙ͢ΔͨΊʹ͞ΒͳΔվળ͕ඞཁ
Vue 3.3 Ͱ DX վળʹϑΥʔΧε • SFC HTML ϕʔεͷίϯϙʔωϯτγεςϜ
• SFC ͷ DX ΤσΟλ͕ఏڙ͢Δ DX ʹࠨӈ͞ΕΔ • Vue Language Tools (چ:Volar) ʹΑΔαϙʔτ͕ ඞਢ • RFC Ͱ SFC վળʹ͍ͭͯϑΟʔυόοΫΛಘͭͭ ৻ॏʹۛຯ͍ͯͬͨ͠
Vue 3.4 ͰύϑΥʔϚϯεվળ • Vue 3.3 ͷ DX վળʹଓ͖ɺҎԼվળ •
Vue ίϯύΠϥͷύϑΥʔϚϯε • ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯε
Vue 3.3 ϦϦʔε༰
ػೳͱվળ • <script setup> Ͱͷ TypeScript पΓDX վળ • de
fi neOptions • Reactivity पΓͷϢʔςΟϦςΟαϙʔτ • toRef / toValue • ࣮ݧతػೳ • de fi neProps ͷׂೖ • de fi neModel
ඇਪػೳ • άϩʔόϧ JSX Πϯϙʔτ • Reactivity Transform
͜͏ͨ͠ Vue 3.3 ͷϦ Ϧʔε༰ͷத
Reactivity Transform https://ja.vuejs.org/guide/extras/reactivity-transform.html#reactivity-transform
Reactivity Transform ͕ ೖΒͳ͔ͬͨͷ ͳͥʁ🤔
ͦΕ…
৽ͨͳʹΑͬͯ Vue ͕ෳࡶʹͳͬͯ͠·͏͔Β
Reactivity Transform https://speakerdeck.com/kazupon/reactivity-transform?slide=6
ϦΞΫςΟϒपΓͷDXΛվળ͢Δͣͩͬͨ… https://speakerdeck.com/kazupon/reactivity-transform?slide=9
͕ͩɺ৽ͨͳ͕ੜ͡Δ͜ͱ͕Θ͔ͬͨ • Reactivity Transform ʹΑΔੜ͡Δ • ίʔυͷϦΞΫςΟϏςΟίϯςΩετ͕͔Γͮ Β͘ͳΔ (Ͳͷมͷ͕ϦΞΫςΟϒͰϦΞΫςΟϒͰͳ
͍ͷ͔) • Reactivity Transform ϕʔεͷίʔυͱͦΕΛΘͳ ͍ίʔυؒͷίϯςΩετεΠον • ref Λཁٻ͢Δ I/F Λ࣋ͬͨؔͳͲ͕ಈ͔ͳ͘ͳΔ
࠷େͷ • ։ൃऀͰஅ͕ى͖ΔϦεΫ • Reactivity Transform JavaScript ͷηϚϯςΟ Ϋεʹ͍ͦͬͯͳ͍
• Reactivity Transform Λ͏ v.s. Θͳ͍
͜͏ͨ͠ཧ༝͔Β… • Evan ࢯ Reactivity Transform ͷഇࢭΛܾఆ͠ɺΠ ϕϯτͰΞφϯε https://youtu.be/OrT0tHGXyqE?t=844 Vue.js
Nation ΑΓ
Vue 3.3 ଞͷ༰ʹ͍ͭͯ… • طʹԼه URL ʹεϥΠυࢿྉ͕͋ΔͷͰׂѪ https://speakerdeck.com/kazupon/vue-dot-jsekosisutemudong-xiang-2023
Vue 3.4 ϦϦʔε༰
ػೳͱվળ • v-bind লུه๏ͷαϙʔτ • ϋΠυϨʔγϣϯपΓͷվળ • ΤϥʔίʔυͱίϯύΠϧλΠϜϑϥάͷϦϑΝϨ ϯεαϙʔτ •
ίϯύΠϥύϑΥʔϚϯεͷվળ • ϦΞΫςΟϒγεςϜͷվળ • de fi neModel ͷ҆ఆԽ
ഇࢭػೳ • άϩʔόϧ JSX Πϯϙʔτ • Reactivity Transform • app.con
fi g.unwrapInjectedRef • vnode ϓϦϑΟΫεʹΑΔΠϕϯτϦεφʔ • v-is σΟϨΫςΟϒ
Vue 3.4 ͰΠϯύΫτ ͕େ͖͍ͷʁ
ύϑΥʔϚϯվળܥ 🏎💨
ϦΞΫςΟϒγεςϜ ͷվળ
• setInterval Ͱ ref ͳΛ 1ms ୯Ґͷߋ৽ʹΑͬͯɺ secɺminɺhour ͷ computed
Λߋ৽͢ΔσϞ Computed ͷύϑΥʔϚϯε͕ܶతʹվળͨ͠ https://twitter.com/johnsoncodehk/status/1695383715906744449
ϕϯνϚʔΫ݁Ռ https://github.com/vuejs/core/pull/5912#issuecomment-1748985641
Vue 3.4 ଞͷ༰ʹ͍ͭͯ… • طʹԼه URL ʹεϥΠυࢿྉ͕͋ΔͷͰׂѪ https://speakerdeck.com/kazupon/vue-3-dot-4
Vue.js ͷࠓޙ
• Vue 3 ॳظϦϦʔεҠߦ 4 ܦաͯ͠ɺΤίγεςϜ Vue 3 ରԠ͍ͯ͠Δ
• Vite ͕࠾༻͍ͯ͠Δ Ecosystem CI Λಋೖͯ͠Τίγε ςϜͱޓੑςετͭͭ͠ɺ։ൃΛਐΊ͍ͯΔ • ɺҎԼͷϦϦʔε or ։ൃΛ༧ఆ͍ͯ͠Δ • Vue 3.5 • Vapor Ϟʔυ ҆ఆੑॏࢹ
Vue 3.5
• ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯεվળ • SSR ͷվળ • Suspence • Lazy hydration
• Custom Elements पΓͷվળ ܭը༰
• ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯεվળ • SSR ͷվળ • Suspence • Lazy hydration
• Custom Elements पΓͷվળ ܭը༰ େ͖͍ػೳՃͳ͠ɻطଘػೳͷվળ
• ϝϞϦ༻ྔͷվળ: ༻ྔ50%Ҏ্ݮ • ୯Ұ ref + ෳ effect (computed):
+118%~185% ϦΞΫςΟϏςΟγεςϜͷվળ https://github.com/vuejs/core/pull/10397
Vapor Ϟʔυ
• Vapor Ϟʔυݱࡏ WIP • ϦϦʔε࣌ʹ༷͕มΘΔՄೳੑ͕͋Γ·͢ ⚠ ҙ
• Ծ DOM (Virtaul DOM) ΛΘͳ͍ Vue ͷϨϯμϦϯ άΛαϙʔτ͢ΔίϯϙʔωϯτͷϞʔυ •
ΞϓϦέʔγϣϯͷύϑΥʔϚϯεΛ্ͤ͞Δ͜ͱ Λత • Vapor Ϟʔυ Vue ίϯύΠϥʹΑͬͯఏڙ͞ΕΔ Vapor ϞʔυͬͯԿʁ
• ࣮ߦύϑΥʔϚϯε্͕͢Δ • ϝϞϦ༻ྔ͕ݮΔ • Vue ͷϥϯλΠϜίʔυ͕ݮΔ Vapor ϞʔυͷϝϦοτ
• ࣮ߦύϑΥʔϚϯε্͕͢Δ • ϝϞϦ༻ྔ͕ݮΔ • Vue ͷϥϯλΠϜίʔυ͕ݮΔ Vapor ϞʔυͷϝϦοτ Vapor
ϞʔυΛϑϧʹར༻͢Δͱ Vue ͷԾ DOM ϥϯλ ΠϜΛશʹআͰ͖ 88% ۙ͘ݮͰ͖Δ͜ͱΛݕূࡁΈ
• Repository vue/core Ͱͳ͘ vue/core-vapor https://github.com/vuejs/core-vapor • ։ൃϝϯόʔ
Vapor Ϟʔυͷ։ൃମ੍ Evan ࢯ Kevin ࢯ Rizumu ࢯ Ubugeeei ࢯ
• Repository vue/core Ͱͳ͘ vue/core-vapor https://github.com/vuejs/core-vapor • ։ൃϝϯόʔ
Vapor Ϟʔυͷ։ൃମ੍ Evan ࢯ Kevin ࢯ Rizumu ࢯ Ubugeeei ࢯ Evan ࢯݱ࣌Ͱ͋·Γ࣮ʹؔ༩͍ͯ͠ͳ͍ɻ Kevin ࢯɺRizumu ࢯɺͦͯ͠ຊਓ Ubugeeei ࢯ Β͕த৺ ͱͳͬͯ։ൃ͍ͯ͠Δ
• Vue ίϯύΠϥʹΑͬͯ SFC ΛVirtual DOM ΛΘͳ ͍ DOM Ͱಈ࡞͢Δ
JavaScript ࣮ߦίʔυʹม͢Δ Vapor ϞʔυͲ͏ͬͯಈ࡞͢Δ͔
• Vue ίϯύΠϥʹΑͬͯ SFC ΛVirtual DOM ΛΘͳ ͍ DOM Ͱಈ࡞͢Δ
JavaScript ࣮ߦίʔυʹม͢Δ Vapor ϞʔυͲ͏ͬͯಈ࡞͢Δ͔ Vue template Λ render ؔʹม͢Δ
ࢀߟ: Vapor Ϟʔυͱඇ Vapaor Ϟʔυͷҧ͍ Vapor ඇ Vapor
ࢀߟ: Vapor Ϟʔυͱඇ Vapaor Ϟʔυͷҧ͍ Vapor ඇ Vapor Vapor
VNode ͷΑ͏ͳ Virtual DOM Λੜ͢Δ render ؔΛੜ ͠ͳ͍
• Playground https://vapor-repl.netlify.app ݱࡏ Vapor ϞʔυΛࢼͤΔ
• 2छྨͷํ๏Ͱ͏ํ๏͕͋Δ • ΞϓϦέʔγϣϯϨϕϧ • ίϯϙʔωϯτϨϕϧ Vapor ϞʔυΛͲ͏ͬͯ༻͢Δͷ͔
• ΞϓϦέʔγϣϯͷΤϯτϦϙΠϯτͰϑΝΠϧ໊ʹ `.vapor` Λ post fi x ͨ͠ίϯϙʔωϯτ & `vue/vapor`
Λ import ͢Δ ΞϓϦέʔγϣϯϨϕϧͷ Vapor Ϟʔυ ΞϓϦέʔγϣϯϨϕϧ Vapor ϞʔυͷԸܙΛ࠷େݶʹൃش͢Δ
• ίϯϙʔωϯτ୯ҐͰϑΝΠϧ໊ʹ `.vapor` Λ post fi x ͨ͠ίϯϙʔωϯτ Λ import
͢Δ ίϯϙʔωϯτϨϕϧͷ Vapor Ϟʔυ ෦తʹVaporϞʔυͷίϯϙʔωϯτΛ͍ͬͯ͘͜ͱ͕Ͱ͖Δ
• Vapor Ϟʔυͳίϯϙʔωϯτͱඇ Vapor Ϟʔυͳί ϯϙʔωϯτͱ૬ޓӡ༻Մೳ Vapor Ϟʔυͱඇ Vapor Ϟʔυͷࠞࡏ͕Մೳ
App.vue ඇVapor ඇVapor ඇVapor Vapor Vapor Vapor Vapor ϞʔυඇରԠͳ 3rd party ίϯϙʔωϯτͱ ͍ͬ͠ΐʹ༻͢Δ͜ͱͰ͖Δ
• Vapor Ϟʔυ͋͘·ͰΦϓγϣϯػೳɻͳͷͰɺ طଘͷΞϓϦέʔγϣϯͷӨڹͳ͍ • Vapor Ϟʔυ͔ΒैདྷͷԾDOMϕʔεͷίϯϙʔω ϯτʹ͢ʹɺϑΝΠϧ໊͔Β `.vapor` ΛऔΓআ͘
& import ݩ `vue/vapor` Λ `vue` ʹมߋ͢Δ͚ͩ • Vue ͷࠓޙͷϦϦʔεͰ Vapor ϞʔυΛؚΜͩόʔ δϣϯʹΞοϓάϨʔυͯ͠ɺͦΕ͕طଘػೳʹӨ ڹ͢Δ͜ͱͳ͍ Vapor ϞʔυͷطଘίʔυͷӨڹ
• ։ൃϩʔυϚοϓͷϑΣʔζͱͯ͠4ஈ֊͋Δ • εςʔδ1: ϥϯλΠϜ࣮ • εςʔδ2: ίϯύΠϥ࣮ • εςʔδ3:
ΠϯςάϨʔγϣϯ • εςʔδ4: ػೳҠ২ Vapor Ϟʔυͷ։ൃϩʔυϚοϓ
• Vapor ͚࠷খݶϥϯλΠϜϔϧύʔͱίʔυੜ • ։ൃ༰ • ίΞσΟϨΫςΟϒ (v-ifɺv-forɺv-on ͳͲ)ͱίϯϙʔ ωϯτπϦʔͷαϙʔτ
• ύϑΥʔϚϯεݕূ • طଘ SSR ͷग़ྗ༰ͱϋΠυϨʔγϣϯͷޓੑ εςʔδ1: ϥϯλΠϜ࣮
• Vue TemplateɺJSX ͷ AST ͔Β IR (தؒදݱ) ͷੜ &
Vapor Ϟʔυͷίʔυੜ͢ΔίϯύΠϥ։ൃ εςʔδ2: ίϯύΠϥ࣮ IR (Intermediate Representation) Vue Template AST Vapor Codes JSX AST ੜ ίϯύΠϧ
• Vapor ϞʔυΛطଘίʔυ͕มߋ͢Δ͜ͱͳ͘ಋೖͰ ͖ΔΑ͏ʹ͢Δ • ։ൃ༰ • Vapor ϞʔυελϯυΞϩϯΞϓϦͷπʔϧα ϙʔτ
• طଘΞϓϦͰͷVaporϞʔυͷαϙʔτ • Vapor ϞʔυͰͷԾ DOM ಈ࡞ͷαϙʔτ εςʔδ3: ΠϯςάϨʔγϣϯ
• Vapor ϞʔυͷॳظϦϦʔεॏཁػೳͷΈΛఏڙ͢ Δ͜ͱʹͳ͍ͬͯΔ • <Transition />ɺ<KeepAlive /> ͳͲͷ Vue
ࠐΈͰఏڙ ͢Δίϯϙʔωϯτʹ Vapor ϞʔυΛҠ২͢Δ εςʔδ4: ػೳҠ২
• `vue/core-vapor` ͷʮTODOʯͰ֬ೝͰ͖Δ https://github.com/vuejs/core-vapor?tab=readme-ov- fi le#todo • ࠓઈࢍ։ൃத ։ൃελʔςεঢ়گ
·ͱΊ
·ͱΊ (1/2) • Vue.js ͷ࠷ۙͷϦϦʔεঢ়گʹ͍ͭͯͨ͠ • Vue 3 ϦϦʔεҎ߱ɺVue 3.2ɺVue
3.3 ͦͯ͠ Vue 3.4 ͷϦϦʔεΛ௨ͯ͠ DX վળ ʹϑΥʔΧεͯ͠ ػೳՃɾվળͭͭ͠ɺͦͯ͠ύϑΥʔϚϯεվળ ͱண࣮ͳϦϦʔεΛ͍ͯ͠Δ
·ͱΊ (2/2) • Vue.js ͷࠓޙͱͯ͠ɺVue 3.5 ͱ Vapor Ϟʔυʹ͍ͭ ͯͨ͠
• Vue 3.5 ͜Ε·Ͱͷ Vue 3 ͷϚΠφʔϦϦʔεͱಉ ҆͘͡ఆੑॏࢹͭͭ͠ػೳվળϦϦʔεΛଓ͚͍ͯ͘ • Vapor Ϟʔυݱ࣌Ͱ·ͩ R & D తͳ WIP • Vapor ϞʔυύϑΥʔϚϯεߴΊΔΦϓγϣϯػೳ • Vapor ϞʔυޓੑΛॏࢹͭͭ͠ɺϦϦʔεʹ͚ ͯઈࢍ։ൃதͰ͋Δ
࠷ޙʹ
Vue.js पลڥ৽ͨͳϑΣʔζ • Vue.js ͷ࡞ऀ Evan You ࢯ • ಉࢯ࣍ੈϑϩϯτΤϯυπʔϧͱͯ͠
Vite Λ ఏڙ͠ɺଞͷϑϩϯτΤϯυؔ࿈ͷ JS Τίγες ϜͰ࠾༻͞Εɺٸ͍ͯ͠Δ • Vue ΤίγεςϜपΓͰ Volar ͕ੜ·ΕͨΓɺͦ ͯ͠ Nuxt ͕ UnJS Λఏڙͨ͠Γͱଞͷ JS Τίγε ςϜʹར༻͞ΕΔΑ͏ʹͳ͖͍ͬͯͯΔ
Vue.js पลڥ৽ͨͳϑΣʔζ • ͞ΒʹɺEvan ࢯ৽ͨͳ OSS ϓϩδΣΫτ Rolldown Λ্ཱͪ͛ɺ Vite
ͷ࣍ͷϑΣʔζʹ͔ ͏ͨΊ Rspack νʔϜ OXC ϓϩδΣΫτͱίϥ ϘϨʔγϣϯͯ͠ Vite ͷج൫Ͱ͋Δ Rollup Λ Rust Խ͢Δ։ൃʹྗ͍ͯ͠Δ • ࠓޙɺ͜͏ͨ͠ OSS ͷ͕Γ͕࣍ͷ Vue.js ͷൃల ʹد༩͍ͯ͘͠ͱ༧͞ΕΔ
Vue Fes Japan 2024 • ͦ͏ͨ͠ঢ়گͷ࠷৽ใΛΩϟονΞοϓͰ͖ΔΧ ϯϑΝϨϯεͳͷͰڵຯ͕͋Δํͥͻʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠! ❤