まちにまった Vue.js 3

by kazupon

Slide 1

Slide 1 text

·ͪʹ·ͬͨ Vue.js 3 Vue.js v-tokyo meetup #11 2020.08.25 @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

2020೥7݄18೔

Slide 6

Slide 6 text

Vue.js 3.0 RC ϦϦʔεʂ https://github.com/vuejs/rfcs/issues/189 ͜ͷ issue Ͱ Evan ࢯ͕ࠓޙʹ͍ͭͯද໌

Slide 7

Slide 7 text

߹ΘͤͯެࣜυΩϡϝϯτ΋ެ։ (β) https://v3.vuejs.org/

Slide 8

Slide 8 text

ެࣜϓϥάΠϯɾπʔϧ΄΅४උ͕੔͍ͭͭ͋Δ • vue-router v4.0.0-beta6 • vuex v4.0.0-beta4 • vue-cli v4.5.0 (vue 3 preset) • vue-devtools v6.0.0-beta.1 • eslint-plugin-vue v7.0.0-beta.2 • @vue/test-utils v2.0.0-beta.2 • vue-class-component v8.0.0-alpha.6 • vue-loader v16.0.0-beta.5 • rollup-plugin-vue v6.0.0-beta.8

Slide 9

Slide 9 text

σγδϣϯπϦʔͷެ։ https://github.com/vuejs/rfcs/issues/183

Slide 10

Slide 10 text

͍Α͍Α ϦϦʔεؒۙʂ

Slide 11

Slide 11 text

ࠓ೔࿩͢͜ͱ

Slide 12

Slide 12 text

ͦͷલʹ

Slide 13

Slide 13 text

2020೥2݄1೔

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Vue 3 ʹ͍ͭͯ࿩ͨ͠

Slide 16

Slide 16 text

εϥΠυ͸ͪ͜Β https://speakerdeck.com/kazupon/mamonakuyatutekuru-vue-dot-js-3

Slide 17

Slide 17 text

ͱ͍͏͍Θ͚Ͱ

Slide 18

Slide 18 text

ࠓ೔࿩͢͜ͱ • 2݄ͷൃද͔Βͷ Diff (ࠩ෼) • Vue 3 ؔ࿈पΓͷΞοϓσʔτ৘ใ • SFC • Vite • @vuedx • ͦͷଞ

Slide 19

Slide 19 text

SFC

Slide 20

Slide 20 text

Evan ࢯ͕ SFC վળ ͷ PR Λ౤Լ https://twitter.com/youyuxi/status/1277695108268339208

Slide 21

Slide 21 text

౤Լͨ͠ RFC ͸ 3ͭ • 1. ίϯϙʔωϯτͷΠϯϙʔτ౶ҥߏจ • 2. Composition API ͷ DX վળ • 3. CSS ม਺ΠϯδΣΫγϣϯ https://github.com/vuejs/rfcs/pull/182

Slide 22

Slide 22 text

ίϯϙʔωϯτ ͷ Πϯϙʔτ౶ҥߏจ

Slide 23

Slide 23 text

• SFC ʹϒϩοΫΛಋೖ

Slide 24

Slide 24 text

ͰԿ͕ྑ͘ͳΔͷ͔ʁ

Slide 25

Slide 25 text

͜͏͍͏ίʔυΛॻ͘ඞཁ͕ͳ͘ͳΔʂ • Ұൠతͳίϯϙʔωϯτ ैདྷ RFC ίϯϙʔωϯτΛ࢖͏ͨΊʹ ͍͍ͪͪ ϒϩοΫ಺Ͱ import ͢Δඞཁ͕ͳ͘ͳΔ

Slide 26

Slide 26 text

͜͏͍͏ίʔυΛॻ͘ඞཁ͕ͳ͘ͳΔʂ • ඇಉظͳίϯϙʔωϯτ ඇಉظίϯϙʔωϯτΛϩʔυ͢ΔͨΊʹ dynamic import Ͱ components Φϓγϣϯʹ ࢦఆ͢Δඞཁ͕ͳ͘ͳΔ ैདྷ RFC

Slide 27

Slide 27 text

ίϯϙʔωϯτΛผ໊ʹͰ͖Δ • as Λ࢖͏͜ͱͰผ໊ʹͰ͖Δ ES modules ͷ import ߏจͷ as ͱಉ͜͡ͱ͕Ͱ͖Δ

Slide 28

Slide 28 text

Composition API ͷ DX վળ

Slide 29

Slide 29 text

• <script> ʹ setup ͕௥Ճ

Slide 30

Slide 30 text

Ͱ Ͳ͏DX͕ྑ͘ͳΔʁ

Slide 31

Slide 31 text

ΑΓ؆ܿʹ࣮૷Ͱ͖Δʂ setup ؔ਺಺ͰϩδοΫΛ࣮૷ͯ͠ɺϨϯμϦϯά ͢ΔͨΊʹίϯςΩετฦ͢ඞཁ͕ͳ͘ͳΔʂ ैདྷ RFC

Slide 32

Slide 32 text

࢖͍ํ

Slide 33

Slide 33 text

ίϯςΩετͰϨϯμϦϯά͢ΔͨΊʹ͸ʁ • export ͢Δ ES Modules ͷ export ߏจΛ࢖͏͚ͩ

Slide 34

Slide 34 text

setupؔ਺ͷҾ਺͸Ͳ͏࢖͏ʁ • setup ͷଐੑ஋ʹࢦఆ͢Δ ैདྷ RFC

Slide 35

Slide 35 text

ίϯϙʔωϯτΦϓγϣϯ͸ʁ ैདྷ RFC props ͳͲͷ ίϯϙʔωϯτΦϓγϣϯΛ ࢖͏৔߹͸ export default ͢Δඞཁ͕͋Δ

Slide 36

Slide 36 text

TypeScript ͸ʁ • declare Λ࢖ͬͯܕఆٛ declare Ͱ props Λ͢Δͱɺ SFCίϯύΠϥ͕ props ࣮ࡍͷఆٛίʔυͱ TS ͷܕਪ࿦͞ΕΔΑ͏ʹίϯύΠϧ͢Δ

Slide 37

Slide 37 text

ͱ <script setup> ΛҰॹʹ࢖͑Δ ༻్: - άϩʔόϧͳॲཧΛҰ౓͚ͩ ࣮ߦ͍ͨ͠৔߹ - SFC Ͱ named export ͳ΋ͷΛ ఏڙ͍ͨ͠৔߹

Slide 38

Slide 38 text

CSS ม਺ ΠϯδΣΫγϣϯ

Slide 39

Slide 39 text

• style ϒϩοΫʹ vars ͕௥Ճ

Slide 40

Slide 40 text

Ͱ Ͳ͏ྑ͘ͳΔʁ

Slide 41

Slide 41 text

script ଆ͔Β஋Λ౉ͤΔʂ vars ʹఆٛͨ͠ม਺Λ Webඪ४ͷCSSม਺ͷཁྖͰ ελΠϧ஋ͱͯ͠ ׂΓ౰ͯΔ͜ͱ͕Ͱ͖Δʂ ͭ·ΓɺಈతͳελΠϧΛ੍ޚͰ͖Δʂ όΠϯσΟϯάʂ

Slide 42

Slide 42 text

ͱ͍ͬ͠ΐʹར༻Մೳ vars Λ scoped ͱ ͍ͬ͠ΐʹར༻͍ͨ͠৔߹͸ɺ ಺෦ͷCSSม਺͸ϩʔΧϧͱݟͳ͢ ͭ·Γɺ͜ͷέʔεͰ͸ --color ͕Өڹ͢Δͷ͸ ͜ͷίϯϙʔωϯτʹͷΈ

Slide 43

Slide 43 text

άϩʔόϧͳCSSม਺ͷར༻͸ʁ --global ϓϦϑΟοΫεΛ࢖ͬͯ CSSม਺Λར༻͢Δ

Slide 44

Slide 44 text

͜ΕΒRFCͷ࠾୒ʹ͍ͭͯ • , <style vars> ʹͭ ͍ͯ͸ RC ʹ࣮૷ࡁΈ • <script setup> ͸೉ͳ͘࢖͑Δ • <style vars> ͸CSS ม਺͕࢖͑ΔϞ μϯͳϒϥ΢βͰར༻Ͱ͖Δ

Slide 45

Slide 45 text

͜ΕΒRFCͷ࠾୒ʹ͍ͭͯ • ʹ͍ͭͯ͸·ͩະ࣮૷ • SFC ʹ৽ͨͳϒϩοΫ΍ॻ͖ํ͕ՃΘΔ ͷͰɺෳࡶੑͱֶशίετ͕૿͢ΜͰ ͸ʁ • Vetur ͱ͍ͬͨςϯϓϨʔτղੳΛ͢Δ πʔϧ΁Өڹ͕େ͖͗͢ΔͷͰ͸ʁ

Slide 46

Slide 46 text

ͱ͍͏Θ͚ͰɺVue 3.0 Ͱ͸… • ·ͩ RFC Ͱ͍Ζ͍Ζͱٞ࿦ɺϑΟʔυόο Ϋ͕͋ΔͨΊ SFC ͷਖ਼ࣜػೳͰ͸ͳ͍ • ͜ͷ SFC վળ ͸ Experimental (࣮ݧత) ͳ ػೳͱͯ͠ఏڙ͞ΕΔ • ໰୊ͳ͚Ε͹ɺv3.1 ? Ͱ࠾୒͞ΕΔ༧ఆ

Slide 47

Slide 47 text

Vite

Slide 48

Slide 48 text

Evan ࢯ͕৽͍͠Ϗϧυπʔϧެ։ • ಡΈํ: `/vit/` https://github.com/vitejs/vite

Slide 49

Slide 49 text

6݄ʹViteʹ͍ͭͯ࿩ͨ͠ https://speakerdeck.com/kazupon/native-esm-powered-web-dev-build-tool ϓϥάΠϯ࡞Γ͍ͨਓ ಺෦࣮૷ʹ͍ͭͯ஌Γ͍ͨํ͸ͥͻʂ

Slide 50

Slide 50 text

Vite ͷಛ௃ • ES Modules ϕʔεͷ։ൃαʔόΛඋ͑ͨϞμϯͳ Ϗϧυπʔϧ • dev server ͸ߴ଎ • ىಈ࣌ʹ͢΂ͯόϯυϧ͠ͳ͍ • ߴ଎ͳ ESbuild ʹΑΔ on the ﬂy ίϯύΠϧ • Hot Module Replacement (HMR) ΋γϯϓϧͳ ͨΊ଎͍

Slide 51

Slide 51 text

ػೳ • Bare Module Resolving • Hot Module Replacement • TypeScript • CSS / JSON Importing • Asset URL Handling • PostCSS • CSS Modules https://github.com/vitejs/vite#features • CSS Pre-processors • JSX • Custom Blocks • Conﬁg File • Dev Server Proxy • Production Build • Modes and Environment Variables

Slide 52

Slide 52 text

ػೳ • Web Assembly • Inline Web Workers • HTTPS/2 https://github.com/vitejs/vite#features

Slide 53

Slide 53 text

ੜ·Εͨഎܠ • VuePress ͷىಈ͕஗ͯ͘ΠϥΠϥͨ͠ • SFC Λ ES Modules Ͱಈ͔͍ͨ͠ͱ͍͏Ξ ΠσΞ͕ੲ͔Β͋ͬͨ • Snowpack ͳͲͷ৽͍͠ ES Modules ϕʔ εͷόϯυϥ͕ग़ݱ͖ͯͨ͠

Slide 54

Slide 54 text

ͦΜͳதΞΠσΞ͕෣͍߱Γ͖ͯͯੜ·Εͨ https://twitter.com/youyuxi/status/1252173663199277058

Slide 55

Slide 55 text

Vite ͷݱঢ় • v1.0.0 RC ͱͯ͠ϦϦʔε͞Ε͍ͯΔͷ Ͱɺۙʑਖ਼ࣜ v1.0 ͕ϦϦʔε͞ΕΔݟࠐ Έ • ϓϩμΫγϣϯ޲͚ͷϏϧυ͸ɺ࣮࣭ rollup ͰϏϧυ͢ΔͷͰ࢖͑Δ͸ͣʂ...

Slide 56

Slide 56 text

Vue ͱ Vite ͱͷؔ܎ • Vue 3 ޲͚ͷެࣜυΩϡϝϯτͰ Vite Λ ࢖ͬͨΠϯετʔϧʹ͍ͭͯॻ͍ͯ͋Δ • ͳͷͰɺVue ޲͚ʹ͸αϙʔτ͞Ε͍ͯ͘ ͷ͸ؒҧ͍ͳ͍

Slide 57

Slide 57 text

։ൃ؀ڥ͕͙͢ʹ੔͏ʂ • npm init vite-app ͷΑ͏ͳίϚϯυ TypeScript ͱ͔ॾʑͷ؀ڥ͕੔͏ʂ • ͷͰɺΈͳ͞Μɺ࢖͍͖ͬͯ·͠ΐ͏ʂ

Slide 58

Slide 58 text

@vuedx

Slide 59

Slide 59 text

Vue developer experience • Vue ͷ DX ΛΑ͘͢Δ ͨΊͷπʔϧ • ίΞνʔϜͷ Rahul ࢯ (znck) ͕࡞੒த • ·ͩ Experimental https://twitter.com/znck0

Slide 60

Slide 60 text

༨ஊ: ͪͳΈʹ Rahul ࢯ͸ 2018 ೥೔ຊʹདྷ͍ͯΔ • Vue Fes Japan 2018 • ίϯύΠϥपΓ͕ಘ ҙ • rollup-plugin-vue ͷ ։ൃऀ https://vuefes.jp/2018/speakers/znck/

Slide 61

Slide 61 text

GitHub ϦϙδτϦ • @vuedx ͸ Rahul ࢯͷݸਓϦϙδτϦͰ։ ൃਐΊΒΕ͍ͯΔ https://github.com/znck/vue-developer-experience

Slide 62

Slide 62 text

@vuedx ͸ͲͷΑ͏ͳ΋ ͷ(DX)Λఏڙ͢Δͷ͔

Slide 63

Slide 63 text

@vuedx ͕ఏڙ͢Δ΋ͷ • @vuedx ͷΰʔϧͱͯ͠͸ҎԼΛఏڙ͢Δ͜ͱ • ಺ͰͷܕνΣοΫ • ίʔυิ׬ • ϦϑΝΫλϦϯάػೳ • SFC ͷ ES Modules Խ

Slide 64

Slide 64 text

಺ͰͷܕνΣοΫ https://twitter.com/znck0/status/1290278773049286657/photo/1

Slide 65

Slide 65 text

ϦϑΝΫλϦϯάػೳ • ͱͱͷಉظ • Props ͷมߋ • ίϯϙʔωϯτλάͷมߋ • ϑΝΠϧ໊มߋͱίϯϙʔωϯτͷநग़ • ม਺໊ͷมߋ • … ͳͲ

Slide 66

Slide 66 text

σϞ • ྫ: ίϯϙʔωϯτλάͷมߋ https://twitter.com/znck0/status/1290577650398846976

Slide 67

Slide 67 text

@vuedxͰ͸ ͜ΕΛͲ͏΍͍ͬͯΔͷ͔

Slide 68

Slide 68 text

ΞʔΩςΫνϟ VS Code ͷ Language Service ʹύον͢Δ ײ͡Ͱ SFC Λॲཧ͍ͯ͠Δ

Slide 69

Slide 69 text

Vue Virtual TextDocument • SFC ֤ϒϩοΫΛԾ૝ϑΝΠϧͱͯ͠ॲཧ component.vue component.vue____script.ts component.vue____template.ts component.vue____render.ts TS ͷίʔυ ͱͯ͠ॲཧ͢Δ

Slide 70

Slide 70 text

@vuedxɺ Vetur ͱಉ͡Α͏ ͳπʔϧͰ͸ʁ

Slide 71

Slide 71 text

Vetur ͸ࠓޙͲ͏ͳΔʁ

Slide 72

Slide 72 text

ࠓޙ͸౷߹͍ͯ͘͠༧ఆ https://github.com/vuejs/vetur/issues/2016 Vetur ʹ @vuedx ͷTSϓϥάΠϯΛऔΓೖ ΕͯϦϑΝΫλϦϯάػೳΛஔ͖׵͑Δ

Slide 73

Slide 73 text

ͦͷଞ

Slide 74

Slide 74 text

Reactivity API

Slide 75

Slide 75 text

Ҏલͷ2݄ͷൃදͷͱ͖͸ • reactive • computed • watch • readonly • ref • isRef • toRefs ্هͷΑ͏ͳجຊతͳAPI͔͠ͳ͔͕ͬͨ…

Slide 76

Slide 76 text

͞ΒʹҎԼͷAPI͕૿͑ͨ • shallowReactive • shallowRef • markRaw • triggerRef • isReactive • isProxy • toRaw ओʹύϑΥʔϚϯεͷ࠷దԽɺߴ౓ͳ͜ͱ ͍ͨ͠ਓ޲͚ʹެ։͞Εͨ

Slide 77

Slide 77 text

ৄ͍͠ৄࡉ͸ެࣜυΩϡϝϯτͰ Reactivity API ͷ߲໨ʹࡌ͍ͬͯ·͢ https://v3.vuejs.org/api/basic-reactivity.html#reactive

Slide 78

Slide 78 text

Vue.js ίΞνʔϜͷهࣄ΋ಡΉͱΑ͍ • Reactive ͷྺ࢙Λަ͑ͳ͕Βղઆ͍ͯ͠Δ https://dev.to/jinjiang/understanding-reactivity-in-vue-3-0-1jni

Slide 79

Slide 79 text

෼͔Γ΍͍͢ Reactivity API ʹ͍ͭͯͷࢿྉ • Ref ͱ Reactive Λ࢖͍෼͚͕೔ຊޠͰ෼͔ Γ΍͘͢ॻ͍ͯΔ https://speakerdeck.com/kawamataryo/ref-vs-reactive-vue-composition-api-deep-in

Slide 80

Slide 80 text

@vue/ composition-api

Slide 81

Slide 81 text

v1.0.0 ͕ϦϦʔε͞Εͨ • δϣΠϯͨ͠ Anthony ࢯ΍ Carlos ࢯʹΑͬͯ։ൃ͕ਐ Μͩ • vue-next ͔Β଍Γͳ ͍API͕όοΫϙʔ τ͞Ε͍ͯΔ Anthony ࢯ Carlos ࢯ

Slide 82

Slide 82 text

͜Ε͸Ͳ͏͍͏͜ͱʁ

Slide 83

Slide 83 text

ॳظͷࠒ͸஫ҙॻ͖͕͋ͬͨ https://github.com/vuejs/composition-api/commit/bde4d1b1900c98e13d7ec3e555425e19afc1b3f1#diﬀ-04c6e90faac2675aa89e2176d2eec7d8 ຊ൪؀ڥͰ࢖͏ͷ͸ਪ঑͠ͳ͍ʂͱ

Slide 84

Slide 84 text

։ൃ͕ਐΉΑ͏ʹͳ͔ͬͯΒ͸… • όοΫϙʔτ͢Δ͏ͪʹ͜ͷ஫ҙॻ͖͸ ͳ͘ͳͬͨ https://github.com/vuejs/composition-api/commit/7e6598cddebfc2c7ec307838b3eae8a1fcc0ce8b#diﬀ-04c6e90faac2675aa89e2176d2eec7d8

Slide 85

Slide 85 text

ͭ·Γɺຊ൪؀ڥͰ࢖͑Δ͜ͱΛҙຯ͠·͢ • Vue 3 ͸ RC ϑΣʔζ • Vue 2 ͱ Vue 3 Λ ޓ׵ΛอͭϥΠϒ ϥͳͲ࡞͍ͬͯΔ ࡞ऀʹΑ࣮ͬͯূ ͞Ε͍ͯΔ Anthony ࢯ Carlos ࢯ

Slide 86

Slide 86 text

ͭ·Γɺຊ൪؀ڥͰ࢖͑Δ͜ͱΛҙຯ͠·͢ • ެࣜతʹ͸அݴ͸͍ͯ͠ͳ͍͕ɺόοΫ ϙʔτ͸੒ޭͨ͠ͱʂ໌ݴ͍ͯ͠Δ

Slide 87

Slide 87 text

͝ར༻͸ܭըతʹ • ੍ݶࣄ߲͕͋Δ https://github.com/vuejs/composition-api#limitations

Slide 88

Slide 88 text

͝ར༻͸ܭըతʹ • ύϑΥʔϚϯε͕ؾʹͳΒͳ͍͔Ͳ͏͔ https://antfu.github.io/vue-composition-api-benchmark-results/

Slide 89

Slide 89 text

·ͱΊ

Slide 90

Slide 90 text

• Ҏલࣗ෼͕ൃද͔ΒɺVue 3 RC ͕ϦϦʔε͞ΕΔ·Ͱʹ͍Ζ ͍Ζͱਐల͕͋ͬͨ • SFC վળ RFC • Vite ര஀ • @vuedex ͷ։ൃ • @vue/composition-api 1.0 ϦϦʔε • ࠓޙ΋ਖ਼ࣜϦϦʔε·Ͱʹਐల͕͋Δͱࢥ͏ͷͰɺ৘ใ ΩϟονΞοϓ͍͚ͯͨͩ͠Ε͹ɻ ·ͱΊ

Slide 91

Slide 91 text

࠷ޙʹ

Slide 92

Slide 92 text

• ΑΓOSS։ൃͷ׆ಈ͍͖͍ͯͨ͠ͷͰɺα ϙʔτͯ͘͠ΕΔͱ͏Ε͍͠Ͱ͢ʂ GitHub Sponsors https://github.com/sponsors/kazupon

Slide 93

Slide 93 text

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