Reactivity Transform

1. Reactivity Transform TechFeed Experts Night #2 2022.08.17 @kazupon
2. PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group Organizer Creator of Vue I18n & Intlify @kazu_pon kazupon kazupon
3. Vue Fes Japan Online 2022
4. ࠓ೔࿩͢͜ͱ • Reactivity Transform ʹ͍ͭͯ • ·࣮ͩݧతػೳͳͷͰࠓޙมΘΔ Մೳੑ͕͋Δ͔΋
5. Reactivity Transform
6. Reactivity Transform ͱ͸? • ίϯύΠϥϚΫϩΛ࢖ͬͯ Composition API ͷϦΞΫςΟϒ पΓͷ໰୊Λղܾ͢ΔͨΊͷ΋ͷ • Ґஔ͚ͮͱͯ͠ Composition API ͷ DX Λվળ͢ΔͨΊʹੜ·Εͨ
7. ఏڙ͞ΕΔίϯύΠϥϚΫϩ • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊ • $ref() • $computed() • $shallowRef() • $customRef() • $toRef() • $() • $$()
8. ఏڙ͞ΕΔίϯύΠϥϚΫϩ • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊ • $ref() • $computed() • $shallowRef() • $customRef() • $toRef() • $() • $$() Composition API ͷ ϦΞΫςΟϏςΟؔ࿈APIʹ ରԠ͢ΔϚΫϩ
9. ఏڙ͞ΕΔίϯύΠϥϚΫϩ • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊ • $ref() • $computed() • $shallowRef() • $customRef() • $toRef() • $() • $$() Composition API ͷ ϦΞΫςΟϏςΟؔ࿈APIʹ ରԠ͢ΔϚΫϩ ϦΞΫςΟϏςΟपΓͷৼΔ෣͍ ΛऔΓѻ͏ϚΫϩ
10. ٕज़తʹ͸Ͳ͏ͳͬͯΔʁ • Babel Λ࢖ͬͯϚΫϩͰॻ͔Εͨ VueͷίʔυΛ AST Λղੳͯ͠ɺ ಈ͘JSίʔυʹม׵͍ͯ͠Δ • `@vue/reactivity-transform` ͱ͍͏ ύοέʔδͰॲཧ͞ΕΔ
11. ϦΞΫςΟϏςΟ पΓͷ໰୊ͱ͸ʁ
12. ref ͱ reactive ͷ औΓѻ͍͕೉͍͠
13. reactive ͱ ref ͷऔΓѻ͍͕೉͍͠ • reactive: • ΦϒδΣΫτσʔ λߏ଄ • number ΍ string ͳͲͷϓϦϛςΟ ϒͳ஋͸ॲཧͰ͖ ͳ͍
14. reactive ͱ ref ͷऔΓѻ͍͕೉͍͠ • ref: • ϓϦϛςΟϒͳ஋ Λѻ͍Մೳ • ΦϒδΣΫτ΋Մ ೳ • `.value` ͰΞΫηε ͠ͳ͍ͱ͍͚ͳ͍
15. ஋Λ෼ׂ୅ೖͰऔ Γѻ͏ͷ͕೉͍͠
16. ஋Λ෼ׂ୅ೖͰऔΓѻ͏ͷ͕೉͍͠
17. ஋Λ෼ׂ୅ೖͰऔΓѻ͏ͷ͕೉͍͠
18. Props ͷσϑΥϧτ ஋ఆٛํ๏
19. Props ͷσϑΥϧτ஋ఆٛํ๏
20. Reactivity Transform Λ࢖͏ͱ…
21. ref ͱ reactive ͷ औΓѻ͍͕೉͍͠ ͱ͍͏໰୊ʹରͯ͠͸…
22. ஋͸ ref ܥΛ࢖͑͹͍͍Α͏ʹͳΔ ίϯύΠϧલ ίϯύΠϧޙ e.g. `$ref` Λ࢖ͬͨέʔε
23. ஋Λ෼ׂ୅ೖͰऔ Γѻ͏ͷ͕೉͍͠ ͱ͍͏໰୊ʹରͯ͠͸…
24. ෼ׂ୅ೖ͕ؾܰʹ࢖͑ΔΑ͏ʹͳΔ ίϯύΠϧલ ίϯύΠϧޙ
25. ෼ׂ୅ೖ͕ؾܰʹ࢖͑ΔΑ͏ʹͳΔ ίϯύΠϧલ ίϯύΠϧޙ
26. Props ͷσϑΥϧτ ஋ఆٛํ๏ ͱ͍͏໰୊ʹରͯ͠͸…
27. Props ͷσϑΥϧτ஋͸JSߏจͰఆٛՄೳ ίϯύΠϧલ ίϯύΠϧޙ
28. Reactivity Transform ͷ஫ҙ఺
29. ϦΞΫςΟϒͳม਺ͷఆٛ
30. ϚΫϩͰఆٛͨ͠ม਺Λؔ਺ʹ౉͢ͱ͖ ref ͷҾ਺Λ࣋ͭؔ਺ʹɺ ϚΫϩͰఆٛͨ͠ม਺͸ ௚઀౉͢ͱಈ࡞͠ͳ͍… (TS؀ڥͷ৔߹͸ܕΤϥʔ) `$$()` Ͱϥοϓ(Τεέʔϓ)ͯ͋͛͠Ε͹ ίϯύΠϧ࣌ʹ ref ͷ··౉͞ΕΔ
31. ؔ਺಺ͰϚΫϩͰఆٛͨ͠ม਺Λฦ͢ͱ͖
32. αϙʔτ͢Δ πʔϧ
33. ެࣜͰఏڙ͢Δπʔϧ • VS Code ֦ு • Volar • ESLint ϓϥάΠϯ • eslint-plugin-vue (ϧʔϧఏڙ༧ఆ) • όϯυϥ޲͚ϓϥάΠϯɾϩʔμʔ • Vite: `@vitejs/plugin-vue@^2.0.0` • Webpack: `vue-loader@^17.0.0`
34. ·ͱΊ
35. ·ͱΊ • Reactivity Transform ͸ϦΞΫςΟϏςΟप Γͷ໰୊Λղܾ͢ΔͨΊͷ΋ͷ • ίϯύΠϥϚΫϩΛ࢖͏͜ͱͰ໰୊Λղܾ͢ Δ͜ͱ͕Ͱ͖Δ • ෭࡞༻΋͋ΔͷͰ࢖͏ͱ͖͸஫ҙ͕ඞཁ • αϙʔτ͢Δπʔϧ͕ఏڙ͞ΕΔͷͰ͍ͬ ͠ΐʹ࢖͏ͱ DX ΛߴΊΒΕΔ
36. Thanks!