こんにちは、@karino-m です。
Misocaフロントエンドの歴史と未来の記事から早くも2年が経ち、Misocaフロントエンドは地道に改善を続けています。 そして虎視眈々と準備を進めていたVue.jsメジャーバージョンアップを今年2023年1月についに達成しました！
今回はメジャーバージョンアップにつながる地道な改善活動について時系列で振り返りながらご紹介します！
2021年~ 依存ライブラリのアップデートが日を増して難しくなる
当時MisocaではIE11サポートをしていました。そのため一つの依存ライブラリが原因でwebpackのメジャーバージョンが4から上げられなくなりました。
webpackが原因で更新できないライブラリが日を追う毎に増えていき、諦めることも増えていきました…
2021年3月~ VueコードのCompositionAPI書き換え
当時から新しく追加するコンポーネントについてはCompositionAPIで記述していたのですが、ClassAPIで書かれたコンポーネントも数多く存在し、100個のVueコンポーネントがClassAPIで記述されていました。
Vue3マイグレーションを見据えClassAPIでのコンポーネント追加を取りやめ、既にあるコンポーネントを地道に書き換え始めました。
2021年10月 Vue Volarプラグインの導入
MisocaフロントエンドではTypescriptとVue.jsを使っています。
Vue.js VolarプラグインはVueテンプレートも含めた型チェックのため導入しました。
以前はveturを使っていましたが、より高性能でとても重宝しました。
2022年1月 CompositionAPIへの書き換え完了
他プロジェクトと掛け持ちなので時間はかかりましたが、全てのコンポーネントの書き換えが完了しました 🎉
同時に、やろうと思えばいつでもVue3へのマイグレーションへの準備が整ったとも言えます。
ここから本格的にマイグレーションに向けた調査・計画を考え始めました。
2022年2月 ~ 9月 Vue化推進活動
当時はjQueryの依存度も高くDOMをゴリゴリ書き換えるコードが数多く存在しました。
そのようなDOMゴリゴリ実装をVueコンポーネントに置換する活動を始め、より統一されたコードベースを目指し始めました。
単純な置き換えにのみならず、類似実装をまとめ不要実装を消し、最終的に50個近くの中規模Pull Requestをマージしました 🎉
2022年7月 ~ 11月 大Bump計画発足
Vue化推進活動も進めながら、ずっとIE11サポートのおかげで進まない依存ライブラリ更新に明るいニュースが飛び込んできました！
IE11サポートの廃止がグループ全体の方針に決まったのです。2022年6月のことでした。
それを受けて更新が止まっていたwebpackなどの16の依存ライブラリのバージョンアップを計画＆実行しました 🎉
いずれも大きな障害もなくテンポよく進められ一安心です 👍
2022年9月 Vue3マイグレーション計画・調査・対応
特にVue3へのマイグレーションはBreaking Changesの内容が根本的で細かいこともあり、多人数での作業は理解や分業に対するコストが高いと判断しました。
なので基本一人で調査・改修を担当し、その分コードレビューと動作確認に人数と時間をかけて進めました。
Vue.js関連ライブラリの中にはVue3対応が遅れているもの、大きく変更されているものがほとんどだったため、代替実装を追加したりして対応差分がどんどん膨れて大変でした 😭
当時はVue2.6を使用していましたが、Vue2.7にもマイグレーションすることで段階的に対応できることが調査で分かったため2.6 → 2.7 → 3 と対応することで、大きく変更することへのリスクを減らせたのも良かったです。
2023年1月 Vue3対応リリース。障害なくマイグレーション達成！
事前に確認できることはすべて確認しました！そしてついにリリースを迎えました。
関連するエラーはほぼ発見されず、問い合わせ経由でも不具合は報告されませんでした 🎉🎉🎉
2年越しの改善がついに実を結びました！！！やったぜ 👍
2023年1月 rails-ujs脱却
MisocaはフレームワークとしてRailsを使用しており、Railsが生成したHTMLにVueコンポーネントをマウントしています。
一部画面ではRailsが提供する”控えめな”JS実装で十分だったのでrails-ujsから積極的に置き換える動きはなかったです。
ですがRails7からrails-ujsは非推奨となり別実装であるTurboが推奨されました。
当然Rails7へのバージョンアップも行う必要があるので、rails-ujsの代替実装を追加しrails-ujsへの依存を切ることができました。
総括
IE11のサポート廃止が決まり、大きく確実にレガシー改善できました！
裏で地道な改善活動をチーム全体で取り組んでいたので成し遂げられました！
今後の改善活動
大きくレガシー改善に向けて取り組めた数年でありましたが、まだサービスの主要導線に取り除くのが困難なレガシーが残っています。
完全なjQuery廃止のためにも現在はその箇所の脱レガシーを進めています。
また最近ではビルドやテストのCI実行時間が大きくなり、その改善も急務となっています。
レガシーを残さないよう改善を回し続ける、今後もやれることはいっぱいあります。
引き続き地道に着実に改善を回していきます！
一緒に働く仲間を募集しています！
弥生では地道に改善を回してくれる仲間も募集しています！
