https://studist.tech/migration-to-vue-3-4b4c4fad0324
スタディスト 技術支援ユニットの笹木 (@s_sasaki_0529) です。
2022年上半期、およそ500コンポーネントを持つ Vue 2 プロダクトである Teachme Biz を、半年間に渡る単独作業を経て、 Vue 3 に移行することに成功しました。
本記事では、私達がどのようにして、機能開発は止めずにバージョンアップや破壊的変更への対応を行えたのかを簡単に振り返ろうと思います。
なお、本記事のタイトルは以下記事のセルフオマージュです。
昨年の TypeScript 移行の次のステップとして、今年は Vue 3 移行を実現することにより、相乗効果でのフロントエンド開発体験の向上を実現しました。
Teachme Biz をVue 3 に移行するモチベーションは概ね以下になります。
いずれもVue 3 移行というチャレンジングな取り組みに対しては地味なモチベーションにも見えます。
「いやいや、 Vue 3 といったら Composition API / <script setup> /**v-bind in CSS といった魅力的な新機能があるじゃないか」**という声もあるでしょう。事実、これらは Vue 3 の特徴として真っ先に挙げられるし、これを理由に移行したという事例も少なからずあります。
しかし、幸か不幸か、上記の新機能はいずれも Vue 2.7 にもリリースされ、Vue 3 で解決されるはずだった「大規模開発への拡張性に欠ける」という Vue の課題を、 Vue 2 でも(少なからず)解決してしまいました。 (Composition API に至ってはそれ以前のバージョンから Plugin で利用可能)
以上より、Vue 3 が発表された当時と比べると、 Vue 2 を使い続けるリスクは下がり、Vue 3 へ移行するモチベーションも低くなったようにも思えます。
とはいえ、 Vue 3 が ES2015 を前提としたモダンブラウザを対象としたことから、今後さらなるコア機能の追加や改善が期待できます。そのときに、「Vue 2 を使っているから」という理由で随従できずに、レガシーなバージョンで開発し続けるのは、少なからずリスクであると考え、技術的負債を産まないための技術的先行投資と捉えて移行を決めました。
まず、Vue 3 移行のボリューム感について振り返ります。