はじめに

マクアケでは本業とは別に隔週1日と、半期の開発合宿で活動するWorking Groupという取り組みがあります。Working Groupの中で「Makuake」のフロントエンドの改善を横断的に行うFrontendチームが取り組んだ内容をエンジニアがまとめました。

▼WorkingGroupについての詳細はこちら

「Makuake」はフロントエンドの開発にVue.js(以降Vue)を採用しています。今回の取組みではそのVueをバージョン2からバージョン3に移行しました。「Makuake」でVueを採用したのは5年以上前です。それから今日に至るまで様々な実装がされ続けてきた結果、積もり積もったコンポーネントの数は600個以上にもなり、Vue2からVue3への移行は大きな課題となっていました。

Vue3化の経緯

Vueを扱っているエンジニアの方はご存知かもしれませんが、Vue2のEOLが2023 年 12 月 31 日に迫っています。

当時、「Makuake」のメインリポジトリのフロントエンドはVue2のままでした。そのままEOLを迎えると、セキュリティ面で非常に高いリスクを抱えてしまうことになりますし、何よりEOLを迎えたライブラリを使い続けるのはエンジニアとしても好ましくありません。プロダクトとしての健全さを保つためにもVue3に移行する必要があったのです。

この課題に対して、マクアケの開発本部としては「開発合宿」という取り組みの中で対応することにしました。合宿とは、マクアケの開発メンバーが日常的な開発業務とは異なる枠組みで、準備も含めて3週間ほどの期間を使って一極集中で大きな課題を解消する取り組みです。この合宿期間中にVue3移行チームが結成され、途中で抜けやフル稼働ではないメンバーがいたものの5人（作業者は4人）のメンバーで、4月中旬から5月中旬の約1ヶ月間を使って移行作業を行いました。

移行の戦略

合宿期間中は殆どの日常的な機能開発がストップするため、大規模な移行作業を行うにはうってつけと言えます。しかし、逆に言うとこの期間中に移行完了しなくては、日常的な機能開発が再開し、機能変更に対して追従作業が発生したり、機能変更のリリース計画に調整を強いてしまったりするというプレッシャーもありました。そこで、期間内に完了するために次の戦略を立てました。

• Options APIからComposition APIへの移行はしない

• Vue3に対応していないライブラリを事前調査し、代替候補を探しておく

• 最優先でVue3が動作する環境を作り出し、ビルド可能な状態にする

• ページ単位で作業分割し、対応完了した部分から社内のQAチームに依頼し、動作テストを実施する

この中で、もっとも完了までの速度に寄与したのはOptions APIのまま移行するという試みです。Vue3を使っている方の多くは、より便利であるComposition APIを用いて実装しているかと思いますが、今回は1ヶ月という短い期間での実施となったため、Vue3への移行を最優先すべく決断しました。

Options APIのままであれば、Vue2コンポーネントの殆どが一部の破壊的変更による影響箇所を修正するだけでVue3コンポーネントとして動作します。もし、Vue3にOptions APIが残されていなかったら、この移行作業はかなり苦しいものになっていたと思います。

こぼれ話ですが、＠vue/compatという移行のためのマイグレーションビルドを使用すればVue2とVue3の機能を両立できるため、問題なければこれを使って徐々に移行することも可能で、ビッグバンリリースも避けられます。今回はvue-compatでは正常動作しないライブラリがあったため、使えませんでしたが……。

また、Vueには直接関係ないことですが、ビルドなどに使っているNode.jsのバージョンアップも並行して行いました。当時はv16を使っていたのですが、こちらもEOLが近づいていたため、当時の推奨版だったv18への移行を決定しました。

実際にやったこと

まず、期間内に終わらせるための計画から始めました。Migration Guideなどを参考にやらなければならないこと、その規模感の見積もりをします。ここで冒頭で触れたように600個以上もコンポーネントが存在することがハッキリと分かり、効率的に実施しなければ期間内の完了は厳しいことが明白になりました。また、コンポーネントの数以外にもそのほぼ同数存在する単体テストへの対応やVue3非対応ライブラリのことも考えると、対応方針を誤れば、1ヶ月どころか数ヶ月はかかる内容です。

私たちは計画を終え、品質は担保しつつも効率的に速度優先でやっていくという認識のもと、作業に取り掛かりました。

ビルド環境の整備

Node.jsのバージョンアップに伴って、当時使っていたWebpack4がそのままでは動かず、他のバンドルツールを導入する必要がありました。当初はViteを導入する予定だったのですが、「Makuake」はWebpackの機能に大きく依存してビルドしている箇所があり、対応に大きく時間がかかってしまうことが判明したため途中で断念し、Webpack5にするという方向へ泣く泣く舵を切りました。将来的にはViteの導入にチャレンジしたいですね。

このように万事が完璧だったわけではありませんが、次善策などをあらかじめ考えておくのが重要だったように今振り返ると感じます。

コンポーネントの書き換え

ここからは作業を「コンポーネントの書き換え担当」「ライブラリ周りの修正担当」といった形で分担した上で並行して作業を行いました。

Vue3化のメインとなるコンポーネントの書き換えですが、ライブラリ影響のない範囲に関しては、Options APIのまま移行という方針もあり、特筆することもないくらいスムーズに進みました。

一度にVue3移行とComposition APIへの書き換えを行うと作業量が非常に多くなってしまうため、この判断は正解だったと感じました。

また、「Makuake」の一部では自社製のUIライブラリを使っているのですが、これを事前にVue3に対応させていたのもコンポーネントの書き換え速度に幾許か貢献しました。惜しむべきは、UIライブラリが適用されている箇所は全体ではなく、一部にとどまっており、ボタンやインプットなどの汎用性のあるコンポーネントも各所に散らばる形で実装されてしまっていたところです。こういった大規模な作業になると、共通化の重要性を実感しますね。

ライブラリのアップデート対応

Vue3移行に伴い、Vueの関連ライブラリもすべてアップデートする必要がありました。

具体的には次のようなライブラリをアップデートしました。（一例です。実際には開発環境のためのライブラリも含めて、50個程度のアップデートを行いました。）

この中だと、VeeValidateの対応に苦戦しました。VeeValidateはメジャーバージョンが変わるごとに、使い方も大きく変わるため、使用しているコンポーネントには大規模な修正を施すことになりました。

その他にもTipTapといういわゆるWYSIWYGエディタを実装するためのライブラリがあるのですが、こちらもバージョンアップに伴って、ほとんど実装し直しと言えるくらいのコストがかかりました。

実装にもよりますが、Vue3移行の中でもライブラリのアップデート対応が作業時間としては最も大きく、やってみなければわからない未知の領域が広がっている箇所でもあるため、移行作業する際は重視しておいた方が良いように思います。

単体テストの対応

「Makuake」のメインリポジトリでは単体テストの実行にjestを採用しているのですが、jestのアップデートに伴って単体テストの記法が一部変わっており、その対応が必要でした。とは言え、書き換え自体はさほど難しいものはなく、機械的な修正に終始しました。

ただ、書き換えた上で失敗してしまう単体テストも多く、そこの調査にかなりの時間を割かなければなりませんでした。特にHTTPリクエストの絡むテストが厄介で、非同期処理の中でエラーが発生すると、どこが原因なのか追いづらいという苦しみがありました。

期間中にすべてを解決することは難しく、一部の「さほど重要ではないが問題を解消しきれなかったケース」についてはskipし、今後の対応課題として積み残す形になりました。

課題感

無事に完了したVue3移行ですが、進めていく中で様々な課題感を覚えました。やはり、こういった基幹に関わるフレームワークをアップデートする作業はタイミングも難しく痛みを伴いますが、やり方や日々の取り組み次第で緩和できると考えています。

特にライブラリ対応については、調べるとすでにメンテナンスされておらず、Vue3では使えないといったことも多々ありました。普段からライブラリのアップデート等にも気を配ったり、長くサポートしてくれるような品質の高いライブラリを選ぶことで健全性を保ち、ひいてはこういった大規模な作業の時に少し楽をできることに繋がりそうですね。

まとめ

Vue3になったことで、「Makuake」のフロントエンドはより安心して開発できる環境になりました。Viteの導入やTypeScriptの導入など、まだまだ改善できるところは残っているので、より快適で健全なフロントエンド開発環境を目指して、頑張っていきたいと思います！

--------------------------------------------------------------------------

現在マクアケではエンジニアの募集をしております。
もっとマクアケについて知りたい方は、社員インタビュー記事や以下リンクからカジュアル面談・エントリーのお申し込みをお願いいたします！

◉エントリーをご希望の方

◉カジュアル面談をご希望の方

◉マクアケの中の人を知りたい方

この記事がおもしろかった！と思っていただけたら、是非「スキ」＆「シェア」をしていただけますと嬉しいです。