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.4k
Vue.js最新動向
kazupon
April 24, 2024
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue 3.4
kazupon
13
4.4k
Vue & Vite Rustify
kazupon
4
2k
Vue.jsエコシステム動向2023
kazupon
17
7.3k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
980
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
530
まちにまった Vue.js 3
kazupon
14
5.5k
Native-ESM powered web dev build tool
kazupon
5
1.5k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
A Modern Web Designer's Workflow
chriscoyier
690
190k
GitHub's CSS Performance
jonrohan
1029
450k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
22
3.9k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Designing with Data
zakiwarfel
98
5k
How To Stay Up To Date on Web Technology
chriscoyier
785
250k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
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 • ͦ͏ͨ͠ঢ়گͷ࠷৽ใΛΩϟονΞοϓͰ͖ΔΧ ϯϑΝϨϯεͳͷͰڵຯ͕͋Δํͥͻʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠! ❤