Vue.jsエコシステム動向2023

by kazupon

Slide 1

Slide 1 text

Vue.js ΤίγεςϜಈ޲ 2023 v-tokyo#18 2023.08.08 @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

v-tokyo#18 ͷςʔϚ https://vuejs-meetup.connpass.com/event/288920/

Slide 6

Slide 6 text

ࠓ೔࿩͢͜ͱ • Vue Fes Japan ͰΠϕϯτָ͕͠ΊΔΑ͏ɺVue.js ͱΤίγεςϜपลͷ͜͜࠷ۙͷಈ޲Λ࿩͠·͢ʂ

Slide 7

Slide 7 text

Vue.js

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Vue 3 ͷϦϦʔελΠϜϥΠϯ • 2020/09/18: 3.0 (One Piece) • 2021/06/08: 3.1 (Pluto) • 2021/08/05: 3.2 (Quintessential Quintuplets) • 2023/05/11: 3.3 (Rurouni Kenshin)

Slide 10

Slide 10 text

Vue 3 ͷϦϦʔελΠϜϥΠϯ • 2020/09/18: 3.0 (One Piece) • 2021/06/08: 3.1 (Pluto) • 2021/08/05: 3.2 (Quintessential Quintuplets) • 2023/05/11: 3.3 (Rurouni Kenshin) 3.3. ϦϦʔε·Ͱ໿2೥͔͔͍ۙͬͯ͘Δ ͳͥͰ͠ΐ͏ʁ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Vue 3.3 ͷϦϦʔε಺༰ • ओͳ΋ͷ͸ҎԼͷͱ͓Γ • Ͱͷ TypeScript पΓDX վળ • ࣮ݧతػೳ

Slide 17

Slide 17 text

Ͱͷ TypeScript पΓDX վળ

Slide 18

Slide 18 text

Ͱͷ TypeScript पΓDX վળ • SFC ֎Ͱఆٛͨ͠ܕΛ import ͯ͠ϚΫϩͰར༻Ͱ ͖ΔΑ͏ͳͬͨ

Slide 19

Slide 19 text

Ͱͷ TypeScript पΓDX վળ • TypeScript ͷ Generics Λ࢖ͬͨίϯϙʔωϯτΛ ఆٛͰ͖ΔΑ͏ͳͬͨ generics ଐੑͷதͰ͸ extends ͳͲ   TS ͷ Generics ͱಉ͡΋ͷ͕࢖͑Δ

Slide 20

Slide 20 text

Ͱͷ TypeScript पΓDX վળ • de fi neEmits ͕࢖͍΍͘͢ͳͬͨ 3.2 3.3 ʙ TypeScript ͷ labeled tuple elements ͰఆٛͰ͖Δ

Slide 21

Slide 21 text

Ͱͷ TypeScript पΓDX վળ • de fi neSlots Ͱ slots ΛܕΛޮ͔ͤΒΕΔΑ͏ʹͳͬ ͨ

Slide 22

Slide 22 text

࣮ݧతػೳ

Slide 23

Slide 23 text

de fi neProps ͷ෼ׂ୅ೖ • ݩʑ͸ Reactivity Transform Ͱαϙʔτ͢Δ͸ͣ ͩͬͨ΋ͷ • σϑΥϧτ஋ͷఆٛΛ withDefaults ࢖Θͳͯ͘΋ JavaScript ͷ෼ׂ୅ೖߏจͰ props ΛఆٛͰ͖Δ

Slide 24

Slide 24 text

de fi neModel • Ͱ v-model ͰόΠϯυ͢Δ props Λ ఆٛͰ͖Δ syntax sugar ͷΑ͏ͳϚΫϩ 3.2 3.3 ʙ

Slide 25

Slide 25 text

Vue 3.3 Ͱ͸…

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ͦΕ͸…

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

΋͠ɺReactivity Transform Λ࢖͍ͬͯΔ৔߹͸… • ݩͷ Reactivity API ͷίʔυʹ໭͍ͨ͠৔߹: • CLIπʔϧ `drop-reactivity-transform` ͰίʔυΛม׵ ͢Δ͜ͱ͕Ͱ͖Δ   `npx dropReactivityTransform src`     https://github.com/edison1105/drop-reactivity-transform • ͦͷ··࢖͍ଓ͚͍ͨ৔߹: • Vue Macro ͷ `@vue-macros/reactivity-transform` Ͱ ࢖͍ଓ͚Δ͜ͱ͸Ͱ͖Δ   https://vue-macros.sxzz.moe/features/reactivity-transform.html

Slide 36

Slide 36 text

Vue 3.3 ͦͷଞ

Slide 37

Slide 37 text

de fi neOptions • Ͱ Options API ͕࢖͑ΔΑ͏ʹͳͬ ͨ <script> ͕ͳͯ͘΋ <script setup> ͷΈͰ Options API ΛఆٛͰ͖ΔΑ͏ʹͳͬͨ

Slide 38

Slide 38 text

toRef / toValue • Reactivity API पΓͷศརϢʔςΟϦςΟΛఏڙ • toRef ͸ ref ʹਖ਼نԽ͢ΔϢʔςΟϦςΟؔ਺

Slide 39

Slide 39 text

toRef / toValue • toRef ʹର͠ɺtoValue ͸஋ʹਖ਼نԽ͢ΔϢʔςΟ ϦςΟؔ਺

Slide 40

Slide 40 text

Vue.js ެࣜϓϥάΠϯ & πʔϧ

Slide 41

Slide 41 text

ެࣜҰཡ • routing: vue-router • store: pinia • eslint: eslint-plugin-vue • testing tools: vue-test-utils • devtools: vue-devtools • cli: create-vue • editor: vue-language-tools (چ: volar) • bundler tools: vue-loader / @vite/plugin-vue • docs: vitepress

Slide 42

Slide 42 text

Slide 43

Slide 43 text

vue-language-tools ͱ͸ • Volar ʹมΘΔ৽໊͍͠শ • Volar v1 ͸ 2022/10/10 ʹϦϦʔε͞Εͨ • ͦͷޙίΞ෦෼͕ Volar.js ͱͯ͠நग़͞ΕɺVue ؔ ࿈ͷϞδϡʔϧɺύοέʔδ͕ vue-language-tools ͱͳͬͨ

Slide 44

Slide 44 text

ߏ੒ https://github.com/vuejs/language-tools#high-level-system-overview “High Level System Overview” ΑΓ

Slide 45

Slide 45 text

ߏ੒ VSCode Ҏ֎ͷΤσΟλͰ࢖͑ΔΑ͏ʹͳ͍ͬͯΔʂ

Slide 46

Slide 46 text

Volar.js ͸ଞʹ΋࢖ΘΕ࢝Ί͍ͯΔ • ݱࡏͰ͸࡞ऀͷ Johnson Chu ࢯ͕ϑ ϧλΠϜͰऔΓ૊ΜͰ͍Δ • StackBliz ͕ Volar.js ϑϧλΠϜ OSS Λࢧ͍͑ͯΔ

Slide 47

Slide 47 text

Volar.js ʹ͍ͭͯৄ͘͠͸… • Volar.js ͷηογϣϯτʔΫ͕ Vue Fes Japan 2023 ʹ͋ΔͷͰͥͻࢀՃͯ͠ฉ͖·͠ΐ͏ʂ

Slide 48

Slide 48 text

VitePress ͸ʁ • ͪΐ͏Ͳ͜ͷλΠϛϯά (v-tokyo#18) Ͱ v1.0 RC ͕ ϦϦʔε͞Εͨʂ https://twitter.com/KiaKing85/status/1688869807733772288

Slide 49

Slide 49 text

VitePress ͷݕࡧपΓ͕ڧԽ • VitePress ͷݕࡧɺAlgolia Ҏ֎ʹ΋ minisearch Ͱ ϩʔΧϧͰݕࡧͰ͖ΔΑ͏ʹͳ͍ͬͯΔ

Slide 50

Slide 50 text

Nuxt

Slide 51

Slide 51 text

ຊ୊ʹೖΔલʹ…

Slide 52

Slide 52 text

Nuxt 3 ʹ͍ͭͯೖ໳͍ͨ͠ํ͸ 💁 • ushironoko ͞ΜͷεϥΠυΛࢀߟʹʂ   Nuxt 3 ೖ໳͍ͨ͠ํʹ͸ػೳ΍ Composables ʹͭ ͍ͯΑ͘·ͱ·͍ͬͯΔ https://slides.com/ushironoko/beginning-nuxt-3-reiwa Nuxt3 ೖ໳ ྩ࿨ ࠷৽

Slide 53

Slide 53 text

Nuxt ͱ͸ https://nuxt.com/ Vue.js ޲͚ͷ Web ϑϨʔϜϫʔΫ

Slide 54

Slide 54 text

Nuxt ͷಛ௃ • ࣗಈԽͱن໿ʹΑͬͯ։ൃʹઐ೦Ͱ͖Δ؀ڥΛఏڙ • αʔόʔαΠυϨϯμϦϯάΛඪ४Ͱఏڙ • ϢχόʔαϧͳαʔόʔΤϯδϯͰͲ͜Ͱ΋ಈ࡞͢Δ • ϞδϡʔϧγεςϜͰ Nuxt Λ֦ுͰ͖Δ

Slide 55

Slide 55 text

Nuxt ͷϦϦʔελΠϜϥΠϯ • 2016/10/25: Nuxt.js 0.1     Vue 2.0 ϦϦʔε௚ޙ & ಉ࣌ظʹϦϦʔε͞Εͨ Next.js ʹ৮ൃ͞Εͯnuxtlabs ૑ۀऀ sebastian Chopin ࢯʹΑͬͯ஀ੜ • 2018/01/09: Nuxt.js 1.0     Nuxt.js ஀ੜޙɺܑ Alexandre Chopin ࢯ΍ Pooya ࢯɺClark ࢯͳͲϝϯόʔ͕δϣΠϯɻ Pooya ࢯʹΑͬͯ Nuxt Modules ͕ಋೖ͞Εͨɻ   https://medium.com/@nuxt_js/nuxt-js-1-0-is-out-bab1af459972 • 2018/09/21: Nuxt.js 2.0     create-nuxt-appɺwebpack4 & babel7 ରԠͳͲͯ͠ϦϦʔεɻ   ݱࡏͷ Nuxt team ϝϯόʔͷ ManniL ࢯ΋δϣΠϯ   https://medium.com/@nuxt_js/nuxt-js-2-0-webpack-4-esm-modules-create-nuxt-app-and- more-6936ce80d94c

Slide 56

Slide 56 text

ͦͯ͠…

Slide 57

Slide 57 text

͍ͭʹ Nuxt 3 ͕དྷͨʂ • 2022/11/16 ͍ͭʹϦϦʔεʂ • ։ൃظؒ • beta ϦϦʔε(2021/10)͔Β1೥ӽ͠   https://nuxt.com/blog/nuxt3-beta • R & D(2020೥͔ΒNuxt 3ͷ։ൃ͸͡·͍ͬͯΔ)ΛؚΊΔ ͱ2೥͝͠   https://nuxt.com/blog/nuxt-on-the-edge • Nuxt 3 ͔Β “.js” ͕औΕͯදه͸ “Nuxt” ʹ • ݱࡏͷ࠷৽όʔδϣϯ(v-tokyo#18 ࣌఺)͸ 3.6

Slide 58

Slide 58 text

ݱࡏͷ Nuxt ։ൃମ੍ • ϑϨʔϜϫʔΫνʔϜϝϯόʔʹΑͬͯίϛϡχ ςΟͷϑΟʔυόοΫ & RFC ϕʔεʹ։ൃ͍ͯ͠Δ • 2023೥͔Β Nuxt 3 ։ൃ্ཱ͔ͪ͛ΒϦʔυͯͨ͠ Pooya ࢯ͔Β Daniel ࢯʹότϯλον   https://nuxt.com/blog/vision-2023#nuxt-a-vision-for-2023 • Pooya ࢯ͸ݱࡏ unjs & nitro ʹϑΥʔΧε

Slide 59

Slide 59 text

৽͍͠ Nuxt ͷΞʔΩςΫνϟ • ίΞΤϯδϯ: nuxt • όϯυϥ: @nuxt/vite-builder & @nuxt/webpack-builder • CLI: nuxi • αʔόʔΤϯδϯ: nitro • ։ൃΩοτ: @nuxt/kit • Nuxt 2 ϒϦοδ: @nuxt/bridge

Slide 60

Slide 60 text

৽͍͠ Nuxt ͷΞʔΩςΫνϟ • ίΞΤϯδϯ: nuxt • όϯυϥ: @nuxt/vite-builder & @nuxt/webpack-builder • CLI: nuxi • αʔόʔΤϯδϯ: nitro • ։ൃΩοτ: @nuxt/kit • Nuxt 2 ϒϦοδ: @nuxt/bridge Nitro ͸৽͍͠ Nuxt Λࢧ͑ΔίΞٕज़

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Nitro ͱ͸ • Ͳ͜Ͱ΋ಈ࡞͢Δ WebαʔόʔΛߏங͢ΔͨΊͷϑ ϨʔϜϫʔΫ • ϓϩδΣΫτ։࢝࣌͸ɺΤοδαΠυͰಈ࡞͢ΔΑ ͏໨తͰαʔόʔΤϯδϯΛ࡞͍ͬͯͬͨ • ίʔυωʔϜ: sigma   https://www.npmjs.com/package/@nuxt/sigma • express Λ࢖ΘͣʹϑϧεΫϥον͔Β࡞ͬͨ • h3: https://github.com/unjs/h3

Slide 63

Slide 63 text

Nitro ͷಛ௃

Slide 64

Slide 64 text

Nitro ͸Ͳ͜Ͱ΋ಈ͘ʂ • ఏڙ͢ΔϓϩόΠμʔ & ϓϦηοτ࢖͏ͱͲ͜Ͱ΋ ϗεςΟϯάͰ͖Δ https://nitro.unjs.io/deploy Aws Lambda Azure Bun Cleavr Cloudflare Deno DigitalOcean Edgio Firebase Flightcontrol GitHub Pages Heroku IIS Lagon Netlify Render.com StormKit Vercel

Slide 65

Slide 65 text

Nitro ͸ unjs ͷҰ෦ • unjs ͷ OSS ͱͯ͠࡞ΒΕ ͍ͯΔ   Uni fi ed JavaScript Tools: https://github.com/unjs • unjs ʹ͍ͭͯ͸ CFP ηογϣ ϯτʔΫ͕ Vue Fes Japan 2023 ʹ͋ΔͷͰׂѪʂ

Slide 66

Slide 66 text

Nitro ͸ Framework agnostic! • Nitro Λ࢖͑͹ଞͷϞϊΛಈ͔͢ Web ϑϨʔϜ ϫʔΫΛ࡞Δ͜ͱͰ͖Δ! (ϝλϑϨʔϜϫʔΫ) • Daniel ࢯʹΑΔ࣮ূσϞ   GitHub repo: https://github.com/danielroe/agent-conf-2023 https://www.youtube.com/watch?v=hdHLU0qHKhA AgentConf 2023 Youtube

Slide 67

Slide 67 text

Nitro Λ࢖ͬͨ΋ͷ͕ੜ·Εͭͭ͋Δ • vinxi • GitHub repo: https://github.com/nksaraf/vinxi • ݱ࣌఺(v-tokyo#18)Ͱ͸ React ͱ Solid ͷΈ?

Slide 68

Slide 68 text

Nuxt ͕αϙʔτ͢Δ ϨϯμϦϯάϞʔυ

Slide 69

Slide 69 text

ैདྷ͔Βαϙʔτ͍ͯ͠Δ ϨϯμϦϯά

Slide 70

Slide 70 text

ϢχʔόαϧϨϯμϦϯά (SSR) • Nuxt 3Ͱ͸σϑΥϧτ ON https://nuxt.com/docs/guide/concepts/rendering#universal-rendering

Slide 71

Slide 71 text

ϢχʔόαϧϨϯμϦϯά (SSR) • Pros • ύϑΥʔϚϯε͕Α͍ • SEO   • Cons • αʔόʔίετ͕͔͔Δ • ։ൃ࣌ʹαʔόʔͱϒϥ΢βΛҙࣝ͠ͳ͍ͱ͍͚ ͳ͍

Slide 72

Slide 72 text

ΫϥΠΞϯταΠυϨϯμϦϯά (CSR) • nuxt.con fi g Ͱ `ssr: false` Ͱ༗ޮʹͰ͖Δ   (͍ΘΏΔ SPA Ϟʔυ) https://nuxt.com/docs/guide/concepts/rendering#client-side-rendering

Slide 73

Slide 73 text

ΫϥΠΞϯταΠυϨϯμϦϯά (CSR) • Pros • αʔόʔίετ͕͔͔Βͳ͍ • ։ൃ͸ϒϥ΢β؀ڥͷΈΛҙࣝ͢Ε͹Α͍ • Cons • ύϑΥʔϚϯε • SEO

Slide 74

Slide 74 text

Nuxt 3͔Βαϙʔτ͢Δ ϨϯμϦϯά

Slide 75

Slide 75 text

ϋΠϒϦουϨϯμϦϯά • Nitro ͷ `routeRules` Ͱϖʔδ/ϧʔτ୯ҐͰ SSR / CSR / ISR / SWR ͳͲϨϯμϦϯάΛࡉ੍͔͘ޚͰ ͖Δ https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering

Slide 76

Slide 76 text

ΤοδαΠυϨϯμϦϯά(ESR) • CDN ͷΤοδαʔόʔ্ͰϨϯμϦϯά͢Δ͜ͱ ͰɺԠ౴଴ͪ࣌ؒΛ୹ॖʹΑͬͯΤϯυϢʔβʔ ͷ UX Λ޲্ͤ͞Δ

Slide 77

Slide 77 text

ΤοδαΠυϨϯμϦϯά(ESR) • ҎԼͷΤοδ؀ڥΛ࣋ͭϓϥοτϑΥʔϜʹσϓϩ ΠͰ͖Δ • Cloudflare Pages • Vercel Edge Functions • Netlify Edge Functions • Lagon

Slide 78

Slide 78 text

ΤοδαΠυϨϯμϦϯά(ESR) • σϓϩΠ͸ɺҎԼͷΑ͏ʹNitro ͷϓϦηοτΛࢦ ఆ͢Δ (Cloudflare Pages ͸θϩίϯϑΟά) • nuxt.con fi g ͷέʔε         • ؀ڥม਺ͷέʔε   $ NITRO_PRESET=vercel-edge nuxi build

Slide 79

Slide 79 text

ΤοδαΠυϨϯμϦϯά(ESR) • h3 ͕ v1.8 Ҏ͔߱Β Web ඪ४ API (Request/Response, ReadableStream) ͱΠ ϯςάϨʔγϣϯͰ͖ ΔΑ͏ʹͳͬͨ • ࠓޙ͞ΒʹରԠϓϥο τϑΥʔϜ͕૿͑Δ https://twitter.com/_pi0_/status/1686911793954729984

Slide 80

Slide 80 text

ࠓޙ Nuxt Ͱಋೖ͞ΕΔ ಛघͳϨϯμϦϯά

Slide 81

Slide 81 text

⚠ ஫ҙ ⚠ ͜Ε͔Β࿩͢͜ͱ͸ ·࣮ͩݧతػೳঢ়ଶ & WIP

Slide 82

Slide 82 text

৽ͨʹಋೖ͞ΕΔಛघͳϨϯμϦϯά • Nuxt Server Components • Nuxt Island

Slide 83

Slide 83 text

Nuxt Server Components

Slide 84

Slide 84 text

Nuxt Server Components • ίϯϙʔωϯτΛαʔόʔ্ͰϨϯμϦϯάͯ͠ɺ ϨϯμϦϯά͞ΕͨίϯϙʔωϯτͷHTMLΛϒϥ ΢β্ʹࠩ͠ࠐΉ ϒϥ΢β αʔόʔ Server Component Ϩϯμϥ (Nitro) Server Component ϦΫΤετ(fetch) HTMLจࣈྻ (payload) ϨϯμϦϯά

Slide 85

Slide 85 text

Nuxt Server Comonents ͸ 2 छྨ͋Δ • Standalone Server Components     ୯ಠͰಈ࡞͢Δ΋ͷ • Paired with a `.client` component     ϒϥ΢β্ͰͷΈಈ࡞͢Δίϯϙʔωϯτͱ૊߹ͤ Λ૝ఆͯ͠ಈ͘΋ͷ

Slide 86

Slide 86 text

Nuxt Server Components ͷఆٛํ๏ • Nuxt Server Components ͱͯ͠ڍಈ͍ͤͨ͞৔߹ ͸ίϯϙʔωϯτϑΝΠϧ໊ʹ `.server` ͷαϑΟο ΫεΛೖΕΔ

Slide 87

Slide 87 text

ͱ͜ΖͰ `.client` ίϯϙʔωϯτͱ͸ʁ • ϒϥ΢β(ΫϥΠΞϯτ)ͰͷΈϨϯμϦϯά͞ΕΔ (CSR) ͞ΕΔίϯϙʔωϯτͷ͜ͱɻ • CSR ͍ͤͨ͞ର৅ίϯϙʔωϯτͷϑΝΠϧ໊ʹ `.client` ͷαϑΟοΫεΛೖΕΔ

Slide 88

Slide 88 text

Standalone Server Components • ର৅ίϯϙʔωϯτ͕ϒϥ΢βͰϨϯμϦϯά͞Ε ΔλΠϛϯάͰαʔόʔʹϦΫΤετΛඈ͹ͯ͠ɺ SSR ͷ݁Ռʹஔ͖׵͑Δ

Slide 89

Slide 89 text

Standalone Server Components ͷ࢖͍ํ • ϑΝΠϧ໊ʹαϑΟοΫε `.server` ೖΕͯఆٛ • ࢖͏࣌͸௨ৗͷίϯϙʔωϯτͷ࢖͍ํͱಉ͡ Nuxt ͸ `.server` ͳίϯϙʔωϯτΛϏϧυ࣌ʹ ΫϥΠΞϯτʹ഑৴͢Δ JS ʹόϯυϧ͠ͳ͍ʂ αʔόʔαΠυͷΈόϯυϧ

Slide 90

Slide 90 text

Paired with a `.client` component • `.server` ίϯϙʔωϯτ͸ SSR ͞Εͯɺ`.client` ί ϯϙʔωϯτ͸ɺϚ΢ϯτ͞Εͨ (`onMounted`)ޙ ʹ CSR ͞ΕΔ

Slide 91

Slide 91 text

Paired with a `.client` component ͷ࢖͍ํ • ϑΝΠϧ໊ʹαϑΟοΫε `.client`ɺ`.server`Λ • ࢖͏࣌͸௨ৗͷίϯϙʔωϯτͷ࢖͍ํͱಉ͡ ͨͩɺϋΠυϨʔγϣϯϛεϚον͕ى͖ͳ͍Α͏ʹ ͠ͳ͍ͱ͍͚ͳ͍

Slide 92

Slide 92 text

Nuxt Server Components ͷར఺ • ΫϥΠΞϯτͷόϯυϧαΠζΛݮΒͤΔ • ηΩϡΞʹͳΔ • αʔόʔ͕ෆཁͳ੩తϗεςΟϯάͰ΋ಈ͔ͤΔ • ௨ৗͷίϯϙʔωϯτͱޓ׵ੑ͕͋Δ

Slide 93

Slide 93 text

΋͠ Nuxt Server Components Λ࢖͏ͱ͖͸… • ·࣮ͩݧతػೳͳͷͰɺnuxt.con fi g Ͱ `experimental.componentIslands` ͰΦϓτΠϯΛ ๨Εͣʹʂ

Slide 94

Slide 94 text

Nuxt Island

Slide 95

Slide 95 text

Nuxt Island ͱ͸ • Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ • `` ίϯϙʔωϯτͰΞΠϥϯυΛߏங Ͱ͖Δ https://nuxt.com/docs/api/components/nuxt-island#nuxtisland

Slide 96

Slide 96 text

ͦͷલʹ

Slide 97

Slide 97 text

ΞΠϥϯυΞʔΩςΫνϟͱ͸🏝 • ΞΠϥϯυΞʔΩςΫνϟͷ ໋໊ऀ͸ Katie Sylor-Miller ࢯ • ϖʔδ಺ʹ੩త෦෼ͱಈత෦ ෼Λಉډͤ͞Δ͜ͱ͕Ͱ͖Δ • ඞཁͳλΠϛϯάͰ JS ͕ ϩʔυ͞ΕΔ͜ͱͰɺ෦෼త ͳϋΠυϨʔγϣϯ͕Մೳ https://docs.astro.build/ja/concepts/islands/ ੩తͳ෦෼Λʮւʯಈతͳ෦෼Λʮౡʯͱଊ͑ͨϝλϑΝ

Slide 98

Slide 98 text

Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ͸Կ͕ҧ͏ʁ • `` ίϯϙʔωϯτͰϨϯμϦϯά͞Ε Δίϯςϯπ͸੩తίϯςϯπ • Nuxt ͷ৔߹͸ΞΠϥϯυΛ੩తͱͯ͠ॲཧ͢Δ • ΞΠϥϯυ͸ΫϥΠΞϯτͷ JS ʹόϯυϧͯ͠഑ ৴͠ͳ͍ Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ͸ ಈతͳ෦෼Λʮւʯ੩తͳ෦෼Λʮౡʯͱ͢Δ ٯͷΞϓϩʔν

Slide 99

Slide 99 text

Nuxt Island ͷϢʔεέʔε • ݱ࣌఺ (v-tokyo#18) Ͱ͸ɺύϑΥʔϚϯε޲্ • ϦϞʔτιʔεͷΞΠϥϯυΛϨϯμϦϯά͢Δ͜ ͱ͕Ͱ͖ΔͷͰϚΠΫϩϑϩϯτΤϯυతͳ༻్΋ Մೳ͔΋

Slide 100

Slide 100 text

΋͔ͯ͠͠ Nuxt Island ͸ Nuxt Server Components? • ݱ࣌఺ (v-tokyo#18) Ͱ͸ Yes • Nuxt Server Components ͕ Nuxt Island Λ֦ுͯ͠ ࣮૷͍ͯ͠Δ • ͕ɺNuxt Server Components ͸·ͩൃల్্ͷͨ ΊࠓޙมΘΔՄೳੑ͕͋Δ

Slide 101

Slide 101 text

Nuxt Server Components ͷϩʔυϚοϓ • ϦϞʔτιʔεରԠ   ଞαΠτͷ Nuxt Server Components ͷಡࠐΈɻ   ͜Ε͕Ͱ͖Δͱ Nuxt Microservices ͕Ͱ͖ΔΑ͏ʹͳ ΔΒ͍͠ɻ   (طʹ࣮૷ࡁΈɻv3.7ͰϦϦʔε༧ఆ) • ஗ԆϩʔυରԠ   Nuxt Server Components ϩʔυதʹφϏήʔγϣϯΛ ๦͛ͳ͍Α͏ϑΥʔϧόοΫΛදࣔͰ͖ΔΑ͏ʹͳΔ   (࣮૷ࡁΈ & ϦϦʔεࡁΈ) https://roe.dev/blog/nuxt-server-components#roadmap

Slide 102

Slide 102 text

Nuxt Server Components ͷϩʔυϚοϓ • ΠϯλϥΫςΟϒରԠ   slots Ҏ֎Ͱ΋ΠϯλϥΫςΟϒͳίϯϙʔωϯτ ͷಈ࡞ΛՄೳʹ͢Δ (ະ࣮૷) • `` ίϯϙʔωϯτ   `` ίϯϙʔωϯτͷΑ͏ʹλάͷதʹ ͋ΔϞϊΛ SSR ͢ΔΑ͏ࣗಈม׵ (ະ࣮૷) https://roe.dev/blog/nuxt-server-components#roadmap

Slide 103

Slide 103 text

Nuxt Server Components ͷϩʔυϚοϓ • ϩʔυϚοϓͷਐḿঢ়گ ͸ GitHub Issues Ͱ؅ཧ ͞Ε͍ͯΔ   https://github.com/nuxt/nuxt/issues/ 19772

Slide 104

Slide 104 text

Nuxt ͷ։ൃπʔϧ

Slide 105

Slide 105 text

Nuxt DevTools • Nuxt 3 ͔ΒΑΓΑ͍ DX Λఏڙ͢ΔͨΊʹ Nuxt ʹ ಛԽͨ͠ DevTools ͕ Nuxt Modules Ͱఏڙ͞ΕΔ Α͏ʹͳͬͨ   https://devtools.nuxtjs.org/

Slide 106

Slide 106 text

Nuxt DevTools ͸௒ศརʂ • Nuxt Ͱ WebΞϓϦΛ࡞Δਓ΍ Nuxt ΤίγεςϜΛ ։ൃ͢Δਓʹ΋Α͍ DX Λఏڙͯ͘͠ΕΔ • ϑϨʔϜϫʔΫʹΑͬͯந৅Խ͞Ε͍ͯΔ෦෼΋ಈ ͖Λ֬ೝͰ͖Δ • Կ͕Ͱ͖Δ͔͸ৄࡉ͸ Nuxt ެࣜϒϩάͰʂ   https://nuxt.com/blog/introducing-nuxt-devtools

Slide 107

Slide 107 text

ͦͷଞ Nuxt ຊମपΓͰ   ࠓਐΊ͍ͯΔ͜ͱ

Slide 108

Slide 108 text

৽͍͠ΠϯςάϨʔγϣϯͷఏڙΛݕ౼͍ͯ͠Δ • Nuxt Scripts • Nuxt Fonts • Nuxt Assets • Google Chome Aurora νʔϜͱ࿈ܞͯ͠ಈ͍͍ͯΔ • ·ͩݱࡏ RFC Ͱٞ࿦ϑΣʔζ https://twitter.com/danielcroe/status/1677261172427333632

Slide 109

Slide 109 text

Nuxt Scripts • WebαΠτͷύϑΥʔϚϯεͱίϯϓϥΠΞϯεΛ ଛͳΘͣʹɺNuxt ΞϓϦʹαʔυύʔςΟʔεΫ ϦϓτΛಋೖ͢ΔͨΊͷ࢓૊ΈΛఏڙ͠Α͏ͱͯ͠ ͍Δ • RFC   https://github.com/nuxt/nuxt/discussions/22016

Slide 110

Slide 110 text

Nuxt Fonts • ։ൃऀ͕ Nuxt ΞϓϦͷϑΥϯτΛ؆୯ʹઃఆͰ͖Δ Α͏ʹ͠Α͏ͱ͍ͯ͠Δ • ͞·͟·ଘࡏ͢ΔWebϑΥϯτΛϓϩόΠμʔͰऔΓ ѻ͍ΒΕΔΑ͏ʹ͢Δ • Nuxt Assets ͱ΋࿈ಈͯ͠ϏϧυॲཧͰϑΥϯτΛॲ ཧ͠ɺϑΥϯτ/ϑΥϯτCSSͷμ΢ϯϩʔυपΓͷ࠷ దԽ΋ݕ౼͍ͯ͠Δ • RFC   https://github.com/nuxt/nuxt/discussions/22014

Slide 111

Slide 111 text

Nuxt Assets • ։ൃऀ͕αʔυύʔςΟʔ͕ఏڙ͢ΔΑ͏ͳΞηοτ ΛϓϩάϥϚϒϧʹϩʔυॲཧͰ͖Δ࢓૊ΈΛఏڙ͠ Α͏ͱ͍ͯ͠Δ • എܠ: Ξηοτ (εΫϦϓτɺϑΥϯτɺCSSͳͲ) ͸ αʔυύʔςΟʔͷґଘؔ܎΍ͦΕͧΕͷҟͳΔ ΩϟογϡઓུʹΑͬͯϩʔυ͕೉͘͠ɺϨϯμϦϯ άΛϒϩοΫ͢ΔͷͰύϑΥʔϚϯε௿ԼͷݪҼʹ ͳ͍ͬͯΔ • RFC   https://github.com/nuxt/nuxt/discussions/22012

Slide 112

Slide 112 text

Nuxt Studio

Slide 113

Slide 113 text

Nuxt Studio • Nuxt Λ࢖ͬͨ CMS αʔϏε • ݱࡏ beta (ॱ࣍ট଴੍) • GitHub ͱ࿈ܞ͍ͯ͠ΔͨΊ ؆୯ʹϗεςΟϯάͰ͖Δ   (GitHub Pages ʹσϓϩΠͰ ͖Δ) • ΋ͪΖΜଞͷϓϥοτϗʔϜ ʹ΋σϓϩΠՄೳ https://nuxt.studio/

Slide 114

Slide 114 text

·ͱΊ

Slide 115

Slide 115 text

Vue.js ͷಈ޲ • ͜͜࠷ۙ͸େ͖ͳػೳϦϦʔε͸ͳ͘ɺSFC पΓ ͷ DX վળʹऔΓ૊ΜͰ͍Δ • Vue ެࣜपΓͷΤίγεςϜͰ͸ Vue ຊମͱ͍ͬ ͠ΐʹऔΓ૊ΜͰ͖ͨ Volar ͕҆ఆԽ • Volar ͸ Volar.js ͱͯ͠ Vue.js Ҏ֎ͷΤίγεςϜ ʹ DX ఏڙΛ࢝Ί͍ͯΔ

Slide 116

Slide 116 text

Nuxt ͷಈ޲ • Vue 3 ͕ϦϦʔε͞Ε͔ͯΒ 2೥ܦաΑ͏΍͘ Nuxt 3 ͕ ϦϦʔε͞Εͨ • Nuxt 3 ͷίΞٕज़ Nitro ͸Ͳ͜Ͱ΋αʔόʔ͕ಈ࡞͢Δ Α͏֦ுੑߴ͘ઃܭ͞Ε͍ͯΔ • ͦͷͨΊɺ͜͜࠷ۙͷ Web ϑϩϯτΤϯυपΓͷτϨ ϯυʹॊೈʹରԠՄೳʹͳ͍ͬͯΔ • ·ͨ DX ʹ΋ྗΛೖΕ͓ͯΓɺDevTools ΍ Webϑϩϯ τΤϯυͷ DX ΛߴΊΔͨΊʹ৽͍͠औΓ૊Έ΋࢝Ίͯ ͍Δ

Slide 117

Slide 117 text

࠷ޙʹ

Slide 118

Slide 118 text

Vue Fes Japan 2023 ʹߦ͜͏ʂ • Vue.jsɺNuxt ɺVite ͦͯ͠ΤίγεςϜͷ։ൃʹؔ Θ͍ͬͯΔίΞνʔϜ͕ήετεϐʔΧʔͱͯ͠དྷ ೔ͯ͠ηογϣϯͰ࿩͠·͢ʂ • ࠓ೔ͷ࿩Λ౿·͑ͭͭɺͦ͏ͨ͠ํʑͷηογϣϯ Λฉ͍ͯ͞Βʹਂ۷ͬͯ΋Β͑Ε͹ͱʂ • ·ͨɺίϛϡχςΟ͔Βͷັྗతͳ CFP ηογϣ ϯ΋͋ΔͷͰੋඇࢀՃָͯ͠͠ΜͰ͍ͬͯ΋Β͑Ε ͹ͱʂ

Slide 119

Slide 119 text

Thank You! ❤