Tweet
Tweet

Slide 1

Slide 1 text

Reactivity Transform TechFeed Experts Night #2 2022.08.17 @kazupon

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Vue Fes Japan Online 2022

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Reactivity Transform

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

reactive ͱ ref ͷऔΓѻ͍͕೉͍͠ • ref: • ϓϦϛςΟϒͳ஋ Λѻ͍Մೳ • ΦϒδΣΫτ΋Մ ೳ • `.value` ͰΞΫηε ͠ͳ͍ͱ͍͚ͳ͍

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Reactivity Transform Λ࢖͏ͱ…

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Reactivity Transform ͷ஫ҙ఺

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

αϙʔτ͢Δ πʔϧ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

·ͱΊ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Thanks!