まもなくやってくる Vue.js 3

by kazupon

Slide 1

Slide 1 text

·΋ͳ͘΍ͬͯ͘Δ Vue.js 3 PWA night conference 2020 2020.02.01 @kazupon

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

͸͡Ίʹ

Slide 5

Slide 5 text

2016೥10݄

Slide 6

Slide 6 text

Vue.js 2.0 ϦϦʔε https://speakerdeck.com/kazupon/vue-dot-js-2-dot-0-server-side-rendering?slide=10

Slide 7

Slide 7 text

ͦΕ͔Β 3೥༨ΓΛྺͯ

Slide 8

Slide 8 text

2020೥ Q1

Slide 9

Slide 9 text

Vue.js 3.0 ϦϦʔε༧ఆ

Slide 10

Slide 10 text

ݱࡏ

Slide 11

Slide 11 text

RFCͰ࠷ऴ࢓༷ΛݻΊͭͭணʑͱ։ൃத https://github.com/vuejs/rfcs

Slide 12

Slide 12 text

vue-next-webpack-preview https://github.com/vuejs/vue-next-webpack-preview

Slide 13

Slide 13 text

vue-cli-plugin-vue-next https://github.com/vuejs/vue-cli-plugin-vue-next

Slide 14

Slide 14 text

ެࣜϓϥάΠϯ/πʔϧ܊͸ରԠத • Vue Router • Vuex • Vue DevTools • Vue Test Utils • Vetur • Vue CLI • Webpack plugin • ESLint Plugin • JSX Plugin • … etc

Slide 15

Slide 15 text

ϝδϟʔϦϦʔεͳͷͰ ৽ػೳ & มߋ ͨ͘͞Μ͋Γ·͢

Slide 16

Slide 16 text

ࠓ೔࿩͢͜ͱ

Slide 17

Slide 17 text

ࠓ೔࿩͢͜ͱ • Vue.js 3 ͰೖΔ৽ػೳʹ͍ͭͯ • ίϯϙδγϣϯ API • ϑϥάϝϯτ • ϙʔλϧ • αεϖϯε

Slide 18

Slide 18 text

ࠓ೔࿩͢͜ͱ • ਺͋Δ Vue.js 2.x ͔Βͷมߋͷத͔Β͸… • ୯ҰϑΝΠϧίϯϙʔωϯτ • εϩοτ • ϑΟϧλ • Πϕϯτ • άϩʔόϧAPI

Slide 19

Slide 19 text

ࠓ೔࿩͞ͳ͍͜ͱ • Vue.js ຊମҎ֎ͷ͜ͱ • Vue ެࣜϓϥάΠϯ / πʔϧܥ • Nuxt.js ͳͲͷؔ࿈ΤίγεςϜ

Slide 20

Slide 20 text

⚠ ஫ҙࣄ߲ ⚠ • ࠓ೔࿩͢಺༰͸ɺൃද࣌఺Ͱ Vue.js ຊମʹ࣮૷͞Ε͍ͯΔ΋ͷ • RFC ͷঢ়گͱࠓޙͷalphaɺbeta όʔδϣϯͷϦϦʔεޙͷঢ়گ࣍ ୈͰ͸มΘΔՄೳੑ͸͋Γ

Slide 21

Slide 21 text

৽ػೳ ʹ͍ͭͯ

Slide 22

Slide 22 text

ίϯϙδγϣϯAPI Composition API

Slide 23

Slide 23 text

ίϯϙδγϣϯAPIͱ͸ʁ • ؔ਺ϕʔεͰఏڙ͞ΕΔ API ܊ https://vue-composition-api-rfc.netlify.com/api.html ఏڙ͞ΕΔ API ͨͪ

Slide 24

Slide 24 text

ੜ·Εͨഎܠ • Vue.js Ͱେن໛։ൃ͸Ͱ͖Δ͕໰୊͕͋ͬͨ • ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡΈʹ ͘͘ͳΔ • ςετ͕͠ʹ͍͘ • ίʔυ࠶ར༻ͷύλʔϯԽ͕͠ʹ͍͘ • TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͍͘

Slide 25

Slide 25 text

ίϯϙδγϣϯAPIΛ࢖͏͜ͱͰ… • ίϯϙʔωϯτ ͷϩδοΫΛࣗ ༝౓ߴ͘૊Έ߹ Θ࣮ͤ૷͢Δ͜ ͱ͕Ͱ͖Δ

Slide 26

Slide 26 text

େن໛։ൃ͕ΑΓշదʹʂ • ίϯϙʔωϯτ ͷϩδοΫߏ੒ ͕៉ྷʹͳΓɺ ςετ΋͠΍͢ ͘ͳΔʂ

Slide 27

Slide 27 text

ͲΜͳ΋ͷ͔ ݟ͍͖ͯ·͠ΐ͏ʂ

Slide 28

Slide 28 text

ఏڙ͞ΕΔओͳ API ͷछྨ • ओʹҎԼͷ಺༰Λఏڙ͢Δ΋ͷʹ෼ྨ͞ΕΔ • ϦΞΫςΟϒঢ়ଶͷૢ࡞ • ίϯϙʔωϯτͷ৽ΤϯτϦϙΠϯτ • ϥΠϑαΠΫϧϑοΫ • DI (Dependency injection: ґଘੑͷ஫ೖ)

Slide 29

Slide 29 text

ϦΞΫςΟϒ ঢ়ଶͷૢ࡞

Slide 30

Slide 30 text

ঢ়ଶૢ࡞ͱϢʔςϦςΟ͕ఏڙ͞ΕΔ • reactive • computed • watch • readonly • ref • isRef • toRefs

Slide 31

Slide 31 text

৽͍֓͠೦ Ref ͕ಋೖ͞ΕΔ • ϦΞΫςΟϒͳঢ়ଶΛϥοϓͨ͠ࢀরΦ ϒδΣΫτ https://vue-composition-api-rfc.netlify.com/ ʹܝࡌ͞Ε͍ͯΔਤΑΓ

Slide 32

Slide 32 text

ίʔυྫ

Slide 33

Slide 33 text

ίϯϙʔωϯτ ͷ ৽ΤϯτϦϙΠϯτ

Slide 34

Slide 34 text

setup • ίϯϙδγϣϯ APIΛ࢖ͬͯί ϯϙʔωϯτͷ ϩδοΫΛ࣮૷ • return ͨ͠΋ͷ ͕ςϯϓϨʔτ ͷϨϯμϦϯά ίϯςΩετʹ ͳΔ ৽͍͠ ΤϯτϦϙΠϯτ

Slide 35

Slide 35 text

render ؔ਺ / JSX ΋࢖༻Ͱ͖Δ

Slide 36

Slide 36 text

Ҿ਺ʹ props ͱ context ͕౉͞ΕΔ • props:   ίϯϙʔωϯτͰఆٛ͞ΕͨϓϩύςΟ • context:   ίϯϙʔωϯτͰΞΫηεͰ͖ΔϓϩύςΟ • attrs: Vue 2.x ͷ $attrs ʹ૬౰ • emit: Vue 2.x ͷ $emit ʹ૬౰ • slots: Vue 2.x ͷ $slots ʹ૬౰

Slide 37

Slide 37 text

props ͱ context ͷ࢖༻ྫ

Slide 38

Slide 38 text

this ͸ίϯϙʔωϯτͷΠϯελϯεͰ͸ͳ͍ • ίϯϙδγϣϯ API Ͱ setup Ͱίϯϙʔ ωϯτΛ࣮૷͢Δ৔߹͸ɺthis ͸΋͏࢖ Θͳ͍

Slide 39

Slide 39 text

ϥΠϑαΠΫϧ ϑοΫ

Slide 40

Slide 40 text

Vue 2.x ͱͷϚοϐϯά beforeCreate created beforeMount mounted updated beforeDestroy destroyed errorCaptured setup setup onBeforeMount onMounted onUpdated onBeforeUnmount onUnmounted onErrorCaptured (ࠨ: Vue 2.xɺӈ: Vue 3 Ҏ߱)

Slide 41

Slide 41 text

৽͍͠ϥΠϑαΠΫϧϑοΫͷ࢖༻ྫ

Slide 42

Slide 42 text

σόοά޲͚ʹ৽ϑοΫ • ϨϯμϦϯάॲཧʹରͯ͠ҎԼͷϑοΫ͕ ఏڙ͞ΕΔ • onRenderTracked • onRenderTriggered

Slide 43

Slide 43 text

DI (Dependency Injection)

Slide 44

Slide 44 text

provide / inject • Vue 2.x Ͱ΋ఏ ڙ͞Ε͍ͯͨ DI Λ Vue 3.0 Ͱ΋ಉ͡Α͏ ʹར༻Ͱ͖Δ

Slide 45

Slide 45 text

ϦΞΫςΟϒͳঢ়ଶ΋ڞ༗Ͱ͖Δ • ref Ͱϥοϓͨ͠ϦΞΫςΟϒͳΦϒδΣ ΫτΛ౉͢͜ͱͰڞ༗Ͱ͖Δ

Slide 46

Slide 46 text

ϓϥάΠϯ͸ DI Ͱ࣮૷Λਪ঑ • Vue 3.0 Ҏ߱Ͱ͸ɺϓϥάΠϯ։ൃ͸ provide / inject Λ࢖ͬͨύλʔϯΛਪ঑ • Vue 2.x ·Ͱͷ໰୊఺ • $xxx Ͱґଘ͕஫ೖ͞ΕΔͨΊɺܕαϙʔτ͕ ೉͍͠ • ϓϥάΠϯͰ࣮૷͞Εͨίϯϙʔωϯτ͸ɺ Vue.use ͠ͳ͍ͱಈ͔ͳ͍

Slide 47

Slide 47 text

DI ͷԠ༻ྫ • ಠࣗ Store ϓϩδΣΫτ಺Ͱ΋ provide / inject Ͱ DI ͢Ε͹ศརʹͳΔ͜ͱ΋͋Δ (͝ར༻͸ܭըతʹ)

Slide 48

Slide 48 text

طଘ API ͱͷ ซ༻ʹ͍ͭͯ

Slide 49

Slide 49 text

ίϯϙδγϣϯAPI Λซ༻Ͱ͖Δʂ • ซ༻ͨ͠৔߹ͷίϯϙδγϣϯ API ͷڍಈ • Vue 2.x ͷΦϓγϣϯ API ͷલʹղܾ͞Ε Δ • ͳͷͰɺsetup ಺Ͱ this.xxx ͸ෆՄ • Φϓγϣϯ API ଆ͔Β͸ ίϯϙδγϣϯ API Ͱఆٛ͞ΕͨϓϩύςΟͳͲʹΞΫηεՄ

Slide 50

Slide 50 text

ίϯϙδγϣϯ API σϝϦοτ

Slide 51

Slide 51 text

ϦΞΫςΟϒσʔλͷѻ͍͕গ͠໘౗ʹ • Refs ʹΑΔϦΞΫςΟϒͳঢ়ଶΛϥοϓ͢Δ ͱ͍͏֓೦͕ࠞཚΛ͖ͨ͢ • σʔλ͕ reactive ͳͷ΋ͷ͔ɺͦΕͱ΋ ref Ͱϥοϓ͞Εͯ΋ͷ͔Ͳ͏͔ҙ͕ࣝඞཁ • ͦͷͨΊʹม਺ͷ໋໊نଇ͕ඞཁʹͳΔՄ ೳੑ͕͋Δ

Slide 52

Slide 52 text

஫ҙ͠ͳ͍ͱίʔυ͕ΧΦεʹͳΓ΍͍͢ • JS / TS Ͱɺsetup ʹϩδοΫΛ࣮૷&ߏ ੒ͯ͠ίϯϙʔωϯτɺϥΠϒϥϦΛॻ ͍͍ͯ͘

Slide 53

Slide 53 text

eslint-plugin-vue ͰϧʔϧΛఏڙ͢Δ • ΧΦεʹͳΒͳ͍ͨΊʹίϯϙδγϣϯ API ޲͚ͷϧʔϧΛఏڙ͢Δ༧ఆ https://github.com/vuejs/eslint-plugin-vue/issues/1035

Slide 54

Slide 54 text

ϑϥάϝϯτ Fragments

Slide 55

Slide 55 text

ϑϥάϝϯτͱ͸ • ίϯϙʔωϯτ͕ෳ਺ͷ ཁૉΛ Root ཁૉͰϥο ϓ͠ͳͯ͘΋ɺ·͞ʹ அยͱͯ͠ฦ͢͜ͱ͕Ͱ ͖Δཁૉ܊ͷ͜ͱ • Vue 3.0 Ҏ߱͸σϑΥϧ τͰαϙʔτ fragment fragment fragment

Slide 56

Slide 56 text

Root ཁૉͰϥοϓ͢Δ໰୊఺ • Invalid ͳ HTML ʹͳͬͯ͠·͏ • Semantic ͳ HTML ʹͳΒͳ͍ • a11yରԠ͕Ͱ͖ͳ͘ͳΔ • ෆඞཁʹ div ཁૉΛੵΜͰ͠·͏

Slide 57

Slide 57 text

໰୊఺ͷίʔυྫ ෆਖ਼ͳ HTML … ϨϯμϦϯά

Slide 58

Slide 58 text

ϑϥάϝϯτΛར༻͢Δͱ… ϨϯμϦϯά ਖ਼͍͠HTML!

Slide 59

Slide 59 text

༨ஊ: Vue 2.x Ͱ͸ؔ਺ܕίϯϙʔωϯτͰճආͰ͖ͨ

Slide 60

Slide 60 text

ϙʔλϧ Portals

Slide 61

Slide 61 text

ϙʔλϧͱ͸ • ίϯϙʔωϯτ಺ͷ͋ ΔίϯςϯπΛVueͷ ඳըର৅֎ͷཁૉʹඳ ը͢ΔͨΊͷ࢓૊Έ • WICG ͷ Portals ͱ͸ ࣅ͍ͯΔ͕ͪΐͬͱҧ ͏ͷͰ஫ҙ

λʔήοτʹඳը Webϖʔδ

Slide 62

Slide 62 text

Ϣʔεέʔε • ελΠϧϨΠΞ΢τΛ Hack ͦ͠͏ͳ৔߹  z-indexɺposition: absolute ۦ࢖ͨ͠ελ Πϧॲཧ͔Β։์͞ΕΔ • ϖʔδ্ͷ΢ΟδΣοτ  ֎෦ͷԿΒ͔ͷ΢ΟδΣοτΛಈతʹߋ ৽͢Δඞཁ͕͋Δ΋ͷ

Slide 63

Slide 63 text

Vue 2.x ͰϙʔλϧΛ࢖༻͢Δʹ͸ ... • ϓϥάΠϯ vue-portal Λ࢖͏ඞཁ͕͋ͬͨ        https://github.com/LinusBorg/portal-vue • Vue 3.0 Ҏ߱Ͱ͸ɺԾ૝ DOM ϨϕϧͰϙʔ λϧ͕࣮૷͞Ε͍ͯΔ

Slide 64

Slide 64 text

࢖͍ํ • ର৅ͱͳΔίϯςϯπΛ Portal ίϯϙʔ ωϯτͰϥοϓ • target ϓϩύςΟͰର৅ઌͷཁૉΛࢦఆ ͢Δ͚ͩ

Slide 65

Slide 65 text

࢖͍ํ: ίʔυྫ

Slide 66

Slide 66 text

target ϓϩύςΟ

Slide 67

Slide 67 text

Portal ͱ͍͏໊લมΘΔ͔΋… • WICG ͷ Portals ͱίϯϑϦΫτ͍ͯ͠Δ & ৄࡉ࢓༷٧ΊΔͨΊɺݱࡏ RFC Ͱٞ࿦ த https://github.com/vuejs/rfcs/pull/112

Slide 68

Slide 68 text

αεϖϯε Suspense

Slide 69

Slide 69 text

αεϖϯεͱ͸ • ࡶʹ͍͏ͱɺίϯϙʔωϯτͷඇಉظͳ ඳըॲཧΛ͍͍ײ͡ʹ΍ͬͯ͘ΕΔ࢓૊ Έ

Slide 70

Slide 70 text

Ϣʔεέʔε • ྫ: Spinner Λ࢖ͬͨσʔλͷϩʔυঢ়ଶͷදࣔ • ฒྻͰಡΈࠐΈՕॴ͕ෳ਺Ͱͯ͘ΔͱΧΦεʹ ͳΓ͕ͪ Spinner Λճ͍ͯ͠Δؒʹ ඇಉظʹσʔλΛ fetch σʔλΛ fetch ͨ͠Β ίϯϙʔωϯτΛඳը

Slide 71

Slide 71 text

࢖͍ํ

Slide 72

Slide 72 text

࢖͍ํ

Slide 73

Slide 73 text

ͪͳΈʹ ૉ๿ʹ࣮૷͢Δͱ

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

DEMO ଟஈඇಉظίϯςϯπͷಡΈࠐΈ

Slide 76

Slide 76 text

αεϖϯε࢖͑Δʁ • alpha ൛Ͱ͸ೖ͍ͬͯΔ͕ɺϏϧυΦϓ γϣϯͰػೳ on/off Ͱ͖ΔΑ͏ʹͳͬͯ ͍Δ • αʔόʔαΠυϨϯμϦϯάͷ࣮૷ঢ়گ ࣍ୈ

Slide 77

Slide 77 text

Vue 2.x ͔Βͷ มߋʹ͍ͭͯ

Slide 78

Slide 78 text

୯ҰϑΝΠϧίϯϙʔωϯτ Single File Components

Slide 79

Slide 79 text

είʔϓ෇͖ CSS ͷ࢓༷มߋ • ݱࡏ RFC Ͱ࠷ऴϑΟʔυόοΫड෇த https://github.com/vuejs/rfcs/pull/119

Slide 80

Slide 80 text

Vue 3.0 Ҏ߱ͷ৽࢓༷ • Vue ಠࣗ CSS ֦ு ٙࣅΫϥεΛఏڙ • طଘͷه๏͸ίϯ ύΠϥͰܯࠂ͢Δ ͕ɺಈ࡞ͱͯ͠͸ ޓ׵ੑΛαϙʔτ ༧ఆ

Slide 81

Slide 81 text

::v-deep() ٖࣅΫϥε • σΟʔϓηϨΫλ (Deep Selector)  Scoped ͞Εͨࢠίϯϙʔωϯτʹ΋ελ ΠϧΛద༻͍ͨ͠৔߹ʹ࢖༻ • >>> ɺ/deep/ɺ::v-deep ݁߹ࢠ(஫:Χοί ͕ແ͍ํ)͸ഇࢭ

Slide 82

Slide 82 text

::v-deep() ίʔυྫ @vue/sfc-compiler + bundler

Slide 83

Slide 83 text

::v-slotted() ٖࣅΫϥε • ਌͔Βࢠʹ౉͞Ε Δεϩοτίϯς ϯπʹࢠͷελΠ ϧ͕ద༻͞Εͳ͘ ͳΔ • εϩοτίϯςϯ πʹ͸໌ࣔతʹε λΠϧͷࢦఆ͕ඞ ཁ Modal ͷ headerεϩοτʹ஫ೖ͞ΕΔ ίϯςϯπʹରͯ͠ελΠϧͷ ద༻͕ඞཁ

Slide 84

Slide 84 text

::v-slotted() ίʔυྫ @vue/sfc-compiler + bundler

Slide 85

Slide 85 text

::v-global() ٖࣅΫϥε • άϩʔόϧͳελΠϧΛ ಺ͰఆٛͰ͖Δ • ैདྷ͸ SFC ίϯϙʔωϯτ಺ʹ <style scoped> ͱ͸ผͷ <style> Ͱఆ͍ٛͯͨ͠

Slide 86

Slide 86 text

::v-global() ίʔυྫ @vue/sfc-compiler + bundler

Slide 87

Slide 87 text

εϩοτ Slots

Slide 88

Slide 88 text

Vue 2.6 ͔Βೖͬͨ v-slot ʹͳΔ • ैདྷͷҎԼʹΑΔεϩοτػೳ͸࡟আ͞ ΕΔ • slot ଐੑΛ࢖໊ͬͨલ෇͖εϩοτ • slot-sope ଐੑΛ࢖ͬͨείʔϓ෇͖ε ϩοτ

Slide 89

Slide 89 text

ϑΟϧλ Filters

Slide 90

Slide 90 text

ϑΟϧλ͸࡟আ • ύΠϓԋࢉࢠ ( | ) Λ࢖ͬͨϑΟϧλ͸ɺ ͍ͭʹ Vue 3.0 Ͱ࡟আ͞ΕΔ      • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػ ೳ͸αϙʔτ͞ΕΔ(༧ఆ)

Slide 91

Slide 91 text

୅ସखஈ • ESNext stage 1 ͷύΠϓϥΠϯԋࢉࢠ ( |> )ʹ ม׵ͯ͠࢖͏ • Acorn ϓϥάΠϯͰطଘͷϑΟϧλߏจΛ Parse & Transform ͯ͠࢖͏ • @vue/compiler-core Ͱੜ੒͞Εͨ render ؔ ਺ʹରͯ͠ Babel ϓϥάΠϯΛ Transform ͠ ͯ࢖͏

Slide 92

Slide 92 text

Πϕϯτ Events

Slide 93

Slide 93 text

Event Emitter ܥ API ͷ࡟আ • ίϯϙʔωϯτΠϯελϯε͕ఏڙ͢ΔҎԼ ͷ API ͸࡟আ͞ΕΔ༧ఆ • $on • $off • $once • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػೳ͸ αϙʔτ͞ΕΔ(༧ఆ)

Slide 94

Slide 94 text

୅ସखஈ • mitt Λ࢖͏  https://github.com/developit/mitt

Slide 95

Slide 95 text

άϩʔόϧ API Global API

Slide 96

Slide 96 text

I/F ͷ࠶ઃܭʹΑΓมߋ • Vue 2.x ͷάϩʔόϧ API ͷҰ෦Ͱɺঢ়ଶΛอ͍࣋ͯ͠ Δ͜ͱʹΑΓɺҎԼͷ໰୊͕͋ͬͨ • ୯ମςετ͠ʹ͍͘  ঢ়ଶͷϦηοτ΋͘͠͸ϦηοτͰ͖ͳ͍  (Vue.conﬁg.errorHandlerɺVue.useɺVue.mixin) • ಉ͡ϖʔδ্Ͱෳ਺ͷ Vue ΠϯελϯεؒͰঢ়ଶΛ੔ ߹ͤ͞Δͷ͕೉͍͠ • ·ͨɺTreeShaking ࠷దԽͷૂ͍΋͋Δ

Slide 97

Slide 97 text

Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 createApp ͰΠϯελϯεΛੜ੒

Slide 98

Slide 98 text

Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 productionTip ͸ Vue 3.0 Ͱ͸࡟আ

Slide 99

Slide 99 text

Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 ͜ͷล͸ ΄΅ͦͷ··

Slide 100

Slide 100 text

Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 Vue 3.0 Ͱ͸໊લΛมߋ   (ओͳ༻్͸ TS Ͱ ܕ෇͚Λαϙʔτ͢ΔͨΊ)

Slide 101

Slide 101 text

Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 ΤϯτϦϙΠϯτϨϕϧͷ provide ΋ఏڙ͢Δ

Slide 102

Slide 102 text

Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 DOM ΁ͷ Ϛ΢ϯτํ๏͸ಉ͡

Slide 103

Slide 103 text

·ͱΊ

Slide 104

Slide 104 text

• ίϯϙδγϣϯ API ʹΑΓେن໛։ൃ͕Α͘ ͳΓ·͢ • ศརͳ৽ػೳʹΑΓɺΞϓϦέʔγϣϯͷ࣮ ૷ͷදݱྗ͕ߴ·Γ·͢ • Vue 2.x ͔Βͷ breaking change తͳมߋ΋͋ ΔͷͰɺࠓ͔Βԡ͑ͯ͞උ͓͖͑ͯ·͠ΐ͏  (ҠߦπʔϧɾϑΣʔζఏڙ༧ఆ) ·ͱΊ

Slide 105

Slide 105 text

࠷ޙʹ

Slide 106

Slide 106 text

Vue Fes Japan 2020 • ࠓ೥ 2020 ೥΋΍Γ·͢ʂ • 11݄։࠵ʹ޲͚ͯ׆ಈ։࢝ʂ

Slide 107

Slide 107 text

͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ