XAION Tech Blog : Vue3 移行 ~準備~
さあ、いつまでもぐずぐずしないで。いらいらするから。行くって決めたなら、もう行って
「XAION Tech Blog」2回めの投稿に引き続き，メインプロジェクトをvue3に移行した体験談を書きます．
前回はVue3移行を決断した動機やXAIONDATAのフロントエンドで使用されている技術を紹介しました．今回はVue3移行を実行する前の準備について書きます．
XAION DATAでは，機械学習を用いて収集・加工したウェブ上の公開データに対し、検索/マッチング機能を掛け合わせてWebサービスの開発を行っております．積極的に採用を行っておりますので，もしご興味がありましたら，気軽にお問い合わせください．
Vue3移行について調査
まずはVue3の移行に関して調査を行いました．
調査した内容は主に，アップグレードの進め方とVue2とVue3の破壊的変更点，パッケージのVue3対応状況です．
アップグレードの進め方
まず，Vue3でVue2と互換性のある動作を設定できる移行ビルドの存在を知りました．完全にVue2のコードを動かせるわけではなさそうですが，公式のドキュメントにはアップグレードのワークフローまで書かれているので，こちらに沿って移行を進めることにしました．
Vue2とVue3の破壊的変更点
こちらも公式のドキュメントにまとまっていました．
v-model の変更とv-forのref配列以外は影響がなさそうでしたが，v-modelの変更はかなり変更箇所が多く後々大変な思いをしました．
パッケージのVue3対応状況
弊社のフロントエンドでの主な使用技術
まず，使用しているvue関連のパッケージを列挙し，一つひとつドキュメントやissue，リリースノートをを参照してVue3への対応状況を調査しました．
Vue RouterやVuexなど公式から提供されているものに関してはVue3対応されており特に問題はありませんでした．いくつか破壊的変更点があったので，そこは注意しながら修正することにしました．
Vue Property Decorator（Vue Class Component）もVue3対応のRC版がリリースされていたので，composition APIへの移行は行わずに，クラススタイルのコンポーネントを引き続き使用することにしました．Vue Property Decorator にも破壊的変更点がありますが，composition APIに書き換えるよりは断然コストが低いと考えました．
その他のパッケージも，Vue3用のバージョンが存在するものはバージョンのアップグレードを行い，ないものは代替のパッケージに置き換えることにしました．Vue Stripeのように2022年8月時点でVue3対応バージョンもなく代替のパッケージもない場合がありました．Vue StripeはStripe.jsを使って書き直すことにしました．
移行の方針を決める
調査の結果，移行の進め方やパッケージの対応状況などを把握することができたので，ここで一旦，移行の方針を以下のように決めました．
移行ビルドを使う
composition APIは移行ビルド後に段階的に実施を行う
まず，前提として機能開発は止めず，並行してVue3の移行を行う必要がありました．よって，なるべく短い期間で，まずはVue3ですべてを動かすことができる状態を目指すことにしました．
移行の進め方はアップグレードのワークフローに沿って進め，まずはログインページなどのシンプルなページが表示できるようにすることを目指しました．その後に共通のコンポーネントの書き換えと，ページコンポーネントの書き換えを行うことにしました．
また，ざっくりとした移行完了までの見積もりも行いました．
アップグレードのワークフローに沿って進めて，vueのアップグレード，移行ビルドの導入，Vue Router, Vuex, Vue i18nのアップグレード，ログインページの表示に1人日
共通のコンポーネント（約150ファイル）の書き換えに4人日（2人×2日）
ページコンポーネント（200ファイル弱）の書き換えに15人日（3人×5日）
やっと移行を始めます．．．
移行の方針や進め方も決まったのでいよいよ移行作業に入ります．移行作業中は準備段階ではわからなかった問題にぶつかって1日浪費したりと，今思い返せば，もっとしっかりと準備をしておくべきだったと反省することもありました．そのあたりは次回の投稿で書きます．
続きが気になるという方は是非いいねとフォローお願いします！！
We are Hireling
株式会社XAION DATAでは，一緒に働く仲間を探しています！！
この記事が気に入ったらサポートをしてみませんか？