Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js最新動向

kazupon
April 24, 2024
1.2k

 Vue.js最新動向

kazupon

April 24, 2024
Tweet

Transcript

  1. 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
  2. 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. 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೥͔͔ۙ͘Γ·ͨ͠ɻ ͳͥͰ͠ΐ͏ʁ
  4. Vue 3.2 ໨ۄ • SFC <script setup> • 3.2 Ҏલ·Ͱ͸

    setup ͷதʹॻ͍ͯ ͍ͨ • script setup ͷొ৔ ʹΑΓγϯϓϧʹ ͳͬͨ 3.2 Ҏલ 3.2
  5. ͨͩɺSFC पΓͰ·ͩ໰୊఺͕… • TypeScript • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots) • API

    • ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ 
 (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ)
  6. ͨͩɺSFCपΓͰ·ͩ໰୊఺͕… • TypeScript • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots) • API •

    ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ 
 (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ) SFC ͸ Vue ͷίϯηϓτͰ͋ΓίΞػೳͰ͋Δ Α͍ DX Λఏڙ͢ΔͨΊʹ͸͞ΒͳΔվળ͕ඞཁ
  7. Vue 3.3 Ͱ͸ DX վળʹϑΥʔΧε • SFC ͸ HTML ϕʔεͷίϯϙʔωϯτγεςϜ

    • SFC ͷ DX ͸ΤσΟλ͕ఏڙ͢Δ DX ʹࠨӈ͞ΕΔ • Vue Language Tools (چ:Volar) ʹΑΔαϙʔτ͕ ඞਢ • RFC Ͱ SFC վળʹ͍ͭͯϑΟʔυόοΫΛಘͭͭ ৻ॏʹۛຯ͍ͯͬͨ͠
  8. Vue 3.4 Ͱ͸ύϑΥʔϚϯε΋վળ • Vue 3.3 ͷ DX վળʹଓ͖ɺҎԼ΋վળ •

    Vue ίϯύΠϥͷύϑΥʔϚϯε • ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯε
  9. ػೳͱվળ • <script setup> Ͱͷ TypeScript पΓDX վળ • de

    fi neOptions • Reactivity पΓͷϢʔςΟϦςΟαϙʔτ • toRef / toValue • ࣮ݧతػೳ • de fi neProps ͷ෼ׂ୅ೖ • de fi neModel
  10. ͕ͩɺ৽ͨͳ໰୊͕ੜ͡Δ͜ͱ͕Θ͔ͬͨ • Reactivity Transform ʹΑΔੜ͡Δ໰୊఺ • ίʔυͷϦΞΫςΟϏςΟίϯςΩετ͕෼͔Γͮ Β͘ͳΔ 
 (Ͳͷม਺ͷ஋͕ϦΞΫςΟϒͰϦΞΫςΟϒͰ͸ͳ

    ͍ͷ͔) • Reactivity Transform ϕʔεͷίʔυͱͦΕΛ࢖Θͳ ͍ίʔυؒͷίϯςΩετεΠον • ref Λཁٻ͢Δ I/F Λ࣋ͬͨؔ਺ͳͲ͕ಈ͔ͳ͘ͳΔ
  11. ഇࢭػೳ • άϩʔόϧ JSX Πϯϙʔτ • Reactivity Transform • app.con

    fi g.unwrapInjectedRef • vnode ϓϦϑΟΫεʹΑΔΠϕϯτϦεφʔ • v-is σΟϨΫςΟϒ
  12. • setInterval Ͱ ref ͳ஋Λ 1ms ୯Ґͷߋ৽ʹΑͬͯɺ secɺminɺhour ͷ computed

    Λߋ৽͢ΔσϞ Computed ͷύϑΥʔϚϯε͕ܶతʹվળͨ͠ https://twitter.com/johnsoncodehk/status/1695383715906744449
  13. • Vue 3 ॳظϦϦʔεҠߦ 4 ೥ܦաͯ͠ɺΤίγεςϜ ΋ Vue 3 ରԠ͍ͯ͠Δ

    • Vite ͕࠾༻͍ͯ͠Δ Ecosystem CI Λಋೖͯ͠Τίγε ςϜͱޓ׵ੑςετͭͭ͠ɺ։ൃΛਐΊ͍ͯΔ • ೥಺͸ɺҎԼͷϦϦʔε or ։ൃΛ༧ఆ͍ͯ͠Δ • Vue 3.5 • Vapor Ϟʔυ ҆ఆੑॏࢹ
  14. • ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯεվળ • SSR ͷվળ • Suspence • Lazy hydration

    • Custom Elements पΓͷվળ ܭը಺༰ େ͖͍ػೳ௥Ճ͸ͳ͠ɻطଘػೳͷվળ
  15. • ϝϞϦ࢖༻ྔͷվળ: ࢖༻ྔ50%Ҏ্ݮ • ୯Ұ ref + ෳ਺ effect (computed౳):

    +118%~185% ϦΞΫςΟϏςΟγεςϜͷվળ https://github.com/vuejs/core/pull/10397
  16. • Ծ૝ DOM (Virtaul DOM) Λ࢖Θͳ͍ Vue ͷϨϯμϦϯ άΛαϙʔτ͢ΔίϯϙʔωϯτͷϞʔυ •

    ΞϓϦέʔγϣϯͷύϑΥʔϚϯεΛ޲্ͤ͞Δ͜ͱ Λ໨త • Vapor Ϟʔυ͸ Vue ίϯύΠϥʹΑͬͯఏڙ͞ΕΔ Vapor ϞʔυͬͯԿʁ
  17. • ࣮ߦύϑΥʔϚϯε͕޲্͢Δ • ϝϞϦ࢖༻ྔ͕ݮΔ • Vue ͷϥϯλΠϜίʔυ͕ݮΔ Vapor ϞʔυͷϝϦοτ Vapor

    ϞʔυΛϑϧʹར༻͢Δͱ Vue ͷԾ૝ DOM ϥϯλ ΠϜΛ׬શʹ࡟আͰ͖ 88% ۙ͘࡟ݮͰ͖Δ͜ͱΛݕূࡁΈ
  18. • Repository ͸ vue/core Ͱ͸ͳ͘ vue/core-vapor 
 https://github.com/vuejs/core-vapor • ։ൃϝϯόʔ

    
 
 
 
 
 
 
 Vapor Ϟʔυͷ։ൃମ੍ Evan ࢯ Kevin ࢯ Rizumu ࢯ Ubugeeei ࢯ
  19. • Repository ͸ vue/core Ͱ͸ͳ͘ vue/core-vapor 
 https://github.com/vuejs/core-vapor • ։ൃϝϯόʔ

    
 
 
 
 
 
 
 Vapor Ϟʔυͷ։ൃମ੍ Evan ࢯ Kevin ࢯ Rizumu ࢯ Ubugeeei ࢯ Evan ࢯ͸ݱ࣌఺Ͱ͸͋·Γ࣮૷ʹؔ༩͍ͯ͠ͳ͍ɻ Kevin ࢯɺRizumu ࢯɺͦͯ͠೔ຊਓ Ubugeeei ࢯ Β͕த৺ ͱͳͬͯ։ൃ͍ͯ͠Δ
  20. • Vue ίϯύΠϥʹΑͬͯ SFC ΛVirtual DOM Λ࢖Θͳ ͍ DOM Ͱಈ࡞͢Δ

    JavaScript ࣮ߦίʔυʹม׵͢Δ Vapor Ϟʔυ͸Ͳ͏΍ͬͯಈ࡞͢Δ͔
  21. • Vue ίϯύΠϥʹΑͬͯ SFC ΛVirtual DOM Λ࢖Θͳ ͍ DOM Ͱಈ࡞͢Δ

    JavaScript ࣮ߦίʔυʹม׵͢Δ Vapor Ϟʔυ͸Ͳ͏΍ͬͯಈ࡞͢Δ͔ Vue template Λ render ؔ਺ʹม׵͢Δ
  22. ࢀߟ: Vapor Ϟʔυͱඇ Vapaor Ϟʔυͷҧ͍ Vapor ඇ Vapor Vapor ͸

    VNode ͷΑ͏ͳ Virtual DOM Λੜ੒͢Δ render ؔ਺Λੜ੒ ͠ͳ͍
  23. • ΞϓϦέʔγϣϯͷΤϯτϦϙΠϯτͰϑΝΠϧ໊ʹ `.vapor` Λ post fi x ͨ͠ίϯϙʔωϯτ & `vue/vapor`

    Λ import ͢Δ ΞϓϦέʔγϣϯϨϕϧͷ Vapor Ϟʔυ ΞϓϦέʔγϣϯϨϕϧ͸ Vapor ϞʔυͷԸܙΛ࠷େݶʹൃش͢Δ
  24. • ίϯϙʔωϯτ୯ҐͰϑΝΠϧ໊ʹ `.vapor` Λ post fi x ͨ͠ίϯϙʔωϯτ Λ import

    ͢Δ ίϯϙʔωϯτϨϕϧͷ Vapor Ϟʔυ ෦෼తʹVaporϞʔυͷίϯϙʔωϯτΛ࢖͍ͬͯ͘͜ͱ͕Ͱ͖Δ
  25. • Vapor Ϟʔυͳίϯϙʔωϯτͱඇ Vapor Ϟʔυͳί ϯϙʔωϯτͱ૬ޓӡ༻Մೳ Vapor Ϟʔυͱඇ Vapor Ϟʔυͷࠞࡏ͕Մೳ

    App.vue ඇVapor ඇVapor ඇVapor Vapor Vapor Vapor Vapor ϞʔυඇରԠͳ 3rd party ίϯϙʔωϯτͱ ͍ͬ͠ΐʹ࢖༻͢Δ͜ͱ΋Ͱ͖Δ
  26. • Vapor Ϟʔυ͸͋͘·Ͱ΋ΦϓγϣϯػೳɻͳͷͰɺ طଘͷΞϓϦέʔγϣϯ΁ͷӨڹ͸ͳ͍ • Vapor Ϟʔυ͔ΒैདྷͷԾ૝DOMϕʔεͷίϯϙʔω ϯτʹ໭͢ʹ͸ɺϑΝΠϧ໊͔Β `.vapor` ΛऔΓআ͘

    & import ݩ `vue/vapor` Λ `vue` ʹมߋ͢Δ͚ͩ • Vue ͷࠓޙͷϦϦʔεͰ Vapor ϞʔυΛؚΜͩόʔ δϣϯʹΞοϓάϨʔυͯ͠΋ɺͦΕ͕طଘػೳʹӨ ڹ͢Δ͜ͱ͸ͳ͍ Vapor Ϟʔυͷطଘίʔυ΁ͷӨڹ
  27. • Vapor ޲͚࠷খݶϥϯλΠϜϔϧύʔͱίʔυੜ੒ • ։ൃ಺༰ • ίΞσΟϨΫςΟϒ (v-ifɺv-forɺv-on ͳͲ)ͱίϯϙʔ ωϯτπϦʔͷαϙʔτ

    • ύϑΥʔϚϯεݕূ • طଘ SSR ͷग़ྗ಺༰ͱϋΠυϨʔγϣϯͷޓ׵ੑ εςʔδ1: ϥϯλΠϜ࣮૷
  28. • Vue TemplateɺJSX ͷ AST ͔Β IR (தؒදݱ) ͷੜ੒ &

    Vapor Ϟʔυͷίʔυੜ੒͢ΔίϯύΠϥ։ൃ εςʔδ2: ίϯύΠϥ࣮૷ IR
 (Intermediate Representation) Vue Template AST Vapor Codes JSX AST ੜ੒ ίϯύΠϧ
  29. • Vapor ϞʔυΛطଘίʔυ͕มߋ͢Δ͜ͱͳ͘ಋೖͰ ͖ΔΑ͏ʹ͢Δ • ։ൃ಺༰ • Vapor ϞʔυελϯυΞϩϯΞϓϦ΁ͷπʔϧα ϙʔτ

    • طଘΞϓϦ಺ͰͷVaporϞʔυͷαϙʔτ • Vapor Ϟʔυ಺ͰͷԾ૝ DOM ಈ࡞ͷαϙʔτ εςʔδ3: ΠϯςάϨʔγϣϯ
  30. • Vapor ϞʔυͷॳظϦϦʔε͸ॏཁػೳͷΈΛఏڙ͢ Δ͜ͱʹͳ͍ͬͯΔ • <Transition />ɺ<KeepAlive /> ͳͲͷ Vue

    ૊ࠐΈͰఏڙ ͢Δίϯϙʔωϯτʹ Vapor ϞʔυΛҠ২͢Δ εςʔδ4: ػೳҠ২
  31. ·ͱΊ (1/2) • Vue.js ͷ࠷ۙͷϦϦʔεঢ়گʹ͍ͭͯ࿩ͨ͠ • Vue 3 ϦϦʔεҎ߱ɺVue 3.2ɺVue

    3.3 ͦͯ͠ Vue 3.4 ͷϦϦʔεΛ௨ͯ͠ DX վળ ʹϑΥʔΧεͯ͠ ػೳ௥Ճɾվળͭͭ͠ɺͦͯ͠ύϑΥʔϚϯεվળ ͱண࣮ͳϦϦʔεΛ͍ͯ͠Δ
  32. ·ͱΊ (2/2) • Vue.js ͷࠓޙͱͯ͠ɺVue 3.5 ͱ Vapor Ϟʔυʹ͍ͭ ͯ࿩ͨ͠

    • Vue 3.5 ΋͜Ε·Ͱͷ Vue 3 ͷϚΠφʔϦϦʔεͱಉ ҆͘͡ఆੑॏࢹͭͭ͠ػೳվળϦϦʔεΛଓ͚͍ͯ͘ • Vapor Ϟʔυ͸ݱ࣌఺Ͱ·ͩ R & D తͳ WIP • Vapor Ϟʔυ͸ύϑΥʔϚϯεߴΊΔΦϓγϣϯػೳ • Vapor Ϟʔυ΋ޓ׵ੑΛॏࢹͭͭ͠ɺϦϦʔεʹ޲͚ ͯઈࢍ։ൃதͰ͋Δ
  33. Vue.js पล؀ڥ͸৽ͨͳϑΣʔζ΁ • Vue.js ͷ࡞ऀ͸ Evan You ࢯ • ಉࢯ͸࣍ੈ୅ϑϩϯτΤϯυπʔϧͱͯ͠

    Vite Λ ఏڙ͠ɺଞͷϑϩϯτΤϯυؔ࿈ͷ JS Τίγες ϜͰ࠾༻͞Εɺٸ੒௕͍ͯ͠Δ • Vue ΤίγεςϜपΓͰ΋ Volar ͕ੜ·ΕͨΓɺͦ ͯ͠ Nuxt ͕ UnJS Λఏڙͨ͠Γͱଞͷ JS Τίγε ςϜʹར༻͞ΕΔΑ͏ʹͳ͖͍ͬͯͯΔ
  34. Vue.js पล؀ڥ͸৽ͨͳϑΣʔζ΁ • ͞ΒʹɺEvan ࢯ͸৽ͨͳ OSS ϓϩδΣΫτ Rolldown Λ্ཱͪ͛ɺ Vite

    ͷ࣍ͷϑΣʔζʹ޲͔ ͏ͨΊ Rspack νʔϜ ΍ OXC ϓϩδΣΫτͱίϥ ϘϨʔγϣϯͯ͠ Vite ͷج൫Ͱ͋Δ Rollup Λ Rust Խ͢Δ։ൃʹ΋஫ྗ͍ͯ͠Δ • ࠓޙɺ͜͏ͨ͠ OSS ͷ޿͕Γ͕࣍ͷ Vue.js ͷൃల ʹد༩͍ͯ͘͠ͱ༧૝͞ΕΔ