見出し画像

XAION Tech Blog : Vue3 移行 ~道中~

XAION DATA, Inc.

旅の過程にこそ価値がある。

スティーブ・ジョブズ

「XAION Tech Blog」3回めの投稿に引き続き，メインプロジェクトをvue3に移行した体験談を書きます．
前回は移行の準備として，サードパーティ製のパッケージのVue3対応状況や，移行の方針について書きました．今回はVue3移行の作業について書いていきます．

移行中に詰まったところ

移行時に大変だったのは，外部パッケージへの対応や，移行作業ブランチのコンフリクト解消でした．

外部パッケージへの対応

外部パッケージの対応については準備段階で調査し，ある程度の見通しは持っていたのですが，実際にやってみると想定通りいかないこともありその都度対応していたので大変でした．

例えば，vue3に対応している外部パッケージが必ずしも移行ビルドで動くとは限らないということです．移行当初はグローバル設定でデフォルトをvue2の動作としていたためでした．移行ビルドの設定にはグローバルとコンポーネントごとの2つのスコープがあり，グローバル設定で動作をvue2としている場合に，vue3のコンポーネントを動作させるにはコンポーネントの compatConfig オプションに MODE: 3 を追加し，vue3の動作をオプトインする必要がありました．
vue3対応済みパッケージの一部でこのような問題が発生しましたが，大部分はグローバル設定がvue2でも正常に動作しました．
移行初期の頃は，移行ビルドのグローバル設定の問題で動かなかったパッケージ，例えばV-Calendarなど，には暫定的にcompatConfigオプションにMODE: 3 を追加し動作するように対応しました．最終的にはグローバル設定をvue3にしました．
移行を終えて改めて振り返ると，最初から移行ビルドのグローバル設定はvue3にし，vue2で動かす必要があるものは状況に応じてスコープを調整しながら，機能単位でvue2の動作を有効にしたほうが良かったのではないかと思いました．

その他にもAdobe PDF Embed APIが使えないという問題も原因の特定が難しく苦労しました．本プロダクトではPDFのプレビューにAdobe PDF Embed API を JS SDK経由で使用しており，vueのバージョンに依存しないはずなのですが，何故かvue3ではうまく動かなくなってしまいました．当時このSDKとvue3に関する情報は少なく調査も難航したのですが，最終的には，vue3からコンポーネント内のステートは再帰的にプロキシオブジェクトにラップされるようになったことが原因とわかり，事なきを得ました．
そもそも，準備段階でパッケージのvue3対応状況を調査した際にはpackage.jsonを参照していたため，index.htmlのscriptタグで読み込まれていた，このSDKの存在すら認知しておらず晴天の霹靂でした．PDFプレビュー機能を実現するための他の良い代替手段もなく，このSDKのせいで，vue3移行は頓挫し，これまでの移行作業が水泡に帰すところでした．

移行ブランチの運用

本移行プロジェクトでは機能開発は止めないことが前提だったため，移行用のブランチを作成し作業をしていました．よって，定期的に最新のブランチから変更差分を取り込む必要があったのですが，これがなかなか大変でした．コンフリクトの解消はもちろんのこと，コンフリクトが起きていなくても，vue2特有の機能を使ったコードがマージされる場合もあるので，変更があったvueコンポーネントはマージ後に全て動作確認する必要がありました．約1週間に一度ペースで最新のコードの取り込みをやっていたのですが，変更差分が大きいときはこの作業に2~3時間費やしました．

移行準備の段階ではリサーチ不足で気づかなかったのですが，移行ブランチを切る前にメインのブランチにvue3用のESLintルールを追加し，vue2でしか動かないコードが入り込みづらくしていれば，マージの作業が少しは楽になったかなと思いました．（https://www.youtube.com/live/dtD4p89ogKM?feature=share&t=21919）

上記以外にもv-modelの書き換えなども地味に大変でした．

移行作業を終えて

最後に事前のざっくり見積もりと実際にかかった工数を比較してみたいと思います．

  1. アップグレードのワークフローに沿って進めて，vueのアップグレード，移行ビルドの導入，Vue Router, Vuex, Vue i18nのアップグレード，ログインページの表示に1人日
    => Vue Property Decorator v9ではvueファイルからdefault以外をエクスポートできないというエラーにハマり結局，1人×2日ほどかかりました．

  2. 共通のコンポーネント（約150ファイル）の書き換えに4人日（2人×2日）
    => 諸事情により1人での作業となったが3日ほどで終わったので，1.の1日遅延と合わせてチャラになりました．

  3. ページコンポーネント（200ファイル弱）の書き換えに15人日（3人×5日）
    => 実際は3人で80時間ほどだったが，他の業務と並行していたため1週間ほどかかりました．

とここまで2週間ほどですが，ここから全体の統合テストに20時間（他の業務と平行していたため3~4日かかった）ほどかかり，その後，開発環境にデプロイし，開発以外のメンバーにも手伝ってもらいながらバグ出しをし，修正するのに1週間ほど要し，結局メインのブランチにマージするには約1ヶ月かかりました．
そこから，移行ビルド上で動かしていたVue StripeをStripe.jsを使った実装に書き直したりしていると結局，移行ビルドを取り除き完全にvue3に移行できたのは移行開始から2ヶ月後でした．

なんだかんだありましたが，移行作業を開始してから1ヶ月ほどで8割方の移行が終わり，2ヶ月後には移行ビルドを外すことができました．
このあと，Vue Property DecoratorからcompositionAPIへの移行も行ったので，また何かの機会に記事を書ければなと思います．

We are Hireling

株式会社XAION DATAでは，一緒に働く仲間を探しています！！

この記事が気に入ったらサポートをしてみませんか？