入社6ヶ月の新人がNuxt3への移行作業にチャレンジした話 #Vue.js

はじめに

今回 Nuxt2 のサポートが12月末で終了するということで、
既存のシステムを Nuxt3 にバージョンアップする作業を担当することになりました。

スキルレベルは、 Vue のテキストを読んで学習した程度で実装経験はほとんどありません。

今回のバージョンアップ作業は先輩にサポートについてもらいながら、進めていきました。

まずは移行作業に入る前に Vue3 の仕様を理解するため、公式サイトを読みました。

既存の Nuxt2 のソースコードを書き換えるのではなく、 Nuxt3 で新しくプロジェクトを作成し、
コードを移植していく方針にしました。

今回移行したシステム全体の規模感は以下の通りです。

移行作業は全 7 日で終了しました。

新たに Nuxt3 のプロジェクトを作成します。

npx nuxi@latest init <project-name>
cd <project-name>
yarn install

Nuxt2 版で package.json に記載していた依存ライブラリについて、 Nuxt3 版の package.json にコピーし、最新版をインストールするよう変更しました。

Moment.js は Vue3 未対応になったので Day.js に移行しました。

Day.js の使い方はこちらを参考にしてください。

最新版への更新、およびライブラリの変更によるコードの修正を加えます。

静的フォルダの移行として以下の二つを移行しました。

static は Nuxt3 では public に変更されています。

どちらにも画像や css などの静的ファイルだけを置いていたので、
そのまま新しいプロジェクトにコピーしました。

また、cssを読み込むための処理を nuxt.config.ts に記述しました。

Nuxt3 で plugins に入っていた共通関数は新たに utils フォルダを作成し移行しました。

画面の移行は以下の手順で、1画面ずつ完成させていきました。

Nuxt2 の状態管理で標準搭載されていた Vuex が非推奨となり、新たに Pinia が推奨になりました。

ですが、今回は Pinia は使用せず、 useState を使用して状態管理を行いました。
使い方はこちらの記事を参考にしてください(大規模プロジェクトの際は Pinia を使う方が良さそうです)。

そのため、store フォルダの処理を useState を使った処理に書き換えました(フォルダはcomposables )。

各画面の動作については画面実装後に細かく確認をしていたので、画面遷移も含めたシステム全体の動作確認を行いました。

今回のバージョンアップでは Nuxt2 のものと同じ動きをすることが目標だったので、
バージョンアップ前後のシステムを並べて見比べながら、動作確認を行いました。

動作確認後、Nuxt2のものと同じ動きが確認できなかった部分のバグ改修を行いました。
バグの原因で多かったのは、ライブラリの変更に伴う修正の対応漏れでした。