Vue.js最新動向 - Speaker Deck

Slide 1

Slide 1 text

Vue.js ࠷৽ಈ޲ TechFeed Experts Night #27 2024.04.24 @kazupon

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

͸͡Ίʹ

Slide 5

Slide 5 text

TechFeed Experts Night #2 https://speakerdeck.com/kazupon/reactivity-transform

Slide 6

Slide 6 text

ࠓ೔࿩͢͜ͱ • Ҏલͷ TechFeed exports Night #2 Ҏ͔߱Βࠓ೔· Ͱͷ Vue.js ͷϦϦʔεঢ়گ • Vue.js ͷࠓޙ

Slide 7

Slide 7 text

Vue Fes Japan 2024 ։࠵͠·͢ʂ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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೥͔͔ۙ͘Γ·ͨ͠ɻ ͳͥͰ͠ΐ͏ʁ

Slide 10

Slide 10 text

Vue 3.2 ໨ۄ • SFC • 3.2 Ҏલ·Ͱ͸ setup ͷதʹॻ͍ͯ ͍ͨ • script setup ͷొ৔ ʹΑΓγϯϓϧʹ ͳͬͨ 3.2 Ҏલ 3.2

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ͨͩɺSFCपΓͰ·ͩ໰୊఺͕… • TypeScript • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots) • API • ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ   (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ) SFC ͸ Vue ͷίϯηϓτͰ͋ΓίΞػೳͰ͋Δ Α͍ DX Λఏڙ͢ΔͨΊʹ͸͞ΒͳΔվળ͕ඞཁ

Slide 13

Slide 13 text

Vue 3.3 Ͱ͸ DX վળʹϑΥʔΧε • SFC ͸ HTML ϕʔεͷίϯϙʔωϯτγεςϜ • SFC ͷ DX ͸ΤσΟλ͕ఏڙ͢Δ DX ʹࠨӈ͞ΕΔ • Vue Language Tools (چ:Volar) ʹΑΔαϙʔτ͕ ඞਢ • RFC Ͱ SFC վળʹ͍ͭͯϑΟʔυόοΫΛಘͭͭ ৻ॏʹۛຯ͍ͯͬͨ͠

Slide 14

Slide 14 text

Vue 3.4 Ͱ͸ύϑΥʔϚϯε΋վળ • Vue 3.3 ͷ DX վળʹଓ͖ɺҎԼ΋վળ • Vue ίϯύΠϥͷύϑΥʔϚϯε • ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯε

Slide 15

Slide 15 text

Vue 3.3 ϦϦʔε಺༰

Slide 16

Slide 16 text

ػೳͱվળ • Ͱͷ TypeScript पΓDX վળ • de fi neOptions • Reactivity पΓͷϢʔςΟϦςΟαϙʔτ • toRef / toValue • ࣮ݧతػೳ • de fi neProps ͷ෼ׂ୅ೖ • de fi neModel

Slide 17

Slide 17 text

ඇਪ঑ػೳ • άϩʔόϧ JSX Πϯϙʔτ • Reactivity Transform

Slide 18

Slide 18 text

͜͏ͨ͠ Vue 3.3 ͷϦ Ϧʔε಺༰ͷத

Slide 19

Slide 19 text

Reactivity Transform https://ja.vuejs.org/guide/extras/reactivity-transform.html#reactivity-transform

Slide 20

Slide 20 text

Reactivity Transform ͕ ೖΒͳ͔ͬͨͷ͸ ͳͥʁ🤔

Slide 21

Slide 21 text

ͦΕ͸…

Slide 22

Slide 22 text

৽ͨͳ໰୊ʹΑͬͯ Vue ͕ෳࡶʹͳͬͯ͠·͏͔Β

Slide 23

Slide 23 text

Reactivity Transform https://speakerdeck.com/kazupon/reactivity-transform?slide=6

Slide 24

Slide 24 text

ϦΞΫςΟϒपΓͷDXΛվળ͢Δ͸ͣͩͬͨ… https://speakerdeck.com/kazupon/reactivity-transform?slide=9

Slide 25

Slide 25 text

͕ͩɺ৽ͨͳ໰୊͕ੜ͡Δ͜ͱ͕Θ͔ͬͨ • Reactivity Transform ʹΑΔੜ͡Δ໰୊఺ • ίʔυͷϦΞΫςΟϏςΟίϯςΩετ͕෼͔Γͮ Β͘ͳΔ   (Ͳͷม਺ͷ஋͕ϦΞΫςΟϒͰϦΞΫςΟϒͰ͸ͳ ͍ͷ͔) • Reactivity Transform ϕʔεͷίʔυͱͦΕΛ࢖Θͳ ͍ίʔυؒͷίϯςΩετεΠον • ref Λཁٻ͢Δ I/F Λ࣋ͬͨؔ਺ͳͲ͕ಈ͔ͳ͘ͳΔ

Slide 26

Slide 26 text

࠷େͷ໰୊఺ • ։ൃऀ಺Ͱ෼அ͕ى͖ΔϦεΫ • Reactivity Transform ͸ JavaScript ͷηϚϯςΟ Ϋεʹ͍ͦͬͯͳ͍ • Reactivity Transform Λ࢖͏೿ v.s. ࢖Θͳ͍೿

Slide 27

Slide 27 text

͜͏ͨ͠ཧ༝͔Β… • Evan ࢯ͸ Reactivity Transform ͷഇࢭΛܾఆ͠ɺΠ ϕϯτͰΞφ΢ϯε https://youtu.be/OrT0tHGXyqE?t=844 Vue.js Nation ΑΓ

Slide 28

Slide 28 text

Vue 3.3 ଞͷ಺༰ʹ͍ͭͯ͸… • طʹԼه URL ʹεϥΠυࢿྉ͕͋ΔͷͰׂѪ   https://speakerdeck.com/kazupon/vue-dot-jsekosisutemudong-xiang-2023

Slide 29

Slide 29 text

Vue 3.4 ϦϦʔε಺༰

Slide 30

Slide 30 text

ػೳͱվળ • v-bind লུه๏ͷαϙʔτ • ϋΠυϨʔγϣϯपΓͷվળ • ΤϥʔίʔυͱίϯύΠϧλΠϜϑϥάͷϦϑΝϨ ϯεαϙʔτ • ίϯύΠϥύϑΥʔϚϯεͷվળ • ϦΞΫςΟϒγεςϜͷվળ • de fi neModel ͷ҆ఆԽ

Slide 31

Slide 31 text

ഇࢭػೳ • άϩʔόϧ JSX Πϯϙʔτ • Reactivity Transform • app.con fi g.unwrapInjectedRef • vnode ϓϦϑΟΫεʹΑΔΠϕϯτϦεφʔ • v-is σΟϨΫςΟϒ

Slide 32

Slide 32 text

Vue 3.4 ͰΠϯύΫτ ͕େ͖͍΋ͷ͸ʁ

Slide 33

Slide 33 text

ύϑΥʔϚϯվળܥ 🏎💨

Slide 34

Slide 34 text

ϦΞΫςΟϒγεςϜ ͷվળ

Slide 35

Slide 35 text

• setInterval Ͱ ref ͳ஋Λ 1ms ୯Ґͷߋ৽ʹΑͬͯɺ secɺminɺhour ͷ computed Λߋ৽͢ΔσϞ Computed ͷύϑΥʔϚϯε͕ܶతʹվળͨ͠ https://twitter.com/johnsoncodehk/status/1695383715906744449

Slide 36

Slide 36 text

ϕϯνϚʔΫ݁Ռ https://github.com/vuejs/core/pull/5912#issuecomment-1748985641

Slide 37

Slide 37 text

Vue 3.4 ଞͷ಺༰ʹ͍ͭͯ͸… • طʹԼه URL ʹεϥΠυࢿྉ͕͋ΔͷͰׂѪ   https://speakerdeck.com/kazupon/vue-3-dot-4

Slide 38

Slide 38 text

Vue.js ͷࠓޙ

Slide 39

Slide 39 text

• Vue 3 ॳظϦϦʔεҠߦ 4 ೥ܦաͯ͠ɺΤίγεςϜ ΋ Vue 3 ରԠ͍ͯ͠Δ • Vite ͕࠾༻͍ͯ͠Δ Ecosystem CI Λಋೖͯ͠Τίγε ςϜͱޓ׵ੑςετͭͭ͠ɺ։ൃΛਐΊ͍ͯΔ • ೥಺͸ɺҎԼͷϦϦʔε or ։ൃΛ༧ఆ͍ͯ͠Δ • Vue 3.5 • Vapor Ϟʔυ ҆ఆੑॏࢹ

Slide 40

Slide 40 text

Slide 41

Slide 41 text

• ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯεվળ • SSR ͷվળ • Suspence • Lazy hydration • Custom Elements पΓͷվળ ܭը಺༰

Slide 42

Slide 42 text

• ϦΞΫςΟϏςΟγεςϜͷύϑΥʔϚϯεվળ • SSR ͷվળ • Suspence • Lazy hydration • Custom Elements पΓͷվળ ܭը಺༰ େ͖͍ػೳ௥Ճ͸ͳ͠ɻطଘػೳͷվળ

Slide 43

Slide 43 text

• ϝϞϦ࢖༻ྔͷվળ: ࢖༻ྔ50%Ҏ্ݮ • ୯Ұ ref + ෳ਺ effect (computed౳): +118%~185% ϦΞΫςΟϏςΟγεςϜͷվળ https://github.com/vuejs/core/pull/10397

Slide 44

Slide 44 text

Vapor Ϟʔυ

Slide 45

Slide 45 text

• Vapor Ϟʔυ͸ݱࡏ WIP • ϦϦʔε࣌ʹ͸࢓༷͕มΘΔՄೳੑ͕͋Γ·͢ ⚠ ஫ҙ

Slide 46

Slide 46 text

• Ծ૝ DOM (Virtaul DOM) Λ࢖Θͳ͍ Vue ͷϨϯμϦϯ άΛαϙʔτ͢ΔίϯϙʔωϯτͷϞʔυ • ΞϓϦέʔγϣϯͷύϑΥʔϚϯεΛ޲্ͤ͞Δ͜ͱ Λ໨త • Vapor Ϟʔυ͸ Vue ίϯύΠϥʹΑͬͯఏڙ͞ΕΔ Vapor ϞʔυͬͯԿʁ

Slide 47

Slide 47 text

• ࣮ߦύϑΥʔϚϯε͕޲্͢Δ • ϝϞϦ࢖༻ྔ͕ݮΔ • Vue ͷϥϯλΠϜίʔυ͕ݮΔ Vapor ϞʔυͷϝϦοτ

Slide 48

Slide 48 text

• ࣮ߦύϑΥʔϚϯε͕޲্͢Δ • ϝϞϦ࢖༻ྔ͕ݮΔ • Vue ͷϥϯλΠϜίʔυ͕ݮΔ Vapor ϞʔυͷϝϦοτ Vapor ϞʔυΛϑϧʹར༻͢Δͱ Vue ͷԾ૝ DOM ϥϯλ ΠϜΛ׬શʹ࡟আͰ͖ 88% ۙ͘࡟ݮͰ͖Δ͜ͱΛݕূࡁΈ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

• Repository ͸ vue/core Ͱ͸ͳ͘ vue/core-vapor   https://github.com/vuejs/core-vapor • ։ൃϝϯόʔ               Vapor Ϟʔυͷ։ൃମ੍ Evan ࢯ Kevin ࢯ Rizumu ࢯ Ubugeeei ࢯ Evan ࢯ͸ݱ࣌఺Ͱ͸͋·Γ࣮૷ʹؔ༩͍ͯ͠ͳ͍ɻ Kevin ࢯɺRizumu ࢯɺͦͯ͠೔ຊਓ Ubugeeei ࢯ Β͕த৺ ͱͳͬͯ։ൃ͍ͯ͠Δ

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

ࢀߟ: Vapor Ϟʔυͱඇ Vapaor Ϟʔυͷҧ͍ Vapor ඇ Vapor

Slide 54

Slide 54 text

ࢀߟ: Vapor Ϟʔυͱඇ Vapaor Ϟʔυͷҧ͍ Vapor ඇ Vapor Vapor ͸ VNode ͷΑ͏ͳ Virtual DOM Λੜ੒͢Δ render ؔ਺Λੜ੒ ͠ͳ͍

Slide 55

Slide 55 text

• Playground   https://vapor-repl.netlify.app ݱࡏ Vapor ϞʔυΛࢼͤΔ

Slide 56

Slide 56 text

• 2छྨͷํ๏Ͱ࢖͏ํ๏͕͋Δ • ΞϓϦέʔγϣϯϨϕϧ • ίϯϙʔωϯτϨϕϧ Vapor ϞʔυΛͲ͏΍ͬͯ࢖༻͢Δͷ͔

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

• ίϯϙʔωϯτ୯ҐͰϑΝΠϧ໊ʹ `.vapor` Λ post fi x ͨ͠ίϯϙʔωϯτ Λ import ͢Δ ίϯϙʔωϯτϨϕϧͷ Vapor Ϟʔυ ෦෼తʹVaporϞʔυͷίϯϙʔωϯτΛ࢖͍ͬͯ͘͜ͱ͕Ͱ͖Δ

Slide 59

Slide 59 text

• Vapor Ϟʔυͳίϯϙʔωϯτͱඇ Vapor Ϟʔυͳί ϯϙʔωϯτͱ૬ޓӡ༻Մೳ Vapor Ϟʔυͱඇ Vapor Ϟʔυͷࠞࡏ͕Մೳ App.vue ඇVapor ඇVapor ඇVapor Vapor Vapor Vapor Vapor ϞʔυඇରԠͳ 3rd party ίϯϙʔωϯτͱ ͍ͬ͠ΐʹ࢖༻͢Δ͜ͱ΋Ͱ͖Δ

Slide 60

Slide 60 text

• Vapor Ϟʔυ͸͋͘·Ͱ΋ΦϓγϣϯػೳɻͳͷͰɺ طଘͷΞϓϦέʔγϣϯ΁ͷӨڹ͸ͳ͍ • Vapor Ϟʔυ͔ΒैདྷͷԾ૝DOMϕʔεͷίϯϙʔω ϯτʹ໭͢ʹ͸ɺϑΝΠϧ໊͔Β `.vapor` ΛऔΓআ͘ & import ݩ `vue/vapor` Λ `vue` ʹมߋ͢Δ͚ͩ • Vue ͷࠓޙͷϦϦʔεͰ Vapor ϞʔυΛؚΜͩόʔ δϣϯʹΞοϓάϨʔυͯ͠΋ɺͦΕ͕طଘػೳʹӨ ڹ͢Δ͜ͱ͸ͳ͍ Vapor Ϟʔυͷطଘίʔυ΁ͷӨڹ

Slide 61

Slide 61 text

• ։ൃϩʔυϚοϓͷϑΣʔζͱͯ͠4ஈ֊͋Δ • εςʔδ1: ϥϯλΠϜ࣮૷ • εςʔδ2: ίϯύΠϥ࣮૷ • εςʔδ3: ΠϯςάϨʔγϣϯ • εςʔδ4: ػೳҠ২ Vapor Ϟʔυͷ։ൃϩʔυϚοϓ

Slide 62

Slide 62 text

• Vapor ޲͚࠷খݶϥϯλΠϜϔϧύʔͱίʔυੜ੒ • ։ൃ಺༰ • ίΞσΟϨΫςΟϒ (v-ifɺv-forɺv-on ͳͲ)ͱίϯϙʔ ωϯτπϦʔͷαϙʔτ • ύϑΥʔϚϯεݕূ • طଘ SSR ͷग़ྗ಺༰ͱϋΠυϨʔγϣϯͷޓ׵ੑ εςʔδ1: ϥϯλΠϜ࣮૷

Slide 63

Slide 63 text

• Vue TemplateɺJSX ͷ AST ͔Β IR (தؒදݱ) ͷੜ੒ & Vapor Ϟʔυͷίʔυੜ੒͢ΔίϯύΠϥ։ൃ εςʔδ2: ίϯύΠϥ࣮૷ IR  (Intermediate Representation) Vue Template AST Vapor Codes JSX AST ੜ੒ ίϯύΠϧ

Slide 64

Slide 64 text

• Vapor ϞʔυΛطଘίʔυ͕มߋ͢Δ͜ͱͳ͘ಋೖͰ ͖ΔΑ͏ʹ͢Δ • ։ൃ಺༰ • Vapor ϞʔυελϯυΞϩϯΞϓϦ΁ͷπʔϧα ϙʔτ • طଘΞϓϦ಺ͰͷVaporϞʔυͷαϙʔτ • Vapor Ϟʔυ಺ͰͷԾ૝ DOM ಈ࡞ͷαϙʔτ εςʔδ3: ΠϯςάϨʔγϣϯ

Slide 65

Slide 65 text

• Vapor ϞʔυͷॳظϦϦʔε͸ॏཁػೳͷΈΛఏڙ͢ Δ͜ͱʹͳ͍ͬͯΔ • ɺ ͳͲͷ Vue ૊ࠐΈͰఏڙ ͢Δίϯϙʔωϯτʹ Vapor ϞʔυΛҠ২͢Δ εςʔδ4: ػೳҠ২

Slide 66

Slide 66 text

• `vue/core-vapor` ͷʮTODOʯͰ֬ೝͰ͖Δ   https://github.com/vuejs/core-vapor?tab=readme-ov- fi le#todo • ୞ࠓઈࢍ։ൃத ։ൃελʔςεঢ়گ

Slide 67

Slide 67 text

·ͱΊ

Slide 68

Slide 68 text

·ͱΊ (1/2) • Vue.js ͷ࠷ۙͷϦϦʔεঢ়گʹ͍ͭͯ࿩ͨ͠ • Vue 3 ϦϦʔεҎ߱ɺVue 3.2ɺVue 3.3 ͦͯ͠ Vue 3.4 ͷϦϦʔεΛ௨ͯ͠ DX վળ ʹϑΥʔΧεͯ͠ ػೳ௥Ճɾվળͭͭ͠ɺͦͯ͠ύϑΥʔϚϯεվળ ͱண࣮ͳϦϦʔεΛ͍ͯ͠Δ

Slide 69

Slide 69 text

·ͱΊ (2/2) • Vue.js ͷࠓޙͱͯ͠ɺVue 3.5 ͱ Vapor Ϟʔυʹ͍ͭ ͯ࿩ͨ͠ • Vue 3.5 ΋͜Ε·Ͱͷ Vue 3 ͷϚΠφʔϦϦʔεͱಉ ҆͘͡ఆੑॏࢹͭͭ͠ػೳվળϦϦʔεΛଓ͚͍ͯ͘ • Vapor Ϟʔυ͸ݱ࣌఺Ͱ·ͩ R & D తͳ WIP • Vapor Ϟʔυ͸ύϑΥʔϚϯεߴΊΔΦϓγϣϯػೳ • Vapor Ϟʔυ΋ޓ׵ੑΛॏࢹͭͭ͠ɺϦϦʔεʹ޲͚ ͯઈࢍ։ൃதͰ͋Δ

Slide 70

Slide 70 text

࠷ޙʹ

Slide 71

Slide 71 text

Vue.js पล؀ڥ͸৽ͨͳϑΣʔζ΁ • Vue.js ͷ࡞ऀ͸ Evan You ࢯ • ಉࢯ͸࣍ੈ୅ϑϩϯτΤϯυπʔϧͱͯ͠ Vite Λ ఏڙ͠ɺଞͷϑϩϯτΤϯυؔ࿈ͷ JS Τίγες ϜͰ࠾༻͞Εɺٸ੒௕͍ͯ͠Δ • Vue ΤίγεςϜपΓͰ΋ Volar ͕ੜ·ΕͨΓɺͦ ͯ͠ Nuxt ͕ UnJS Λఏڙͨ͠Γͱଞͷ JS Τίγε ςϜʹར༻͞ΕΔΑ͏ʹͳ͖͍ͬͯͯΔ

Slide 72

Slide 72 text

Vue.js पล؀ڥ͸৽ͨͳϑΣʔζ΁ • ͞ΒʹɺEvan ࢯ͸৽ͨͳ OSS ϓϩδΣΫτ Rolldown Λ্ཱͪ͛ɺ Vite ͷ࣍ͷϑΣʔζʹ޲͔ ͏ͨΊ Rspack νʔϜ ΍ OXC ϓϩδΣΫτͱίϥ ϘϨʔγϣϯͯ͠ Vite ͷج൫Ͱ͋Δ Rollup Λ Rust Խ͢Δ։ൃʹ΋஫ྗ͍ͯ͠Δ • ࠓޙɺ͜͏ͨ͠ OSS ͷ޿͕Γ͕࣍ͷ Vue.js ͷൃల ʹد༩͍ͯ͘͠ͱ༧૝͞ΕΔ

Slide 73

Slide 73 text

Vue Fes Japan 2024 • ͦ͏ͨ͠ঢ়گͷ࠷৽৘ใΛΩϟονΞοϓͰ͖ΔΧ ϯϑΝϨϯεͳͷͰڵຯ͕͋Δํ͸ͥͻʂ

Slide 74

Slide 74 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠! ❤