まちにまった 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೔

14. None

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. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ