Reactivity TransformTechFeed Experts Night #22022.08.17@kazupon
View Slide
PLAID, inc.Vue.js Core Team MemberVue.js Japan User Group OrganizerCreator of Vue I18n & Intlify@kazu_pon kazuponkazupon
Vue Fes Japan Online 2022
ࠓ͢͜ͱ• Reactivity Transform ʹ͍ͭͯ• ·࣮ͩݧతػೳͳͷͰࠓޙมΘΔՄೳੑ͕͋Δ͔
ReactivityTransform
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 ͷσϑΥϧτఆٛํ๏
Reactivity TransformΛ͏ͱ…
ref ͱ reactive ͷऔΓѻ͍͕͍͠ͱ͍͏ʹରͯ͠…
ref ܥΛ͍͍͑Α͏ʹͳΔίϯύΠϧલ ίϯύΠϧޙe.g. `$ref` Λͬͨέʔε
ΛׂೖͰऔΓѻ͏ͷ͕͍͠ͱ͍͏ʹରͯ͠…
ׂೖ͕ؾܰʹ͑ΔΑ͏ʹͳΔίϯύΠϧલίϯύΠϧޙ
ׂೖ͕ؾܰʹ͑ΔΑ͏ʹͳΔίϯύΠϧલ ίϯύΠϧޙ
Props ͷσϑΥϧτఆٛํ๏ͱ͍͏ʹରͯ͠…
Props ͷσϑΥϧτJSߏจͰఆٛՄೳίϯύΠϧલίϯύΠϧޙ
ReactivityTransformͷҙ
ϦΞΫςΟϒͳมͷఆٛ
ϚΫϩͰఆٛͨ͠มΛؔʹ͢ͱ͖ref ͷҾΛ࣋ͭؔʹɺϚΫϩͰఆٛͨ͠ม͢ͱಈ࡞͠ͳ͍…(TSڥͷ߹ܕΤϥʔ)`$$()` Ͱϥοϓ(Τεέʔϓ)ͯ͋͛͠ΕίϯύΠϧ࣌ʹ ref ͷ··͞ΕΔ
ؔͰϚΫϩͰఆٛͨ͠มΛฦ͢ͱ͖
αϙʔτ͢Δπʔϧ
ެࣜͰఏڙ͢Δπʔϧ• VS Code ֦ு• Volar• ESLint ϓϥάΠϯ• eslint-plugin-vue (ϧʔϧఏڙ༧ఆ)• όϯυϥ͚ϓϥάΠϯɾϩʔμʔ• Vite: `@vitejs/[email protected]^2.0.0`• Webpack: `[email protected]^17.0.0`
·ͱΊ
·ͱΊ• Reactivity Transform ϦΞΫςΟϏςΟपΓͷΛղܾ͢ΔͨΊͷͷ• ίϯύΠϥϚΫϩΛ͏͜ͱͰΛղܾ͢Δ͜ͱ͕Ͱ͖Δ• ෭࡞༻͋ΔͷͰ͏ͱ͖ҙ͕ඞཁ• αϙʔτ͢Δπʔϧ͕ఏڙ͞ΕΔͷͰ͍ͬ͠ΐʹ͏ͱ DX ΛߴΊΒΕΔ
Thanks!
kazupon
oracle4engineer
odasho
you
jacopen
ybrliiu
orgachem
shao1555
katzueno
kentosuzuki
daina0321
oogfranz
trallard
nonsquared
paigeccino
scottboms
sstephenson
brianwarren
pauljervisheath
chriscoyier
shpigford
smashingmag
jakevdp
afnizarnur