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

Nuxt3への移行プロセス とその結果

Nuxt3への移行プロセス とその結果

【3/24@オンライン開催】エイチーム×レバレジーズ フロントエンド勉強会
https://ateam.connpass.com/event/276968/

での発表資料

# 技術

Nuxt2, Nuxt Bridge, Nuxt3, TypeScript, Vite

Tech Leverages

April 03, 2023
Tweet

More Decks by Tech Leverages

Other Decks in Technology

Transcript

  1. 自己紹介 古庄 和也(25歳) • 経歴: ◦ 2020年4月 レバレジーズ株式会社 新卒入社 •

    出身: ◦ 大分県臼杵市 • 業務: ◦ 企業向けレバテックプラットフォームの PdM兼開発全般 • 趣味: ◦ ゴルフ、シーシャ • 2023年の目標: ◦ 沖縄のゴルフコンペで優勝すること
  2. Nuxt3の特徴 主要な変更点 • Vue3のサポート ◦ CompositionAPI , フラグメント, 仮想DOMの最適化(静的ツリー, 静的プロパティ,

    メモ化...etc) • Viteによるビルドの高速化 ◦ WebPackではなくViteをデフォルトビルドツールに採用 • NitroEngineによるパフォーマンス改善 ◦ SSRとサーバーレスデプロイのパフォーマンスを大幅に向上 (最大75倍の軽量化/高速化) • TypeScriptをデフォルトサポート ◦ TypeScriptの型チェックに対応
  3. Nuxt3の特徴 デメリット • 移行コスト ◦ プロジェクトの設定やディレクトリ構造に変更が必要 ◦ 一部制限されている機能が存在するため代替手段を見つける必要 • プラグイン互換性

    ◦ Nuxt3では内部のアーキテクチャが大幅に変更されているため、 Nuxt2系で使用していたプラグ インやミドルウェアがそのまま動作しない ことがある ◦ 互換性の問題解決のための手間が発生する可能性 • 学習コスト ◦ Vue3やViteに慣れていない開発者にとっては、学習ハードルが高い場合がある
  4. Nuxt3への移行プロセス ステップ1:Nuxt2系からNuxt Bridgeへの移行(10人日) 移行に必要な作業:基本は公式の手順に準拠 • Nuxt-edgeへの切り替え、Nuxt-Bridgeの導入 • Compistion API のマイグレーション

    • CJS から ESM へのマイグレーション • 互換性のないモジュールの代替 ◦ @nuxtjs/proxy の代わりに自前でプロキシを用意した実装例→ • nuxi での動作検証 • リグレッションテスト, シナリオテスト
  5. • 移行に必要な作業 ◦ @nuxt/bridge→Nuxt3パッケージへのアップデート ◦ Nuxt.configの変更 ◦ コンポーネントとプラグインの更新 ▪ Vue3に対応するため

    CompositionAPIや新しいディレクティブ構文に合わせる ◦ ミドルウェアとサーバーミドルウェアの更新 ◦ ストアの移行 ▪ Nuxt3ではVuexではなくPiniaが推奨されている ◦ ビルドとデプロイ設定の更新 ◦ リグレッションテスト, シナリオテスト Nuxt3への移行プロセス ステップ2:Nuxt BridgeからNuxt3系への移行(約30人日)
  6. • 辛かった事象(一部抜粋) ◦ useRoute 関数など、利用箇所によって正しい値が取れない ▪ layoutで利用するとundefinedが取得されてしまうなど ◦ viteのproxyサーバーが本番環境で使えると思ったら使えなかった ▪

    server.proxyオプションは開発用で、 npm run devでないと利用できない ◦ その他公式ドキュメントの整備が完了してなくて検索してやってみて NGを繰り返す ▪ Nuxt Configuration Reference ▪ https://github.com/nuxt/nuxt/issues/13998 Nuxt3への移行プロセス ステップ2:Nuxt BridgeからNuxt3系への移行(約30人日)
  7. Nuxt3に移行した結果 良かったこと • 移行によるパフォーマンス改善 ◦ サイトのロード時間の短縮 ...! ◦ バンドルサイズ約40%削減...! •

    新機能・開発効率の向上 ◦ CompositionAPIによるコードの簡潔化 ◦ コンポーネントの静的型付けによる型安全な実装が可能に ◦ 開発サーバーのビルド時間大幅に改善 (PageSpeed Insightsで測定)
  8. Leverages スライドテンプレート 基本カラー 基本フォントサイズ アイコン(欲しいモノがあれば言ってくださいませ!) #333333 #fbfbfb #95100e メインタイトル :

    42 サブタイトル : 24 本文 : 16 (あくまで基本なのでご自身でカスタマイズしてもらって大丈夫です :D)
  9. 目次 • 始めに • 内容1 ◦ 1の内容 • 内容2 ◦

    2の内容1 ◦ 2の内容2 • 内容3 • まとめ • さいごに