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
Vapor Revolution
kazupon
2
3.1k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.6k
Vue & Vite Rustify
kazupon
4
2.2k
Vue.jsエコシステム動向2023
kazupon
17
7.6k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
580
まちにまった Vue.js 3
kazupon
14
5.6k
Other Decks in Technology
See All in Technology
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
430
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
410
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.7k
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
520
30分でわかる『アジャイルデータモデリング』
hanon52_
9
1.9k
自動テストの世界に、この5年間で起きたこと
autifyhq
6
5.3k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
10
3.3k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
550
プロセス改善による品質向上事例
tomasagi
0
600
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.4k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
260
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
17
3.5k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing for Performance
lara
604
68k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
For a Future-Friendly Web
brad_frost
176
9.5k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Why Our Code Smells
bkeepers
PRO
335
57k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
300
Practical Orchestrator
shlominoach
186
10k
Site-Speed That Sticks
csswizardry
3
360
How to Think Like a Performance Engineer
csswizardry
22
1.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
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!