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
Reactivity Transform
Search
kazupon
August 17, 2022
Technology
1
1.4k
Reactivity Transform
kazupon
August 17, 2022
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
530
Vapor Revolution
kazupon
3
3.7k
Vue.js最新動向
kazupon
3
1.6k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.4k
Vue.jsエコシステム動向2023
kazupon
17
8k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
State of Vue I18n
kazupon
3
650
Other Decks in Technology
See All in Technology
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
200
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
240
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
180
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
140
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
110
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
120
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
470
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
Building a cloud native business on open source
lizrice
0
180
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
110
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
150
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Thoughts on Productivity
jonyablonski
70
4.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Language of Interfaces
destraynor
162
25k
Faster Mobile Websites
deanohume
310
31k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Unsuck your backbone
ammeep
671
58k
Balancing Empowerment & Direction
lara
5
700
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Transcript
Reactivity Transform TechFeed Experts Night #2 2022.08.17 @kazupon
PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group
Organizer Creator of Vue I18n & Intlify @kazu_pon kazupon kazupon
Vue Fes Japan Online 2022
ࠓ͢͜ͱ • Reactivity Transform ʹ͍ͭͯ • ·࣮ͩݧతػೳͳͷͰࠓޙมΘΔ Մೳੑ͕͋Δ͔
Reactivity Transform
Reactivity Transform ͱ? • ίϯύΠϥϚΫϩΛͬͯ Composition API ͷϦΞΫςΟϒ पΓͷΛղܾ͢ΔͨΊͷͷ •
Ґஔ͚ͮͱͯ͠ Composition API ͷ DX Λվળ͢ΔͨΊʹੜ·Εͨ
ఏڙ͞ΕΔίϯύΠϥϚΫϩ • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊ • $ref() • $computed() • $shallowRef()
• $customRef() • $toRef() • $() • $$()
ఏڙ͞ΕΔίϯύΠϥϚΫϩ • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊ • $ref() • $computed() • $shallowRef()
• $customRef() • $toRef() • $() • $$() Composition API ͷ ϦΞΫςΟϏςΟؔ࿈APIʹ ରԠ͢ΔϚΫϩ
ఏڙ͞ΕΔίϯύΠϥϚΫϩ • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊ • $ref() • $computed() • $shallowRef()
• $customRef() • $toRef() • $() • $$() Composition API ͷ ϦΞΫςΟϏςΟؔ࿈APIʹ ରԠ͢ΔϚΫϩ ϦΞΫςΟϏςΟपΓͷৼΔ͍ ΛऔΓѻ͏ϚΫϩ
ٕज़తʹͲ͏ͳͬͯΔʁ • Babel ΛͬͯϚΫϩͰॻ͔Εͨ VueͷίʔυΛ AST Λղੳͯ͠ɺ ಈ͘JSίʔυʹม͍ͯ͠Δ • `@vue/reactivity-transform`
ͱ͍͏ ύοέʔδͰॲཧ͞ΕΔ
ϦΞΫςΟϏςΟ पΓͷͱʁ
ref ͱ reactive ͷ औΓѻ͍͕͍͠
reactive ͱ ref ͷऔΓѻ͍͕͍͠ • reactive: • ΦϒδΣΫτσʔ λߏ •
number string ͳͲͷϓϦϛςΟ ϒͳॲཧͰ͖ ͳ͍
reactive ͱ ref ͷऔΓѻ͍͕͍͠ • ref: • ϓϦϛςΟϒͳ Λѻ͍Մೳ •
ΦϒδΣΫτՄ ೳ • `.value` ͰΞΫηε ͠ͳ͍ͱ͍͚ͳ͍
ΛׂೖͰऔ Γѻ͏ͷ͕͍͠
ΛׂೖͰऔΓѻ͏ͷ͕͍͠
ΛׂೖͰऔΓѻ͏ͷ͕͍͠
Props ͷσϑΥϧτ ఆٛํ๏
Props ͷσϑΥϧτఆٛํ๏
Reactivity Transform Λ͏ͱ…
ref ͱ reactive ͷ औΓѻ͍͕͍͠ ͱ͍͏ʹରͯ͠…
ref ܥΛ͍͍͑Α͏ʹͳΔ ίϯύΠϧલ ίϯύΠϧޙ e.g. `$ref` Λͬͨέʔε
ΛׂೖͰऔ Γѻ͏ͷ͕͍͠ ͱ͍͏ʹରͯ͠…
ׂೖ͕ؾܰʹ͑ΔΑ͏ʹͳΔ ίϯύΠϧલ ίϯύΠϧޙ
ׂೖ͕ؾܰʹ͑ΔΑ͏ʹͳΔ ίϯύΠϧલ ίϯύΠϧޙ
Props ͷσϑΥϧτ ఆٛํ๏ ͱ͍͏ʹରͯ͠…
Props ͷσϑΥϧτJSߏจͰఆٛՄೳ ίϯύΠϧલ ίϯύΠϧޙ
Reactivity Transform ͷҙ
ϦΞΫςΟϒͳมͷఆٛ
ϚΫϩͰఆٛͨ͠มΛؔʹ͢ͱ͖ ref ͷҾΛ࣋ͭؔʹɺ ϚΫϩͰఆٛͨ͠ม ͢ͱಈ࡞͠ͳ͍… (TSڥͷ߹ܕΤϥʔ) `$$()` Ͱϥοϓ(Τεέʔϓ)ͯ͋͛͠Ε ίϯύΠϧ࣌ʹ ref
ͷ··͞ΕΔ
ؔͰϚΫϩͰఆٛͨ͠มΛฦ͢ͱ͖
αϙʔτ͢Δ πʔϧ
ެࣜͰఏڙ͢Δπʔϧ • VS Code ֦ு • Volar • ESLint ϓϥάΠϯ
• eslint-plugin-vue (ϧʔϧఏڙ༧ఆ) • όϯυϥ͚ϓϥάΠϯɾϩʔμʔ • Vite: `@vitejs/plugin-vue@^2.0.0` • Webpack: `vue-loader@^17.0.0`
·ͱΊ
·ͱΊ • Reactivity Transform ϦΞΫςΟϏςΟप ΓͷΛղܾ͢ΔͨΊͷͷ • ίϯύΠϥϚΫϩΛ͏͜ͱͰΛղܾ͢ Δ͜ͱ͕Ͱ͖Δ •
෭࡞༻͋ΔͷͰ͏ͱ͖ҙ͕ඞཁ • αϙʔτ͢Δπʔϧ͕ఏڙ͞ΕΔͷͰ͍ͬ ͠ΐʹ͏ͱ DX ΛߴΊΒΕΔ
Thanks!