$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

  2. PLAID, inc.
    Vue.js Core Team Member
    Vue.js Japan User Group Organizer
    Creator of Vue I18n & Intlify
    @kazu_pon kazupon
    kazupon

    View Slide

  3. Vue Fes Japan Online 2022

    View Slide

  4. ࠓ೔࿩͢͜ͱ
    • Reactivity Transform ʹ͍ͭͯ
    • ·࣮ͩݧతػೳͳͷͰࠓޙมΘΔ
    Մೳੑ͕͋Δ͔΋

    View Slide

  5. Reactivity
    Transform

    View Slide

  6. Reactivity Transform ͱ͸?
    • ίϯύΠϥϚΫϩΛ࢖ͬͯ
    Composition API ͷϦΞΫςΟϒ
    पΓͷ໰୊Λղܾ͢ΔͨΊͷ΋ͷ
    • Ґஔ͚ͮͱͯ͠ Composition API
    ͷ DX Λվળ͢ΔͨΊʹੜ·Εͨ

    View Slide

  7. ఏڙ͞ΕΔίϯύΠϥϚΫϩ
    • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊
    • $ref()
    • $computed()
    • $shallowRef()
    • $customRef()
    • $toRef()
    • $()
    • $$()

    View Slide

  8. ఏڙ͞ΕΔίϯύΠϥϚΫϩ
    • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊
    • $ref()
    • $computed()
    • $shallowRef()
    • $customRef()
    • $toRef()
    • $()
    • $$()
    Composition API ͷ
    ϦΞΫςΟϏςΟؔ࿈APIʹ
    ରԠ͢ΔϚΫϩ

    View Slide

  9. ఏڙ͞ΕΔίϯύΠϥϚΫϩ
    • `$` ͰϓϦϑΟοΫε͞ΕͨίϯύΠϥϚΫϩ܊
    • $ref()
    • $computed()
    • $shallowRef()
    • $customRef()
    • $toRef()
    • $()
    • $$()
    Composition API ͷ
    ϦΞΫςΟϏςΟؔ࿈APIʹ
    ରԠ͢ΔϚΫϩ
    ϦΞΫςΟϏςΟपΓͷৼΔ෣͍
    ΛऔΓѻ͏ϚΫϩ

    View Slide

  10. ٕज़తʹ͸Ͳ͏ͳͬͯΔʁ
    • Babel Λ࢖ͬͯϚΫϩͰॻ͔Εͨ
    VueͷίʔυΛ AST Λղੳͯ͠ɺ
    ಈ͘JSίʔυʹม׵͍ͯ͠Δ
    • `@vue/reactivity-transform` ͱ͍͏
    ύοέʔδͰॲཧ͞ΕΔ

    View Slide

  11. ϦΞΫςΟϏςΟ
    पΓͷ໰୊ͱ͸ʁ

    View Slide

  12. ref ͱ reactive ͷ
    औΓѻ͍͕೉͍͠

    View Slide

  13. reactive ͱ ref ͷऔΓѻ͍͕೉͍͠
    • reactive:
    • ΦϒδΣΫτσʔ
    λߏ଄
    • number ΍ string
    ͳͲͷϓϦϛςΟ
    ϒͳ஋͸ॲཧͰ͖
    ͳ͍

    View Slide

  14. reactive ͱ ref ͷऔΓѻ͍͕೉͍͠
    • ref:
    • ϓϦϛςΟϒͳ஋
    Λѻ͍Մೳ
    • ΦϒδΣΫτ΋Մ

    • `.value` ͰΞΫηε
    ͠ͳ͍ͱ͍͚ͳ͍

    View Slide

  15. ஋Λ෼ׂ୅ೖͰऔ
    Γѻ͏ͷ͕೉͍͠

    View Slide

  16. ஋Λ෼ׂ୅ೖͰऔΓѻ͏ͷ͕೉͍͠

    View Slide

  17. ஋Λ෼ׂ୅ೖͰऔΓѻ͏ͷ͕೉͍͠

    View Slide

  18. Props ͷσϑΥϧτ
    ஋ఆٛํ๏

    View Slide

  19. Props ͷσϑΥϧτ஋ఆٛํ๏

    View Slide

  20. Reactivity Transform
    Λ࢖͏ͱ…

    View Slide

  21. ref ͱ reactive ͷ
    औΓѻ͍͕೉͍͠
    ͱ͍͏໰୊ʹରͯ͠͸…

    View Slide

  22. ஋͸ ref ܥΛ࢖͑͹͍͍Α͏ʹͳΔ
    ίϯύΠϧલ ίϯύΠϧޙ
    e.g. `$ref` Λ࢖ͬͨέʔε

    View Slide

  23. ஋Λ෼ׂ୅ೖͰऔ
    Γѻ͏ͷ͕೉͍͠
    ͱ͍͏໰୊ʹରͯ͠͸…

    View Slide

  24. ෼ׂ୅ೖ͕ؾܰʹ࢖͑ΔΑ͏ʹͳΔ
    ίϯύΠϧલ
    ίϯύΠϧޙ

    View Slide

  25. ෼ׂ୅ೖ͕ؾܰʹ࢖͑ΔΑ͏ʹͳΔ
    ίϯύΠϧલ ίϯύΠϧޙ

    View Slide

  26. Props ͷσϑΥϧτ
    ஋ఆٛํ๏
    ͱ͍͏໰୊ʹରͯ͠͸…

    View Slide

  27. Props ͷσϑΥϧτ஋͸JSߏจͰఆٛՄೳ
    ίϯύΠϧલ
    ίϯύΠϧޙ

    View Slide

  28. Reactivity
    Transform
    ͷ஫ҙ఺

    View Slide

  29. ϦΞΫςΟϒͳม਺ͷఆٛ

    View Slide

  30. ϚΫϩͰఆٛͨ͠ม਺Λؔ਺ʹ౉͢ͱ͖
    ref ͷҾ਺Λ࣋ͭؔ਺ʹɺ
    ϚΫϩͰఆٛͨ͠ม਺͸
    ௚઀౉͢ͱಈ࡞͠ͳ͍…
    (TS؀ڥͷ৔߹͸ܕΤϥʔ)
    `$$()` Ͱϥοϓ(Τεέʔϓ)ͯ͋͛͠Ε͹
    ίϯύΠϧ࣌ʹ ref ͷ··౉͞ΕΔ

    View Slide

  31. ؔ਺಺ͰϚΫϩͰఆٛͨ͠ม਺Λฦ͢ͱ͖

    View Slide

  32. αϙʔτ͢Δ
    πʔϧ

    View Slide

  33. ެࣜͰఏڙ͢Δπʔϧ
    • VS Code ֦ு
    • Volar
    • ESLint ϓϥάΠϯ
    • eslint-plugin-vue (ϧʔϧఏڙ༧ఆ)
    • όϯυϥ޲͚ϓϥάΠϯɾϩʔμʔ
    • Vite: `@vitejs/plugin-vue@^2.0.0`
    • Webpack: `vue-loader@^17.0.0`

    View Slide

  34. ·ͱΊ

    View Slide

  35. ·ͱΊ
    • Reactivity Transform ͸ϦΞΫςΟϏςΟप
    Γͷ໰୊Λղܾ͢ΔͨΊͷ΋ͷ
    • ίϯύΠϥϚΫϩΛ࢖͏͜ͱͰ໰୊Λղܾ͢
    Δ͜ͱ͕Ͱ͖Δ
    • ෭࡞༻΋͋ΔͷͰ࢖͏ͱ͖͸஫ҙ͕ඞཁ
    • αϙʔτ͢Δπʔϧ͕ఏڙ͞ΕΔͷͰ͍ͬ
    ͠ΐʹ࢖͏ͱ DX ΛߴΊΒΕΔ

    View Slide

  36. Thanks!

    View Slide