3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Vue2 ⇒ Vue3への移行日記 ~方針決定編~

Last updated at Posted at 2023-12-13

はじめに

この記事は DENSO アドベントカレンダー 2023 の14日目の記事です。

私は、社内でWebアプリを開発しているのですが、Rails6×Vue2で作っています。
ただ、Vue2のサポートが今年いっぱいで切れてしまうので、Vue3へ移行することになりました。
せっかくなので、移行の経緯を残しておこうと思い、筆を執っています!

公式ドキュメントの確認

公式のVue3移行ガイドをまずは確認。

どうやら移行ビルドなるものがあるようです。

@vue/compat(別名「移行ビルド」)は、設定可能な Vue 2 互換の動作を提供する、Vue 3 のビルドです。

移行ビルドはデフォルトで Vue 2 モードで動作します。ほとんどの公開 API はいくつかの例外を除いて、Vue 2 とまったく同じように動作します。Vue 3 で変更または非推奨となった機能を使用すると、実行時警告が表示されます。機能の互換性はコンポーネント単位で有効化/無効化できます。

とのこと。
とりあえず、年末までに移行を完了させるのに良さげと思い移行ビルドをもう少し調べてみました。

すると、いくつか気になる点がでてきました。

移行ビルドを採用したときの懸念点

移行ビルドを使用しても移行が困難である可能性がある

公式に下記のような記載あり。

注意: アプリケーションが大規模で複雑な場合、移行ビルドを使用しても移行は困難である可能性が高いです。

さらに、移行ビルドだと正常動作しないライブラリがあるという事例も発見。

移行ビルドも近い将来サポートが切れそう

上記公式の注意書きの続きにこのような記述が。

移行用ビルドは 3.1 から提供され、3.2 のリリースラインと同時に公開され続けます。将来のマイナーバージョン(2021 年末以降)で移行用ビルドの公開を終了する予定ですので、それまでに標準ビルドへの移行を目指す必要があります。

今回移行ビルドを使ったとしても、また近い将来に通常のVue3への載せ替え作業が発生しそう。

Vue3への直接の乗り換えはそんなに大変じゃない可能性が高そう

OPTiMさんやMakuakeさんの記事を見ると、Vue3から追加されたComposition APIではなくVue2で使われているOptions APIのままであればVue2⇒Vue3の移行はそこまで大変じゃないとのこと。

むしろ大変なのはVueとセットで使われることの多いVuetifyのバージョンアップらしいのですが、幸いなことに私たちはVuetifyは使っていない(Bootstrapを使ってます)のでこの点は問題なさそうです。

移行方針

上記理由より、移行ビルドは使わずに直接Vue3へ移行ことに決めました。但し、年末まで時間がないため、下記のような進め方にしました。

  • 移行ビルドは使わない
  • Options APIのままにする
  • 一番最初に使用しているライブラリがVue3に対応しているか調査し、対応していない場合代替候補を探す
  • 一旦差分が一番小さくなるようにVue3へ移行し、リファクタなどはバックログに積む

終わりに

公式ドキュメントだけ読んで移行ビルドを使おうかとも思ったのですが、もう少し調べてみると直接移行したほうが良さそうでした。やっぱりちゃんと下調べするのは大事ですね。

[次回]
ライブラリ調査編へと続く。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?