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

Nuxt3への移行プロセスとその結果レバレジーズ株式会社レバテック開発部 LTPtoB開発チーム古庄和也 2023/03/24

自己紹介古庄和也（25歳） • 経歴： ◦ 2020年4月レバレジーズ株式会社新卒入社 •
出身： ◦ 大分県臼杵市 • 業務： ◦ 企業向けレバテックプラットフォームの PdM兼開発全般 • 趣味： ◦ ゴルフ、シーシャ • 2023年の目標： ◦ 沖縄のゴルフコンペで優勝すること

目次 • Nuxt3への移行背景 • 移行のプロセス • 移行結果 • まとめ

Nuxt3への移行背景

・開発言語：TypeScript ・フロントエンド：Nuxt2系・バックエンド：gRPC, BFF ・アーキテクチャ：DDD, 　マイクロサービスアーキテクチャ・クラウド：　AWS(ECS,RDS,ALB/NLB ...etc) 既存システムの技術構成

・TypeScriptへのサポートがデフォルトではない ...😇 追加の設定や手動での型定義が必要かつ型定義が完全でない・Vue2のみのサポート...😇 Vue2は2023年12月31日にEOLとなり、サポートが終了・Node18系で動作しない...😇 LTSのNode18系で動かず、Node16系のEOLは今年の9月 Nuxt2系の課題

2022年11月に待望のNuxt3リリース (公式アナウンス) Nuxt2がVue2のみのサポートのため 2022年中に Vue3サポートがされている Nuxt3へのアップデートもしくは別フレームワークへの移行の必要があった

Nuxt3の特徴主要な変更点 • Vue3のサポート ◦ CompositionAPI , フラグメント, 仮想DOMの最適化(静的ツリー, 静的プロパティ,
メモ化...etc) • Viteによるビルドの高速化 ◦ WebPackではなくViteをデフォルトビルドツールに採用 • NitroEngineによるパフォーマンス改善 ◦ SSRとサーバーレスデプロイのパフォーマンスを大幅に向上 (最大75倍の軽量化/高速化) • TypeScriptをデフォルトサポート ◦ TypeScriptの型チェックに対応

Nuxt3の特徴メリット • Vue3のサポート ◦ CompositionAPI, <script setup>構文の利用でコンポーネントのロジックを柔軟かつ再利用しやすい方法で簡潔に構築可能に！ Nuxt2
Nuxt3

Nuxt3の特徴メリット • Vue3のサポート ◦ Vue3のフラグメント機能が利用できるので、余分な DOMを削除できる！ Nuxt2 Nuxt3

Nuxt3の特徴メリット • Viteによるビルド高速化 ◦ モジュールを個別にビルドし、開発サーバーの起動時間を大幅に短縮！ Wepack4 Vite (Is Vite
Better than Webpack?より引用)

Nuxt3の特徴デメリット • 移行コスト ◦ プロジェクトの設定やディレクトリ構造に変更が必要 ◦ 一部制限されている機能が存在するため代替手段を見つける必要 • プラグイン互換性
◦ Nuxt3では内部のアーキテクチャが大幅に変更されているため、 Nuxt2系で使用していたプラグインやミドルウェアがそのまま動作しないことがある ◦ 互換性の問題解決のための手間が発生する可能性 • 学習コスト ◦ Vue3やViteに慣れていない開発者にとっては、学習ハードルが高い場合がある

Nuxt3への移行プロセス

前提と移行指針システムの前提： - コンポーネントはフルスクラッチで AtomicDesignを元に設計・実装 - 2022/9末には@nuxt/composition-api利用してCompositionAPI移行済プロセス大きく2つ： 1. Nuxt-Bridgeへの移行
2. Nuxt3への移行

Nuxt Bridge Nuxt2の状態でNuxt3の機能を使える前方互換性を持つバージョン・Nuxt3移行時の修正量が減る(はずだった) ・非対応のNuxtModuleが多い調査した結果対応システムのnuxtモジュールの互換性が高く、不確実性が少なかったため、 NuxtBridge移行を決定
(nuxt-2-to-nuxt-bridgeより引用)

Nuxt3への移行プロセスステップ１：Nuxt2系からNuxt Bridgeへの移行(10人日) 移行に必要な作業：基本は公式の手順に準拠 • Nuxt-edgeへの切り替え、Nuxt-Bridgeの導入 • Compistion API のマイグレーション
• CJS から ESM へのマイグレーション • 互換性のないモジュールの代替 ◦ @nuxtjs/proxy の代わりに自前でプロキシを用意した実装例→ • nuxi での動作検証 • リグレッションテスト, シナリオテスト

Nuxt3への移行プロセス Nuxt2系からNuxt Bridgeに移行した結果 • 良かったこと ◦ フロント↔BFFのレスポンスタイム162%改善...！ ▪ MiddlewareのでNitro Engineの恩恵を教授
• 辛かったこと ◦ 変更箇所多すぎい...！ ◦ コンポーネントほぼ全て修正 ◦ useAsyncDataや useFetch非対応

• 移行に必要な作業 ◦ @nuxt/bridge→Nuxt3パッケージへのアップデート ◦ Nuxt.conﬁgの変更 ◦ コンポーネントとプラグインの更新 ▪ Vue3に対応するため
CompositionAPIや新しいディレクティブ構文に合わせる ◦ ミドルウェアとサーバーミドルウェアの更新 ◦ ストアの移行 ▪ Nuxt3ではVuexではなくPiniaが推奨されている ◦ ビルドとデプロイ設定の更新 ◦ リグレッションテスト, シナリオテスト Nuxt3への移行プロセスステップ2：Nuxt BridgeからNuxt3系への移行(約30人日)

• 辛かった事象(一部抜粋) ◦ useRoute 関数など、利用箇所によって正しい値が取れない ▪ layoutで利用するとundeﬁnedが取得されてしまうなど ◦ viteのproxyサーバーが本番環境で使えると思ったら使えなかった ▪
server.proxyオプションは開発用で、 npm run devでないと利用できない ◦ その他公式ドキュメントの整備が完了してなくて検索してやってみて NGを繰り返す ▪ Nuxt Conﬁguration Reference ▪ https://github.com/nuxt/nuxt/issues/13998 Nuxt3への移行プロセスステップ2：Nuxt BridgeからNuxt3系への移行(約30人日)

Nuxt3移行結果

Nuxt3に移行した結果良かったこと • 移行によるパフォーマンス改善 ◦ サイトのロード時間の短縮 ...！ ◦ バンドルサイズ約40%削減...！ •
新機能・開発効率の向上 ◦ CompositionAPIによるコードの簡潔化 ◦ コンポーネントの静的型付けによる型安全な実装が可能に ◦ 開発サーバーのビルド時間大幅に改善 (PageSpeed Insightsで測定)

Nuxt3に移行した結果これから取り組みたいこと • Viteのライブラリモードを活用したUIライブラリの作成 ◦ 社内UIライブラリから複数システムがコンポーネントを再利用 ◦ (Reactのコンポーネントも出力可能 ...!) •
StoryBookの導入 ◦ @storybook/builder-viteを利用して ◦ 上記のライブラリと合わせた UIカタログ作成

まとめ

Nuxt2からNuxt3移行するメリットは大きい！ただ、ライブラリの依存度によってはフルリプレイス並の工数が必要...😇 (Nuxt Bridgeの恩恵はあまりなかった)

Nuxt3移行の詳細は弊社テックブログで4月中に公開予定です！

Leverages スライドテンプレート基本カラー基本フォントサイズアイコン（欲しいモノがあれば言ってくださいませ！） #333333 #fbfbfb #95100e メインタイトル :
42 サブタイトル : 24 本文 : 16 （あくまで基本なのでご自身でカスタマイズしてもらって大丈夫です :D）

スライドタイトルレバレジーズ株式会社　〇〇〇〇 2018/01/01

目次 • 始めに • 内容１ ◦ 1の内容 • 内容２ ◦
2の内容1 ◦ 2の内容2 • 内容３ • まとめ • さいごに

伝えたいメッセージメッセージの説明とか。解説とかをここでする。

内容１

内容１内容１のサブタイトル内容がここに入ってくる。

見出し見出し見出し1 内容1 見出し2 内容2 見出し3 内容3 見出し4 内容4

ワークシート・チーム名・チーム目標・チームルール　　　ルールその① 　　ルールその② 　　ルールその③

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

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

レバレジーズTechアカウント

More Decks by レバレジーズTechアカウント

Other Decks in Technology

Featured

Transcript