まちにまった Vue.js 3

38bee248082f6071230de65e9d74a944?s=47 kazupon
August 25, 2020

まちにまった Vue.js 3

38bee248082f6071230de65e9d74a944?s=128

kazupon

August 25, 2020
Tweet

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