Vue.js最新動向

Transcript

1. Vue.js ࠷৽ಈ޲ TechFeed Experts Night #27 2024.04.24 @kazupon
2. ࣗݾ঺հ
3. PLAID, inc. 
 Vue.js Core Team Member Nuxt Community team Vue.js Japan User Group Organizer Creator of Vue I18n & Intlify Maintainer of Nuxt I18n @kazu_pon kazupon kazupon
4. ͸͡Ίʹ
5. TechFeed Experts Night #2 https://speakerdeck.com/kazupon/reactivity-transform
6. ࠓ೔࿩͢͜ͱ • Ҏલͷ TechFeed exports Night #2 Ҏ͔߱Βࠓ೔· Ͱͷ Vue.js ͷϦϦʔεঢ়گ • Vue.js ͷࠓޙ
7. Vue Fes Japan 2024 ։࠵͠·͢ʂ
8. Vue 3 ͷϦϦʔελΠϜϥΠϯ • 2021/08/05: 3.2 
 
 2022/08/17: TechFeed Experts Night #2 • 2023/05/11: 3.3 • 2023/12/28: 3.4 
 
 2024/04/24: TechFeed Experts Night #27
9. Vue 3 ͷϦϦʔελΠϜϥΠϯ • 2021/08/05: 3.2 
 
 2022/08/17: TechFeed Experts Night #2 • 2023/05/11: 3.3 • 2023/12/28: 3.4 
 
 2024/04/24: TechFeed Experts Night #27 3.3. ϦϦʔε·Ͱ໿2೥͔͔ۙ͘Γ·ͨ͠ɻ ͳͥͰ͠ΐ͏ʁ
10. Vue 3.2 ໨ۄ • SFC <script setup> • 3.2 Ҏલ·Ͱ͸ setup ͷதʹॻ͍ͯ ͍ͨ • script setup ͷొ৔ ʹΑΓγϯϓϧʹ ͳͬͨ 3.2 Ҏલ 3.2
11. ͨͩɺSFC पΓͰ·ͩ໰୊఺͕… • TypeScript • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots) • API • ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ 
 (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ)
12. ͨͩɺSFCपΓͰ·ͩ໰୊఺͕… • TypeScript • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots) • API • ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ 
 (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ) SFC ͸ Vue ͷίϯηϓτͰ͋ΓίΞػೳͰ͋Δ Α͍ DX Λఏڙ͢ΔͨΊʹ͸͞ΒͳΔվળ͕ඞཁ
13. Vue 3.3 Ͱ͸ DX վળʹϑΥʔΧε • SFC ͸ HTML ϕʔεͷίϯϙʔωϯτγεςϜ • SFC ͷ DX ͸ΤσΟλ͕ఏڙ͢Δ DX ʹࠨӈ͞ΕΔ • Vue Language Tools (چ:Volar) ʹΑΔαϙʔτ͕ ඞਢ • RFC Ͱ SFC վળʹ͍ͭͯϑΟʔυόοΫΛಘͭͭ ৻ॏʹۛຯ͍ͯͬͨ͠
14. Vue 3.4 Ͱ͸ύϑΥʔϚϯε΋վળ • Vue 3.3 ͷ DX վળʹଓ͖ɺҎԼ΋վળ • Vue ίϯύΠϥͷύϑΥʔϚϯε • ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯε
15. Vue 3.3 ϦϦʔε಺༰
16. ػೳͱվળ • <script setup> Ͱͷ TypeScript पΓDX վળ • de fi neOptions • Reactivity पΓͷϢʔςΟϦςΟαϙʔτ • toRef / toValue • ࣮ݧతػೳ • de fi neProps ͷ෼ׂ୅ೖ • de fi neModel
17. ඇਪ঑ػೳ • άϩʔόϧ JSX Πϯϙʔτ • Reactivity Transform
18. ͜͏ͨ͠ Vue 3.3 ͷϦ Ϧʔε಺༰ͷத
19. Reactivity Transform https://ja.vuejs.org/guide/extras/reactivity-transform.html#reactivity-transform
20. Reactivity Transform ͕ ೖΒͳ͔ͬͨͷ͸ ͳͥʁ🤔
21. ͦΕ͸…
22. ৽ͨͳ໰୊ʹΑͬͯ Vue ͕ෳࡶʹͳͬͯ͠·͏͔Β
23. Reactivity Transform https://speakerdeck.com/kazupon/reactivity-transform?slide=6
24. ϦΞΫςΟϒपΓͷDXΛվળ͢Δ͸ͣͩͬͨ… https://speakerdeck.com/kazupon/reactivity-transform?slide=9
25. ͕ͩɺ৽ͨͳ໰୊͕ੜ͡Δ͜ͱ͕Θ͔ͬͨ • Reactivity Transform ʹΑΔੜ͡Δ໰୊఺ • ίʔυͷϦΞΫςΟϏςΟίϯςΩετ͕෼͔Γͮ Β͘ͳΔ 
 (Ͳͷม਺ͷ஋͕ϦΞΫςΟϒͰϦΞΫςΟϒͰ͸ͳ ͍ͷ͔) • Reactivity Transform ϕʔεͷίʔυͱͦΕΛ࢖Θͳ ͍ίʔυؒͷίϯςΩετεΠον • ref Λཁٻ͢Δ I/F Λ࣋ͬͨؔ਺ͳͲ͕ಈ͔ͳ͘ͳΔ
26. ࠷େͷ໰୊఺ • ։ൃऀ಺Ͱ෼அ͕ى͖ΔϦεΫ • Reactivity Transform ͸ JavaScript ͷηϚϯςΟ Ϋεʹ͍ͦͬͯͳ͍ • Reactivity Transform Λ࢖͏೿ v.s. ࢖Θͳ͍೿
27. ͜͏ͨ͠ཧ༝͔Β… • Evan ࢯ͸ Reactivity Transform ͷഇࢭΛܾఆ͠ɺΠ ϕϯτͰΞφ΢ϯε https://youtu.be/OrT0tHGXyqE?t=844 Vue.js Nation ΑΓ
28. Vue 3.3 ଞͷ಺༰ʹ͍ͭͯ͸… • طʹԼه URL ʹεϥΠυࢿྉ͕͋ΔͷͰׂѪ 
 https://speakerdeck.com/kazupon/vue-dot-jsekosisutemudong-xiang-2023
29. Vue 3.4 ϦϦʔε಺༰
30. ػೳͱվળ • v-bind লུه๏ͷαϙʔτ • ϋΠυϨʔγϣϯपΓͷվળ • ΤϥʔίʔυͱίϯύΠϧλΠϜϑϥάͷϦϑΝϨ ϯεαϙʔτ • ίϯύΠϥύϑΥʔϚϯεͷվળ • ϦΞΫςΟϒγεςϜͷվળ • de fi neModel ͷ҆ఆԽ
31. ഇࢭػೳ • άϩʔόϧ JSX Πϯϙʔτ • Reactivity Transform • app.con fi g.unwrapInjectedRef • vnode ϓϦϑΟΫεʹΑΔΠϕϯτϦεφʔ • v-is σΟϨΫςΟϒ
32. Vue 3.4 ͰΠϯύΫτ ͕େ͖͍΋ͷ͸ʁ
33. ύϑΥʔϚϯվળܥ 🏎💨
34. ϦΞΫςΟϒγεςϜ ͷվળ
35. • setInterval Ͱ ref ͳ஋Λ 1ms ୯Ґͷߋ৽ʹΑͬͯɺ secɺminɺhour ͷ computed Λߋ৽͢ΔσϞ Computed ͷύϑΥʔϚϯε͕ܶతʹվળͨ͠ https://twitter.com/johnsoncodehk/status/1695383715906744449
36. ϕϯνϚʔΫ݁Ռ https://github.com/vuejs/core/pull/5912#issuecomment-1748985641
37. Vue 3.4 ଞͷ಺༰ʹ͍ͭͯ͸… • طʹԼه URL ʹεϥΠυࢿྉ͕͋ΔͷͰׂѪ 
 https://speakerdeck.com/kazupon/vue-3-dot-4
38. Vue.js ͷࠓޙ
39. • Vue 3 ॳظϦϦʔεҠߦ 4 ೥ܦաͯ͠ɺΤίγεςϜ ΋ Vue 3 ରԠ͍ͯ͠Δ • Vite ͕࠾༻͍ͯ͠Δ Ecosystem CI Λಋೖͯ͠Τίγε ςϜͱޓ׵ੑςετͭͭ͠ɺ։ൃΛਐΊ͍ͯΔ • ೥಺͸ɺҎԼͷϦϦʔε or ։ൃΛ༧ఆ͍ͯ͠Δ • Vue 3.5 • Vapor Ϟʔυ ҆ఆੑॏࢹ
40. Vue 3.5
41. • ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯεվળ • SSR ͷվળ • Suspence • Lazy hydration • Custom Elements पΓͷվળ ܭը಺༰
42. • ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯεվળ • SSR ͷվળ • Suspence • Lazy hydration • Custom Elements पΓͷվળ ܭը಺༰ େ͖͍ػೳ௥Ճ͸ͳ͠ɻطଘػೳͷվળ
43. • ϝϞϦ࢖༻ྔͷվળ: ࢖༻ྔ50%Ҏ্ݮ • ୯Ұ ref + ෳ਺ effect (computed౳): +118%~185% ϦΞΫςΟϏςΟγεςϜͷվળ https://github.com/vuejs/core/pull/10397
44. Vapor Ϟʔυ
45. • Vapor Ϟʔυ͸ݱࡏ WIP • ϦϦʔε࣌ʹ͸࢓༷͕มΘΔՄೳੑ͕͋Γ·͢ ⚠ ஫ҙ
46. • Ծ૝ DOM (Virtaul DOM) Λ࢖Θͳ͍ Vue ͷϨϯμϦϯ άΛαϙʔτ͢ΔίϯϙʔωϯτͷϞʔυ • ΞϓϦέʔγϣϯͷύϑΥʔϚϯεΛ޲্ͤ͞Δ͜ͱ Λ໨త • Vapor Ϟʔυ͸ Vue ίϯύΠϥʹΑͬͯఏڙ͞ΕΔ Vapor ϞʔυͬͯԿʁ
47. • ࣮ߦύϑΥʔϚϯε͕޲্͢Δ • ϝϞϦ࢖༻ྔ͕ݮΔ • Vue ͷϥϯλΠϜίʔυ͕ݮΔ Vapor ϞʔυͷϝϦοτ
48. • ࣮ߦύϑΥʔϚϯε͕޲্͢Δ • ϝϞϦ࢖༻ྔ͕ݮΔ • Vue ͷϥϯλΠϜίʔυ͕ݮΔ Vapor ϞʔυͷϝϦοτ Vapor ϞʔυΛϑϧʹར༻͢Δͱ Vue ͷԾ૝ DOM ϥϯλ ΠϜΛ׬શʹ࡟আͰ͖ 88% ۙ͘࡟ݮͰ͖Δ͜ͱΛݕূࡁΈ
49. • Repository ͸ vue/core Ͱ͸ͳ͘ vue/core-vapor 
 https://github.com/vuejs/core-vapor • ։ൃϝϯόʔ 
 
 
 
 
 
 
 Vapor Ϟʔυͷ։ൃମ੍ Evan ࢯ Kevin ࢯ Rizumu ࢯ Ubugeeei ࢯ
50. • Repository ͸ vue/core Ͱ͸ͳ͘ vue/core-vapor 
 https://github.com/vuejs/core-vapor • ։ൃϝϯόʔ 
 
 
 
 
 
 
 Vapor Ϟʔυͷ։ൃମ੍ Evan ࢯ Kevin ࢯ Rizumu ࢯ Ubugeeei ࢯ Evan ࢯ͸ݱ࣌఺Ͱ͸͋·Γ࣮૷ʹؔ༩͍ͯ͠ͳ͍ɻ Kevin ࢯɺRizumu ࢯɺͦͯ͠೔ຊਓ Ubugeeei ࢯ Β͕த৺ ͱͳͬͯ։ൃ͍ͯ͠Δ
51. • Vue ίϯύΠϥʹΑͬͯ SFC ΛVirtual DOM Λ࢖Θͳ ͍ DOM Ͱಈ࡞͢Δ JavaScript ࣮ߦίʔυʹม׵͢Δ Vapor Ϟʔυ͸Ͳ͏΍ͬͯಈ࡞͢Δ͔
52. • Vue ίϯύΠϥʹΑͬͯ SFC ΛVirtual DOM Λ࢖Θͳ ͍ DOM Ͱಈ࡞͢Δ JavaScript ࣮ߦίʔυʹม׵͢Δ Vapor Ϟʔυ͸Ͳ͏΍ͬͯಈ࡞͢Δ͔ Vue template Λ render ؔ਺ʹม׵͢Δ
53. ࢀߟ: Vapor Ϟʔυͱඇ Vapaor Ϟʔυͷҧ͍ Vapor ඇ Vapor
54. ࢀߟ: Vapor Ϟʔυͱඇ Vapaor Ϟʔυͷҧ͍ Vapor ඇ Vapor Vapor ͸ VNode ͷΑ͏ͳ Virtual DOM Λੜ੒͢Δ render ؔ਺Λੜ੒ ͠ͳ͍
55. • Playground 
 https://vapor-repl.netlify.app ݱࡏ Vapor ϞʔυΛࢼͤΔ
56. • 2छྨͷํ๏Ͱ࢖͏ํ๏͕͋Δ • ΞϓϦέʔγϣϯϨϕϧ • ίϯϙʔωϯτϨϕϧ Vapor ϞʔυΛͲ͏΍ͬͯ࢖༻͢Δͷ͔
57. • ΞϓϦέʔγϣϯͷΤϯτϦϙΠϯτͰϑΝΠϧ໊ʹ `.vapor` Λ post fi x ͨ͠ίϯϙʔωϯτ & `vue/vapor` Λ import ͢Δ ΞϓϦέʔγϣϯϨϕϧͷ Vapor Ϟʔυ ΞϓϦέʔγϣϯϨϕϧ͸ Vapor ϞʔυͷԸܙΛ࠷େݶʹൃش͢Δ
58. • ίϯϙʔωϯτ୯ҐͰϑΝΠϧ໊ʹ `.vapor` Λ post fi x ͨ͠ίϯϙʔωϯτ Λ import ͢Δ ίϯϙʔωϯτϨϕϧͷ Vapor Ϟʔυ ෦෼తʹVaporϞʔυͷίϯϙʔωϯτΛ࢖͍ͬͯ͘͜ͱ͕Ͱ͖Δ
59. • Vapor Ϟʔυͳίϯϙʔωϯτͱඇ Vapor Ϟʔυͳί ϯϙʔωϯτͱ૬ޓӡ༻Մೳ Vapor Ϟʔυͱඇ Vapor Ϟʔυͷࠞࡏ͕Մೳ App.vue ඇVapor ඇVapor ඇVapor Vapor Vapor Vapor Vapor ϞʔυඇରԠͳ 3rd party ίϯϙʔωϯτͱ ͍ͬ͠ΐʹ࢖༻͢Δ͜ͱ΋Ͱ͖Δ
60. • Vapor Ϟʔυ͸͋͘·Ͱ΋ΦϓγϣϯػೳɻͳͷͰɺ طଘͷΞϓϦέʔγϣϯ΁ͷӨڹ͸ͳ͍ • Vapor Ϟʔυ͔ΒैདྷͷԾ૝DOMϕʔεͷίϯϙʔω ϯτʹ໭͢ʹ͸ɺϑΝΠϧ໊͔Β `.vapor` ΛऔΓআ͘ & import ݩ `vue/vapor` Λ `vue` ʹมߋ͢Δ͚ͩ • Vue ͷࠓޙͷϦϦʔεͰ Vapor ϞʔυΛؚΜͩόʔ δϣϯʹΞοϓάϨʔυͯ͠΋ɺͦΕ͕طଘػೳʹӨ ڹ͢Δ͜ͱ͸ͳ͍ Vapor Ϟʔυͷطଘίʔυ΁ͷӨڹ
61. • ։ൃϩʔυϚοϓͷϑΣʔζͱͯ͠4ஈ֊͋Δ • εςʔδ1: ϥϯλΠϜ࣮૷ • εςʔδ2: ίϯύΠϥ࣮૷ • εςʔδ3: ΠϯςάϨʔγϣϯ • εςʔδ4: ػೳҠ২ Vapor Ϟʔυͷ։ൃϩʔυϚοϓ
62. • Vapor ޲͚࠷খݶϥϯλΠϜϔϧύʔͱίʔυੜ੒ • ։ൃ಺༰ • ίΞσΟϨΫςΟϒ (v-ifɺv-forɺv-on ͳͲ)ͱίϯϙʔ ωϯτπϦʔͷαϙʔτ • ύϑΥʔϚϯεݕূ • طଘ SSR ͷग़ྗ಺༰ͱϋΠυϨʔγϣϯͷޓ׵ੑ εςʔδ1: ϥϯλΠϜ࣮૷
63. • Vue TemplateɺJSX ͷ AST ͔Β IR (தؒදݱ) ͷੜ੒ & Vapor Ϟʔυͷίʔυੜ੒͢ΔίϯύΠϥ։ൃ εςʔδ2: ίϯύΠϥ࣮૷ IR
 (Intermediate Representation) Vue Template AST Vapor Codes JSX AST ੜ੒ ίϯύΠϧ
64. • Vapor ϞʔυΛطଘίʔυ͕มߋ͢Δ͜ͱͳ͘ಋೖͰ ͖ΔΑ͏ʹ͢Δ • ։ൃ಺༰ • Vapor ϞʔυελϯυΞϩϯΞϓϦ΁ͷπʔϧα ϙʔτ • طଘΞϓϦ಺ͰͷVaporϞʔυͷαϙʔτ • Vapor Ϟʔυ಺ͰͷԾ૝ DOM ಈ࡞ͷαϙʔτ εςʔδ3: ΠϯςάϨʔγϣϯ
65. • Vapor ϞʔυͷॳظϦϦʔε͸ॏཁػೳͷΈΛఏڙ͢ Δ͜ͱʹͳ͍ͬͯΔ • <Transition />ɺ<KeepAlive /> ͳͲͷ Vue ૊ࠐΈͰఏڙ ͢Δίϯϙʔωϯτʹ Vapor ϞʔυΛҠ২͢Δ εςʔδ4: ػೳҠ২
66. • `vue/core-vapor` ͷʮTODOʯͰ֬ೝͰ͖Δ 
 https://github.com/vuejs/core-vapor?tab=readme-ov- fi le#todo • ୞ࠓઈࢍ։ൃத ։ൃελʔςεঢ়گ
67. ·ͱΊ
68. ·ͱΊ (1/2) • Vue.js ͷ࠷ۙͷϦϦʔεঢ়گʹ͍ͭͯ࿩ͨ͠ • Vue 3 ϦϦʔεҎ߱ɺVue 3.2ɺVue 3.3 ͦͯ͠ Vue 3.4 ͷϦϦʔεΛ௨ͯ͠ DX վળ ʹϑΥʔΧεͯ͠ ػೳ௥Ճɾվળͭͭ͠ɺͦͯ͠ύϑΥʔϚϯεվળ ͱண࣮ͳϦϦʔεΛ͍ͯ͠Δ
69. ·ͱΊ (2/2) • Vue.js ͷࠓޙͱͯ͠ɺVue 3.5 ͱ Vapor Ϟʔυʹ͍ͭ ͯ࿩ͨ͠ • Vue 3.5 ΋͜Ε·Ͱͷ Vue 3 ͷϚΠφʔϦϦʔεͱಉ ҆͘͡ఆੑॏࢹͭͭ͠ػೳվળϦϦʔεΛଓ͚͍ͯ͘ • Vapor Ϟʔυ͸ݱ࣌఺Ͱ·ͩ R & D తͳ WIP • Vapor Ϟʔυ͸ύϑΥʔϚϯεߴΊΔΦϓγϣϯػೳ • Vapor Ϟʔυ΋ޓ׵ੑΛॏࢹͭͭ͠ɺϦϦʔεʹ޲͚ ͯઈࢍ։ൃதͰ͋Δ
70. ࠷ޙʹ
71. Vue.js पล؀ڥ͸৽ͨͳϑΣʔζ΁ • Vue.js ͷ࡞ऀ͸ Evan You ࢯ • ಉࢯ͸࣍ੈ୅ϑϩϯτΤϯυπʔϧͱͯ͠ Vite Λ ఏڙ͠ɺଞͷϑϩϯτΤϯυؔ࿈ͷ JS Τίγες ϜͰ࠾༻͞Εɺٸ੒௕͍ͯ͠Δ • Vue ΤίγεςϜपΓͰ΋ Volar ͕ੜ·ΕͨΓɺͦ ͯ͠ Nuxt ͕ UnJS Λఏڙͨ͠Γͱଞͷ JS Τίγε ςϜʹར༻͞ΕΔΑ͏ʹͳ͖͍ͬͯͯΔ
72. Vue.js पล؀ڥ͸৽ͨͳϑΣʔζ΁ • ͞ΒʹɺEvan ࢯ͸৽ͨͳ OSS ϓϩδΣΫτ Rolldown Λ্ཱͪ͛ɺ Vite ͷ࣍ͷϑΣʔζʹ޲͔ ͏ͨΊ Rspack νʔϜ ΍ OXC ϓϩδΣΫτͱίϥ ϘϨʔγϣϯͯ͠ Vite ͷج൫Ͱ͋Δ Rollup Λ Rust Խ͢Δ։ൃʹ΋஫ྗ͍ͯ͠Δ • ࠓޙɺ͜͏ͨ͠ OSS ͷ޿͕Γ͕࣍ͷ Vue.js ͷൃల ʹد༩͍ͯ͘͠ͱ༧૝͞ΕΔ
73. Vue Fes Japan 2024 • ͦ͏ͨ͠ঢ়گͷ࠷৽৘ใΛΩϟονΞοϓͰ͖ΔΧ ϯϑΝϨϯεͳͷͰڵຯ͕͋Δํ͸ͥͻʂ
74. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠! ❤