Nuxt2からNuxt3にバージョンアップした話

ことのはじまり

去年の中頃、私は Nuxt3（Vue3）への移行プロジェクトに配属されました。
ただ私は Nuxt や Vue を触ったことがなく、フロントエンドの知識も React を少し齧った程度でしたので、取り敢えず調査を始めました。
様々な記事を読み漁ると、とにかく大変だの、破壊的変更が多いだの、怖い情報が沢山集まります。
それでも、「えいやっ！！」でやってみることにしました。

その結果報告の記事です。

この記事について

この記事では、具体的な細かい修正部分までは踏み込んで語りません。
キリがない程膨大なエラーを修正したので書ききれないかつ、覚えてないです orz
また、基本的には作業中に書いたノートを参照していますが、うろ覚えな部分があることご了承ください。

Nuxt2から3の移行ってそんな感じなんやなって実感が沸けばいいかなって思って書いてます。

【 対象読者 】

• 今から Nuxt2 から Nuxt3 への移行を行わなければならなくなった人
• 暇な人

【 前提条件 】

• 特になし

本題

取り敢えず、今回の移行の全体像をまとめてみました。
これで、規模感や方法などをなんとなく掴んでください。

【 全体像 】

1. 基礎情報

大体の規模感が分かればいいかなと思い、なんとなくの指標を下記に書いておきます。

	app（メイン画面）	tenant（テナント管理画面）	admin（管理画面）	合計
ページ数	23ページ	16ページ	7ページ	46ページ
コンポーネント数	130個	36個	21個	187個
store数	36個	29個	8個	73個
コード差分行	約35000行	約15000行	約10000行	約60000行

2. 移行に影響のある主なパッケージ

移行に影響のあった分の移行前後のパッケージを並べてみました。
なんとなく影響が大きかったもの順に並べてみたのでうっすら参考にしてください。

	移行前	移行後
vuetify	2.6	3.7
nuxt	2.15	3.12
vue	2.6	3.4
nuxt-property-decorator	2.9	×
vuex	3.5	pinia 2.2
vuex-module-decorator	1.2	×
axios	@nuxtjs/axios 5.13	Nuxt3組み込みの ohmyfetch
eslint	8.20	9.9
webpack	4.46	×
vue-apexcharts	1.6	vue3-apexcharts 1.7
vue-the-mask	0.11	maska 3.0
@nuxtjs/i18n	7.2	8.5
@nuxtjs/toast	3.3	vue-toast-notification 3.1
@nuxtjs/google-gtag	1.0	nuxt-gtag 2.1
@nuxtjs/style-resources	1.2	×
@nuxtjs/markdownit	2.0	×

3. 移行にかかったリソース

• 人員
  • 2人（8割は私）
• 期間
  • 8ヶ月（動作確認・修正の大部分が終わるまで）

4. 大まかな移行方法

調べると色々方法や気にするべき点などが出てきます。

• Nuxt Bridge を使った方がいいのか問題
• Nuxt2 の最新バージョンに上げて書き方をNuxt3に近づけた後に移行すると楽らしいという噂
• etc...

なんだか調べたり考えると様々な問題がありましたが、考えた結果 (考えるのを諦めた結果)
新しい Nuxt3 プロジェクトを作成して、そこに追加していく方式になりました。

なお、Composition API への移行は一部分に留め、基本は Options API への移行となりました。

5. その他の情報

• 既存の仕様書やドキュメントなし
• 既存のテストなし

【 大変だった点 】

大変だった点をつらつらと挙げていきます。

1. Vuetify のバージョンアップ

「移行に影響のある主なパッケージ」の一番上に陣取ってたことから薄々気づいていた人、他のブログなどをみて既に知っている人などいるかもしれませんが、ぶっちぎりで一番心が折れた部分です。

Vuetify2から3へのバージョンアップは非常に破壊的変更が多いです。

本当に多いです。全てのページが壊れると思って間違い無いです。

さてここで、Vuetify の変更の内、大変だった要素を3つほど挙げておきます。

• 対応するコンポーネントがアップデートでなくなったもの
• 内部ハックをしている部分の修正
• 兎にも角にも、破壊的変更が多すぎる

一応説明をしておくと、
「対応するコンポーネントがアップデートでなくなったもの」はその名の通り、バージョンアップで対応するコンポーネントが存在しなくなったものです。
対応策としては自作するしかないので、自作してください。

「内部ハックをしている部分の修正」は結構深刻な問題で、移行前のコードで Vuetify のコンポーネント内部のcssを書き換えるハック的なコードが大量にあったのですが、多くの部分が動かなくなりました。
この現象の一番の問題は、内部仕様に大きく変更があったコンポーネントを修正する場合、元のUIと同じ状態に戻すのに多大な苦労をするハメになることです。
元のUIに必ずしも戻さなくて良い場合は、ハックをなるべくやめて、Vuetifyのコンポーネントの通常の範囲内で使用するのが良いでしょう。
なお、私は元のUIとなるべく同じUIを求められていたため・・・

「兎にも角にも、破壊的変更が多すぎる」
これに尽きます。これ以上言えることはないです。
私の場合だと、正確には計測していないのですが恐らくかかった期間の半分以上は Vuetify と戦っていた期間です。

一応後続のためにアドバイスをしておくと、下記のパッケージを上手く使ってください。

https://www.npmjs.com/package/eslint-plugin-vuetify

もし貴方が Nuxt のアップデートをしなければならない立場にあり、対象のプロジェクトが Vuetify を使用していないのならばガッツポーズをした方が良いですね。

2. クラスベースの記述の移行

まず、クラスベースの記述とは何ぞやという話なのですが、昔々はクラスベースで Vue のコンポーネントを書くというのが流行の一つとしてあったようで、
「nuxt-property-decorator」を使用することで実現できるようです。気になる方は下記サイトなどをみていただければなんとなくの雰囲気はわかるのではないでしょうか？

https://qiita.com/simochee/items/e5b77af4aa36bd0f32e5

兎にも角にも、そのまま Nuxt3 に移行できないので、大幅な書き直しが生じます。
もし私と同じように移行する方がいらっしゃったら、気合いで頑張ってください！！
と言うのも酷な話なので、下記のパッケージを使用して少しでも修正を減らすと良いでしょう。

https://github.com/getyourguide/vue-class-migrator

3. Nuxt2 -> Nuxt3

調べている方は既に承知でしょうが、 Nuxt2 -> Nuxt3 自体の破壊的変更もかなり多いです。
これに関しては沢山記事が出ているので、深掘りはしません。
移行ガイドがある分まだ救いがありますね。（移行ガイドがあるから楽だとは言ってませんし、移行ガイドに従えば移行できるとも言いません）

4. VuexからPiniaへ

状態管理をするパッケージの話なのですが、これもそこそこ多くの変更点が生じます。
使い方もそこそこ変わるので、気合いで頑張りましょう！！

5. axiosからohmyfetchへ

しっかり覚えてはいないのですが、responseの形式が変化することにより、地味に結構多くの変更点が生み出されていたように思います。
まあ、気合いでどうにかなるでしょう。

6. 初期セットアップ

Nuxt3 の初期のセットアップにはかなり苦労しました。
Nuxt のバージョンアップに伴い、様々な箇所で様々なエラーが発生します。認証やルーティング、layoutやcomponents、plugins, stores, sass, et cetera land
様々な部品がいろんな理由をつけてひたすらエラーを吐きまくるので、ひたすら戦うことになります。
これについては、Nuxtの移行前にコードの状態を良くすることができればそこまで時間がかからないかもしれません。

7. eslintのflatconfig対応

これも地味に時間がかかりました。パッケージの項目にはわざわざ書かなかったのですが、「@nuxt/eslint」を使用するように変更したので、flatconfigに対応することは必須条件でした。
当時、flatconfigの正しい記述方法を書いている記事やブログもあまりなく、eslint周りのパッケージのflatconfig対応状況もまちまちだったので、かなり手探りでconfigを組み立てるハメになりました。
と言っても、これは他の項目に比べたら些細ですね。

8. 検索で情報が出てこない

検索で調べた時に出てくる情報が少ないです。
結構しっかり検索をかけないと出てこない情報だったり、そもそもネットには情報が落ちていないことがままあって、原因調査に大変頭を悩ませることになります。
あんまりバージョンアップしている人はいないんでしょうかね？仕方ないですね。

実際にバージョンアップを行う後続のためにアドバイスをしておくと、「分からなくなったら頼れる人に聞こう！」
今ならAIに聞いても良い答えを返してくれるかもしれませんね。

ついでに、私には頼れる人がいなかったので大変でした。

まとめ

Nuxt2 から Nuxt3 へのバージョンアップは大変！
特に Vuetify を使用している場合やクラスベースの書き方をしていたりすると尚大変！

もし、バージョンアップをやる方が読んでいるのなら、かなり大変だということを認識してください。
この記事では大きくまとめられる項目だけ書きましたが、ここに書いた以外にも様々な厄介事が降りかかってくるので覚悟しておきましょう。

ご武運を！！

参考URL

https://www.npmjs.com/package/eslint-plugin-vuetify
https://qiita.com/simochee/items/e5b77af4aa36bd0f32e5
https://github.com/getyourguide/vue-class-migrator

アノテーション株式会社

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。