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

Transcript

1. Vue.js
   
   
   ΤίγεςϜಈ޲
   
   
   2023
   v-tokyo#18
   
   
   2023.08.08
   
   
   @kazupon
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

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
   

   View Slide

4. ͸͡Ίʹ
   

   View Slide

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

   View Slide

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

   View Slide

7. Vue.js
   

   View Slide

8. Vue 3
   

   View Slide

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)
   

   View Slide

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೥͔͔͍ۙͬͯ͘Δ
    
    
    ͳͥͰ͠ΐ͏ʁ
    

    View Slide

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

    View Slide

12. ͨͩɺSFCपΓͰ·ͩ໰୊఺͕…
    • TypeScript
    
    
    • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots)
    
    
    • API
    
    
    • ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ
    

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

    View Slide

13. ͨͩɺSFCपΓͰ·ͩ໰୊఺͕…
    • TypeScript
    
    
    • ܕ͕ޮ͔ͳ͍෦෼͕·ͩ͋Δ (ྫ: slots)
    
    
    • API
    
    
    • ௚ײతͰ͸ͳͯ͘࢖͍ͮΒ͍෦෼͕͋Δ
    

    (ྫ: ref ͱ reactive ʹΑΔϦΞΫςΟϏςΟ)
    SFC ͸ Vue ͷίϯηϓτͰ͋ΓίΞػೳͰ͋Δ
    
    
    Α͍ DX Λఏڙ͢ΔͨΊʹ͸͞ΒͳΔվળ͕ඞཁ
    

    View Slide

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

    View Slide

15. Vue 3.3
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. ࣮ݧతػೳ
    

    View Slide

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

    View Slide

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

    View Slide

25. Vue 3.3 Ͱ͸…
    

    View Slide

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

    View Slide

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

    View Slide

28. ͦΕ͸…
    

    View Slide

29. ৽ͨͳ໰୊ʹΑͬͯ
    
    
    Vue ͕ෳࡶʹͳͬͯ͠·͏͔Β
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

36. Vue 3.3
    
    
    ͦͷଞ
    

    View Slide

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

    View Slide

38. toRef / toValue
    • Reactivity API पΓͷศརϢʔςΟϦςΟΛఏڙ
    
    
    • toRef ͸ ref ʹਖ਼نԽ͢ΔϢʔςΟϦςΟؔ਺
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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 ͱؔ࿈ͯ͠େ͖͍ಈ͖͕͋ͬͨ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. Nuxt
    

    View Slide

51. ຊ୊ʹೖΔલʹ…
    

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

56. ͦͯ͠…
    

    View Slide

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
    

    View Slide

58. ݱࡏͷ Nuxt ։ൃମ੍
    • ϑϨʔϜϫʔΫνʔϜϝϯόʔʹΑͬͯίϛϡχ
    ςΟͷϑΟʔυόοΫ & RFC ϕʔεʹ։ൃ͍ͯ͠Δ
    
    
    • 2023೥͔Β Nuxt 3 ։ൃ্ཱ͔ͪ͛ΒϦʔυͯͨ͠
    Pooya ࢯ͔Β Daniel ࢯʹότϯλον
    

    https://nuxt.com/blog/vision-2023#nuxt-a-vision-for-2023
    
    
    • Pooya ࢯ͸ݱࡏ unjs & nitro ʹϑΥʔΧε
    

    View Slide

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

    View Slide

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

    View Slide

61. View Slide

62. Nitro ͱ͸
    • Ͳ͜Ͱ΋ಈ࡞͢Δ WebαʔόʔΛߏங͢ΔͨΊͷϑ
    ϨʔϜϫʔΫ
    
    
    • ϓϩδΣΫτ։࢝࣌͸ɺΤοδαΠυͰಈ࡞͢ΔΑ
    ͏໨తͰαʔόʔΤϯδϯΛ࡞͍ͬͯͬͨ
    
    
    • ίʔυωʔϜ: sigma
    

    https://www.npmjs.com/package/@nuxt/sigma
    
    
    • express Λ࢖ΘͣʹϑϧεΫϥον͔Β࡞ͬͨ
    
    
    • h3: https://github.com/unjs/h3
    

    View Slide

63. Nitro ͷಛ௃
    

    View Slide

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
    

    View Slide

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

    Uni
    fi
    ed JavaScript Tools:
    https://github.com/unjs
    
    
    • unjs ʹ͍ͭͯ͸ CFP ηογϣ
    ϯτʔΫ͕ Vue Fes Japan
    2023 ʹ͋ΔͷͰׂѪʂ
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

71. ϢχʔόαϧϨϯμϦϯά (SSR)
    • Pros
    
    
    • ύϑΥʔϚϯε͕Α͍
    
    
    • SEO
    

    • Cons
    
    
    • αʔόʔίετ͕͔͔Δ
    
    
    • ։ൃ࣌ʹαʔόʔͱϒϥ΢βΛҙࣝ͠ͳ͍ͱ͍͚
    ͳ͍
    

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    

    

    

    • ؀ڥม਺ͷέʔε
    

    $ NITRO_PRESET=vercel-edge nuxi build
    

    View Slide

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

    View Slide

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

    View Slide

81. ⚠ ஫ҙ ⚠
    
    
    ͜Ε͔Β࿩͢͜ͱ͸
    
    
    ·࣮ͩݧతػೳঢ়ଶ & WIP
    

    View Slide

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

    View Slide

83. Nuxt Server Components
    

    View Slide

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

    View Slide

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

    

    ୯ಠͰಈ࡞͢Δ΋ͷ
    
    
    • Paired with a `.client` component
    

    

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

94. Nuxt Island
    

    View Slide

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

    View Slide

96. ͦͷલʹ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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

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

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

     (طʹ࣮૷ࡁΈɻv3.7ͰϦϦʔε༧ఆ)
     
     
     • ஗ԆϩʔυରԠ
     

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

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

     View Slide

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

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

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

     View Slide

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

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

     View Slide

104. Nuxt ͷ։ൃπʔϧ
     

     View Slide

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

     https://devtools.nuxtjs.org/
     

     View Slide

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

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

     View Slide

107. ͦͷଞ Nuxt ຊମपΓͰ
     

     ࠓਐΊ͍ͯΔ͜ͱ
     

     View Slide

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

     View Slide

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

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

     View Slide

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

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

     View Slide

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

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

     View Slide

112. Nuxt Studio
     

     View Slide

113. Nuxt Studio
     • Nuxt Λ࢖ͬͨ CMS αʔϏε
     
     
     • ݱࡏ beta (ॱ࣍ট଴੍)
     
     
     • GitHub ͱ࿈ܞ͍ͯ͠ΔͨΊ
     ؆୯ʹϗεςΟϯάͰ͖Δ
     

     (GitHub Pages ʹσϓϩΠͰ
     ͖Δ)
     
     
     • ΋ͪΖΜଞͷϓϥοτϗʔϜ
     ʹ΋σϓϩΠՄೳ
     https://nuxt.studio/
     

     View Slide

114. ·ͱΊ
     

     View Slide

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

     View Slide

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

     View Slide

117. ࠷ޙʹ
     

     View Slide

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

     View Slide

119. Thank You!
     
     
     ❤
     

     View Slide