自社プロダクトのVue2→Vue3移行対応

Vue2のサポート終了に伴い、Vue3への移行を行いました。移行時の状況、課題、対応内容について説明します。

はじめに

昨年、Vue2のサポート終了に際して、Vue2で構成されていたプロダクトのコードをVue3へ移行しました。
対応にあたっては色々と問題があったのでその内容の紹介となります。

対応開始時点での状況

コード

VueとVuexを使用しており、いずれもTypeScriptとclassで記載するための各ライブラリを導入している状態です。また、Vue Routerを使用したSPAとなっています。
以下が移行前のpackage.jsonの一部抜粋したものとなります。

"dependencies": {
  "vue": "2.6.12",
  "vue-class-component": "7.0.2",
  "vue-property-decorator": "8.5.1",
  "vuex": "3.1.0",
  "vuex-simple": "2.1.0"
}
"devDependencies": {
  "typescript": "3.4.5",
}

上記以外のライブラリも依存関係の都合等であまり更新できておらず、Vue3対応で合わせて更新が必要な状況でした。割愛していますが、dependenciesに指定しているライブラリは30個ほどあり、その全部が対象です。

対象ファイル数

対応開始時点のコンポーネント数は525ファイル、Vuexのstoreが22ファイル、その他ライブラリの更新などで合わせて変更が必要なファイルが41ファイルほどありました。なかなか多いですね。

なお、Vue3対応作業中も機能開発が並行して動いていました。そのため一通りVue3への書き換え完了時点で310ファイルの追加／変更があり、そちらも追加で対応しました。

工程感等

期間的にVue2のサポートが切れる2023年12月中にはVue3への書き換え完了を予定していました。しかしながら評価のスケジュールや、次バージョン開発からは全面的にVue3で開発を開始したいという計画を加味すると、既存部分の修正に使える期間は実質半年程度しかありませんでした。
対応方針の検討と上記した量のコンポーネントなどの修正と、結合試験などを効率的に実施していくことが求められる対応となりました。

課題

対応するにあたって大きく以下のような課題がありました。

修正量が多いが期間があまりない
- 期間は約半年
- 総ファイル数が588
- 書き換えるなら機械的に置換するのでは対応できない修正が必要
  すべてのコードをclassスタイルのOptions APIからComposition APIへの書き換えが必要
- Vue3版UIライブラリのスタイル変更
  UIライブラリを使用していたが、ライブラリのスタイルを直接変更して使用していたため、Vue3対応版のライブラリに対しても同等の作業が必要
  ただし、Vue3用に書き換わったことでスタイルの定義の仕方などライブラリ側に大幅な変更が入っているため、機械的にマージができない
- 大幅な変更が入るが、まともに使用できる自動テストが存在しない
  jestを使用した単体テストは存在したが、あまり有用なテストが無く、Vue Test Utilsの更新とそれに伴う書き換えを行わないと動作しなくなる状況
Vue3への置き換え実施と並行して機能開発が進んでいる
Vue3の対応が終わった時点で追加／変更のあったコードに対する対応も必要なため、その分の対応を行える程度の余裕を残しておく必要がある
コーディング規約や実装規約の作成が必要
対応開始時点では明確な規約が存在せず、今あるコードベースに合わせるといった状況になっているため、Vue3対応のタイミングで策定とVue3向けの内容の追加が必要
ESLintのルール調整
ESLintは導入されていたが、一部ルールの不足による不具合の発生や、Vue3向けのルールの調整が必要