まちにまった Vue.js 3

Transcript

1. ·ͪʹ·ͬͨ Vue.js 3 Vue.js v-tokyo meetup #11 2020.08.25 @kazupon
2. ࣗݾ঺հ
3. PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group Organizer Creator of Vue I18n & Intlify WebAssembly Love ❤ @kazu_pon kazupon kazupon
4. ͸͡Ίʹ
5. 2020೥7݄18೔
6. Vue.js 3.0 RC ϦϦʔεʂ https://github.com/vuejs/rfcs/issues/189 ͜ͷ issue Ͱ Evan ࢯ͕ࠓޙʹ͍ͭͯද໌
7. ߹ΘͤͯެࣜυΩϡϝϯτ΋ެ։ (β) https://v3.vuejs.org/
8. ެࣜϓϥάΠϯɾπʔϧ΄΅४උ͕੔͍ͭͭ͋Δ • 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
9. σγδϣϯπϦʔͷެ։ https://github.com/vuejs/rfcs/issues/183
10. ͍Α͍Α ϦϦʔεؒۙʂ
11. ࠓ೔࿩͢͜ͱ
12. ͦͷલʹ
13. 2020೥2݄1೔
15. Vue 3 ʹ͍ͭͯ࿩ͨ͠
16. εϥΠυ͸ͪ͜Β https://speakerdeck.com/kazupon/mamonakuyatutekuru-vue-dot-js-3
17. ͱ͍͏͍Θ͚Ͱ
18. ࠓ೔࿩͢͜ͱ • 2݄ͷൃද͔Βͷ Diff (ࠩ෼) • Vue 3 ؔ࿈पΓͷΞοϓσʔτ৘ใ • SFC • Vite • @vuedx • ͦͷଞ
19. SFC
20. Evan ࢯ͕ SFC վળ ͷ PR Λ౤Լ https://twitter.com/youyuxi/status/1277695108268339208
21. ౤Լͨ͠ RFC ͸ 3ͭ • 1. ίϯϙʔωϯτͷΠϯϙʔτ౶ҥߏจ • 2. Composition API ͷ DX վળ • 3. CSS ม਺ΠϯδΣΫγϣϯ https://github.com/vuejs/rfcs/pull/182
22. ίϯϙʔωϯτ ͷ Πϯϙʔτ౶ҥߏจ
23. <component> • SFC ʹ<component>ϒϩοΫΛಋೖ
24. <component> ͰԿ͕ྑ͘ͳΔͷ͔ʁ
25. ͜͏͍͏ίʔυΛॻ͘ඞཁ͕ͳ͘ͳΔʂ • Ұൠతͳίϯϙʔωϯτ ैདྷ RFC ίϯϙʔωϯτΛ࢖͏ͨΊʹ ͍͍ͪͪ <script> ϒϩοΫ಺Ͱ import ͢Δඞཁ͕ͳ͘ͳΔ
26. ͜͏͍͏ίʔυΛॻ͘ඞཁ͕ͳ͘ͳΔʂ • ඇಉظͳίϯϙʔωϯτ ඇಉظίϯϙʔωϯτΛϩʔυ͢ΔͨΊʹ dynamic import Ͱ components Φϓγϣϯʹ ࢦఆ͢Δඞཁ͕ͳ͘ͳΔ ैདྷ RFC
27. ίϯϙʔωϯτΛผ໊ʹͰ͖Δ • as Λ࢖͏͜ͱͰผ໊ʹͰ͖Δ ES modules ͷ import ߏจͷ as ͱಉ͜͡ͱ͕Ͱ͖Δ
28. Composition API ͷ DX վળ
29. <script setup> • <script> ʹ setup ͕௥Ճ
30. <script setup> Ͱ Ͳ͏DX͕ྑ͘ͳΔʁ
31. ΑΓ؆ܿʹ࣮૷Ͱ͖Δʂ setup ؔ਺಺ͰϩδοΫΛ࣮૷ͯ͠ɺϨϯμϦϯά ͢ΔͨΊʹίϯςΩετฦ͢ඞཁ͕ͳ͘ͳΔʂ ैདྷ RFC
32. ࢖͍ํ
33. ίϯςΩετͰϨϯμϦϯά͢ΔͨΊʹ͸ʁ • export ͢Δ ES Modules ͷ export ߏจΛ࢖͏͚ͩ
34. setupؔ਺ͷҾ਺͸Ͳ͏࢖͏ʁ • setup ͷଐੑ஋ʹࢦఆ͢Δ ैདྷ RFC
35. ίϯϙʔωϯτΦϓγϣϯ͸ʁ ैདྷ RFC props ͳͲͷ ίϯϙʔωϯτΦϓγϣϯΛ ࢖͏৔߹͸ export default ͢Δඞཁ͕͋Δ
36. TypeScript ͸ʁ • declare Λ࢖ͬͯܕఆٛ declare Ͱ props Λ͢Δͱɺ SFCίϯύΠϥ͕ props ࣮ࡍͷఆٛίʔυͱ TS ͷܕਪ࿦͞ΕΔΑ͏ʹίϯύΠϧ͢Δ
37. <script> ͱ <script setup> ΛҰॹʹ࢖͑Δ ༻్: - άϩʔόϧͳॲཧΛҰ౓͚ͩ ࣮ߦ͍ͨ͠৔߹ - SFC Ͱ named export ͳ΋ͷΛ ఏڙ͍ͨ͠৔߹
38. CSS ม਺ ΠϯδΣΫγϣϯ
39. <style vars> • style ϒϩοΫʹ vars ͕௥Ճ
40. <style vars> Ͱ Ͳ͏ྑ͘ͳΔʁ
41. script ଆ͔Β஋Λ౉ͤΔʂ vars ʹఆٛͨ͠ม਺Λ Webඪ४ͷCSSม਺ͷཁྖͰ ελΠϧ஋ͱͯ͠ ׂΓ౰ͯΔ͜ͱ͕Ͱ͖Δʂ ͭ·ΓɺಈతͳελΠϧΛ੍ޚͰ͖Δʂ όΠϯσΟϯάʂ
42. <style scoped>ͱ͍ͬ͠ΐʹར༻Մೳ vars Λ scoped ͱ ͍ͬ͠ΐʹར༻͍ͨ͠৔߹͸ɺ ಺෦ͷCSSม਺͸ϩʔΧϧͱݟͳ͢ ͭ·Γɺ͜ͷέʔεͰ͸ --color ͕Өڹ͢Δͷ͸ ͜ͷίϯϙʔωϯτʹͷΈ
43. άϩʔόϧͳCSSม਺ͷར༻͸ʁ --global ϓϦϑΟοΫεΛ࢖ͬͯ CSSม਺Λར༻͢Δ
44. ͜ΕΒRFCͷ࠾୒ʹ͍ͭͯ • <script setup>, <style vars> ʹͭ ͍ͯ͸ RC ʹ࣮૷ࡁΈ • <script setup> ͸೉ͳ͘࢖͑Δ • <style vars> ͸CSS ม਺͕࢖͑ΔϞ μϯͳϒϥ΢βͰར༻Ͱ͖Δ
45. ͜ΕΒRFCͷ࠾୒ʹ͍ͭͯ • <compontent> ʹ͍ͭͯ͸·ͩະ࣮૷ • SFC ʹ৽ͨͳϒϩοΫ΍ॻ͖ํ͕ՃΘΔ ͷͰɺෳࡶੑͱֶशίετ͕૿͢ΜͰ ͸ʁ • Vetur ͱ͍ͬͨςϯϓϨʔτղੳΛ͢Δ πʔϧ΁Өڹ͕େ͖͗͢ΔͷͰ͸ʁ
46. ͱ͍͏Θ͚ͰɺVue 3.0 Ͱ͸… • ·ͩ RFC Ͱ͍Ζ͍Ζͱٞ࿦ɺϑΟʔυόο Ϋ͕͋ΔͨΊ SFC ͷਖ਼ࣜػೳͰ͸ͳ͍ • ͜ͷ SFC վળ ͸ Experimental (࣮ݧత) ͳ ػೳͱͯ͠ఏڙ͞ΕΔ • ໰୊ͳ͚Ε͹ɺv3.1 ? Ͱ࠾୒͞ΕΔ༧ఆ
47. Vite
48. Evan ࢯ͕৽͍͠Ϗϧυπʔϧެ։ • ಡΈํ: `/vit/` https://github.com/vitejs/vite
49. 6݄ʹViteʹ͍ͭͯ࿩ͨ͠ https://speakerdeck.com/kazupon/native-esm-powered-web-dev-build-tool ϓϥάΠϯ࡞Γ͍ͨਓ ಺෦࣮૷ʹ͍ͭͯ஌Γ͍ͨํ͸ͥͻʂ
50. Vite ͷಛ௃ • ES Modules ϕʔεͷ։ൃαʔόΛඋ͑ͨϞμϯͳ Ϗϧυπʔϧ • dev server ͸ߴ଎ • ىಈ࣌ʹ͢΂ͯόϯυϧ͠ͳ͍ • ߴ଎ͳ ESbuild ʹΑΔ on the fly ίϯύΠϧ • Hot Module Replacement (HMR) ΋γϯϓϧͳ ͨΊ଎͍
51. ػೳ • 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 • Config File • Dev Server Proxy • Production Build • Modes and Environment Variables
52. ػೳ • Web Assembly • Inline Web Workers • HTTPS/2 https://github.com/vitejs/vite#features
53. ੜ·Εͨഎܠ • VuePress ͷىಈ͕஗ͯ͘ΠϥΠϥͨ͠ • SFC Λ ES Modules Ͱಈ͔͍ͨ͠ͱ͍͏Ξ ΠσΞ͕ੲ͔Β͋ͬͨ • Snowpack ͳͲͷ৽͍͠ ES Modules ϕʔ εͷόϯυϥ͕ग़ݱ͖ͯͨ͠
54. ͦΜͳதΞΠσΞ͕෣͍߱Γ͖ͯͯੜ·Εͨ https://twitter.com/youyuxi/status/1252173663199277058
55. Vite ͷݱঢ় • v1.0.0 RC ͱͯ͠ϦϦʔε͞Ε͍ͯΔͷ Ͱɺۙʑਖ਼ࣜ v1.0 ͕ϦϦʔε͞ΕΔݟࠐ Έ • ϓϩμΫγϣϯ޲͚ͷϏϧυ͸ɺ࣮࣭ rollup ͰϏϧυ͢ΔͷͰ࢖͑Δ͸ͣʂ...
56. Vue ͱ Vite ͱͷؔ܎ • Vue 3 ޲͚ͷެࣜυΩϡϝϯτͰ Vite Λ ࢖ͬͨΠϯετʔϧʹ͍ͭͯॻ͍ͯ͋Δ • ͳͷͰɺVue ޲͚ʹ͸αϙʔτ͞Ε͍ͯ͘ ͷ͸ؒҧ͍ͳ͍
57. ։ൃ؀ڥ͕͙͢ʹ੔͏ʂ • npm init vite-app ͷΑ͏ͳίϚϯυ TypeScript ͱ͔ॾʑͷ؀ڥ͕੔͏ʂ • ͷͰɺΈͳ͞Μɺ࢖͍͖ͬͯ·͠ΐ͏ʂ
58. @vuedx
59. Vue developer experience • Vue ͷ DX ΛΑ͘͢Δ ͨΊͷπʔϧ • ίΞνʔϜͷ Rahul ࢯ (znck) ͕࡞੒த • ·ͩ Experimental https://twitter.com/znck0
60. ༨ஊ: ͪͳΈʹ Rahul ࢯ͸ 2018 ೥೔ຊʹདྷ͍ͯΔ • Vue Fes Japan 2018 • ίϯύΠϥपΓ͕ಘ ҙ • rollup-plugin-vue ͷ ։ൃऀ https://vuefes.jp/2018/speakers/znck/
61. GitHub ϦϙδτϦ • @vuedx ͸ Rahul ࢯͷݸਓϦϙδτϦͰ։ ൃਐΊΒΕ͍ͯΔ https://github.com/znck/vue-developer-experience
62. @vuedx ͸ͲͷΑ͏ͳ΋ ͷ(DX)Λఏڙ͢Δͷ͔
63. @vuedx ͕ఏڙ͢Δ΋ͷ • @vuedx ͷΰʔϧͱͯ͠͸ҎԼΛఏڙ͢Δ͜ͱ • <template> ಺ͰͷܕνΣοΫ • ίʔυิ׬ • ϦϑΝΫλϦϯάػೳ • SFC ͷ ES Modules Խ
64. <template> ಺ͰͷܕνΣοΫ https://twitter.com/znck0/status/1290278773049286657/photo/1
65. ϦϑΝΫλϦϯάػೳ • <template>ͱ<script>ͱͷಉظ • Props ͷมߋ • ίϯϙʔωϯτλάͷมߋ • ϑΝΠϧ໊มߋͱίϯϙʔωϯτͷநग़ • ม਺໊ͷมߋ • … ͳͲ
66. σϞ • ྫ: ίϯϙʔωϯτλάͷมߋ https://twitter.com/znck0/status/1290577650398846976
67. @vuedxͰ͸ ͜ΕΛͲ͏΍͍ͬͯΔͷ͔
68. ΞʔΩςΫνϟ VS Code ͷ Language Service ʹύον͢Δ ײ͡Ͱ SFC Λॲཧ͍ͯ͠Δ
69. Vue Virtual TextDocument • SFC ֤ϒϩοΫΛԾ૝ϑΝΠϧͱͯ͠ॲཧ component.vue component.vue____script.ts component.vue____template.ts component.vue____render.ts TS ͷίʔυ ͱͯ͠ॲཧ͢Δ
70. @vuedxɺ Vetur ͱಉ͡Α͏ ͳπʔϧͰ͸ʁ
71. Vetur ͸ࠓޙͲ͏ͳΔʁ
72. ࠓޙ͸౷߹͍ͯ͘͠༧ఆ https://github.com/vuejs/vetur/issues/2016 Vetur ʹ @vuedx ͷTSϓϥάΠϯΛऔΓೖ ΕͯϦϑΝΫλϦϯάػೳΛஔ͖׵͑Δ
73. ͦͷଞ
74. Reactivity API
75. Ҏલͷ2݄ͷൃදͷͱ͖͸ • reactive • computed • watch • readonly • ref • isRef • toRefs ্هͷΑ͏ͳجຊతͳAPI͔͠ͳ͔͕ͬͨ…
76. ͞ΒʹҎԼͷAPI͕૿͑ͨ • shallowReactive • shallowRef • markRaw • triggerRef • isReactive • isProxy • toRaw ओʹύϑΥʔϚϯεͷ࠷దԽɺߴ౓ͳ͜ͱ ͍ͨ͠ਓ޲͚ʹެ։͞Εͨ
77. ৄ͍͠ৄࡉ͸ެࣜυΩϡϝϯτͰ Reactivity API ͷ߲໨ʹࡌ͍ͬͯ·͢ https://v3.vuejs.org/api/basic-reactivity.html#reactive
78. Vue.js ίΞνʔϜͷهࣄ΋ಡΉͱΑ͍ • Reactive ͷྺ࢙Λަ͑ͳ͕Βղઆ͍ͯ͠Δ https://dev.to/jinjiang/understanding-reactivity-in-vue-3-0-1jni
79. ෼͔Γ΍͍͢ Reactivity API ʹ͍ͭͯͷࢿྉ • Ref ͱ Reactive Λ࢖͍෼͚͕೔ຊޠͰ෼͔ Γ΍͘͢ॻ͍ͯΔ https://speakerdeck.com/kawamataryo/ref-vs-reactive-vue-composition-api-deep-in
80. @vue/ composition-api
81. v1.0.0 ͕ϦϦʔε͞Εͨ • δϣΠϯͨ͠ Anthony ࢯ΍ Carlos ࢯʹΑͬͯ։ൃ͕ਐ Μͩ • vue-next ͔Β଍Γͳ ͍API͕όοΫϙʔ τ͞Ε͍ͯΔ Anthony ࢯ Carlos ࢯ
82. ͜Ε͸Ͳ͏͍͏͜ͱʁ
83. ॳظͷࠒ͸஫ҙॻ͖͕͋ͬͨ https://github.com/vuejs/composition-api/commit/bde4d1b1900c98e13d7ec3e555425e19afc1b3f1#diff-04c6e90faac2675aa89e2176d2eec7d8 ຊ൪؀ڥͰ࢖͏ͷ͸ਪ঑͠ͳ͍ʂͱ
84. ։ൃ͕ਐΉΑ͏ʹͳ͔ͬͯΒ͸… • όοΫϙʔτ͢Δ͏ͪʹ͜ͷ஫ҙॻ͖͸ ͳ͘ͳͬͨ https://github.com/vuejs/composition-api/commit/7e6598cddebfc2c7ec307838b3eae8a1fcc0ce8b#diff-04c6e90faac2675aa89e2176d2eec7d8
85. ͭ·Γɺຊ൪؀ڥͰ࢖͑Δ͜ͱΛҙຯ͠·͢ • Vue 3 ͸ RC ϑΣʔζ • Vue 2 ͱ Vue 3 Λ ޓ׵ΛอͭϥΠϒ ϥͳͲ࡞͍ͬͯΔ ࡞ऀʹΑ࣮ͬͯূ ͞Ε͍ͯΔ Anthony ࢯ Carlos ࢯ
86. ͭ·Γɺຊ൪؀ڥͰ࢖͑Δ͜ͱΛҙຯ͠·͢ • ެࣜతʹ͸அݴ͸͍ͯ͠ͳ͍͕ɺόοΫ ϙʔτ͸੒ޭͨ͠ͱʂ໌ݴ͍ͯ͠Δ
87. ͝ར༻͸ܭըతʹ • ੍ݶࣄ߲͕͋Δ https://github.com/vuejs/composition-api#limitations
88. ͝ར༻͸ܭըతʹ • ύϑΥʔϚϯε͕ؾʹͳΒͳ͍͔Ͳ͏͔ https://antfu.github.io/vue-composition-api-benchmark-results/
89. ·ͱΊ
90. • Ҏલࣗ෼͕ൃද͔ΒɺVue 3 RC ͕ϦϦʔε͞ΕΔ·Ͱʹ͍Ζ ͍Ζͱਐల͕͋ͬͨ • SFC վળ RFC • Vite ര஀ • @vuedex ͷ։ൃ • @vue/composition-api 1.0 ϦϦʔε • ࠓޙ΋ਖ਼ࣜϦϦʔε·Ͱʹਐల͕͋Δͱࢥ͏ͷͰɺ৘ใ ΩϟονΞοϓ͍͚ͯͨͩ͠Ε͹ɻ ·ͱΊ
91. ࠷ޙʹ
92. • ΑΓOSS։ൃͷ׆ಈ͍͖͍ͯͨ͠ͷͰɺα ϙʔτͯ͘͠ΕΔͱ͏Ε͍͠Ͱ͢ʂ GitHub Sponsors https://github.com/sponsors/kazupon
93. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ