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.3k
Reactivity Transform
kazupon
August 17, 2022
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
450
Vapor Revolution
kazupon
3
3.4k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.6k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.8k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
State of Vue I18n
kazupon
3
620
Other Decks in Technology
See All in Technology
Go Connectへの想い
chiroruxx
0
160
Grafana MCP serverでなんかし隊 / Try Grafana MCP server
kohbis
0
320
Amazon Q Developer for GitHubとAmplify Hosting でサクッとデジタル名刺を作ってみた
kmiya84377
0
1.1k
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
4
1.4k
Cloud Native Scalability for Internal Developer Platforms
hhiroshell
2
390
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
MCPを利用して自然言語で3Dプリントしてみよう!
hamadakoji
0
1.5k
Monorepo Error Management: Automated Runbooks and Team-Targeted Alert Distribution
biwashi
1
170
ゆるSRE #11 LT
okaru
1
570
医療業界に特化した音声認識モデル構築のためのアノテーションの実態
thickstem
0
540
本部長の代わりに提案書レビュー! KDDI営業が毎日使うAIエージェント「A-BOSS」開発秘話
minorun365
PRO
11
1.4k
Classmethod AI Talks(CATs) #22 司会進行スライド(2025.06.12) / classmethod-ai-talks-aka-cats_moderator-slides_vol22_2025-06-12
shinyaa31
0
200
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Building Applications with DynamoDB
mza
95
6.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Embracing the Ebb and Flow
colly
85
4.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Six Lessons from altMBA
skipperchong
28
3.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Bash Introduction
62gerente
614
210k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
650
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!