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.2k
Reactivity Transform
kazupon
August 17, 2022
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.4k
Vue 3.4
kazupon
13
4.5k
Vue & Vite Rustify
kazupon
4
2.1k
Vue.jsエコシステム動向2023
kazupon
17
7.4k
わたしのOSS活動
kazupon
1
980
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
540
まちにまった Vue.js 3
kazupon
14
5.5k
Native-ESM powered web dev build tool
kazupon
5
1.6k
Other Decks in Technology
See All in Technology
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
160
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
240
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
初心者に Vue.js を 教えるには
tsukuha
5
390
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
520
フルカイテン株式会社 採用資料
fullkaiten
0
36k
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Thoughts on Productivity
jonyablonski
67
4.3k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GraphQLとの向き合い方2022年版
quramy
43
13k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Designing for humans not robots
tammielis
249
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
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!