はじめに

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

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

前回までに移行方針を決めたので、今回は現状使っているライブラリがVue3に対応しているか調査していきます。

使用中のVue関連のライブラリ

私たちのWebアプリで使っているVue関連のライブラリは下記の通り。これを1つずつ確認していきます。

pakage.json (一部抜粋)

{
    "dependencies": {
        "@fortawesome/vue-fontawesome": "^2.0.6",
        "konva": "^8.2.2",
        "vue": "^2.7.14",
        "vue-konva": "^2.1.7",
        "vue-loader": "^15.9.8",
        "vue-multiselect": "^2.1.6",
        "vue-template-compiler": "^2.6.14",
        "vuejs-paginate": "^2.1.0",
    }
}

Vue3用へ移行

Vue本体

公式をまずは確認。Vue3を使う前提条件として下記のような記載がありました。

前提条件

コマンドラインに慣れている

Node.js のバージョン 18.0 以上をインストールしている

Nodeのバージョンを確認みると、幸運なことにすでにNode.jsのバージョンはすでにv18になってました。

node -v
> v18.17.1

package.jsonからvue関連のライブラリを一旦削除してから、vue3に対応しているライブラリを追加していきます。

yarn add vue
> info Direct dependencies
> └─ vue@3.3.12
> info All dependencies
> ├─ @vue/compiler-sfc@3.3.12
> ├─ @vue/reactivity-transform@3.3.12
> ├─ @vue/reactivity@3.3.12
> ├─ @vue/runtime-core@3.3.12
> ├─ @vue/runtime-dom@3.3.12
> ├─ @vue/server-renderer@3.3.12
> ├─ csstype@3.1.3
> └─ vue@3.3.12

見慣れない@vue/compiler-sfc@3.3.12というパッケージがインストールされたので調べてみると、vue-template-compilerが置き換わったものとのこと。
というわけで、こちらも明示的にpackage.jsonへ追加しました。

yarn add @vue/compiler-sfc

vue-loader

vue-loaderのGithubを確認すると、v15までがVue2用で、Vue3はv16以上を使う必要がありそうです。そのため、`vue-loaderもバージョンを上げていきます。

yarn add vue-loader

@fortawesome/vue-fontawesome

Githubを確認するとvue-fontawesome (with Vue 3)とデカデカと書いてあります。普通に最新版を使えばVue3に対応しているようです。

yarn add @fortawesome/vue-fontawesome

vue-konva

vue-konvaの公式ドキュメントを見ると、丁寧にVue2とVue3のときのインストールの違いが記載されていました。Vue3の場合は、普通に最新版をインストールすれば良さそうです。

yarn add vue-konva konva

vue-multiselect

Githubを確認すると、Vue3は@nextタグをつけてインストールすれば良いとのこと。@nextタグのバージョンを見てみると、v3.0.0-beta.3となっておりベータ版のようです。

vue-multiselectは似ているライブラリとして@vueform/multiselectというものがあり、こちらは正式リリースしたバージョンでVue3に対応しているようです。

vue-multiselectとほとんど変わらないようなのですが、このライブラリに関しては独自のcssをあてたりしてカスタマイズしているため、同じようなライブラリだとしてもライブラリを変えたときの工数が読みにくく一旦ベータ版で動くことを確認してから、ライブラリを載せ替えることにしました。

ということでこちらは@nextをつけてインストールします。

yarn add vue-multiselect@next

vuejs-paginate

Githubを確認してみると、明確にVue2に対応と記載されています。このパッケージはどうやらVue3に対応していないようです。ぐぐってみると、vuejs-paginate-nextというライブラリが見つかり、そちらのGithubを確認すると、なんとvuejs-paginateをベースにVue3に対応させたとの記載がありました。

vuejs-paginateは特にカスタマイズして使っているわけではないため、vuejs-paginate-nextを使ってもそのまま動きそうなので、こちらはライブラリを変更します。

yarn add vuejs-paginate-next

終わりに

一旦vue関連のライブラリのVue3対応が完了しました。
ライブラリを変更したものもあるため、うまく動作せずにソースコードに手を入れる必要がある可能性もあります。なので、特に今回変更したライブラリに関しては重点的に動作確認していく必要がありそうです。

最終的には、pakage.jsonは下記のようになりました。

pakage.json (一部抜粋)

{
    "dependencies": {
        "@fortawesome/vue-fontawesome": "^3.0.5",
        "@vue/compiler-sfc": "^3.3.12",
        "konva": "^9.2.3",
        "vue": "^3.3.12",
        "vue-konva": "^3.0.2",
        "vue-loader": "^17.3.1",
        "vue-multiselect": "^3.0.0-beta.3",
        "vuejs-paginate-next": "^1.0.2"
    }
}

[次回]
ビルド編へと続く。