kkeisuke blog

Vue2 の業務システムを Vue3 に移行する

私は、家業の業務システムを、2018年から一人で開発・運用しています。開発を始めて丸4年が経ち、そろそろレガシーな部分も目立ち始めています。

今後も安定的な運用、改善を進めていくために、今年は使用しているライブラリや、フレームワークの更新に力を入れています。3月には、バックエンド1で使用している ORM（gorm）のメジャーバージョンアップを行いました。

一方、フロントエンドに関しては、Vue3 への移行はほぼ無理だろうと諦めていました。それは 2018年当時、TypeScript と相性が良いとされていた Class Component を採用していたからです。vue-class-component、vue-property-decorator 共に、2020年以降、開発が止まっています。更に、UIフレームワークに採用していた ViewUI (旧iView) の移行も懸念していました。

ここから状況が好転したのは、5月に Vue3 版の View UI Plus がリリースされたことでした。相当数のコンポーネントを有するUIフレームワークですが、割り切った対応をされていて、リポジトリを眺めていて勇気をもらいました。

7月になり、Vue3 移行に確信を持てたのは、「Vue3でもClass Style Componentが使えそう」という記事を見つけた時でした。手元で軽く検証すると、確かに動きそうでした。

そこで、8月に3日ほど腰を入れて検証をする時間を取ったのですが、2日で移行が完了してしまいました。ついでに残りの1日で Vite にも移行できました。（.vue と .ts 合わせて550ファイル弱）

package.json の diff がこちらです。

-  "view-design": "~4.6.1",-  "vue": "^2.7.8",-  "vue-class-component": "^7.2.6",-  "vue-property-decorator": "^9.1.2",-  "vue-router": "^3.5.4",-  "vuex": "^3.6.2"+  "view-ui-plus": "~1.3.1",+  "vue": "^3.2.37",+  "vue-class-component": "^8.0.0-rc.1",+  "vue-property-decorator": "^10.0.0-rc.3",+  "vue-router": "^4.1.3",+  "vuex": "^4.0.2"

短期間で移行できた要因は以下のようなことが考えられます。

  1. 個人開発なので、要件から仕様、コードまで全て把握していること。
  2. Vue3 に向けた準備（filter 撤廃 etc）がすでに完了していたこと。
  3. .vue にロジックがほぼ無いこと。ビジネスロジックは、徹底的にバックエンド（Go）と .ts に寄せています。
  4. View UI Plus が旧バージョンとほぼ同じだったこと。
  5. ViewUI 以外にUIライブラリ（vue-xxx 系）を使用していないこと。
  6. vue-router, vuex もほぼ書き換えなくてよかったこと。
  7. 他案件（中規模）で、Vue3 の経験が1年以上あること。

これらの要因が重なり、ほぼ機械的な変更だけで済んだので、本当に運が良かったなと感じています。マイグレーション情報が出た頃から、コツコツと準備してきたことが実りました。年内にも新しい機能を追加する予定なので、script setup で書けるのが楽しみです。

しかし、vue-class-component と vue-property-decorator は、遅かれ早かれ剥がさなければなりません。来年以降、少しづつ書き換えていきます。変換ツールもいくつか試してみたいです。

参考

試したい変換ツール

Footnotes

  1. バックエンドの構成に付いては、こちらの記事にまとめています。 ↩