Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactivity Transform

kazupon
August 17, 2022

Reactivity Transform

kazupon

August 17, 2022
Tweet

More Decks by kazupon

Other Decks in Technology

Transcript

  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!