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

Transcript

1. ·΋ͳ͘΍ͬͯ͘Δ Vue.js 3 PWA night conference 2020 2020.02.01 @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. 2016೥10݄
6. Vue.js 2.0 ϦϦʔε https://speakerdeck.com/kazupon/vue-dot-js-2-dot-0-server-side-rendering?slide=10
7. ͦΕ͔Β 3೥༨ΓΛྺͯ
8. 2020೥ Q1
9. Vue.js 3.0 ϦϦʔε༧ఆ
10. ݱࡏ
11. RFCͰ࠷ऴ࢓༷ΛݻΊͭͭணʑͱ։ൃத https://github.com/vuejs/rfcs
12. vue-next-webpack-preview https://github.com/vuejs/vue-next-webpack-preview
13. vue-cli-plugin-vue-next https://github.com/vuejs/vue-cli-plugin-vue-next
14. ެࣜϓϥάΠϯ/πʔϧ܊͸ରԠத • Vue Router • Vuex • Vue DevTools • Vue Test Utils • Vetur • Vue CLI • Webpack plugin • ESLint Plugin • JSX Plugin • … etc
15. ϝδϟʔϦϦʔεͳͷͰ ৽ػೳ & มߋ ͨ͘͞Μ͋Γ·͢
16. ࠓ೔࿩͢͜ͱ
17. ࠓ೔࿩͢͜ͱ • Vue.js 3 ͰೖΔ৽ػೳʹ͍ͭͯ • ίϯϙδγϣϯ API • ϑϥάϝϯτ • ϙʔλϧ • αεϖϯε
18. ࠓ೔࿩͢͜ͱ • ਺͋Δ Vue.js 2.x ͔Βͷมߋͷத͔Β͸… • ୯ҰϑΝΠϧίϯϙʔωϯτ • εϩοτ • ϑΟϧλ • Πϕϯτ • άϩʔόϧAPI
19. ࠓ೔࿩͞ͳ͍͜ͱ • Vue.js ຊମҎ֎ͷ͜ͱ • Vue ެࣜϓϥάΠϯ / πʔϧܥ • Nuxt.js ͳͲͷؔ࿈ΤίγεςϜ
20. ⚠ ஫ҙࣄ߲ ⚠ • ࠓ೔࿩͢಺༰͸ɺൃද࣌఺Ͱ Vue.js ຊମʹ࣮૷͞Ε͍ͯΔ΋ͷ • RFC ͷঢ়گͱࠓޙͷalphaɺbeta όʔδϣϯͷϦϦʔεޙͷঢ়گ࣍ ୈͰ͸มΘΔՄೳੑ͸͋Γ
21. ৽ػೳ ʹ͍ͭͯ
22. ίϯϙδγϣϯAPI Composition API
23. ίϯϙδγϣϯAPIͱ͸ʁ • ؔ਺ϕʔεͰఏڙ͞ΕΔ API ܊ https://vue-composition-api-rfc.netlify.com/api.html ఏڙ͞ΕΔ API ͨͪ
24. ੜ·Εͨഎܠ • Vue.js Ͱେن໛։ൃ͸Ͱ͖Δ͕໰୊͕͋ͬͨ • ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡΈʹ ͘͘ͳΔ • ςετ͕͠ʹ͍͘ • ίʔυ࠶ར༻ͷύλʔϯԽ͕͠ʹ͍͘ • TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͍͘
25. ίϯϙδγϣϯAPIΛ࢖͏͜ͱͰ… • ίϯϙʔωϯτ ͷϩδοΫΛࣗ ༝౓ߴ͘૊Έ߹ Θ࣮ͤ૷͢Δ͜ ͱ͕Ͱ͖Δ
26. େن໛։ൃ͕ΑΓշదʹʂ • ίϯϙʔωϯτ ͷϩδοΫߏ੒ ͕៉ྷʹͳΓɺ ςετ΋͠΍͢ ͘ͳΔʂ
27. ͲΜͳ΋ͷ͔ ݟ͍͖ͯ·͠ΐ͏ʂ
28. ఏڙ͞ΕΔओͳ API ͷछྨ • ओʹҎԼͷ಺༰Λఏڙ͢Δ΋ͷʹ෼ྨ͞ΕΔ • ϦΞΫςΟϒঢ়ଶͷૢ࡞ • ίϯϙʔωϯτͷ৽ΤϯτϦϙΠϯτ • ϥΠϑαΠΫϧϑοΫ • DI (Dependency injection: ґଘੑͷ஫ೖ)
29. ϦΞΫςΟϒ ঢ়ଶͷૢ࡞
30. ঢ়ଶૢ࡞ͱϢʔςϦςΟ͕ఏڙ͞ΕΔ • reactive • computed • watch • readonly • ref • isRef • toRefs
31. ৽͍֓͠೦ Ref ͕ಋೖ͞ΕΔ • ϦΞΫςΟϒͳঢ়ଶΛϥοϓͨ͠ࢀরΦ ϒδΣΫτ https://vue-composition-api-rfc.netlify.com/ ʹܝࡌ͞Ε͍ͯΔਤΑΓ
32. ίʔυྫ
33. ίϯϙʔωϯτ ͷ ৽ΤϯτϦϙΠϯτ
34. setup • ίϯϙδγϣϯ APIΛ࢖ͬͯί ϯϙʔωϯτͷ ϩδοΫΛ࣮૷ • return ͨ͠΋ͷ ͕ςϯϓϨʔτ ͷϨϯμϦϯά ίϯςΩετʹ ͳΔ ৽͍͠ ΤϯτϦϙΠϯτ
35. render ؔ਺ / JSX ΋࢖༻Ͱ͖Δ
36. Ҿ਺ʹ props ͱ context ͕౉͞ΕΔ • props: 
 ίϯϙʔωϯτͰఆٛ͞ΕͨϓϩύςΟ • context: 
 ίϯϙʔωϯτͰΞΫηεͰ͖ΔϓϩύςΟ • attrs: Vue 2.x ͷ $attrs ʹ૬౰ • emit: Vue 2.x ͷ $emit ʹ૬౰ • slots: Vue 2.x ͷ $slots ʹ૬౰
37. props ͱ context ͷ࢖༻ྫ
38. this ͸ίϯϙʔωϯτͷΠϯελϯεͰ͸ͳ͍ • ίϯϙδγϣϯ API Ͱ setup Ͱίϯϙʔ ωϯτΛ࣮૷͢Δ৔߹͸ɺthis ͸΋͏࢖ Θͳ͍
39. ϥΠϑαΠΫϧ ϑοΫ
40. Vue 2.x ͱͷϚοϐϯά beforeCreate created beforeMount mounted updated beforeDestroy destroyed errorCaptured setup setup onBeforeMount onMounted onUpdated onBeforeUnmount onUnmounted onErrorCaptured (ࠨ: Vue 2.xɺӈ: Vue 3 Ҏ߱)
41. ৽͍͠ϥΠϑαΠΫϧϑοΫͷ࢖༻ྫ
42. σόοά޲͚ʹ৽ϑοΫ • ϨϯμϦϯάॲཧʹରͯ͠ҎԼͷϑοΫ͕ ఏڙ͞ΕΔ • onRenderTracked • onRenderTriggered
43. DI (Dependency Injection)
44. provide / inject • Vue 2.x Ͱ΋ఏ ڙ͞Ε͍ͯͨ DI Λ Vue 3.0 Ͱ΋ಉ͡Α͏ ʹར༻Ͱ͖Δ
45. ϦΞΫςΟϒͳঢ়ଶ΋ڞ༗Ͱ͖Δ • ref Ͱϥοϓͨ͠ϦΞΫςΟϒͳΦϒδΣ ΫτΛ౉͢͜ͱͰڞ༗Ͱ͖Δ
46. ϓϥάΠϯ͸ DI Ͱ࣮૷Λਪ঑ • Vue 3.0 Ҏ߱Ͱ͸ɺϓϥάΠϯ։ൃ͸ provide / inject Λ࢖ͬͨύλʔϯΛਪ঑ • Vue 2.x ·Ͱͷ໰୊఺ • $xxx Ͱґଘ͕஫ೖ͞ΕΔͨΊɺܕαϙʔτ͕ ೉͍͠ • ϓϥάΠϯͰ࣮૷͞Εͨίϯϙʔωϯτ͸ɺ Vue.use ͠ͳ͍ͱಈ͔ͳ͍
47. DI ͷԠ༻ྫ • ಠࣗ Store ϓϩδΣΫτ಺Ͱ΋ provide / inject Ͱ DI ͢Ε͹ศརʹͳΔ͜ͱ΋͋Δ (͝ར༻͸ܭըతʹ)
48. طଘ API ͱͷ ซ༻ʹ͍ͭͯ
49. ίϯϙδγϣϯAPI Λซ༻Ͱ͖Δʂ • ซ༻ͨ͠৔߹ͷίϯϙδγϣϯ API ͷڍಈ • Vue 2.x ͷΦϓγϣϯ API ͷલʹղܾ͞Ε Δ • ͳͷͰɺsetup ಺Ͱ this.xxx ͸ෆՄ • Φϓγϣϯ API ଆ͔Β͸ ίϯϙδγϣϯ API Ͱఆٛ͞ΕͨϓϩύςΟͳͲʹΞΫηεՄ
50. ίϯϙδγϣϯ API σϝϦοτ
51. ϦΞΫςΟϒσʔλͷѻ͍͕গ͠໘౗ʹ • Refs ʹΑΔϦΞΫςΟϒͳঢ়ଶΛϥοϓ͢Δ ͱ͍͏֓೦͕ࠞཚΛ͖ͨ͢ • σʔλ͕ reactive ͳͷ΋ͷ͔ɺͦΕͱ΋ ref Ͱϥοϓ͞Εͯ΋ͷ͔Ͳ͏͔ҙ͕ࣝඞཁ • ͦͷͨΊʹม਺ͷ໋໊نଇ͕ඞཁʹͳΔՄ ೳੑ͕͋Δ
52. ஫ҙ͠ͳ͍ͱίʔυ͕ΧΦεʹͳΓ΍͍͢ • JS / TS Ͱɺsetup ʹϩδοΫΛ࣮૷&ߏ ੒ͯ͠ίϯϙʔωϯτɺϥΠϒϥϦΛॻ ͍͍ͯ͘
53. eslint-plugin-vue ͰϧʔϧΛఏڙ͢Δ • ΧΦεʹͳΒͳ͍ͨΊʹίϯϙδγϣϯ API ޲͚ͷϧʔϧΛఏڙ͢Δ༧ఆ https://github.com/vuejs/eslint-plugin-vue/issues/1035
54. ϑϥάϝϯτ Fragments
55. ϑϥάϝϯτͱ͸ • ίϯϙʔωϯτ͕ෳ਺ͷ ཁૉΛ Root ཁૉͰϥο ϓ͠ͳͯ͘΋ɺ·͞ʹ அยͱͯ͠ฦ͢͜ͱ͕Ͱ ͖Δཁૉ܊ͷ͜ͱ • Vue 3.0 Ҏ߱͸σϑΥϧ τͰαϙʔτ fragment fragment fragment
56. Root ཁૉͰϥοϓ͢Δ໰୊఺ • Invalid ͳ HTML ʹͳͬͯ͠·͏ • Semantic ͳ HTML ʹͳΒͳ͍ • a11yରԠ͕Ͱ͖ͳ͘ͳΔ • ෆඞཁʹ div ཁૉΛੵΜͰ͠·͏
57. ໰୊఺ͷίʔυྫ ෆਖ਼ͳ HTML … ϨϯμϦϯά
58. ϑϥάϝϯτΛར༻͢Δͱ… ϨϯμϦϯά ਖ਼͍͠HTML!
59. ༨ஊ: Vue 2.x Ͱ͸ؔ਺ܕίϯϙʔωϯτͰճආͰ͖ͨ
60. ϙʔλϧ Portals
61. ϙʔλϧͱ͸ • ίϯϙʔωϯτ಺ͷ͋ ΔίϯςϯπΛVueͷ ඳըର৅֎ͷཁૉʹඳ ը͢ΔͨΊͷ࢓૊Έ • WICG ͷ Portals ͱ͸ ࣅ͍ͯΔ͕ͪΐͬͱҧ ͏ͷͰ஫ҙ <div id=“widget></div> λʔήοτʹඳը Webϖʔδ
62. Ϣʔεέʔε • ελΠϧϨΠΞ΢τΛ Hack ͦ͠͏ͳ৔߹
 z-indexɺposition: absolute ۦ࢖ͨ͠ελ Πϧॲཧ͔Β։์͞ΕΔ • ϖʔδ্ͷ΢ΟδΣοτ
 ֎෦ͷԿΒ͔ͷ΢ΟδΣοτΛಈతʹߋ ৽͢Δඞཁ͕͋Δ΋ͷ
63. Vue 2.x ͰϙʔλϧΛ࢖༻͢Δʹ͸ ... • ϓϥάΠϯ vue-portal Λ࢖͏ඞཁ͕͋ͬͨ
 
 
 
 https://github.com/LinusBorg/portal-vue • Vue 3.0 Ҏ߱Ͱ͸ɺԾ૝ DOM ϨϕϧͰϙʔ λϧ͕࣮૷͞Ε͍ͯΔ
64. ࢖͍ํ • ର৅ͱͳΔίϯςϯπΛ Portal ίϯϙʔ ωϯτͰϥοϓ • target ϓϩύςΟͰର৅ઌͷཁૉΛࢦఆ ͢Δ͚ͩ
65. ࢖͍ํ: ίʔυྫ
66. target ϓϩύςΟ
67. Portal ͱ͍͏໊લมΘΔ͔΋… • WICG ͷ Portals ͱίϯϑϦΫτ͍ͯ͠Δ & ৄࡉ࢓༷٧ΊΔͨΊɺݱࡏ RFC Ͱٞ࿦ த https://github.com/vuejs/rfcs/pull/112
68. αεϖϯε Suspense
69. αεϖϯεͱ͸ • ࡶʹ͍͏ͱɺίϯϙʔωϯτͷඇಉظͳ ඳըॲཧΛ͍͍ײ͡ʹ΍ͬͯ͘ΕΔ࢓૊ Έ
70. Ϣʔεέʔε • ྫ: Spinner Λ࢖ͬͨσʔλͷϩʔυঢ়ଶͷදࣔ • ฒྻͰಡΈࠐΈՕॴ͕ෳ਺Ͱͯ͘ΔͱΧΦεʹ ͳΓ͕ͪ Spinner Λճ͍ͯ͠Δؒʹ ඇಉظʹσʔλΛ fetch σʔλΛ fetch ͨ͠Β ίϯϙʔωϯτΛඳը
71. ࢖͍ํ
72. ࢖͍ํ
73. ͪͳΈʹ ૉ๿ʹ࣮૷͢Δͱ
75. DEMO ଟஈඇಉظίϯςϯπͷಡΈࠐΈ
76. αεϖϯε࢖͑Δʁ • alpha ൛Ͱ͸ೖ͍ͬͯΔ͕ɺϏϧυΦϓ γϣϯͰػೳ on/off Ͱ͖ΔΑ͏ʹͳͬͯ ͍Δ • αʔόʔαΠυϨϯμϦϯάͷ࣮૷ঢ়گ ࣍ୈ
77. Vue 2.x ͔Βͷ มߋʹ͍ͭͯ
78. ୯ҰϑΝΠϧίϯϙʔωϯτ Single File Components
79. είʔϓ෇͖ CSS ͷ࢓༷มߋ • ݱࡏ RFC Ͱ࠷ऴϑΟʔυόοΫड෇த https://github.com/vuejs/rfcs/pull/119
80. Vue 3.0 Ҏ߱ͷ৽࢓༷ • Vue ಠࣗ CSS ֦ு ٙࣅΫϥεΛఏڙ • طଘͷه๏͸ίϯ ύΠϥͰܯࠂ͢Δ ͕ɺಈ࡞ͱͯ͠͸ ޓ׵ੑΛαϙʔτ ༧ఆ
81. ::v-deep() ٖࣅΫϥε • σΟʔϓηϨΫλ (Deep Selector)
 Scoped ͞Εͨࢠίϯϙʔωϯτʹ΋ελ ΠϧΛద༻͍ͨ͠৔߹ʹ࢖༻ • >>> ɺ/deep/ɺ::v-deep ݁߹ࢠ(஫:Χοί ͕ແ͍ํ)͸ഇࢭ
82. ::v-deep() ίʔυྫ @vue/sfc-compiler + bundler
83. ::v-slotted() ٖࣅΫϥε • ਌͔Βࢠʹ౉͞Ε Δεϩοτίϯς ϯπʹࢠͷελΠ ϧ͕ద༻͞Εͳ͘ ͳΔ • εϩοτίϯςϯ πʹ͸໌ࣔతʹε λΠϧͷࢦఆ͕ඞ ཁ Modal ͷ headerεϩοτʹ஫ೖ͞ΕΔ ίϯςϯπʹରͯ͠ελΠϧͷ ద༻͕ඞཁ
84. ::v-slotted() ίʔυྫ @vue/sfc-compiler + bundler
85. ::v-global() ٖࣅΫϥε • άϩʔόϧͳελΠϧΛ <style scoped> ಺ͰఆٛͰ͖Δ • ैདྷ͸ SFC ίϯϙʔωϯτ಺ʹ <style scoped> ͱ͸ผͷ <style> Ͱఆ͍ٛͯͨ͠
86. ::v-global() ίʔυྫ @vue/sfc-compiler + bundler
87. εϩοτ Slots
88. Vue 2.6 ͔Βೖͬͨ v-slot ʹͳΔ • ैདྷͷҎԼʹΑΔεϩοτػೳ͸࡟আ͞ ΕΔ • slot ଐੑΛ࢖໊ͬͨલ෇͖εϩοτ • slot-sope ଐੑΛ࢖ͬͨείʔϓ෇͖ε ϩοτ
89. ϑΟϧλ Filters
90. ϑΟϧλ͸࡟আ • ύΠϓԋࢉࢠ ( | ) Λ࢖ͬͨϑΟϧλ͸ɺ ͍ͭʹ Vue 3.0 Ͱ࡟আ͞ΕΔ
 
 
 • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػ ೳ͸αϙʔτ͞ΕΔ(༧ఆ)
91. ୅ସखஈ • ESNext stage 1 ͷύΠϓϥΠϯԋࢉࢠ ( |> )ʹ ม׵ͯ͠࢖͏ • Acorn ϓϥάΠϯͰطଘͷϑΟϧλߏจΛ Parse & Transform ͯ͠࢖͏ • @vue/compiler-core Ͱੜ੒͞Εͨ render ؔ ਺ʹରͯ͠ Babel ϓϥάΠϯΛ Transform ͠ ͯ࢖͏
92. Πϕϯτ Events
93. Event Emitter ܥ API ͷ࡟আ • ίϯϙʔωϯτΠϯελϯε͕ఏڙ͢ΔҎԼ ͷ API ͸࡟আ͞ΕΔ༧ఆ • $on • $off • $once • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػೳ͸ αϙʔτ͞ΕΔ(༧ఆ)
94. ୅ସखஈ • mitt Λ࢖͏
 https://github.com/developit/mitt
95. άϩʔόϧ API Global API
96. I/F ͷ࠶ઃܭʹΑΓมߋ • Vue 2.x ͷάϩʔόϧ API ͷҰ෦Ͱɺঢ়ଶΛอ͍࣋ͯ͠ Δ͜ͱʹΑΓɺҎԼͷ໰୊͕͋ͬͨ • ୯ମςετ͠ʹ͍͘
 ঢ়ଶͷϦηοτ΋͘͠͸ϦηοτͰ͖ͳ͍
 (Vue.config.errorHandlerɺVue.useɺVue.mixin) • ಉ͡ϖʔδ্Ͱෳ਺ͷ Vue ΠϯελϯεؒͰঢ়ଶΛ੔ ߹ͤ͞Δͷ͕೉͍͠ • ·ͨɺTreeShaking ࠷దԽͷૂ͍΋͋Δ
97. Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 createApp ͰΠϯελϯεΛੜ੒
98. Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 productionTip ͸ Vue 3.0 Ͱ͸࡟আ
99. Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 ͜ͷล͸ ΄΅ͦͷ··
100. Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 Vue 3.0 Ͱ͸໊લΛมߋ 
 (ओͳ༻్͸ TS Ͱ ܕ෇͚Λαϙʔτ͢ΔͨΊ)
101. Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 ΤϯτϦϙΠϯτϨϕϧͷ provide ΋ఏڙ͢Δ
102. Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0 DOM ΁ͷ Ϛ΢ϯτํ๏͸ಉ͡
103. ·ͱΊ
104. • ίϯϙδγϣϯ API ʹΑΓେن໛։ൃ͕Α͘ ͳΓ·͢ • ศརͳ৽ػೳʹΑΓɺΞϓϦέʔγϣϯͷ࣮ ૷ͷදݱྗ͕ߴ·Γ·͢ • Vue 2.x ͔Βͷ breaking change తͳมߋ΋͋ ΔͷͰɺࠓ͔Βԡ͑ͯ͞උ͓͖͑ͯ·͠ΐ͏
 (ҠߦπʔϧɾϑΣʔζఏڙ༧ఆ) ·ͱΊ
105. ࠷ޙʹ
106. Vue Fes Japan 2020 • ࠓ೥ 2020 ೥΋΍Γ·͢ʂ • 11݄։࠵ʹ޲͚ͯ׆ಈ։࢝ʂ
107. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ