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
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
2k
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
380
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.6k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
510
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
16
6.5k
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
8
1.4k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
140
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
5
610
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
230
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
510
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
130
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Music & Morning Musume
bryan
46
6.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Faster Mobile Websites
deanohume
306
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
320
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
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!