記事検索

検索ワードを入力してください。
Sky Tech Blog
自社プロダクトの​Vue2→Vue3移行対応

自社プロダクトの​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向けのルールの調整が必要

やった​こと​一覧

  • 移行ビルド検証
  • 全コンポーネントをOptions APIからComposition APIの形式に書き換え
  • Vuex→Piniaに変更
  • 最新に追従できていなかったライブラリ一式を最新に更新
  • その他Vue2向けのライブラリを一式Vue3向けに変更
  • vue-cli+webpackからViteに置き換え
  • Storybook、VRTの導入
  • ESLintのルール見直し
  • コーディング規約見直し
  • 移行開始以降に追加・変更されたコードの対応、本流コードへマージ

まとめ

まずはVue3対応するうえでの状況や課題を説明しました。 実際にどのような対応をしたのかといった詳細は今後またご紹介していければと思います。


XFacebookLINE
Sky株式会社のソフトウェア開発や製品、採用に関するお問い合わせについては、下記のリンクをご確認ください。
お問い合わせ
ホーム