Vue 3, Nuxt 3 マイグレーションを経験してみて

はじめに

こんにちは。 ContractSでフロントエンドエンジニアをしている村澤です。

先日、一時的に Vue 2.x から Vue 3.x のマイグレーションへ携わる機会があったため、その間の学びを共有します。

ContractS CLMでは、Vue.js を用いて開発をしています。

Vue.jsとNuxt.jsは、Web開発において広く利用されている人気の高いフレームワークです。
技術の進化とともに、それらのバージョンも進化を続けています。Webフレームワークのマイグレーションは、開発者にとって重要なタスクです。本記事では、その必要性と経験について述べます。

Vue 3, Nuxt 3へのマイグレーションがなぜ必要なのか

Vue 2は、2023年にEOL（End of Life）を迎えました。

v2.vuejs.org

これは、Vue 2の新しい機能やセキュリティパッチが提供されなくなったことを意味します。また、Nuxt 2.xの依存関係にあたるライブラリが更新されることも無くなるため、脆弱性が発見された際のパッチ適用が難しくなります。
したがって、品質の維持とセキュリティの確保のために、Vue 3およびNuxt 3へのマイグレーションが必要です。

破壊的変更の学習

Vue 3への移行には、破壊的変更を伴います。これは、Vue 2から廃止された機能、仕様の大きな変更などが含まれます。 その中でも影響が大きいと感じた変更はv-modelの扱いです。
Vue 3 からは以下のような仕様変更がなされています。

バージョン	デフォルトプロパティ名	デフォルトイベント名
Vue 2	value	input
Vue 3	modelValue	update: modelValue

Vue 2では、propsの.sync修飾子で、子コンポーネントからのemit イベント名をupdate：（prop名）とする仕様がありました。 対してv-modelのデフォルトイベント名は、上記の表のように.syncと形式が異なったため、Vue 3ではv-modelにおいても同様の仕様に統一された形になります。 このような変更について学習し、変更する必要があります。

v3-migration.vuejs.org

プラグイン・ライブラリの選定

Vue 2で使用していたプラグインやライブラリの多くは、Vue 3に対応していないもの、もしくはVue 3に対応するために仕様変更されたものがあります。これにより、移行コストが高くなります。さらに、Vue 3に対応する代替ライブラリが存在しない場合もあります。
このような場合、開発者は自らライブラリを更新するか、あるいは代替手段を模索する必要があります。また、既存のライブラリとの互換性の問題も発生する可能性があります。

例えば、Nuxt 3.8で[email protected]を導入すると、ビルドエラーが発生するという問題があります。このような問題に対処するためには、開発者は適切な代替手段を見つける必要があります。

Vue 2コンポーネントの移行コスト

今まで Vue 2で記述されていたコンポーネントを、すべて Vue 3 の記法へ変更する必要があります。 プロダクトの大きさにもよりますが、CCLMの場合300近くのコンポーネントがあり、これをすべて書き換えるとなると膨大な時間がかかることは想像に容易いと思います。
しかし、この効率をあげる方法に画期的なものはなく、現在有力なのはVue 2のプロジェクトをVue 2.7までバージョンを上げ、バックポートされているVue 3の機能を取り入れることです。

blog.vuejs.org

マイグレーション全体を通して

上記に書ききれなかった学びを簡単に記述します。

• 公式推奨のプラグイン・ライブラリでもアプリケーションに合わないことがある。

  • ex) ストーリー記述としてStoryBookを推奨しているが、Viteでのエイリアス解決失敗とビルドエラーにより、Historeを採用
• 思い切って既存のプラグイン・ライブラリを別のプラグイン・ライブラリに変更する
  • ex) BootstrapVueからPrimeVueに変更
• 原因不明のビルドエラーが発生し、解消できない場合はプラグイン・ライブラリのissuesを確認する

さいごに

他にも多くの課題がありますが、今回は主要な課題を取り上げました。 マイグレーションは現在も進行中ですが、上記に上げたように多くの学びが有り、貴重な経験でした。