はじめに
この記事は DENSO アドベントカレンダー 2023 の16日目の記事です。
私は、社内でWebアプリを開発しているのですが、Rails6×Vue2で作っています。
ただ、Vue2のサポートが今年いっぱいで切れてしまうので、Vue3へ移行することになりました。
せっかくなので、移行の経緯を残しておこうと思い、筆を執っています!
前回までに移行方針を決めたので、今回は現状使っているライブラリがVue3に対応しているか調査していきます。
使用中のVue関連のライブラリ
私たちのWebアプリで使っているVue関連のライブラリは下記の通り。これを1つずつ確認していきます。
{
"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
は下記のようになりました。
{
"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"
}
}
[次回]
ビルド編へと続く。