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

Transcript

1. Vue.js ΤίγεςϜಈ޲ 2023 v-tokyo#18 2023.08.08 @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. v-tokyo#18 ͷςʔϚ https://vuejs-meetup.connpass.com/event/288920/
6. ࠓ೔࿩͢͜ͱ • Vue Fes Japan ͰΠϕϯτָ͕͠ΊΔΑ͏ɺVue.js ͱΤίγεςϜपลͷ͜͜࠷ۙͷಈ޲Λ࿩͠·͢ʂ
7. Vue.js
8. Vue 3
9. 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)
10. 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೥͔͔͍ۙͬͯ͘Δ ͳͥͰ͠ΐ͏ʁ
11. Vue 3.2 ໨ۄ • SFC script setup • 3.2 Ҏલ·Ͱ͸ setup ͷதʹॻ͍ͯ ͍ͨ • script setup ͷొ৔ ʹΑΓγϯϓϧʹ ͳͬͨ 3.2 3.2 Ҏલ
12. ͨͩɺSFCपΓͰ·ͩ໰୊఺͕… • TypeScript • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots) • API • ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ 
 (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ)
13. ͨͩɺSFCपΓͰ·ͩ໰୊఺͕… • TypeScript • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots) • API • ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ 
 (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ) SFC ͸ Vue ͷίϯηϓτͰ͋ΓίΞػೳͰ͋Δ Α͍ DX Λఏڙ͢ΔͨΊʹ͸͞ΒͳΔվળ͕ඞཁ
14. Vue 3.3 Ͱ͸ DX վળʹϑΥʔΧε • SFC ͸ HTML ϕʔεͷίϯϙʔωϯτγεςϜ • SFC ͷ DX ͸ΤσΟλ͕ఏڙ͢Δ DX ʹࠨӈ͞ΕΔ • Vue Language Tools (چ:Volar) ʹΑΔαϙʔτ͕ ඞਢ • RFC Ͱ SFC վળʹ͍ͭͯϑΟʔυόοΫΛಘͭͭ ৻ॏʹۛຯ͍ͯͬͨ͠ • ྫ: Reactivity Transform
15. Vue 3.3
16. Vue 3.3 ͷϦϦʔε಺༰ • ओͳ΋ͷ͸ҎԼͷͱ͓Γ • <script setup> Ͱͷ TypeScript पΓDX վળ • ࣮ݧతػೳ
17. <script setup> Ͱͷ TypeScript पΓDX վળ
18. <script setup> Ͱͷ TypeScript पΓDX վળ • SFC ֎Ͱఆٛͨ͠ܕΛ import ͯ͠ϚΫϩͰར༻Ͱ ͖ΔΑ͏ͳͬͨ
19. <script setup> Ͱͷ TypeScript पΓDX վળ • TypeScript ͷ Generics Λ࢖ͬͨίϯϙʔωϯτΛ ఆٛͰ͖ΔΑ͏ͳͬͨ generics ଐੑͷதͰ͸ extends ͳͲ 
 TS ͷ Generics ͱಉ͡΋ͷ͕࢖͑Δ
20. <script setup> Ͱͷ TypeScript पΓDX վળ • de fi neEmits ͕࢖͍΍͘͢ͳͬͨ 3.2 3.3 ʙ TypeScript ͷ labeled tuple elements ͰఆٛͰ͖Δ
21. <script setup> Ͱͷ TypeScript पΓDX վળ • de fi neSlots Ͱ slots ΛܕΛޮ͔ͤΒΕΔΑ͏ʹͳͬ ͨ
22. ࣮ݧతػೳ
23. de fi neProps ͷ෼ׂ୅ೖ • ݩʑ͸ Reactivity Transform Ͱαϙʔτ͢Δ͸ͣ ͩͬͨ΋ͷ • σϑΥϧτ஋ͷఆٛΛ withDefaults ࢖Θͳͯ͘΋ JavaScript ͷ෼ׂ୅ೖߏจͰ props ΛఆٛͰ͖Δ
24. de fi neModel • <script setup> Ͱ v-model ͰόΠϯυ͢Δ props Λ ఆٛͰ͖Δ syntax sugar ͷΑ͏ͳϚΫϩ 3.2 3.3 ʙ
25. Vue 3.3 Ͱ͸…
26. Reactivity Transform https://ja.vuejs.org/guide/extras/reactivity-transform.html#reactivity-transform
27. Reactivity Transform ͕ ೖΒͳ͔ͬͨͷ͸ ͳͥʁ🤔
28. ͦΕ͸…
29. ৽ͨͳ໰୊ʹΑͬͯ Vue ͕ෳࡶʹͳͬͯ͠·͏͔Β
30. Reactivity Transform https://speakerdeck.com/kazupon/reactivity-transform?slide=6
31. ϦΞΫςΟϒपΓͷDXΛվળ͢Δ͸ͣͩͬͨ… https://speakerdeck.com/kazupon/reactivity-transform?slide=9
32. ͕ͩɺ৽ͨͳ໰୊͕ੜ͡Δ͜ͱ͕Θ͔ͬͨ • Reactivity Transform ʹΑΔੜ͡Δ໰୊఺ • ίʔυͷϦΞΫςΟϏςΟίϯςΩετ͕෼͔Γ ͮΒ͘ͳΔ • Reactivity Transform ϕʔεͷίʔυͱͦΕΛ࢖ Θͳ͍ίʔυؒͷίϯςΩετεΠον • ref Λཁٻ͢Δ I/F Λ࣋ͬͨؔ਺ͳͲ͕ಈ͔ͳ͘ ͳΔ
33. ࠷େͷ໰୊఺ • ։ൃऀ಺Ͱ෼அ͕ى͖ΔϦεΫ • Reactivity Transform ͸ JavaScript ͷηϚϯςΟ Ϋεʹ͍ͦͬͯͳ͍ • Reactivity Transform Λ࢖͏೿ v.s. ࢖Θͳ͍೿
34. ͜͏ͨ͠ཧ༝͔Β… • Evan ࢯ͸ Reactivity Transform ͷ Drop Λܾఆ͠ɺ ΠϕϯτͰΞφ΢ϯε https://youtu.be/OrT0tHGXyqE?t=844 Vue.js Nation ΑΓ
35. ΋͠ɺ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
36. Vue 3.3 ͦͷଞ
37. de fi neOptions • <script setup> Ͱ Options API ͕࢖͑ΔΑ͏ʹͳͬ ͨ <script> ͕ͳͯ͘΋ <script setup> ͷΈͰ Options API ΛఆٛͰ͖ΔΑ͏ʹͳͬͨ
38. toRef / toValue • Reactivity API पΓͷศརϢʔςΟϦςΟΛఏڙ • toRef ͸ ref ʹਖ਼نԽ͢ΔϢʔςΟϦςΟؔ਺
39. toRef / toValue • toRef ʹର͠ɺtoValue ͸஋ʹਖ਼نԽ͢ΔϢʔςΟ ϦςΟؔ਺
40. Vue.js ެࣜϓϥάΠϯ & πʔϧ
41. ެࣜҰཡ • 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
42. ެࣜҰཡ • 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 Vue ͱؔ࿈ͯ͠େ͖͍ಈ͖͕͋ͬͨ
43. vue-language-tools ͱ͸ • Volar ʹมΘΔ৽໊͍͠শ • Volar v1 ͸ 2022/10/10 ʹϦϦʔε͞Εͨ • ͦͷޙίΞ෦෼͕ Volar.js ͱͯ͠நग़͞ΕɺVue ؔ ࿈ͷϞδϡʔϧɺύοέʔδ͕ vue-language-tools ͱͳͬͨ
44. ߏ੒ https://github.com/vuejs/language-tools#high-level-system-overview “High Level System Overview” ΑΓ
45. ߏ੒ VSCode Ҏ֎ͷΤσΟλͰ࢖͑ΔΑ͏ʹͳ͍ͬͯΔʂ
46. Volar.js ͸ଞʹ΋࢖ΘΕ࢝Ί͍ͯΔ • ݱࡏͰ͸࡞ऀͷ Johnson Chu ࢯ͕ϑ ϧλΠϜͰऔΓ૊ΜͰ͍Δ • StackBliz ͕ Volar.js ϑϧλΠϜ OSS Λࢧ͍͑ͯΔ
47. Volar.js ʹ͍ͭͯৄ͘͠͸… • Volar.js ͷηογϣϯτʔΫ͕ Vue Fes Japan 2023 ʹ͋ΔͷͰͥͻࢀՃͯ͠ฉ͖·͠ΐ͏ʂ
48. VitePress ͸ʁ • ͪΐ͏Ͳ͜ͷλΠϛϯά (v-tokyo#18) Ͱ v1.0 RC ͕ ϦϦʔε͞Εͨʂ https://twitter.com/KiaKing85/status/1688869807733772288
49. VitePress ͷݕࡧपΓ͕ڧԽ • VitePress ͷݕࡧɺAlgolia Ҏ֎ʹ΋ minisearch Ͱ ϩʔΧϧͰݕࡧͰ͖ΔΑ͏ʹͳ͍ͬͯΔ
50. Nuxt
51. ຊ୊ʹೖΔલʹ…
52. Nuxt 3 ʹ͍ͭͯೖ໳͍ͨ͠ํ͸ 💁 • ushironoko ͞ΜͷεϥΠυΛࢀߟʹʂ 
 Nuxt 3 ೖ໳͍ͨ͠ํʹ͸ػೳ΍ Composables ʹͭ ͍ͯΑ͘·ͱ·͍ͬͯΔ https://slides.com/ushironoko/beginning-nuxt-3-reiwa Nuxt3 ೖ໳ ྩ࿨ ࠷৽
53. Nuxt ͱ͸ https://nuxt.com/ Vue.js ޲͚ͷ Web ϑϨʔϜϫʔΫ
54. Nuxt ͷಛ௃ • ࣗಈԽͱن໿ʹΑͬͯ։ൃʹઐ೦Ͱ͖Δ؀ڥΛఏڙ • αʔόʔαΠυϨϯμϦϯάΛඪ४Ͱఏڙ • ϢχόʔαϧͳαʔόʔΤϯδϯͰͲ͜Ͱ΋ಈ࡞͢Δ • ϞδϡʔϧγεςϜͰ Nuxt Λ֦ுͰ͖Δ
55. 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
56. ͦͯ͠…
57. ͍ͭʹ 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
58. ݱࡏͷ Nuxt ։ൃମ੍ • ϑϨʔϜϫʔΫνʔϜϝϯόʔʹΑͬͯίϛϡχ ςΟͷϑΟʔυόοΫ & RFC ϕʔεʹ։ൃ͍ͯ͠Δ • 2023೥͔Β Nuxt 3 ։ൃ্ཱ͔ͪ͛ΒϦʔυͯͨ͠ Pooya ࢯ͔Β Daniel ࢯʹότϯλον 
 https://nuxt.com/blog/vision-2023#nuxt-a-vision-for-2023 • Pooya ࢯ͸ݱࡏ unjs & nitro ʹϑΥʔΧε
59. ৽͍͠ Nuxt ͷΞʔΩςΫνϟ • ίΞΤϯδϯ: nuxt • όϯυϥ: @nuxt/vite-builder & @nuxt/webpack-builder • CLI: nuxi • αʔόʔΤϯδϯ: nitro • ։ൃΩοτ: @nuxt/kit • Nuxt 2 ϒϦοδ: @nuxt/bridge
60. ৽͍͠ Nuxt ͷΞʔΩςΫνϟ • ίΞΤϯδϯ: nuxt • όϯυϥ: @nuxt/vite-builder & @nuxt/webpack-builder • CLI: nuxi • αʔόʔΤϯδϯ: nitro • ։ൃΩοτ: @nuxt/kit • Nuxt 2 ϒϦοδ: @nuxt/bridge Nitro ͸৽͍͠ Nuxt Λࢧ͑ΔίΞٕज़
62. Nitro ͱ͸ • Ͳ͜Ͱ΋ಈ࡞͢Δ WebαʔόʔΛߏங͢ΔͨΊͷϑ ϨʔϜϫʔΫ • ϓϩδΣΫτ։࢝࣌͸ɺΤοδαΠυͰಈ࡞͢ΔΑ ͏໨తͰαʔόʔΤϯδϯΛ࡞͍ͬͯͬͨ • ίʔυωʔϜ: sigma 
 https://www.npmjs.com/package/@nuxt/sigma • express Λ࢖ΘͣʹϑϧεΫϥον͔Β࡞ͬͨ • h3: https://github.com/unjs/h3
63. Nitro ͷಛ௃
64. 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
65. Nitro ͸ unjs ͷҰ෦ • unjs ͷ OSS ͱͯ͠࡞ΒΕ ͍ͯΔ 
 Uni fi ed JavaScript Tools: https://github.com/unjs • unjs ʹ͍ͭͯ͸ CFP ηογϣ ϯτʔΫ͕ Vue Fes Japan 2023 ʹ͋ΔͷͰׂѪʂ
66. 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
67. Nitro Λ࢖ͬͨ΋ͷ͕ੜ·Εͭͭ͋Δ • vinxi • GitHub repo: https://github.com/nksaraf/vinxi • ݱ࣌఺(v-tokyo#18)Ͱ͸ React ͱ Solid ͷΈ?
68. Nuxt ͕αϙʔτ͢Δ ϨϯμϦϯάϞʔυ
69. ैདྷ͔Βαϙʔτ͍ͯ͠Δ ϨϯμϦϯά
70. ϢχʔόαϧϨϯμϦϯά (SSR) • Nuxt 3Ͱ͸σϑΥϧτ ON https://nuxt.com/docs/guide/concepts/rendering#universal-rendering
71. ϢχʔόαϧϨϯμϦϯά (SSR) • Pros • ύϑΥʔϚϯε͕Α͍ • SEO 
 • Cons • αʔόʔίετ͕͔͔Δ • ։ൃ࣌ʹαʔόʔͱϒϥ΢βΛҙࣝ͠ͳ͍ͱ͍͚ ͳ͍
72. ΫϥΠΞϯταΠυϨϯμϦϯά (CSR) • nuxt.con fi g Ͱ `ssr: false` Ͱ༗ޮʹͰ͖Δ 
 (͍ΘΏΔ SPA Ϟʔυ) https://nuxt.com/docs/guide/concepts/rendering#client-side-rendering
73. ΫϥΠΞϯταΠυϨϯμϦϯά (CSR) • Pros • αʔόʔίετ͕͔͔Βͳ͍ • ։ൃ͸ϒϥ΢β؀ڥͷΈΛҙࣝ͢Ε͹Α͍ • Cons • ύϑΥʔϚϯε • SEO
74. Nuxt 3͔Βαϙʔτ͢Δ ϨϯμϦϯά
75. ϋΠϒϦουϨϯμϦϯά • Nitro ͷ `routeRules` Ͱϖʔδ/ϧʔτ୯ҐͰ SSR / CSR / ISR / SWR ͳͲϨϯμϦϯάΛࡉ੍͔͘ޚͰ ͖Δ https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering
76. ΤοδαΠυϨϯμϦϯά(ESR) • CDN ͷΤοδαʔόʔ্ͰϨϯμϦϯά͢Δ͜ͱ ͰɺԠ౴଴ͪ࣌ؒΛ୹ॖʹΑͬͯΤϯυϢʔβʔ ͷ UX Λ޲্ͤ͞Δ
77. ΤοδαΠυϨϯμϦϯά(ESR) • ҎԼͷΤοδ؀ڥΛ࣋ͭϓϥοτϑΥʔϜʹσϓϩ ΠͰ͖Δ • Cloudflare Pages • Vercel Edge Functions • Netlify Edge Functions • Lagon
78. ΤοδαΠυϨϯμϦϯά(ESR) • σϓϩΠ͸ɺҎԼͷΑ͏ʹNitro ͷϓϦηοτΛࢦ ఆ͢Δ (Cloudflare Pages ͸θϩίϯϑΟά) • nuxt.con fi g ͷέʔε 
 
 
 
 • ؀ڥม਺ͷέʔε 
 $ NITRO_PRESET=vercel-edge nuxi build
79. ΤοδαΠυϨϯμϦϯά(ESR) • h3 ͕ v1.8 Ҏ͔߱Β Web ඪ४ API (Request/Response, ReadableStream) ͱΠ ϯςάϨʔγϣϯͰ͖ ΔΑ͏ʹͳͬͨ • ࠓޙ͞ΒʹରԠϓϥο τϑΥʔϜ͕૿͑Δ https://twitter.com/_pi0_/status/1686911793954729984
80. ࠓޙ Nuxt Ͱಋೖ͞ΕΔ ಛघͳϨϯμϦϯά
81. ⚠ ஫ҙ ⚠ ͜Ε͔Β࿩͢͜ͱ͸ ·࣮ͩݧతػೳঢ়ଶ & WIP
82. ৽ͨʹಋೖ͞ΕΔಛघͳϨϯμϦϯά • Nuxt Server Components • Nuxt Island
83. Nuxt Server Components
84. Nuxt Server Components • ίϯϙʔωϯτΛαʔόʔ্ͰϨϯμϦϯάͯ͠ɺ ϨϯμϦϯά͞ΕͨίϯϙʔωϯτͷHTMLΛϒϥ ΢β্ʹࠩ͠ࠐΉ ϒϥ΢β αʔόʔ Server Component Ϩϯμϥ (Nitro) Server Component ϦΫΤετ(fetch) HTMLจࣈྻ (payload) ϨϯμϦϯά
85. Nuxt Server Comonents ͸ 2 छྨ͋Δ • Standalone Server Components 
 
 ୯ಠͰಈ࡞͢Δ΋ͷ • Paired with a `.client` component 
 
 ϒϥ΢β্ͰͷΈಈ࡞͢Δίϯϙʔωϯτͱ૊߹ͤ Λ૝ఆͯ͠ಈ͘΋ͷ
86. Nuxt Server Components ͷఆٛํ๏ • Nuxt Server Components ͱͯ͠ڍಈ͍ͤͨ͞৔߹ ͸ίϯϙʔωϯτϑΝΠϧ໊ʹ `.server` ͷαϑΟο ΫεΛೖΕΔ
87. ͱ͜ΖͰ `.client` ίϯϙʔωϯτͱ͸ʁ • ϒϥ΢β(ΫϥΠΞϯτ)ͰͷΈϨϯμϦϯά͞ΕΔ (CSR) ͞ΕΔίϯϙʔωϯτͷ͜ͱɻ • CSR ͍ͤͨ͞ର৅ίϯϙʔωϯτͷϑΝΠϧ໊ʹ `.client` ͷαϑΟοΫεΛೖΕΔ
88. Standalone Server Components • ର৅ίϯϙʔωϯτ͕ϒϥ΢βͰϨϯμϦϯά͞Ε ΔλΠϛϯάͰαʔόʔʹϦΫΤετΛඈ͹ͯ͠ɺ SSR ͷ݁Ռʹஔ͖׵͑Δ
89. Standalone Server Components ͷ࢖͍ํ • ϑΝΠϧ໊ʹαϑΟοΫε `.server` ೖΕͯఆٛ • ࢖͏࣌͸௨ৗͷίϯϙʔωϯτͷ࢖͍ํͱಉ͡ Nuxt ͸ `.server` ͳίϯϙʔωϯτΛϏϧυ࣌ʹ ΫϥΠΞϯτʹ഑৴͢Δ JS ʹόϯυϧ͠ͳ͍ʂ αʔόʔαΠυͷΈόϯυϧ
90. Paired with a `.client` component • `.server` ίϯϙʔωϯτ͸ SSR ͞Εͯɺ`.client` ί ϯϙʔωϯτ͸ɺϚ΢ϯτ͞Εͨ (`onMounted`)ޙ ʹ CSR ͞ΕΔ
91. Paired with a `.client` component ͷ࢖͍ํ • ϑΝΠϧ໊ʹαϑΟοΫε `.client`ɺ`.server`Λ • ࢖͏࣌͸௨ৗͷίϯϙʔωϯτͷ࢖͍ํͱಉ͡ ͨͩɺϋΠυϨʔγϣϯϛεϚον͕ى͖ͳ͍Α͏ʹ ͠ͳ͍ͱ͍͚ͳ͍
92. Nuxt Server Components ͷར఺ • ΫϥΠΞϯτͷόϯυϧαΠζΛݮΒͤΔ • ηΩϡΞʹͳΔ • αʔόʔ͕ෆཁͳ੩తϗεςΟϯάͰ΋ಈ͔ͤΔ • ௨ৗͷίϯϙʔωϯτͱޓ׵ੑ͕͋Δ
93. ΋͠ Nuxt Server Components Λ࢖͏ͱ͖͸… • ·࣮ͩݧతػೳͳͷͰɺnuxt.con fi g Ͱ `experimental.componentIslands` ͰΦϓτΠϯΛ ๨Εͣʹʂ
94. Nuxt Island
95. Nuxt Island ͱ͸ • Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ • `<NuxtIsland>` ίϯϙʔωϯτͰΞΠϥϯυΛߏங Ͱ͖Δ https://nuxt.com/docs/api/components/nuxt-island#nuxtisland
96. ͦͷલʹ
97. ΞΠϥϯυΞʔΩςΫνϟͱ͸🏝 • ΞΠϥϯυΞʔΩςΫνϟͷ ໋໊ऀ͸ Katie Sylor-Miller ࢯ • ϖʔδ಺ʹ੩త෦෼ͱಈత෦ ෼Λಉډͤ͞Δ͜ͱ͕Ͱ͖Δ • ඞཁͳλΠϛϯάͰ JS ͕ ϩʔυ͞ΕΔ͜ͱͰɺ෦෼త ͳϋΠυϨʔγϣϯ͕Մೳ https://docs.astro.build/ja/concepts/islands/ ੩తͳ෦෼Λʮւʯಈతͳ෦෼Λʮౡʯͱଊ͑ͨϝλϑΝ
98. Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ͸Կ͕ҧ͏ʁ • `<NuxtIsland>` ίϯϙʔωϯτͰϨϯμϦϯά͞Ε Δίϯςϯπ͸੩తίϯςϯπ • Nuxt ͷ৔߹͸ΞΠϥϯυΛ੩తͱͯ͠ॲཧ͢Δ • ΞΠϥϯυ͸ΫϥΠΞϯτͷ JS ʹόϯυϧͯ͠഑ ৴͠ͳ͍ Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ͸ ಈతͳ෦෼Λʮւʯ੩తͳ෦෼Λʮౡʯͱ͢Δ ٯͷΞϓϩʔν
99. Nuxt Island ͷϢʔεέʔε • ݱ࣌఺ (v-tokyo#18) Ͱ͸ɺύϑΥʔϚϯε޲্ • ϦϞʔτιʔεͷΞΠϥϯυΛϨϯμϦϯά͢Δ͜ ͱ͕Ͱ͖ΔͷͰϚΠΫϩϑϩϯτΤϯυతͳ༻్΋ Մೳ͔΋
100. ΋͔ͯ͠͠ Nuxt Island ͸ Nuxt Server Components? • ݱ࣌఺ (v-tokyo#18) Ͱ͸ Yes • Nuxt Server Components ͕ Nuxt Island Λ֦ுͯ͠ ࣮૷͍ͯ͠Δ • ͕ɺNuxt Server Components ͸·ͩൃల్্ͷͨ ΊࠓޙมΘΔՄೳੑ͕͋Δ
101. Nuxt Server Components ͷϩʔυϚοϓ • ϦϞʔτιʔεରԠ 
 ଞαΠτͷ Nuxt Server Components ͷಡࠐΈɻ 
 ͜Ε͕Ͱ͖Δͱ Nuxt Microservices ͕Ͱ͖ΔΑ͏ʹͳ ΔΒ͍͠ɻ 
 (طʹ࣮૷ࡁΈɻv3.7ͰϦϦʔε༧ఆ) • ஗ԆϩʔυରԠ 
 Nuxt Server Components ϩʔυதʹφϏήʔγϣϯΛ ๦͛ͳ͍Α͏ϑΥʔϧόοΫΛදࣔͰ͖ΔΑ͏ʹͳΔ 
 (࣮૷ࡁΈ & ϦϦʔεࡁΈ) https://roe.dev/blog/nuxt-server-components#roadmap
102. Nuxt Server Components ͷϩʔυϚοϓ • ΠϯλϥΫςΟϒରԠ 
 slots Ҏ֎Ͱ΋ΠϯλϥΫςΟϒͳίϯϙʔωϯτ ͷಈ࡞ΛՄೳʹ͢Δ (ະ࣮૷) • `<ServerOnly>` ίϯϙʔωϯτ 
 `<ClientOnly>` ίϯϙʔωϯτͷΑ͏ʹλάͷதʹ ͋ΔϞϊΛ SSR ͢ΔΑ͏ࣗಈม׵ (ະ࣮૷) https://roe.dev/blog/nuxt-server-components#roadmap
103. Nuxt Server Components ͷϩʔυϚοϓ • ϩʔυϚοϓͷਐḿঢ়گ ͸ GitHub Issues Ͱ؅ཧ ͞Ε͍ͯΔ 
 https://github.com/nuxt/nuxt/issues/ 19772
104. Nuxt ͷ։ൃπʔϧ
105. Nuxt DevTools • Nuxt 3 ͔ΒΑΓΑ͍ DX Λఏڙ͢ΔͨΊʹ Nuxt ʹ ಛԽͨ͠ DevTools ͕ Nuxt Modules Ͱఏڙ͞ΕΔ Α͏ʹͳͬͨ 
 https://devtools.nuxtjs.org/
106. Nuxt DevTools ͸௒ศརʂ • Nuxt Ͱ WebΞϓϦΛ࡞Δਓ΍ Nuxt ΤίγεςϜΛ ։ൃ͢Δਓʹ΋Α͍ DX Λఏڙͯ͘͠ΕΔ • ϑϨʔϜϫʔΫʹΑͬͯந৅Խ͞Ε͍ͯΔ෦෼΋ಈ ͖Λ֬ೝͰ͖Δ • Կ͕Ͱ͖Δ͔͸ৄࡉ͸ Nuxt ެࣜϒϩάͰʂ 
 https://nuxt.com/blog/introducing-nuxt-devtools
107. ͦͷଞ Nuxt ຊମपΓͰ 
 ࠓਐΊ͍ͯΔ͜ͱ
108. ৽͍͠ΠϯςάϨʔγϣϯͷఏڙΛݕ౼͍ͯ͠Δ • Nuxt Scripts • Nuxt Fonts • Nuxt Assets • Google Chome Aurora νʔϜͱ࿈ܞͯ͠ಈ͍͍ͯΔ • ·ͩݱࡏ RFC Ͱٞ࿦ϑΣʔζ https://twitter.com/danielcroe/status/1677261172427333632
109. Nuxt Scripts • WebαΠτͷύϑΥʔϚϯεͱίϯϓϥΠΞϯεΛ ଛͳΘͣʹɺNuxt ΞϓϦʹαʔυύʔςΟʔεΫ ϦϓτΛಋೖ͢ΔͨΊͷ࢓૊ΈΛఏڙ͠Α͏ͱͯ͠ ͍Δ • RFC 
 https://github.com/nuxt/nuxt/discussions/22016
110. Nuxt Fonts • ։ൃऀ͕ Nuxt ΞϓϦͷϑΥϯτΛ؆୯ʹઃఆͰ͖Δ Α͏ʹ͠Α͏ͱ͍ͯ͠Δ • ͞·͟·ଘࡏ͢ΔWebϑΥϯτΛϓϩόΠμʔͰऔΓ ѻ͍ΒΕΔΑ͏ʹ͢Δ • Nuxt Assets ͱ΋࿈ಈͯ͠ϏϧυॲཧͰϑΥϯτΛॲ ཧ͠ɺϑΥϯτ/ϑΥϯτCSSͷμ΢ϯϩʔυपΓͷ࠷ దԽ΋ݕ౼͍ͯ͠Δ • RFC 
 https://github.com/nuxt/nuxt/discussions/22014
111. Nuxt Assets • ։ൃऀ͕αʔυύʔςΟʔ͕ఏڙ͢ΔΑ͏ͳΞηοτ ΛϓϩάϥϚϒϧʹϩʔυॲཧͰ͖Δ࢓૊ΈΛఏڙ͠ Α͏ͱ͍ͯ͠Δ • എܠ: Ξηοτ (εΫϦϓτɺϑΥϯτɺCSSͳͲ) ͸ αʔυύʔςΟʔͷґଘؔ܎΍ͦΕͧΕͷҟͳΔ ΩϟογϡઓུʹΑͬͯϩʔυ͕೉͘͠ɺϨϯμϦϯ άΛϒϩοΫ͢ΔͷͰύϑΥʔϚϯε௿ԼͷݪҼʹ ͳ͍ͬͯΔ • RFC 
 https://github.com/nuxt/nuxt/discussions/22012
112. Nuxt Studio
113. Nuxt Studio • Nuxt Λ࢖ͬͨ CMS αʔϏε • ݱࡏ beta (ॱ࣍ট଴੍) • GitHub ͱ࿈ܞ͍ͯ͠ΔͨΊ ؆୯ʹϗεςΟϯάͰ͖Δ 
 (GitHub Pages ʹσϓϩΠͰ ͖Δ) • ΋ͪΖΜଞͷϓϥοτϗʔϜ ʹ΋σϓϩΠՄೳ https://nuxt.studio/
114. ·ͱΊ
115. Vue.js ͷಈ޲ • ͜͜࠷ۙ͸େ͖ͳػೳϦϦʔε͸ͳ͘ɺSFC पΓ ͷ DX վળʹऔΓ૊ΜͰ͍Δ • Vue ެࣜपΓͷΤίγεςϜͰ͸ Vue ຊମͱ͍ͬ ͠ΐʹऔΓ૊ΜͰ͖ͨ Volar ͕҆ఆԽ • Volar ͸ Volar.js ͱͯ͠ Vue.js Ҏ֎ͷΤίγεςϜ ʹ DX ఏڙΛ࢝Ί͍ͯΔ
116. Nuxt ͷಈ޲ • Vue 3 ͕ϦϦʔε͞Ε͔ͯΒ 2೥ܦաΑ͏΍͘ Nuxt 3 ͕ ϦϦʔε͞Εͨ • Nuxt 3 ͷίΞٕज़ Nitro ͸Ͳ͜Ͱ΋αʔόʔ͕ಈ࡞͢Δ Α͏֦ுੑߴ͘ઃܭ͞Ε͍ͯΔ • ͦͷͨΊɺ͜͜࠷ۙͷ Web ϑϩϯτΤϯυपΓͷτϨ ϯυʹॊೈʹରԠՄೳʹͳ͍ͬͯΔ • ·ͨ DX ʹ΋ྗΛೖΕ͓ͯΓɺDevTools ΍ Webϑϩϯ τΤϯυͷ DX ΛߴΊΔͨΊʹ৽͍͠औΓ૊Έ΋࢝Ίͯ ͍Δ
117. ࠷ޙʹ
118. Vue Fes Japan 2023 ʹߦ͜͏ʂ • Vue.jsɺNuxt ɺVite ͦͯ͠ΤίγεςϜͷ։ൃʹؔ Θ͍ͬͯΔίΞνʔϜ͕ήετεϐʔΧʔͱͯ͠དྷ ೔ͯ͠ηογϣϯͰ࿩͠·͢ʂ • ࠓ೔ͷ࿩Λ౿·͑ͭͭɺͦ͏ͨ͠ํʑͷηογϣϯ Λฉ͍ͯ͞Βʹਂ۷ͬͯ΋Β͑Ε͹ͱʂ • ·ͨɺίϛϡχςΟ͔Βͷັྗతͳ CFP ηογϣ ϯ΋͋ΔͷͰੋඇࢀՃָͯ͠͠ΜͰ͍ͬͯ΋Β͑Ε ͹ͱʂ
119. Thank You! ❤