XAION Tech Blog : Vue3 移行 ~前夜~

「変化とは人生の法則です。 過去と現在しか見ない人は、確実に未来を見失います」

ジョン・F・ケネディ

はじめまして，XAION DATAで新人エンジニアをやってます，井上です．
この度「XAION Tech Blog」2回目の投稿の命をうけ，メインプロジェクトをvue3に移行した体験談を書きます．（最初の投稿から1年経ってますね…）

XAION DATAでは，機械学習を用いて収集・加工したウェブ上の公開データに対し、検索/マッチング機能を掛け合わせてWebサービスの開発を行っております．我々は積極的に採用を行っておりますので，もしご興味がありましたら，気軽にお問い合わせください．

XAION DATA

今回こちらのサービスのフロントエンドをvue2からvue3に移行した話をいくつかに分けて書きたいと思います．

XAION DATA フロントエンドの歩み

まずは前提としてXAION DATAのフロントエンドがどのような変遷を経て，vue3 移行前にはどのような技術を使っていたのかについて軽くご紹介したいと思います．

創業当初は vue2（OptionsAPI） + JS + Bootstrap（BootstarpVue） + VueCLI で構築されていました．
そこからプロダクトが成長していき，デザインの大幅な見直しを行うことになり，合わせて vue2（Property Decorator）+ TS + CSS modules + Webpack に移行しました（2021/4）．デザインなどの観点からBootstrapの使用はやめ，UIフレームワークも使わず，スタイル周りはSCSSとCSS modulesを使用することになりました．
ありがたいことに，その後もプロダクトは順調に成長していき，Webpackではビルド時間が気になるようになり，Viteに移行しました（2022/7）．

ということでvue3移行開始前の使用技術は主なもので以下のようになります．

• Vue2（Vue Property Decorator）

• Vuex（vuex-module-decorators）

• Vue Router

• Vue i18n

• Vite

• TypeScript

• Vue Apollo

• Storybook

移行の決断

1年前にTypeScriptへの大幅な移行を行ったのに，なぜ今また vue3 への移行をすることにしたのか？もちろん大小様々な理由があり移行する決断をしたのですが，主たるものを3つ挙げたいと思います．

• vue2のサポートが 2023年末で終了するから

• プロダクトがさらに成長する前に先行して移行しときたい

• vue3にしか対応していないパッケージが使いたかった

vue2のサポートが 2023年末で終了するから

企業への有償サポートは提供されるようですが，払わなくていいものは払いたくないですよね．
Vue3がデフォルトバージョンになったのが2022年2月（Vue 3 as the New Default），周辺のエコシステムも整い出したきて開発しやすくなって来ました．

プロダクトがこれ以上成長する前に移行しときたい

現在，弊社のプロダクトは成長段階にあり，ユーザー数，プロダクト規模ともにこれから大きくなっていくことが予測されることから，なるべく早めに大きな変更は終わらしておきたかったので，このタイミングで移行に踏み切りました．

vue3にしか対応していないパッケージが使いたかった

例えば，HeadlessUI はvue3にしか対応しておらず，vue2系を使ってる限りは使用できません．（結局 HeadlessUI の導入は見送られましたが…）HeadlessUI 以外にも VueUse の一部の機能や，今後新しく作られるvue のパッケージが vue3 のみ対応になることも可能性としては十分に考えられます．
また，今後 UI フレームワーク導入も想定されるので、移行コストを下げるために vue3 対応を優先的に行ないました．

今回はここで終わり…

以上のような経緯で vue3 移行を決断したわけですが，次回の投稿からは移行の方針や移行作業のことなどを書いていこうと思います．

続きが気になるという方は是非いいねとフォローお願いします！！

We are Hireling

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

株式会社XAION DATAの会社情報 - Wantedly

Recruit | XAION DATA