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/plugin-vue@^2.0.0`• Webpack: `vue-loader@^17.0.0`
·ͱΊ
·ͱΊ• Reactivity Transform ϦΞΫςΟϏςΟपΓͷΛղܾ͢ΔͨΊͷͷ• ίϯύΠϥϚΫϩΛ͏͜ͱͰΛղܾ͢Δ͜ͱ͕Ͱ͖Δ• ෭࡞༻͋ΔͷͰ͏ͱ͖ҙ͕ඞཁ• αϙʔτ͢Δπʔϧ͕ఏڙ͞ΕΔͷͰ͍ͬ͠ΐʹ͏ͱ DX ΛߴΊΒΕΔ
Thanks!