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

Transcript

1. 1.

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

2. 2.

   ࣗݾ঺հ

3. 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. 4.

   ͸͡Ίʹ

5. 5.

   2016೥10݄

6. 6.

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

7. 7.

   ͦΕ͔Β 3೥༨ΓΛྺͯ

8. 8.

   2020೥ Q1

9. 9.

   Vue.js 3.0 ϦϦʔε༧ఆ

10. 10.

    ݱࡏ

11. 11.

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

12. 12.

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

13. 13.

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

14. 14.

    ެࣜϓϥάΠϯ/πʔϧ܊͸ରԠத • Vue Router • Vuex • Vue DevTools •

    Vue Test Utils • Vetur • Vue CLI • Webpack plugin • ESLint Plugin • JSX Plugin • … etc
15. 15.

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

16. 16.

    ࠓ೔࿩͢͜ͱ

17. 17.

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

    • ϙʔλϧ • αεϖϯε
18. 18.

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

    • ϑΟϧλ • Πϕϯτ • άϩʔόϧAPI
19. 19.

    ࠓ೔࿩͞ͳ͍͜ͱ • Vue.js ຊମҎ֎ͷ͜ͱ • Vue ެࣜϓϥάΠϯ / πʔϧܥ •

    Nuxt.js ͳͲͷؔ࿈ΤίγεςϜ
20. 20.

    ⚠ ஫ҙࣄ߲ ⚠ • ࠓ೔࿩͢಺༰͸ɺൃද࣌఺Ͱ Vue.js ຊମʹ࣮૷͞Ε͍ͯΔ΋ͷ • RFC ͷঢ়گͱࠓޙͷalphaɺbeta

    όʔδϣϯͷϦϦʔεޙͷঢ়گ࣍ ୈͰ͸มΘΔՄೳੑ͸͋Γ
21. 21.

    ৽ػೳ ʹ͍ͭͯ

22. 22.

    ίϯϙδγϣϯAPI Composition API

23. 23.

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

24. 24.

    ੜ·Εͨഎܠ • Vue.js Ͱେن໛։ൃ͸Ͱ͖Δ͕໰୊͕͋ͬͨ • ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡΈʹ ͘͘ͳΔ • ςετ͕͠ʹ͍͘ •

    ίʔυ࠶ར༻ͷύλʔϯԽ͕͠ʹ͍͘ • TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͍͘
25. 25.

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

26. 26.

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

27. 27.

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

28. 28.

    ఏڙ͞ΕΔओͳ API ͷछྨ • ओʹҎԼͷ಺༰Λఏڙ͢Δ΋ͷʹ෼ྨ͞ΕΔ • ϦΞΫςΟϒঢ়ଶͷૢ࡞ • ίϯϙʔωϯτͷ৽ΤϯτϦϙΠϯτ •

    ϥΠϑαΠΫϧϑοΫ • DI (Dependency injection: ґଘੑͷ஫ೖ)
29. 29.

    ϦΞΫςΟϒ ঢ়ଶͷૢ࡞

30. 30.

    ঢ়ଶૢ࡞ͱϢʔςϦςΟ͕ఏڙ͞ΕΔ • reactive • computed • watch • readonly •

    ref • isRef • toRefs
31. 31.

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

32. 32.

    ίʔυྫ

33. 33.

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

34. 34.

    setup • ίϯϙδγϣϯ APIΛ࢖ͬͯί ϯϙʔωϯτͷ ϩδοΫΛ࣮૷ • return ͨ͠΋ͷ ͕ςϯϓϨʔτ

    ͷϨϯμϦϯά ίϯςΩετʹ ͳΔ ৽͍͠ ΤϯτϦϙΠϯτ
35. 35.

    render ؔ਺ / JSX ΋࢖༻Ͱ͖Δ

36. 36.

    Ҿ਺ʹ props ͱ context ͕౉͞ΕΔ • props: 
 ίϯϙʔωϯτͰఆٛ͞ΕͨϓϩύςΟ •

    context: 
 ίϯϙʔωϯτͰΞΫηεͰ͖ΔϓϩύςΟ • attrs: Vue 2.x ͷ $attrs ʹ૬౰ • emit: Vue 2.x ͷ $emit ʹ૬౰ • slots: Vue 2.x ͷ $slots ʹ૬౰
37. 37.

    props ͱ context ͷ࢖༻ྫ

38. 38.

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

    Θͳ͍
39. 39.

    ϥΠϑαΠΫϧ ϑοΫ

40. 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. 41.

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

42. 42.

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

43. 43.

    DI (Dependency Injection)

44. 44.

    provide / inject • Vue 2.x Ͱ΋ఏ ڙ͞Ε͍ͯͨ DI Λ

    Vue 3.0 Ͱ΋ಉ͡Α͏ ʹར༻Ͱ͖Δ
45. 45.

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

46. 46.

    ϓϥάΠϯ͸ DI Ͱ࣮૷Λਪ঑ • Vue 3.0 Ҏ߱Ͱ͸ɺϓϥάΠϯ։ൃ͸ provide / inject

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

    DI ͷԠ༻ྫ • ಠࣗ Store ϓϩδΣΫτ಺Ͱ΋ provide / inject Ͱ

    DI ͢Ε͹ศརʹͳΔ͜ͱ΋͋Δ (͝ར༻͸ܭըతʹ)
48. 48.

    طଘ API ͱͷ ซ༻ʹ͍ͭͯ

49. 49.

    ίϯϙδγϣϯAPI Λซ༻Ͱ͖Δʂ • ซ༻ͨ͠৔߹ͷίϯϙδγϣϯ API ͷڍಈ • Vue 2.x ͷΦϓγϣϯ

    API ͷલʹղܾ͞Ε Δ • ͳͷͰɺsetup ಺Ͱ this.xxx ͸ෆՄ • Φϓγϣϯ API ଆ͔Β͸ ίϯϙδγϣϯ API Ͱఆٛ͞ΕͨϓϩύςΟͳͲʹΞΫηεՄ
50. 50.

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

51. 51.

    ϦΞΫςΟϒσʔλͷѻ͍͕গ͠໘౗ʹ • Refs ʹΑΔϦΞΫςΟϒͳঢ়ଶΛϥοϓ͢Δ ͱ͍͏֓೦͕ࠞཚΛ͖ͨ͢ • σʔλ͕ reactive ͳͷ΋ͷ͔ɺͦΕͱ΋ ref

    Ͱϥοϓ͞Εͯ΋ͷ͔Ͳ͏͔ҙ͕ࣝඞཁ • ͦͷͨΊʹม਺ͷ໋໊نଇ͕ඞཁʹͳΔՄ ೳੑ͕͋Δ
52. 52.

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

53. 53.

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

54. 54.

    ϑϥάϝϯτ Fragments

55. 55.

    ϑϥάϝϯτͱ͸ • ίϯϙʔωϯτ͕ෳ਺ͷ ཁૉΛ Root ཁૉͰϥο ϓ͠ͳͯ͘΋ɺ·͞ʹ அยͱͯ͠ฦ͢͜ͱ͕Ͱ ͖Δཁૉ܊ͷ͜ͱ •

    Vue 3.0 Ҏ߱͸σϑΥϧ τͰαϙʔτ fragment fragment fragment
56. 56.

    Root ཁૉͰϥοϓ͢Δ໰୊఺ • Invalid ͳ HTML ʹͳͬͯ͠·͏ • Semantic ͳ

    HTML ʹͳΒͳ͍ • a11yରԠ͕Ͱ͖ͳ͘ͳΔ • ෆඞཁʹ div ཁૉΛੵΜͰ͠·͏
57. 57.

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

58. 58.

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

59. 59.

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

60. 60.

    ϙʔλϧ Portals

61. 61.

    ϙʔλϧͱ͸ • ίϯϙʔωϯτ಺ͷ͋ ΔίϯςϯπΛVueͷ ඳըର৅֎ͷཁૉʹඳ ը͢ΔͨΊͷ࢓૊Έ • WICG ͷ Portals

    ͱ͸ ࣅ͍ͯΔ͕ͪΐͬͱҧ ͏ͷͰ஫ҙ <div id=“widget></div> λʔήοτʹඳը Webϖʔδ
62. 62.

    Ϣʔεέʔε • ελΠϧϨΠΞ΢τΛ Hack ͦ͠͏ͳ৔߹
 z-indexɺposition: absolute ۦ࢖ͨ͠ελ Πϧॲཧ͔Β։์͞ΕΔ •

    ϖʔδ্ͷ΢ΟδΣοτ
 ֎෦ͷԿΒ͔ͷ΢ΟδΣοτΛಈతʹߋ ৽͢Δඞཁ͕͋Δ΋ͷ
63. 63.

    Vue 2.x ͰϙʔλϧΛ࢖༻͢Δʹ͸ ... • ϓϥάΠϯ vue-portal Λ࢖͏ඞཁ͕͋ͬͨ
 
 


    
 https://github.com/LinusBorg/portal-vue • Vue 3.0 Ҏ߱Ͱ͸ɺԾ૝ DOM ϨϕϧͰϙʔ λϧ͕࣮૷͞Ε͍ͯΔ
64. 64.

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

65. 65.

    ࢖͍ํ: ίʔυྫ

66. 66.

    target ϓϩύςΟ

67. 67.

    Portal ͱ͍͏໊લมΘΔ͔΋… • WICG ͷ Portals ͱίϯϑϦΫτ͍ͯ͠Δ & ৄࡉ࢓༷٧ΊΔͨΊɺݱࡏ RFC

    Ͱٞ࿦ த https://github.com/vuejs/rfcs/pull/112
68. 68.

    αεϖϯε Suspense

69. 69.

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

70. 70.

    Ϣʔεέʔε • ྫ: Spinner Λ࢖ͬͨσʔλͷϩʔυঢ়ଶͷදࣔ • ฒྻͰಡΈࠐΈՕॴ͕ෳ਺Ͱͯ͘ΔͱΧΦεʹ ͳΓ͕ͪ Spinner Λճ͍ͯ͠Δؒʹ

    ඇಉظʹσʔλΛ fetch σʔλΛ fetch ͨ͠Β ίϯϙʔωϯτΛඳը
71. 71.

    ࢖͍ํ

72. 72.

    ࢖͍ํ

73. 73.

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

74. 74.

    None
75. 75.

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

76. 76.

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

    ࣍ୈ
77. 77.

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

78. 78.

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

79. 79.

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

80. 80.

    Vue 3.0 Ҏ߱ͷ৽࢓༷ • Vue ಠࣗ CSS ֦ு ٙࣅΫϥεΛఏڙ •

    طଘͷه๏͸ίϯ ύΠϥͰܯࠂ͢Δ ͕ɺಈ࡞ͱͯ͠͸ ޓ׵ੑΛαϙʔτ ༧ఆ
81. 81.

    ::v-deep() ٖࣅΫϥε • σΟʔϓηϨΫλ (Deep Selector)
 Scoped ͞Εͨࢠίϯϙʔωϯτʹ΋ελ ΠϧΛద༻͍ͨ͠৔߹ʹ࢖༻ •

    >>> ɺ/deep/ɺ::v-deep ݁߹ࢠ(஫:Χοί ͕ແ͍ํ)͸ഇࢭ
82. 82.

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

83. 83.

    ::v-slotted() ٖࣅΫϥε • ਌͔Βࢠʹ౉͞Ε Δεϩοτίϯς ϯπʹࢠͷελΠ ϧ͕ద༻͞Εͳ͘ ͳΔ • εϩοτίϯςϯ

    πʹ͸໌ࣔతʹε λΠϧͷࢦఆ͕ඞ ཁ Modal ͷ headerεϩοτʹ஫ೖ͞ΕΔ ίϯςϯπʹରͯ͠ελΠϧͷ ద༻͕ඞཁ
84. 84.

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

85. 85.

    ::v-global() ٖࣅΫϥε • άϩʔόϧͳελΠϧΛ <style scoped> ಺ͰఆٛͰ͖Δ • ैདྷ͸ SFC

    ίϯϙʔωϯτ಺ʹ <style scoped> ͱ͸ผͷ <style> Ͱఆ͍ٛͯͨ͠
86. 86.

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

87. 87.

    εϩοτ Slots

88. 88.

    Vue 2.6 ͔Βೖͬͨ v-slot ʹͳΔ • ैདྷͷҎԼʹΑΔεϩοτػೳ͸࡟আ͞ ΕΔ • slot

    ଐੑΛ࢖໊ͬͨલ෇͖εϩοτ • slot-sope ଐੑΛ࢖ͬͨείʔϓ෇͖ε ϩοτ
89. 89.

    ϑΟϧλ Filters

90. 90.

    ϑΟϧλ͸࡟আ • ύΠϓԋࢉࢠ ( | ) Λ࢖ͬͨϑΟϧλ͸ɺ ͍ͭʹ Vue 3.0

    Ͱ࡟আ͞ΕΔ
 
 
 • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػ ೳ͸αϙʔτ͞ΕΔ(༧ఆ)
91. 91.

    ୅ସखஈ • ESNext stage 1 ͷύΠϓϥΠϯԋࢉࢠ ( |> )ʹ ม׵ͯ͠࢖͏

    • Acorn ϓϥάΠϯͰطଘͷϑΟϧλߏจΛ Parse & Transform ͯ͠࢖͏ • @vue/compiler-core Ͱੜ੒͞Εͨ render ؔ ਺ʹରͯ͠ Babel ϓϥάΠϯΛ Transform ͠ ͯ࢖͏
92. 92.

    Πϕϯτ Events

93. 93.

    Event Emitter ܥ API ͷ࡟আ • ίϯϙʔωϯτΠϯελϯε͕ఏڙ͢ΔҎԼ ͷ API ͸࡟আ͞ΕΔ༧ఆ

    • $on • $off • $once • Vue 2.x ޓ׵Ϗϧυ൛Ͱ͸ܯࠂग़ྗ͠ɺػೳ͸ αϙʔτ͞ΕΔ(༧ఆ)
94. 94.

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

95. 95.

    άϩʔόϧ API Global API

96. 96.

    I/F ͷ࠶ઃܭʹΑΓมߋ • Vue 2.x ͷάϩʔόϧ API ͷҰ෦Ͱɺঢ়ଶΛอ͍࣋ͯ͠ Δ͜ͱʹΑΓɺҎԼͷ໰୊͕͋ͬͨ •

    ୯ମςετ͠ʹ͍͘
 ঢ়ଶͷϦηοτ΋͘͠͸ϦηοτͰ͖ͳ͍
 (Vue.config.errorHandlerɺVue.useɺVue.mixin) • ಉ͡ϖʔδ্Ͱෳ਺ͷ Vue ΠϯελϯεؒͰঢ়ଶΛ੔ ߹ͤ͞Δͷ͕೉͍͠ • ·ͨɺTreeShaking ࠷దԽͷૂ͍΋͋Δ
97. 97.

    Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    createApp ͰΠϯελϯεΛੜ੒
98. 98.

    Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    productionTip ͸ Vue 3.0 Ͱ͸࡟আ
99. 99.

    Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

    ͜ͷล͸ ΄΅ͦͷ··
100. 100.

     Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

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

     Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

     ΤϯτϦϙΠϯτϨϕϧͷ provide ΋ఏڙ͢Δ
102. 102.

     Vue 2.x ͱ Vue 3.0 ͷҧ͍ Vue 2.x Vue 3.0

     DOM ΁ͷ Ϛ΢ϯτํ๏͸ಉ͡
103. 103.

     ·ͱΊ

104. 104.

     • ίϯϙδγϣϯ API ʹΑΓେن໛։ൃ͕Α͘ ͳΓ·͢ • ศརͳ৽ػೳʹΑΓɺΞϓϦέʔγϣϯͷ࣮ ૷ͷදݱྗ͕ߴ·Γ·͢ • Vue

     2.x ͔Βͷ breaking change తͳมߋ΋͋ ΔͷͰɺࠓ͔Βԡ͑ͯ͞උ͓͖͑ͯ·͠ΐ͏
 (ҠߦπʔϧɾϑΣʔζఏڙ༧ఆ) ·ͱΊ
105. 105.

     ࠷ޙʹ

106. 106.

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

107. 107.

     ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ