Reactivity Transform

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