社内のフロントエンドLTに登壇したときに使用したスライドです。

1. Nuxt 3の
New featuresを
約5分で話す
by katuo

2. 自己紹介
● katuo
● マネーフォワード HR クラウド勤怠チーム
● 専攻： 電気電子工学科
● 趣味：釣り、スケーボー とか
● Twitter：@katuo_ai

3. ● 2021年10月中旬にNuxt 3 Public Beta版がリリースされました
参考文献：「Nuxt 3 公式ドキュメント」

4. ● 1. 最適化と改善
● 2. Vue3の公式サポート
● 3. TypeScriptの公式サポート
● 4. 開発者ツールの充実
● 5. Hybrid rendering
● 6. Cross-platformの公式サポート
● 7. Nuxt Bridge
New features

5. [1] 最適化と改善
● パフォーマンスの改善
● Webpack 5, PostCss 8, ESBuild, Viteの公式サポート

6. [1-1] パフォーマンスの改善
● 新型 Nitro server engine の誕生
○ Dynamic Code Splitting や Cold Startの最適化
引用元：「Nuxt 3 公式ドキュメント」

7. Dynamic Code Splitting
● bundleを分割することで一度に読み込むbundle sizeを減らす手法
● 非同期的に必要なbundleを読み込むが故に、ネットワークのレイテンシー
の影響を受けやすくパフォーマンスのチューニングが必要

8. [1-1] パフォーマンスの改善
● bundle sizeが約20%削減
○ SSR Modeで使うserver bundleは1MB以下に削減
● serverの起動が高速に
○ Nuxt 2のSSR Modeの起動 (npm run dev など) が遅くストレスだった
○ Hot Reloadも高速になりローカルでの開発がスムーズに

9. [1-2] Webpack 5, PostCss 8, ESBuild, Viteの公式サポート

10. [1-2] Viteを簡単に導入できる
高速で動作するビルドツール

11. [2] Vue3の公式サポート
● Composition API
● Suspense
● Vue Router 4
● … etc

12. [2-1] Composition API
● SFCのコードを可読性高く書ける
○ data, created, computed, method … などが不要に
○ setup関数にロジックをまとめて書ける
○ ロジックの再利用もしやすい
● 型推論をフル活用できる
○ thisによるany型判定が無くなった
引用元：「Vue3 公式ドキュメント」

13. [2-2] Suspense
● 非同期処理におけるコンポーネ
ント表示ロジックを、親コンポーネ
ントで一元管理することができる
引用元：「Vue3 公式ドキュメント」

14. [3] TypeScriptの公式サポート
● Nuxt 3 全体で補完や静的解析の強化
● Nuxt CLI でプロジェクトを生成すれば、TypeScriptが即利用可能

15. [4] 開発者ツールの充実
● 新 Nuxt CLI
● Global Utilities と Composable Functions の自動読み込み
● Nuxt Kit
● Nuxt Devtools の改善 (coming soon)

16. [4-1] 新 Nuxt CLI
● 初回プロジェクト生成時の、対話式の面倒な設定が無くなった
● コマンド1発で即プロジェクト生成可能に

17. [4-2] Composable Functions と Global Utilities の自動
import
● useState, useAsyncData などのimportを省略して利用できる
● nuxt-link などもimportを省略して利用できる

18. [5] Hybrid rendering (coming soon)
● 動的なページと静的なページを持つ、ハイブリッドなアプリケーションを構築できる
○ Webvitalでのパフォーマンスチューニングの幅が広がった
引用元：「Nuxt 3 公式ドキュメント」

19. [6] Cross-platformのサポート
● Runtimeに依存しない（以下の環境で動作可能）
○ Node.js
○ Deno
○ Cloudflare Workers
○ Service Workers

20. [7] Nuxt Bridge
● Nuxt 2の状態で、Nuxt 3の新機能が利用できる
● Nuxt 2系から3系のバージョンアップのハードルを下げる
引用元：「Nuxt 3 公式ドキュメント」

21. 参考文献
● Nuxt 3 公式ドキュメント
● Nuxt 3 is coming! Here's What You Need to Know

22. おわり