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

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

kazupon
August 09, 2023

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

kazupon

August 09, 2023
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. Vue.js


    ΤίγεςϜಈ޲


    2023
    v-tokyo#18


    2023.08.08


    @kazupon

    View full-size slide

  2. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 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)

    View full-size slide

  6. 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೥͔͔͍ۙͬͯ͘Δ


    ͳͥͰ͠ΐ͏ʁ

    View full-size slide

  7. Vue 3.2 ໨ۄ
    • SFC script setup


    • 3.2 Ҏલ·Ͱ͸
    setup ͷதʹॻ͍ͯ
    ͍ͨ


    • script setup ͷొ৔
    ʹΑΓγϯϓϧʹ
    ͳͬͨ
    3.2
    3.2 Ҏલ

    View full-size slide

  8. ͨͩɺSFCपΓͰ·ͩ໰୊఺͕…
    • TypeScript


    • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots)


    • API


    • ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ

    (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ)

    View full-size slide

  9. ͨͩɺSFCपΓͰ·ͩ໰୊఺͕…
    • TypeScript


    • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots)


    • API


    • ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ

    (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ)
    SFC ͸ Vue ͷίϯηϓτͰ͋ΓίΞػೳͰ͋Δ


    Α͍ DX Λఏڙ͢ΔͨΊʹ͸͞ΒͳΔվળ͕ඞཁ

    View full-size slide

  10. Vue 3.3 Ͱ͸ DX վળʹϑΥʔΧε
    • SFC ͸ HTML ϕʔεͷίϯϙʔωϯτγεςϜ


    • SFC ͷ DX ͸ΤσΟλ͕ఏڙ͢Δ DX ʹࠨӈ͞ΕΔ


    • Vue Language Tools (چ:Volar) ʹΑΔαϙʔτ͕
    ඞਢ


    • RFC Ͱ SFC վળʹ͍ͭͯϑΟʔυόοΫΛಘͭͭ
    ৻ॏʹۛຯ͍ͯͬͨ͠


    • ྫ: Reactivity Transform

    View full-size slide

  11. Vue 3.3 ͷϦϦʔε಺༰
    • ओͳ΋ͷ͸ҎԼͷͱ͓Γ


    • Ͱͷ TypeScript पΓDX վળ<br/><br/><br/>• ࣮ݧతػೳ<br/>

    View full-size slide

  12. Ͱͷ<br/>TypeScript पΓDX վળ<br/>

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Ͱͷ TypeScript पΓDX վળ<br/>• de<br/>fi<br/>neSlots Ͱ slots ΛܕΛޮ͔ͤΒΕΔΑ͏ʹͳͬ<br/>ͨ<br/>

    View full-size slide

  17. ࣮ݧతػೳ

    View full-size slide

  18. de
    fi
    neProps ͷ෼ׂ୅ೖ
    • ݩʑ͸ Reactivity Transform Ͱαϙʔτ͢Δ͸ͣ
    ͩͬͨ΋ͷ


    • σϑΥϧτ஋ͷఆٛΛ withDefaults ࢖Θͳͯ͘΋
    JavaScript ͷ෼ׂ୅ೖߏจͰ props ΛఆٛͰ͖Δ

    View full-size slide

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

    View full-size slide

  20. Vue 3.3 Ͱ͸…

    View full-size slide

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

    View full-size slide

  22. Reactivity Transform ͕


    ೖΒͳ͔ͬͨͷ͸


    ͳͥʁ🤔

    View full-size slide

  23. ৽ͨͳ໰୊ʹΑͬͯ


    Vue ͕ෳࡶʹͳͬͯ͠·͏͔Β

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. ͕ͩɺ৽ͨͳ໰୊͕ੜ͡Δ͜ͱ͕Θ͔ͬͨ
    • Reactivity Transform ʹΑΔੜ͡Δ໰୊఺


    • ίʔυͷϦΞΫςΟϏςΟίϯςΩετ͕෼͔Γ
    ͮΒ͘ͳΔ


    • Reactivity Transform ϕʔεͷίʔυͱͦΕΛ࢖
    Θͳ͍ίʔυؒͷίϯςΩετεΠον


    • ref Λཁٻ͢Δ I/F Λ࣋ͬͨؔ਺ͳͲ͕ಈ͔ͳ͘
    ͳΔ

    View full-size slide

  27. ࠷େͷ໰୊఺
    • ։ൃऀ಺Ͱ෼அ͕ى͖ΔϦεΫ


    • Reactivity Transform ͸ JavaScript ͷηϚϯςΟ
    Ϋεʹ͍ͦͬͯͳ͍


    • Reactivity Transform Λ࢖͏೿ v.s. ࢖Θͳ͍೿

    View full-size slide

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

    View full-size slide

  29. ΋͠ɺ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

    View full-size slide

  30. Vue 3.3


    ͦͷଞ

    View full-size slide

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

    View full-size slide

  32. toRef / toValue
    • Reactivity API पΓͷศརϢʔςΟϦςΟΛఏڙ


    • toRef ͸ ref ʹਖ਼نԽ͢ΔϢʔςΟϦςΟؔ਺

    View full-size slide

  33. toRef / toValue
    • toRef ʹର͠ɺtoValue ͸஋ʹਖ਼نԽ͢ΔϢʔςΟ
    ϦςΟؔ਺

    View full-size slide

  34. Vue.js


    ެࣜϓϥάΠϯ & πʔϧ

    View full-size slide

  35. ެࣜҰཡ
    • 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

    View full-size slide

  36. ެࣜҰཡ
    • 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 ͱؔ࿈ͯ͠େ͖͍ಈ͖͕͋ͬͨ

    View full-size slide

  37. vue-language-tools ͱ͸
    • Volar ʹมΘΔ৽໊͍͠শ


    • Volar v1 ͸ 2022/10/10 ʹϦϦʔε͞Εͨ


    • ͦͷޙίΞ෦෼͕ Volar.js ͱͯ͠நग़͞ΕɺVue ؔ
    ࿈ͷϞδϡʔϧɺύοέʔδ͕ vue-language-tools
    ͱͳͬͨ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    • StackBliz ͕ Volar.js ϑϧλΠϜ OSS
    Λࢧ͍͑ͯΔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. ຊ୊ʹೖΔલʹ…

    View full-size slide

  45. Nuxt 3 ʹ͍ͭͯೖ໳͍ͨ͠ํ͸ 💁
    • ushironoko ͞ΜͷεϥΠυΛࢀߟʹʂ

    Nuxt 3 ೖ໳͍ͨ͠ํʹ͸ػೳ΍ Composables ʹͭ
    ͍ͯΑ͘·ͱ·͍ͬͯΔ
    https://slides.com/ushironoko/beginning-nuxt-3-reiwa
    Nuxt3 ೖ໳ ྩ࿨ ࠷৽

    View full-size slide

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

    View full-size slide

  47. Nuxt ͷಛ௃
    • ࣗಈԽͱن໿ʹΑͬͯ։ൃʹઐ೦Ͱ͖Δ؀ڥΛఏڙ


    • αʔόʔαΠυϨϯμϦϯάΛඪ४Ͱఏڙ


    • ϢχόʔαϧͳαʔόʔΤϯδϯͰͲ͜Ͱ΋ಈ࡞͢Δ


    • ϞδϡʔϧγεςϜͰ Nuxt Λ֦ுͰ͖Δ

    View full-size slide

  48. 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

    View full-size slide

  49. ͍ͭʹ 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

    View full-size slide

  50. ݱࡏͷ Nuxt ։ൃମ੍
    • ϑϨʔϜϫʔΫνʔϜϝϯόʔʹΑͬͯίϛϡχ
    ςΟͷϑΟʔυόοΫ & RFC ϕʔεʹ։ൃ͍ͯ͠Δ


    • 2023೥͔Β Nuxt 3 ։ൃ্ཱ͔ͪ͛ΒϦʔυͯͨ͠
    Pooya ࢯ͔Β Daniel ࢯʹότϯλον

    https://nuxt.com/blog/vision-2023#nuxt-a-vision-for-2023


    • Pooya ࢯ͸ݱࡏ unjs & nitro ʹϑΥʔΧε

    View full-size slide

  51. ৽͍͠ Nuxt ͷΞʔΩςΫνϟ
    • ίΞΤϯδϯ: nuxt


    • όϯυϥ: @nuxt/vite-builder & @nuxt/webpack-builder


    • CLI: nuxi


    • αʔόʔΤϯδϯ: nitro


    • ։ൃΩοτ: @nuxt/kit


    • Nuxt 2 ϒϦοδ: @nuxt/bridge

    View full-size slide

  52. ৽͍͠ Nuxt ͷΞʔΩςΫνϟ
    • ίΞΤϯδϯ: nuxt


    • όϯυϥ: @nuxt/vite-builder & @nuxt/webpack-builder


    • CLI: nuxi


    • αʔόʔΤϯδϯ: nitro


    • ։ൃΩοτ: @nuxt/kit


    • Nuxt 2 ϒϦοδ: @nuxt/bridge
    Nitro ͸৽͍͠ Nuxt
    Λࢧ͑ΔίΞٕज़

    View full-size slide

  53. Nitro ͱ͸
    • Ͳ͜Ͱ΋ಈ࡞͢Δ WebαʔόʔΛߏங͢ΔͨΊͷϑ
    ϨʔϜϫʔΫ


    • ϓϩδΣΫτ։࢝࣌͸ɺΤοδαΠυͰಈ࡞͢ΔΑ
    ͏໨తͰαʔόʔΤϯδϯΛ࡞͍ͬͯͬͨ


    • ίʔυωʔϜ: sigma

    https://www.npmjs.com/package/@nuxt/sigma


    • express Λ࢖ΘͣʹϑϧεΫϥον͔Β࡞ͬͨ


    • h3: https://github.com/unjs/h3

    View full-size slide

  54. Nitro ͷಛ௃

    View full-size slide

  55. 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

    View full-size slide

  56. Nitro ͸ unjs ͷҰ෦
    • unjs ͷ OSS ͱͯ͠࡞ΒΕ
    ͍ͯΔ

    Uni
    fi
    ed JavaScript Tools:
    https://github.com/unjs


    • unjs ʹ͍ͭͯ͸ CFP ηογϣ
    ϯτʔΫ͕ Vue Fes Japan
    2023 ʹ͋ΔͷͰׂѪʂ

    View full-size slide

  57. 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

    View full-size slide

  58. Nitro Λ࢖ͬͨ΋ͷ͕ੜ·Εͭͭ͋Δ
    • vinxi


    • GitHub repo: https://github.com/nksaraf/vinxi


    • ݱ࣌఺(v-tokyo#18)Ͱ͸ React ͱ Solid ͷΈ?

    View full-size slide

  59. Nuxt ͕αϙʔτ͢Δ


    ϨϯμϦϯάϞʔυ

    View full-size slide

  60. ैདྷ͔Βαϙʔτ͍ͯ͠Δ
    ϨϯμϦϯά

    View full-size slide

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

    View full-size slide

  62. ϢχʔόαϧϨϯμϦϯά (SSR)
    • Pros


    • ύϑΥʔϚϯε͕Α͍


    • SEO

    • Cons


    • αʔόʔίετ͕͔͔Δ


    • ։ൃ࣌ʹαʔόʔͱϒϥ΢βΛҙࣝ͠ͳ͍ͱ͍͚
    ͳ͍

    View full-size slide

  63. ΫϥΠΞϯταΠυϨϯμϦϯά (CSR)
    • nuxt.con
    fi
    g Ͱ `ssr: false` Ͱ༗ޮʹͰ͖Δ

    (͍ΘΏΔ SPA Ϟʔυ)
    https://nuxt.com/docs/guide/concepts/rendering#client-side-rendering

    View full-size slide

  64. ΫϥΠΞϯταΠυϨϯμϦϯά (CSR)
    • Pros


    • αʔόʔίετ͕͔͔Βͳ͍


    • ։ൃ͸ϒϥ΢β؀ڥͷΈΛҙࣝ͢Ε͹Α͍


    • Cons


    • ύϑΥʔϚϯε


    • SEO

    View full-size slide

  65. Nuxt 3͔Βαϙʔτ͢Δ


    ϨϯμϦϯά

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. ΤοδαΠυϨϯμϦϯά(ESR)
    • ҎԼͷΤοδ؀ڥΛ࣋ͭϓϥοτϑΥʔϜʹσϓϩ
    ΠͰ͖Δ


    • Cloudflare Pages


    • Vercel Edge Functions


    • Netlify Edge Functions


    • Lagon

    View full-size slide

  69. ΤοδαΠυϨϯμϦϯά(ESR)
    • σϓϩΠ͸ɺҎԼͷΑ͏ʹNitro ͷϓϦηοτΛࢦ
    ఆ͢Δ (Cloudflare Pages ͸θϩίϯϑΟά)


    • nuxt.con
    fi
    g ͷέʔε




    • ؀ڥม਺ͷέʔε

    $ NITRO_PRESET=vercel-edge nuxi build

    View full-size slide

  70. ΤοδαΠυϨϯμϦϯά(ESR)
    • h3 ͕ v1.8 Ҏ͔߱Β
    Web ඪ४ API
    (Request/Response,
    ReadableStream) ͱΠ
    ϯςάϨʔγϣϯͰ͖
    ΔΑ͏ʹͳͬͨ


    • ࠓޙ͞ΒʹରԠϓϥο
    τϑΥʔϜ͕૿͑Δ
    https://twitter.com/_pi0_/status/1686911793954729984

    View full-size slide

  71. ࠓޙ Nuxt Ͱಋೖ͞ΕΔ


    ಛघͳϨϯμϦϯά

    View full-size slide

  72. ⚠ ஫ҙ ⚠


    ͜Ε͔Β࿩͢͜ͱ͸


    ·࣮ͩݧతػೳঢ়ଶ & WIP

    View full-size slide

  73. ৽ͨʹಋೖ͞ΕΔಛघͳϨϯμϦϯά
    • Nuxt Server Components


    • Nuxt Island

    View full-size slide

  74. Nuxt Server Components

    View full-size slide

  75. Nuxt Server Components
    • ίϯϙʔωϯτΛαʔόʔ্ͰϨϯμϦϯάͯ͠ɺ
    ϨϯμϦϯά͞ΕͨίϯϙʔωϯτͷHTMLΛϒϥ
    ΢β্ʹࠩ͠ࠐΉ
    ϒϥ΢β αʔόʔ
    Server


    Component
    Ϩϯμϥ


    (Nitro)
    Server


    Component
    ϦΫΤετ(fetch)
    HTMLจࣈྻ (payload)
    ϨϯμϦϯά

    View full-size slide

  76. Nuxt Server Comonents ͸ 2 छྨ͋Δ
    • Standalone Server Components


    ୯ಠͰಈ࡞͢Δ΋ͷ


    • Paired with a `.client` component


    ϒϥ΢β্ͰͷΈಈ࡞͢Δίϯϙʔωϯτͱ૊߹ͤ
    Λ૝ఆͯ͠ಈ͘΋ͷ

    View full-size slide

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

    View full-size slide

  78. ͱ͜ΖͰ `.client` ίϯϙʔωϯτͱ͸ʁ
    • ϒϥ΢β(ΫϥΠΞϯτ)ͰͷΈϨϯμϦϯά͞ΕΔ
    (CSR) ͞ΕΔίϯϙʔωϯτͷ͜ͱɻ


    • CSR ͍ͤͨ͞ର৅ίϯϙʔωϯτͷϑΝΠϧ໊ʹ
    `.client` ͷαϑΟοΫεΛೖΕΔ

    View full-size slide

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

    View full-size slide

  80. Standalone Server Components ͷ࢖͍ํ
    • ϑΝΠϧ໊ʹαϑΟοΫε `.server` ೖΕͯఆٛ


    • ࢖͏࣌͸௨ৗͷίϯϙʔωϯτͷ࢖͍ํͱಉ͡
    Nuxt ͸ `.server` ͳίϯϙʔωϯτΛϏϧυ࣌ʹ


    ΫϥΠΞϯτʹ഑৴͢Δ JS ʹόϯυϧ͠ͳ͍ʂ


    αʔόʔαΠυͷΈόϯυϧ

    View full-size slide

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

    View full-size slide

  82. Paired with a `.client` component ͷ࢖͍ํ
    • ϑΝΠϧ໊ʹαϑΟοΫε `.client`ɺ`.server`Λ


    • ࢖͏࣌͸௨ৗͷίϯϙʔωϯτͷ࢖͍ํͱಉ͡
    ͨͩɺϋΠυϨʔγϣϯϛεϚον͕ى͖ͳ͍Α͏ʹ
    ͠ͳ͍ͱ͍͚ͳ͍

    View full-size slide

  83. Nuxt Server Components ͷར఺
    • ΫϥΠΞϯτͷόϯυϧαΠζΛݮΒͤΔ


    • ηΩϡΞʹͳΔ


    • αʔόʔ͕ෆཁͳ੩తϗεςΟϯάͰ΋ಈ͔ͤΔ


    • ௨ৗͷίϯϙʔωϯτͱޓ׵ੑ͕͋Δ

    View full-size slide

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

    View full-size slide

  85. Nuxt Island ͱ͸
    • Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ


    • `` ίϯϙʔωϯτͰΞΠϥϯυΛߏங
    Ͱ͖Δ
    https://nuxt.com/docs/api/components/nuxt-island#nuxtisland

    View full-size slide

  86. ΞΠϥϯυΞʔΩςΫνϟͱ͸🏝
    • ΞΠϥϯυΞʔΩςΫνϟͷ
    ໋໊ऀ͸ Katie Sylor-Miller ࢯ


    • ϖʔδ಺ʹ੩త෦෼ͱಈత෦
    ෼Λಉډͤ͞Δ͜ͱ͕Ͱ͖Δ


    • ඞཁͳλΠϛϯάͰ JS ͕
    ϩʔυ͞ΕΔ͜ͱͰɺ෦෼త
    ͳϋΠυϨʔγϣϯ͕Մೳ
    https://docs.astro.build/ja/concepts/islands/
    ੩తͳ෦෼Λʮւʯಈతͳ෦෼Λʮౡʯͱଊ͑ͨϝλϑΝ

    View full-size slide

  87. Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ͸Կ͕ҧ͏ʁ
    • `` ίϯϙʔωϯτͰϨϯμϦϯά͞Ε
    Δίϯςϯπ͸੩తίϯςϯπ


    • Nuxt ͷ৔߹͸ΞΠϥϯυΛ੩తͱͯ͠ॲཧ͢Δ


    • ΞΠϥϯυ͸ΫϥΠΞϯτͷ JS ʹόϯυϧͯ͠഑
    ৴͠ͳ͍
    Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ͸


    ಈతͳ෦෼Λʮւʯ੩తͳ෦෼Λʮౡʯͱ͢Δ


    ٯͷΞϓϩʔν

    View full-size slide

  88. Nuxt Island ͷϢʔεέʔε
    • ݱ࣌఺ (v-tokyo#18) Ͱ͸ɺύϑΥʔϚϯε޲্


    • ϦϞʔτιʔεͷΞΠϥϯυΛϨϯμϦϯά͢Δ͜
    ͱ͕Ͱ͖ΔͷͰϚΠΫϩϑϩϯτΤϯυతͳ༻్΋
    Մೳ͔΋

    View full-size slide

  89. ΋͔ͯ͠͠ Nuxt Island ͸ Nuxt Server Components?
    • ݱ࣌఺ (v-tokyo#18) Ͱ͸ Yes


    • Nuxt Server Components ͕ Nuxt Island Λ֦ுͯ͠
    ࣮૷͍ͯ͠Δ


    • ͕ɺNuxt Server Components ͸·ͩൃల్্ͷͨ
    ΊࠓޙมΘΔՄೳੑ͕͋Δ

    View full-size slide

  90. Nuxt Server Components ͷϩʔυϚοϓ
    • ϦϞʔτιʔεରԠ

    ଞαΠτͷ Nuxt Server Components ͷಡࠐΈɻ

    ͜Ε͕Ͱ͖Δͱ Nuxt Microservices ͕Ͱ͖ΔΑ͏ʹͳ
    ΔΒ͍͠ɻ

    (طʹ࣮૷ࡁΈɻv3.7ͰϦϦʔε༧ఆ)


    • ஗ԆϩʔυରԠ

    Nuxt Server Components ϩʔυதʹφϏήʔγϣϯΛ
    ๦͛ͳ͍Α͏ϑΥʔϧόοΫΛදࣔͰ͖ΔΑ͏ʹͳΔ

    (࣮૷ࡁΈ & ϦϦʔεࡁΈ)
    https://roe.dev/blog/nuxt-server-components#roadmap

    View full-size slide

  91. Nuxt Server Components ͷϩʔυϚοϓ
    • ΠϯλϥΫςΟϒରԠ

    slots Ҏ֎Ͱ΋ΠϯλϥΫςΟϒͳίϯϙʔωϯτ
    ͷಈ࡞ΛՄೳʹ͢Δ (ະ࣮૷)


    • `` ίϯϙʔωϯτ

    `` ίϯϙʔωϯτͷΑ͏ʹλάͷதʹ
    ͋ΔϞϊΛ SSR ͢ΔΑ͏ࣗಈม׵ (ະ࣮૷)
    https://roe.dev/blog/nuxt-server-components#roadmap

    View full-size slide

  92. Nuxt Server Components ͷϩʔυϚοϓ
    • ϩʔυϚοϓͷਐḿঢ়گ
    ͸ GitHub Issues Ͱ؅ཧ
    ͞Ε͍ͯΔ

    https://github.com/nuxt/nuxt/issues/
    19772

    View full-size slide

  93. Nuxt ͷ։ൃπʔϧ

    View full-size slide

  94. Nuxt DevTools
    • Nuxt 3 ͔ΒΑΓΑ͍ DX Λఏڙ͢ΔͨΊʹ Nuxt ʹ
    ಛԽͨ͠ DevTools ͕ Nuxt Modules Ͱఏڙ͞ΕΔ
    Α͏ʹͳͬͨ

    https://devtools.nuxtjs.org/

    View full-size slide

  95. Nuxt DevTools ͸௒ศརʂ
    • Nuxt Ͱ WebΞϓϦΛ࡞Δਓ΍ Nuxt ΤίγεςϜΛ
    ։ൃ͢Δਓʹ΋Α͍ DX Λఏڙͯ͘͠ΕΔ


    • ϑϨʔϜϫʔΫʹΑͬͯந৅Խ͞Ε͍ͯΔ෦෼΋ಈ
    ͖Λ֬ೝͰ͖Δ


    • Կ͕Ͱ͖Δ͔͸ৄࡉ͸ Nuxt ެࣜϒϩάͰʂ

    https://nuxt.com/blog/introducing-nuxt-devtools

    View full-size slide

  96. ͦͷଞ Nuxt ຊମपΓͰ

    ࠓਐΊ͍ͯΔ͜ͱ

    View full-size slide

  97. ৽͍͠ΠϯςάϨʔγϣϯͷఏڙΛݕ౼͍ͯ͠Δ
    • Nuxt Scripts


    • Nuxt Fonts


    • Nuxt Assets


    • Google Chome Aurora νʔϜͱ࿈ܞͯ͠ಈ͍͍ͯΔ


    • ·ͩݱࡏ RFC Ͱٞ࿦ϑΣʔζ
    https://twitter.com/danielcroe/status/1677261172427333632

    View full-size slide

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


    • RFC

    https://github.com/nuxt/nuxt/discussions/22016

    View full-size slide

  99. Nuxt Fonts
    • ։ൃऀ͕ Nuxt ΞϓϦͷϑΥϯτΛ؆୯ʹઃఆͰ͖Δ
    Α͏ʹ͠Α͏ͱ͍ͯ͠Δ


    • ͞·͟·ଘࡏ͢ΔWebϑΥϯτΛϓϩόΠμʔͰऔΓ
    ѻ͍ΒΕΔΑ͏ʹ͢Δ


    • Nuxt Assets ͱ΋࿈ಈͯ͠ϏϧυॲཧͰϑΥϯτΛॲ
    ཧ͠ɺϑΥϯτ/ϑΥϯτCSSͷμ΢ϯϩʔυपΓͷ࠷
    దԽ΋ݕ౼͍ͯ͠Δ


    • RFC

    https://github.com/nuxt/nuxt/discussions/22014

    View full-size slide

  100. Nuxt Assets
    • ։ൃऀ͕αʔυύʔςΟʔ͕ఏڙ͢ΔΑ͏ͳΞηοτ
    ΛϓϩάϥϚϒϧʹϩʔυॲཧͰ͖Δ࢓૊ΈΛఏڙ͠
    Α͏ͱ͍ͯ͠Δ


    • എܠ: Ξηοτ (εΫϦϓτɺϑΥϯτɺCSSͳͲ) ͸
    αʔυύʔςΟʔͷґଘؔ܎΍ͦΕͧΕͷҟͳΔ
    ΩϟογϡઓུʹΑͬͯϩʔυ͕೉͘͠ɺϨϯμϦϯ
    άΛϒϩοΫ͢ΔͷͰύϑΥʔϚϯε௿ԼͷݪҼʹ
    ͳ͍ͬͯΔ


    • RFC

    https://github.com/nuxt/nuxt/discussions/22012

    View full-size slide

  101. Nuxt Studio
    • Nuxt Λ࢖ͬͨ CMS αʔϏε


    • ݱࡏ beta (ॱ࣍ট଴੍)


    • GitHub ͱ࿈ܞ͍ͯ͠ΔͨΊ
    ؆୯ʹϗεςΟϯάͰ͖Δ

    (GitHub Pages ʹσϓϩΠͰ
    ͖Δ)


    • ΋ͪΖΜଞͷϓϥοτϗʔϜ
    ʹ΋σϓϩΠՄೳ
    https://nuxt.studio/

    View full-size slide

  102. Vue.js ͷಈ޲
    • ͜͜࠷ۙ͸େ͖ͳػೳϦϦʔε͸ͳ͘ɺSFC पΓ
    ͷ DX վળʹऔΓ૊ΜͰ͍Δ


    • Vue ެࣜपΓͷΤίγεςϜͰ͸ Vue ຊମͱ͍ͬ
    ͠ΐʹऔΓ૊ΜͰ͖ͨ Volar ͕҆ఆԽ


    • Volar ͸ Volar.js ͱͯ͠ Vue.js Ҏ֎ͷΤίγεςϜ
    ʹ DX ఏڙΛ࢝Ί͍ͯΔ

    View full-size slide

  103. Nuxt ͷಈ޲
    • Vue 3 ͕ϦϦʔε͞Ε͔ͯΒ 2೥ܦաΑ͏΍͘ Nuxt 3 ͕
    ϦϦʔε͞Εͨ


    • Nuxt 3 ͷίΞٕज़ Nitro ͸Ͳ͜Ͱ΋αʔόʔ͕ಈ࡞͢Δ
    Α͏֦ுੑߴ͘ઃܭ͞Ε͍ͯΔ


    • ͦͷͨΊɺ͜͜࠷ۙͷ Web ϑϩϯτΤϯυपΓͷτϨ
    ϯυʹॊೈʹରԠՄೳʹͳ͍ͬͯΔ


    • ·ͨ DX ʹ΋ྗΛೖΕ͓ͯΓɺDevTools ΍ Webϑϩϯ
    τΤϯυͷ DX ΛߴΊΔͨΊʹ৽͍͠औΓ૊Έ΋࢝Ίͯ
    ͍Δ

    View full-size slide

  104. Vue Fes Japan 2023 ʹߦ͜͏ʂ
    • Vue.jsɺNuxt ɺVite ͦͯ͠ΤίγεςϜͷ։ൃʹؔ
    Θ͍ͬͯΔίΞνʔϜ͕ήετεϐʔΧʔͱͯ͠དྷ
    ೔ͯ͠ηογϣϯͰ࿩͠·͢ʂ


    • ࠓ೔ͷ࿩Λ౿·͑ͭͭɺͦ͏ͨ͠ํʑͷηογϣϯ
    Λฉ͍ͯ͞Βʹਂ۷ͬͯ΋Β͑Ε͹ͱʂ


    • ·ͨɺίϛϡχςΟ͔Βͷັྗతͳ CFP ηογϣ
    ϯ΋͋ΔͷͰੋඇࢀՃָͯ͠͠ΜͰ͍ͬͯ΋Β͑Ε
    ͹ͱʂ

    View full-size slide

  105. Thank You!



    View full-size slide