【3/24＠オンライン開催】エイチーム×レバレジーズ フロントエンド勉強会 https://ateam.connpass.com/event/276968/
での発表資料
# 技術
Nuxt2, Nuxt Bridge, Nuxt3, TypeScript, Vite
Nuxt3への移行プロセスとその結果レバレジーズ株式会社レバテック開発部 LTPtoB開発チーム古庄 和也2023/03/24
View Slide
自己紹介古庄 和也（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, 構文の利用でコンポーネントのロジックを柔軟かつ再利用しや<br/>すい方法で簡潔に構築可能に！<br/>Nuxt2 Nuxt3<br/>
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 BridgeNuxt2の状態で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.configの変更○ コンポーネントとプラグインの更新■ Vue3に対応するため CompositionAPIや新しいディレクティブ構文に合わせる○ ミドルウェアとサーバーミドルウェアの更新○ ストアの移行■ Nuxt3ではVuexではなくPiniaが推奨されている○ ビルドとデプロイ設定の更新○ リグレッションテスト, シナリオテストNuxt3への移行プロセスステップ2：Nuxt BridgeからNuxt3系への移行(約30人日)
● 辛かった事象(一部抜粋)○ useRoute 関数など、利用箇所によって正しい値が取れない■ layoutで利用するとundefinedが取得されてしまうなど○ viteのproxyサーバーが本番環境で使えると思ったら使えなかった■ server.proxyオプションは開発用で、 npm run devでないと利用できない○ その他公式ドキュメントの整備が完了してなくて検索してやってみて NGを繰り返す■ Nuxt Configuration Reference■ https://github.com/nuxt/nuxt/issues/13998Nuxt3への移行プロセスステップ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
ワークシート・チーム名・チーム目標・チームルール ルールその① ルールその② ルールその③
leveragestech
ryohatanmonolog
iselegant
hosimesi11
microcms
washizaki
charmichokshi
nnstt1
nozomiito
daihiraoka
soracom
hiroshinakagawa
sakiengineer
bcantrill
dotmariusz
michaelherold
jennybc
vanstee
bluesmoon
jasonvnalue
maltzj
speakerdeck
dougneiner
revolveconf
chriscoyier