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. 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 ͷϦϦʔελΠϜϥΠϯ • 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. 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೥͔͔͍ۙͬͯ͘Δ ͳͥͰ͠ΐ͏ʁ
  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 վળʹ͍ͭͯϑΟʔυόοΫΛಘͭͭ ৻ॏʹۛຯ͍ͯͬͨ͠ • ྫ: Reactivity Transform
  8. <script setup> Ͱͷ TypeScript पΓDX վળ • TypeScript ͷ Generics

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

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

    Ͱ slots ΛܕΛޮ͔ͤΒΕΔΑ͏ʹͳͬ ͨ
  11. de fi neProps ͷ෼ׂ୅ೖ • ݩʑ͸ Reactivity Transform Ͱαϙʔτ͢Δ͸ͣ ͩͬͨ΋ͷ

    • σϑΥϧτ஋ͷఆٛΛ withDefaults ࢖Θͳͯ͘΋ JavaScript ͷ෼ׂ୅ೖߏจͰ props ΛఆٛͰ͖Δ
  12. de fi neModel • <script setup> Ͱ v-model ͰόΠϯυ͢Δ props

    Λ ఆٛͰ͖Δ syntax sugar ͷΑ͏ͳϚΫϩ 3.2 3.3 ʙ
  13. ͕ͩɺ৽ͨͳ໰୊͕ੜ͡Δ͜ͱ͕Θ͔ͬͨ • Reactivity Transform ʹΑΔੜ͡Δ໰୊఺ • ίʔυͷϦΞΫςΟϏςΟίϯςΩετ͕෼͔Γ ͮΒ͘ͳΔ • Reactivity

    Transform ϕʔεͷίʔυͱͦΕΛ࢖ Θͳ͍ίʔυؒͷίϯςΩετεΠον • ref Λཁٻ͢Δ I/F Λ࣋ͬͨؔ਺ͳͲ͕ಈ͔ͳ͘ ͳΔ
  14. ΋͠ɺ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
  15. de fi neOptions • <script setup> Ͱ Options API ͕࢖͑ΔΑ͏ʹͳͬ

    ͨ <script> ͕ͳͯ͘΋ <script setup> ͷΈͰ Options API ΛఆٛͰ͖ΔΑ͏ʹͳͬͨ
  16. ެࣜҰཡ • 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
  17. ެࣜҰཡ • 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 ͱؔ࿈ͯ͠େ͖͍ಈ͖͕͋ͬͨ
  18. vue-language-tools ͱ͸ • Volar ʹมΘΔ৽໊͍͠শ • Volar v1 ͸ 2022/10/10

    ʹϦϦʔε͞Εͨ • ͦͷޙίΞ෦෼͕ Volar.js ͱͯ͠நग़͞ΕɺVue ؔ ࿈ͷϞδϡʔϧɺύοέʔδ͕ vue-language-tools ͱͳͬͨ
  19. VitePress ͸ʁ • ͪΐ͏Ͳ͜ͷλΠϛϯά (v-tokyo#18) Ͱ v1.0 RC ͕ ϦϦʔε͞Εͨʂ

    https://twitter.com/KiaKing85/status/1688869807733772288
  20. Nuxt 3 ʹ͍ͭͯೖ໳͍ͨ͠ํ͸ 💁 • ushironoko ͞ΜͷεϥΠυΛࢀߟʹʂ 
 Nuxt 3

    ೖ໳͍ͨ͠ํʹ͸ػೳ΍ Composables ʹͭ ͍ͯΑ͘·ͱ·͍ͬͯΔ https://slides.com/ushironoko/beginning-nuxt-3-reiwa Nuxt3 ೖ໳ ྩ࿨ ࠷৽
  21. 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
  22. ͍ͭʹ 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
  23. ݱࡏͷ Nuxt ։ൃମ੍ • ϑϨʔϜϫʔΫνʔϜϝϯόʔʹΑͬͯίϛϡχ ςΟͷϑΟʔυόοΫ & RFC ϕʔεʹ։ൃ͍ͯ͠Δ •

    2023೥͔Β Nuxt 3 ։ൃ্ཱ͔ͪ͛ΒϦʔυͯͨ͠ Pooya ࢯ͔Β Daniel ࢯʹότϯλον 
 https://nuxt.com/blog/vision-2023#nuxt-a-vision-for-2023 • Pooya ࢯ͸ݱࡏ unjs & nitro ʹϑΥʔΧε
  24. ৽͍͠ Nuxt ͷΞʔΩςΫνϟ • ίΞΤϯδϯ: nuxt • όϯυϥ: @nuxt/vite-builder &

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

    @nuxt/webpack-builder • CLI: nuxi • αʔόʔΤϯδϯ: nitro • ։ൃΩοτ: @nuxt/kit • Nuxt 2 ϒϦοδ: @nuxt/bridge Nitro ͸৽͍͠ Nuxt Λࢧ͑ΔίΞٕज़
  26. Nitro ͱ͸ • Ͳ͜Ͱ΋ಈ࡞͢Δ WebαʔόʔΛߏங͢ΔͨΊͷϑ ϨʔϜϫʔΫ • ϓϩδΣΫτ։࢝࣌͸ɺΤοδαΠυͰಈ࡞͢ΔΑ ͏໨తͰαʔόʔΤϯδϯΛ࡞͍ͬͯͬͨ •

    ίʔυωʔϜ: sigma 
 https://www.npmjs.com/package/@nuxt/sigma • express Λ࢖ΘͣʹϑϧεΫϥον͔Β࡞ͬͨ • h3: https://github.com/unjs/h3
  27. 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
  28. Nitro ͸ unjs ͷҰ෦ • unjs ͷ OSS ͱͯ͠࡞ΒΕ ͍ͯΔ

    
 Uni fi ed JavaScript Tools: https://github.com/unjs • unjs ʹ͍ͭͯ͸ CFP ηογϣ ϯτʔΫ͕ Vue Fes Japan 2023 ʹ͋ΔͷͰׂѪʂ
  29. 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
  30. ϢχʔόαϧϨϯμϦϯά (SSR) • Pros • ύϑΥʔϚϯε͕Α͍ • SEO 
 •

    Cons • αʔόʔίετ͕͔͔Δ • ։ൃ࣌ʹαʔόʔͱϒϥ΢βΛҙࣝ͠ͳ͍ͱ͍͚ ͳ͍
  31. ΫϥΠΞϯταΠυϨϯμϦϯά (CSR) • nuxt.con fi g Ͱ `ssr: false` Ͱ༗ޮʹͰ͖Δ

    
 (͍ΘΏΔ SPA Ϟʔυ) https://nuxt.com/docs/guide/concepts/rendering#client-side-rendering
  32. ϋΠϒϦουϨϯμϦϯά • Nitro ͷ `routeRules` Ͱϖʔδ/ϧʔτ୯ҐͰ SSR / CSR /

    ISR / SWR ͳͲϨϯμϦϯάΛࡉ੍͔͘ޚͰ ͖Δ https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering
  33. ΤοδαΠυϨϯμϦϯά(ESR) • σϓϩΠ͸ɺҎԼͷΑ͏ʹNitro ͷϓϦηοτΛࢦ ఆ͢Δ (Cloudflare Pages ͸θϩίϯϑΟά) • nuxt.con

    fi g ͷέʔε 
 
 
 
 • ؀ڥม਺ͷέʔε 
 $ NITRO_PRESET=vercel-edge nuxi build
  34. ΤοδαΠυϨϯμϦϯά(ESR) • h3 ͕ v1.8 Ҏ͔߱Β Web ඪ४ API (Request/Response,

    ReadableStream) ͱΠ ϯςάϨʔγϣϯͰ͖ ΔΑ͏ʹͳͬͨ • ࠓޙ͞ΒʹରԠϓϥο τϑΥʔϜ͕૿͑Δ https://twitter.com/_pi0_/status/1686911793954729984
  35. Nuxt Server Comonents ͸ 2 छྨ͋Δ • Standalone Server Components

    
 
 ୯ಠͰಈ࡞͢Δ΋ͷ • Paired with a `.client` component 
 
 ϒϥ΢β্ͰͷΈಈ࡞͢Δίϯϙʔωϯτͱ૊߹ͤ Λ૝ఆͯ͠ಈ͘΋ͷ
  36. Standalone Server Components ͷ࢖͍ํ • ϑΝΠϧ໊ʹαϑΟοΫε `.server` ೖΕͯఆٛ • ࢖͏࣌͸௨ৗͷίϯϙʔωϯτͷ࢖͍ํͱಉ͡

    Nuxt ͸ `.server` ͳίϯϙʔωϯτΛϏϧυ࣌ʹ ΫϥΠΞϯτʹ഑৴͢Δ JS ʹόϯυϧ͠ͳ͍ʂ αʔόʔαΠυͷΈόϯυϧ
  37. Paired with a `.client` component • `.server` ίϯϙʔωϯτ͸ SSR ͞Εͯɺ`.client`

    ί ϯϙʔωϯτ͸ɺϚ΢ϯτ͞Εͨ (`onMounted`)ޙ ʹ CSR ͞ΕΔ
  38. Paired with a `.client` component ͷ࢖͍ํ • ϑΝΠϧ໊ʹαϑΟοΫε `.client`ɺ`.server`Λ •

    ࢖͏࣌͸௨ৗͷίϯϙʔωϯτͷ࢖͍ํͱಉ͡ ͨͩɺϋΠυϨʔγϣϯϛεϚον͕ى͖ͳ͍Α͏ʹ ͠ͳ͍ͱ͍͚ͳ͍
  39. ΋͠ Nuxt Server Components Λ࢖͏ͱ͖͸… • ·࣮ͩݧతػೳͳͷͰɺnuxt.con fi g Ͱ

    `experimental.componentIslands` ͰΦϓτΠϯΛ ๨Εͣʹʂ
  40. ΞΠϥϯυΞʔΩςΫνϟͱ͸🏝 • ΞΠϥϯυΞʔΩςΫνϟͷ ໋໊ऀ͸ Katie Sylor-Miller ࢯ • ϖʔδ಺ʹ੩త෦෼ͱಈత෦ ෼Λಉډͤ͞Δ͜ͱ͕Ͱ͖Δ

    • ඞཁͳλΠϛϯάͰ JS ͕ ϩʔυ͞ΕΔ͜ͱͰɺ෦෼త ͳϋΠυϨʔγϣϯ͕Մೳ https://docs.astro.build/ja/concepts/islands/ ੩తͳ෦෼Λʮւʯಈతͳ෦෼Λʮౡʯͱଊ͑ͨϝλϑΝ
  41. Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ͸Կ͕ҧ͏ʁ • `<NuxtIsland>` ίϯϙʔωϯτͰϨϯμϦϯά͞Ε Δίϯςϯπ͸੩తίϯςϯπ • Nuxt ͷ৔߹͸ΞΠϥϯυΛ੩తͱͯ͠ॲཧ͢Δ •

    ΞΠϥϯυ͸ΫϥΠΞϯτͷ JS ʹόϯυϧͯ͠഑ ৴͠ͳ͍ Nuxt ൛ΞΠϥϯυΞʔΩςΫνϟ͸ ಈతͳ෦෼Λʮւʯ੩తͳ෦෼Λʮౡʯͱ͢Δ ٯͷΞϓϩʔν
  42. ΋͔ͯ͠͠ Nuxt Island ͸ Nuxt Server Components? • ݱ࣌఺ (v-tokyo#18)

    Ͱ͸ Yes • Nuxt Server Components ͕ Nuxt Island Λ֦ுͯ͠ ࣮૷͍ͯ͠Δ • ͕ɺNuxt Server Components ͸·ͩൃల్্ͷͨ ΊࠓޙมΘΔՄೳੑ͕͋Δ
  43. Nuxt Server Components ͷϩʔυϚοϓ • ϦϞʔτιʔεରԠ 
 ଞαΠτͷ Nuxt Server

    Components ͷಡࠐΈɻ 
 ͜Ε͕Ͱ͖Δͱ Nuxt Microservices ͕Ͱ͖ΔΑ͏ʹͳ ΔΒ͍͠ɻ 
 (طʹ࣮૷ࡁΈɻv3.7ͰϦϦʔε༧ఆ) • ஗ԆϩʔυରԠ 
 Nuxt Server Components ϩʔυதʹφϏήʔγϣϯΛ ๦͛ͳ͍Α͏ϑΥʔϧόοΫΛදࣔͰ͖ΔΑ͏ʹͳΔ 
 (࣮૷ࡁΈ & ϦϦʔεࡁΈ) https://roe.dev/blog/nuxt-server-components#roadmap
  44. Nuxt Server Components ͷϩʔυϚοϓ • ΠϯλϥΫςΟϒରԠ 
 slots Ҏ֎Ͱ΋ΠϯλϥΫςΟϒͳίϯϙʔωϯτ ͷಈ࡞ΛՄೳʹ͢Δ

    (ະ࣮૷) • `<ServerOnly>` ίϯϙʔωϯτ 
 `<ClientOnly>` ίϯϙʔωϯτͷΑ͏ʹλάͷதʹ ͋ΔϞϊΛ SSR ͢ΔΑ͏ࣗಈม׵ (ະ࣮૷) https://roe.dev/blog/nuxt-server-components#roadmap
  45. Nuxt DevTools • Nuxt 3 ͔ΒΑΓΑ͍ DX Λఏڙ͢ΔͨΊʹ Nuxt ʹ

    ಛԽͨ͠ DevTools ͕ Nuxt Modules Ͱఏڙ͞ΕΔ Α͏ʹͳͬͨ 
 https://devtools.nuxtjs.org/
  46. Nuxt DevTools ͸௒ศརʂ • Nuxt Ͱ WebΞϓϦΛ࡞Δਓ΍ Nuxt ΤίγεςϜΛ ։ൃ͢Δਓʹ΋Α͍

    DX Λఏڙͯ͘͠ΕΔ • ϑϨʔϜϫʔΫʹΑͬͯந৅Խ͞Ε͍ͯΔ෦෼΋ಈ ͖Λ֬ೝͰ͖Δ • Կ͕Ͱ͖Δ͔͸ৄࡉ͸ Nuxt ެࣜϒϩάͰʂ 
 https://nuxt.com/blog/introducing-nuxt-devtools
  47. ৽͍͠ΠϯςάϨʔγϣϯͷఏڙΛݕ౼͍ͯ͠Δ • Nuxt Scripts • Nuxt Fonts • Nuxt Assets

    • Google Chome Aurora νʔϜͱ࿈ܞͯ͠ಈ͍͍ͯΔ • ·ͩݱࡏ RFC Ͱٞ࿦ϑΣʔζ https://twitter.com/danielcroe/status/1677261172427333632
  48. Nuxt Fonts • ։ൃऀ͕ Nuxt ΞϓϦͷϑΥϯτΛ؆୯ʹઃఆͰ͖Δ Α͏ʹ͠Α͏ͱ͍ͯ͠Δ • ͞·͟·ଘࡏ͢ΔWebϑΥϯτΛϓϩόΠμʔͰऔΓ ѻ͍ΒΕΔΑ͏ʹ͢Δ

    • Nuxt Assets ͱ΋࿈ಈͯ͠ϏϧυॲཧͰϑΥϯτΛॲ ཧ͠ɺϑΥϯτ/ϑΥϯτCSSͷμ΢ϯϩʔυपΓͷ࠷ దԽ΋ݕ౼͍ͯ͠Δ • RFC 
 https://github.com/nuxt/nuxt/discussions/22014
  49. Nuxt Assets • ։ൃऀ͕αʔυύʔςΟʔ͕ఏڙ͢ΔΑ͏ͳΞηοτ ΛϓϩάϥϚϒϧʹϩʔυॲཧͰ͖Δ࢓૊ΈΛఏڙ͠ Α͏ͱ͍ͯ͠Δ • എܠ: Ξηοτ (εΫϦϓτɺϑΥϯτɺCSSͳͲ)

    ͸ αʔυύʔςΟʔͷґଘؔ܎΍ͦΕͧΕͷҟͳΔ ΩϟογϡઓུʹΑͬͯϩʔυ͕೉͘͠ɺϨϯμϦϯ άΛϒϩοΫ͢ΔͷͰύϑΥʔϚϯε௿ԼͷݪҼʹ ͳ͍ͬͯΔ • RFC 
 https://github.com/nuxt/nuxt/discussions/22012
  50. Nuxt Studio • Nuxt Λ࢖ͬͨ CMS αʔϏε • ݱࡏ beta

    (ॱ࣍ট଴੍) • GitHub ͱ࿈ܞ͍ͯ͠ΔͨΊ ؆୯ʹϗεςΟϯάͰ͖Δ 
 (GitHub Pages ʹσϓϩΠͰ ͖Δ) • ΋ͪΖΜଞͷϓϥοτϗʔϜ ʹ΋σϓϩΠՄೳ https://nuxt.studio/
  51. Vue.js ͷಈ޲ • ͜͜࠷ۙ͸େ͖ͳػೳϦϦʔε͸ͳ͘ɺSFC पΓ ͷ DX վળʹऔΓ૊ΜͰ͍Δ • Vue

    ެࣜपΓͷΤίγεςϜͰ͸ Vue ຊମͱ͍ͬ ͠ΐʹऔΓ૊ΜͰ͖ͨ Volar ͕҆ఆԽ • Volar ͸ Volar.js ͱͯ͠ Vue.js Ҏ֎ͷΤίγεςϜ ʹ DX ఏڙΛ࢝Ί͍ͯΔ
  52. Nuxt ͷಈ޲ • Vue 3 ͕ϦϦʔε͞Ε͔ͯΒ 2೥ܦաΑ͏΍͘ Nuxt 3 ͕

    ϦϦʔε͞Εͨ • Nuxt 3 ͷίΞٕज़ Nitro ͸Ͳ͜Ͱ΋αʔόʔ͕ಈ࡞͢Δ Α͏֦ுੑߴ͘ઃܭ͞Ε͍ͯΔ • ͦͷͨΊɺ͜͜࠷ۙͷ Web ϑϩϯτΤϯυपΓͷτϨ ϯυʹॊೈʹରԠՄೳʹͳ͍ͬͯΔ • ·ͨ DX ʹ΋ྗΛೖΕ͓ͯΓɺDevTools ΍ Webϑϩϯ τΤϯυͷ DX ΛߴΊΔͨΊʹ৽͍͠औΓ૊Έ΋࢝Ίͯ ͍Δ
  53. Vue Fes Japan 2023 ʹߦ͜͏ʂ • Vue.jsɺNuxt ɺVite ͦͯ͠ΤίγεςϜͷ։ൃʹؔ Θ͍ͬͯΔίΞνʔϜ͕ήετεϐʔΧʔͱͯ͠དྷ

    ೔ͯ͠ηογϣϯͰ࿩͠·͢ʂ • ࠓ೔ͷ࿩Λ౿·͑ͭͭɺͦ͏ͨ͠ํʑͷηογϣϯ Λฉ͍ͯ͞Βʹਂ۷ͬͯ΋Β͑Ε͹ͱʂ • ·ͨɺίϛϡχςΟ͔Βͷັྗతͳ CFP ηογϣ ϯ΋͋ΔͷͰੋඇࢀՃָͯ͠͠ΜͰ͍ͬͯ΋Β͑Ε ͹ͱʂ