まちにまった Vue.js 3

Transcript

1. ·ͪʹ·ͬͨ
   Vue.js 3
   Vue.js v-tokyo meetup #11
   2020.08.25
   @kazupon
   

   View Slide

2. ࣗݾ঺հ
   
   

   View Slide

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
   

   View Slide

4. ͸͡Ίʹ
   

   View Slide

5. 2020೥7݄18೔
   

   View Slide

6. Vue.js 3.0 RC ϦϦʔεʂ
   https://github.com/vuejs/rfcs/issues/189
   ͜ͷ issue Ͱ Evan ࢯ͕ࠓޙʹ͍ͭͯද໌
   

   View Slide

7. ߹ΘͤͯެࣜυΩϡϝϯτ΋ެ։ (β)
   https://v3.vuejs.org/
   

   View Slide

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
   

   View Slide

9. σγδϣϯπϦʔͷެ։
   https://github.com/vuejs/rfcs/issues/183
   

   View Slide

10. ͍Α͍Α
    ϦϦʔεؒۙʂ
    

    View Slide

11. ࠓ೔࿩͢͜ͱ
    

    View Slide

12. ͦͷલʹ
    

    View Slide

13. 2020೥2݄1೔
    

    View Slide

14. View Slide

15. Vue 3 ʹ͍ͭͯ࿩ͨ͠
    

    View Slide

16. εϥΠυ͸ͪ͜Β
    https://speakerdeck.com/kazupon/mamonakuyatutekuru-vue-dot-js-3
    

    View Slide

17. ͱ͍͏͍Θ͚Ͱ
    

    View Slide

18. ࠓ೔࿩͢͜ͱ
    • 2݄ͷൃද͔Βͷ Diff (ࠩ෼)
    • Vue 3 ؔ࿈पΓͷΞοϓσʔτ৘ใ
    • SFC
    • Vite
    • @vuedx
    • ͦͷଞ
    

    View Slide

19. SFC
    

    View Slide

20. Evan ࢯ͕ SFC վળ ͷ PR Λ౤Լ
    https://twitter.com/youyuxi/status/1277695108268339208
    

    View Slide

21. ౤Լͨ͠ RFC ͸ 3ͭ
    • 1. ίϯϙʔωϯτͷΠϯϙʔτ౶ҥߏจ
    • 2. Composition API ͷ DX վળ
    • 3. CSS ม਺ΠϯδΣΫγϣϯ
    https://github.com/vuejs/rfcs/pull/182
    

    View Slide

22. ίϯϙʔωϯτ
    ͷ
    Πϯϙʔτ౶ҥߏจ
    

    View Slide

23. 
    • SFC ʹϒϩοΫΛಋೖ
    

    View Slide

24. 
    ͰԿ͕ྑ͘ͳΔͷ͔ʁ
    

    View Slide

25. ͜͏͍͏ίʔυΛॻ͘ඞཁ͕ͳ͘ͳΔʂ
    • Ұൠతͳίϯϙʔωϯτ
    ैདྷ RFC
    ίϯϙʔωϯτΛ࢖͏ͨΊʹ
    ͍͍ͪͪ ϒϩοΫ಺Ͱ<br/>import ͢Δඞཁ͕ͳ͘ͳΔ<br/>

    View Slide

26. ͜͏͍͏ίʔυΛॻ͘ඞཁ͕ͳ͘ͳΔʂ
    • ඇಉظͳίϯϙʔωϯτ
    ඇಉظίϯϙʔωϯτΛϩʔυ͢ΔͨΊʹ
    dynamic import Ͱ components Φϓγϣϯʹ
    ࢦఆ͢Δඞཁ͕ͳ͘ͳΔ
    ैདྷ RFC
    

    View Slide

27. ίϯϙʔωϯτΛผ໊ʹͰ͖Δ
    • as Λ࢖͏͜ͱͰผ໊ʹͰ͖Δ
    ES modules ͷ import ߏจͷ
    as ͱಉ͜͡ͱ͕Ͱ͖Δ
    

    View Slide

28. Composition API
    ͷ
    DX վળ
    

    View Slide

29. <br/>• <script> ʹ setup ͕௥Ճ<br/>

    View Slide

30. <br/>Ͱ<br/>Ͳ͏DX͕ྑ͘ͳΔʁ<br/>

    View Slide

31. ΑΓ؆ܿʹ࣮૷Ͱ͖Δʂ
    setup ؔ਺಺ͰϩδοΫΛ࣮૷ͯ͠ɺϨϯμϦϯά
    ͢ΔͨΊʹίϯςΩετฦ͢ඞཁ͕ͳ͘ͳΔʂ
    ैདྷ RFC
    

    View Slide

32. ࢖͍ํ
    

    View Slide

33. ίϯςΩετͰϨϯμϦϯά͢ΔͨΊʹ͸ʁ
    • export ͢Δ
    ES Modules ͷ
    export ߏจΛ࢖͏͚ͩ
    

    View Slide

34. setupؔ਺ͷҾ਺͸Ͳ͏࢖͏ʁ
    • setup ͷଐੑ஋ʹࢦఆ͢Δ
    ैདྷ RFC
    

    View Slide

35. ίϯϙʔωϯτΦϓγϣϯ͸ʁ
    ैདྷ RFC
    props ͳͲͷ
    ίϯϙʔωϯτΦϓγϣϯΛ
    ࢖͏৔߹͸
    export default ͢Δඞཁ͕͋Δ
    

    View Slide

36. TypeScript ͸ʁ
    • declare Λ࢖ͬͯܕఆٛ
    declare Ͱ props Λ͢Δͱɺ
    SFCίϯύΠϥ͕ props ࣮ࡍͷఆٛίʔυͱ
    TS ͷܕਪ࿦͞ΕΔΑ͏ʹίϯύΠϧ͢Δ
    

    View Slide

37. ͱ <script setup> ΛҰॹʹ࢖͑Δ<br/>༻్:<br/>- άϩʔόϧͳॲཧΛҰ౓͚ͩ<br/>࣮ߦ͍ͨ͠৔߹<br/>- SFC Ͱ named export ͳ΋ͷΛ<br/>ఏڙ͍ͨ͠৔߹<br/>

    View Slide

38. CSS ม਺
    ΠϯδΣΫγϣϯ
    

    View Slide

39. <br/>• style ϒϩοΫʹ vars ͕௥Ճ<br/>

    View Slide

40. <br/>Ͱ<br/>Ͳ͏ྑ͘ͳΔʁ<br/>

    View Slide

41. script ଆ͔Β஋Λ౉ͤΔʂ
    vars ʹఆٛͨ͠ม਺Λ
    Webඪ४ͷCSSม਺ͷཁྖͰ
    ελΠϧ஋ͱͯ͠
    ׂΓ౰ͯΔ͜ͱ͕Ͱ͖Δʂ
    ͭ·ΓɺಈతͳελΠϧΛ੍ޚͰ͖Δʂ
    όΠϯσΟϯάʂ
    

    View Slide

42. ͱ͍ͬ͠ΐʹར༻Մೳ<br/>vars Λ scoped ͱ<br/>͍ͬ͠ΐʹར༻͍ͨ͠৔߹͸ɺ<br/>಺෦ͷCSSม਺͸ϩʔΧϧͱݟͳ͢<br/>ͭ·Γɺ͜ͷέʔεͰ͸<br/>--color ͕Өڹ͢Δͷ͸<br/>͜ͷίϯϙʔωϯτʹͷΈ<br/>

    View Slide

43. άϩʔόϧͳCSSม਺ͷར༻͸ʁ
    --global ϓϦϑΟοΫεΛ࢖ͬͯ
    CSSม਺Λར༻͢Δ
    

    View Slide

44. ͜ΕΒRFCͷ࠾୒ʹ͍ͭͯ
    • , <style vars> ʹͭ<br/>͍ͯ͸ RC ʹ࣮૷ࡁΈ<br/>• <script setup> ͸೉ͳ͘࢖͑Δ<br/>• <style vars> ͸CSS ม਺͕࢖͑ΔϞ<br/>μϯͳϒϥ΢βͰར༻Ͱ͖Δ<br/>

    View Slide

45. ͜ΕΒRFCͷ࠾୒ʹ͍ͭͯ
    • ʹ͍ͭͯ͸·ͩະ࣮૷
    • SFC ʹ৽ͨͳϒϩοΫ΍ॻ͖ํ͕ՃΘΔ
    ͷͰɺෳࡶੑͱֶशίετ͕૿͢ΜͰ
    ͸ʁ
    • Vetur ͱ͍ͬͨςϯϓϨʔτղੳΛ͢Δ
    πʔϧ΁Өڹ͕େ͖͗͢ΔͷͰ͸ʁ
    

    View Slide

46. ͱ͍͏Θ͚ͰɺVue 3.0 Ͱ͸…
    • ·ͩ RFC Ͱ͍Ζ͍Ζͱٞ࿦ɺϑΟʔυόο
    Ϋ͕͋ΔͨΊ SFC ͷਖ਼ࣜػೳͰ͸ͳ͍
    • ͜ͷ SFC վળ ͸ Experimental (࣮ݧత) ͳ
    ػೳͱͯ͠ఏڙ͞ΕΔ
    • ໰୊ͳ͚Ε͹ɺv3.1 ? Ͱ࠾୒͞ΕΔ༧ఆ
    

    View Slide

47. Vite
    

    View Slide

48. Evan ࢯ͕৽͍͠Ϗϧυπʔϧެ։
    • ಡΈํ: `/vit/`
    https://github.com/vitejs/vite
    

    View Slide

49. 6݄ʹViteʹ͍ͭͯ࿩ͨ͠
    https://speakerdeck.com/kazupon/native-esm-powered-web-dev-build-tool
    ϓϥάΠϯ࡞Γ͍ͨਓ
    ಺෦࣮૷ʹ͍ͭͯ஌Γ͍ͨํ͸ͥͻʂ
    

    View Slide

50. Vite ͷಛ௃
    • ES Modules ϕʔεͷ։ൃαʔόΛඋ͑ͨϞμϯͳ
    Ϗϧυπʔϧ
    • dev server ͸ߴ଎
    • ىಈ࣌ʹ͢΂ͯόϯυϧ͠ͳ͍
    • ߴ଎ͳ ESbuild ʹΑΔ on the fly ίϯύΠϧ
    • Hot Module Replacement (HMR) ΋γϯϓϧͳ
    ͨΊ଎͍
    

    View Slide

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
    

    View Slide

52. ػೳ
    • Web Assembly
    • Inline Web Workers
    • HTTPS/2
    https://github.com/vitejs/vite#features
    

    View Slide

53. ੜ·Εͨഎܠ
    • VuePress ͷىಈ͕஗ͯ͘ΠϥΠϥͨ͠
    • SFC Λ ES Modules Ͱಈ͔͍ͨ͠ͱ͍͏Ξ
    ΠσΞ͕ੲ͔Β͋ͬͨ
    • Snowpack ͳͲͷ৽͍͠ ES Modules ϕʔ
    εͷόϯυϥ͕ग़ݱ͖ͯͨ͠
    

    View Slide

54. ͦΜͳதΞΠσΞ͕෣͍߱Γ͖ͯͯੜ·Εͨ
    https://twitter.com/youyuxi/status/1252173663199277058
    

    View Slide

55. Vite ͷݱঢ়
    • v1.0.0 RC ͱͯ͠ϦϦʔε͞Ε͍ͯΔͷ
    Ͱɺۙʑਖ਼ࣜ v1.0 ͕ϦϦʔε͞ΕΔݟࠐ
    Έ
    • ϓϩμΫγϣϯ޲͚ͷϏϧυ͸ɺ࣮࣭
    rollup ͰϏϧυ͢ΔͷͰ࢖͑Δ͸ͣʂ...
    

    View Slide

56. Vue ͱ Vite ͱͷؔ܎
    • Vue 3 ޲͚ͷެࣜυΩϡϝϯτͰ Vite Λ
    ࢖ͬͨΠϯετʔϧʹ͍ͭͯॻ͍ͯ͋Δ
    • ͳͷͰɺVue ޲͚ʹ͸αϙʔτ͞Ε͍ͯ͘
    ͷ͸ؒҧ͍ͳ͍
    

    View Slide

57. ։ൃ؀ڥ͕͙͢ʹ੔͏ʂ
    • npm init vite-app ͷΑ͏ͳίϚϯυ
    TypeScript ͱ͔ॾʑͷ؀ڥ͕੔͏ʂ
    • ͷͰɺΈͳ͞Μɺ࢖͍͖ͬͯ·͠ΐ͏ʂ
    

    View Slide

58. @vuedx
    

    View Slide

59. Vue developer experience
    • Vue ͷ DX ΛΑ͘͢Δ
    ͨΊͷπʔϧ
    • ίΞνʔϜͷ Rahul
    ࢯ (znck) ͕࡞੒த
    • ·ͩ Experimental
    https://twitter.com/znck0
    

    View Slide

60. ༨ஊ: ͪͳΈʹ Rahul ࢯ͸ 2018 ೥೔ຊʹདྷ͍ͯΔ
    • Vue Fes Japan 2018
    • ίϯύΠϥपΓ͕ಘ
    ҙ
    • rollup-plugin-vue ͷ
    ։ൃऀ
    https://vuefes.jp/2018/speakers/znck/
    

    View Slide

61. GitHub ϦϙδτϦ
    • @vuedx ͸ Rahul ࢯͷݸਓϦϙδτϦͰ։
    ൃਐΊΒΕ͍ͯΔ
    https://github.com/znck/vue-developer-experience
    

    View Slide

62. @vuedx ͸ͲͷΑ͏ͳ΋
    ͷ(DX)Λఏڙ͢Δͷ͔
    

    View Slide

63. @vuedx ͕ఏڙ͢Δ΋ͷ
    • @vuedx ͷΰʔϧͱͯ͠͸ҎԼΛఏڙ͢Δ͜ͱ
    • ಺ͰͷܕνΣοΫ
    • ίʔυิ׬
    • ϦϑΝΫλϦϯάػೳ
    • SFC ͷ ES Modules Խ
    

    View Slide

64. ಺ͰͷܕνΣοΫ
    https://twitter.com/znck0/status/1290278773049286657/photo/1
    

    View Slide

65. ϦϑΝΫλϦϯάػೳ
    • ͱͱͷಉظ<br/>• Props ͷมߋ<br/>• ίϯϙʔωϯτλάͷมߋ<br/>• ϑΝΠϧ໊มߋͱίϯϙʔωϯτͷநग़<br/>• ม਺໊ͷมߋ<br/>• … ͳͲ<br/>

    View Slide

66. σϞ
    • ྫ: ίϯϙʔωϯτλάͷมߋ
    https://twitter.com/znck0/status/1290577650398846976
    

    View Slide

67. @vuedxͰ͸
    ͜ΕΛͲ͏΍͍ͬͯΔͷ͔
    

    View Slide

68. ΞʔΩςΫνϟ
    VS Code ͷ Language Service ʹύον͢Δ
    ײ͡Ͱ SFC Λॲཧ͍ͯ͠Δ
    

    View Slide

69. Vue Virtual TextDocument
    • SFC ֤ϒϩοΫΛԾ૝ϑΝΠϧͱͯ͠ॲཧ
    component.vue
    component.vue____script.ts
    component.vue____template.ts
    component.vue____render.ts
    TS ͷίʔυ
    ͱͯ͠ॲཧ͢Δ
    

    View Slide

70. @vuedxɺ
    Vetur ͱಉ͡Α͏
    ͳπʔϧͰ͸ʁ
    
    

    View Slide

71. Vetur ͸ࠓޙͲ͏ͳΔʁ
    

    View Slide

72. ࠓޙ͸౷߹͍ͯ͘͠༧ఆ
    https://github.com/vuejs/vetur/issues/2016
    Vetur ʹ @vuedx ͷTSϓϥάΠϯΛऔΓೖ
    ΕͯϦϑΝΫλϦϯάػೳΛஔ͖׵͑Δ
    

    View Slide

73. ͦͷଞ
    

    View Slide

74. Reactivity API
    

    View Slide

75. Ҏલͷ2݄ͷൃදͷͱ͖͸
    • reactive
    • computed
    • watch
    • readonly
    • ref
    • isRef
    • toRefs
    ্هͷΑ͏ͳجຊతͳAPI͔͠ͳ͔͕ͬͨ…
    

    View Slide

76. ͞ΒʹҎԼͷAPI͕૿͑ͨ
    • shallowReactive
    • shallowRef
    • markRaw
    • triggerRef
    • isReactive
    • isProxy
    • toRaw
    ओʹύϑΥʔϚϯεͷ࠷దԽɺߴ౓ͳ͜ͱ
    ͍ͨ͠ਓ޲͚ʹެ։͞Εͨ
    

    View Slide

77. ৄ͍͠ৄࡉ͸ެࣜυΩϡϝϯτͰ
    Reactivity API ͷ߲໨ʹࡌ͍ͬͯ·͢
    https://v3.vuejs.org/api/basic-reactivity.html#reactive
    

    View Slide

78. Vue.js ίΞνʔϜͷهࣄ΋ಡΉͱΑ͍
    • Reactive ͷྺ࢙Λަ͑ͳ͕Βղઆ͍ͯ͠Δ
    https://dev.to/jinjiang/understanding-reactivity-in-vue-3-0-1jni
    

    View Slide

79. ෼͔Γ΍͍͢ Reactivity API ʹ͍ͭͯͷࢿྉ
    • Ref ͱ Reactive Λ࢖͍෼͚͕೔ຊޠͰ෼͔
    Γ΍͘͢ॻ͍ͯΔ
    https://speakerdeck.com/kawamataryo/ref-vs-reactive-vue-composition-api-deep-in
    

    View Slide

80. @vue/
    composition-api
    

    View Slide

81. v1.0.0 ͕ϦϦʔε͞Εͨ
    • δϣΠϯͨ͠
    Anthony ࢯ΍ Carlos
    ࢯʹΑͬͯ։ൃ͕ਐ
    Μͩ
    • vue-next ͔Β଍Γͳ
    ͍API͕όοΫϙʔ
    τ͞Ε͍ͯΔ
    Anthony ࢯ
    Carlos ࢯ
    

    View Slide

82. ͜Ε͸Ͳ͏͍͏͜ͱʁ
    

    View Slide

83. ॳظͷࠒ͸஫ҙॻ͖͕͋ͬͨ
    https://github.com/vuejs/composition-api/commit/bde4d1b1900c98e13d7ec3e555425e19afc1b3f1#diff-04c6e90faac2675aa89e2176d2eec7d8
    ຊ൪؀ڥͰ࢖͏ͷ͸ਪ঑͠ͳ͍ʂͱ
    

    View Slide

84. ։ൃ͕ਐΉΑ͏ʹͳ͔ͬͯΒ͸…
    • όοΫϙʔτ͢Δ͏ͪʹ͜ͷ஫ҙॻ͖͸
    ͳ͘ͳͬͨ
    https://github.com/vuejs/composition-api/commit/7e6598cddebfc2c7ec307838b3eae8a1fcc0ce8b#diff-04c6e90faac2675aa89e2176d2eec7d8
    

    View Slide

85. ͭ·Γɺຊ൪؀ڥͰ࢖͑Δ͜ͱΛҙຯ͠·͢
    • Vue 3 ͸ RC
    ϑΣʔζ
    • Vue 2 ͱ Vue 3 Λ
    ޓ׵ΛอͭϥΠϒ
    ϥͳͲ࡞͍ͬͯΔ
    ࡞ऀʹΑ࣮ͬͯূ
    ͞Ε͍ͯΔ
    Anthony ࢯ
    Carlos ࢯ
    

    View Slide

86. ͭ·Γɺຊ൪؀ڥͰ࢖͑Δ͜ͱΛҙຯ͠·͢
    • ެࣜతʹ͸அݴ͸͍ͯ͠ͳ͍͕ɺόοΫ
    ϙʔτ͸੒ޭͨ͠ͱʂ໌ݴ͍ͯ͠Δ
    

    View Slide

87. ͝ར༻͸ܭըతʹ
    • ੍ݶࣄ߲͕͋Δ
    https://github.com/vuejs/composition-api#limitations
    

    View Slide

88. ͝ར༻͸ܭըతʹ
    • ύϑΥʔϚϯε͕ؾʹͳΒͳ͍͔Ͳ͏͔
    https://antfu.github.io/vue-composition-api-benchmark-results/
    

    View Slide

89. ·ͱΊ
    

    View Slide

90. • Ҏલࣗ෼͕ൃද͔ΒɺVue 3 RC ͕ϦϦʔε͞ΕΔ·Ͱʹ͍Ζ
    ͍Ζͱਐల͕͋ͬͨ
    • SFC վળ RFC
    • Vite ര஀
    • @vuedex ͷ։ൃ
    • @vue/composition-api 1.0 ϦϦʔε
    • ࠓޙ΋ਖ਼ࣜϦϦʔε·Ͱʹਐల͕͋Δͱࢥ͏ͷͰɺ৘ใ
    ΩϟονΞοϓ͍͚ͯͨͩ͠Ε͹ɻ
    ·ͱΊ
    

    View Slide

91. ࠷ޙʹ
    

    View Slide

92. • ΑΓOSS։ൃͷ׆ಈ͍͖͍ͯͨ͠ͷͰɺα
    ϙʔτͯ͘͠ΕΔͱ͏Ε͍͠Ͱ͢ʂ
    GitHub Sponsors
    https://github.com/sponsors/kazupon
    

    View Slide

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

    View Slide