Vue2 ⇒ Vue3への移行日記 ～ライブラリ調査編～

# はじめに
この記事は [DENSO アドベントカレンダー 2023](https://qiita.com/advent-calendar/2023) の16日目の記事です。

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

[前回](https://qiita.com/usk0513/items/df7ad70969d63f402154)までに移行方針を決めたので、今回は現状使っているライブラリが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本体
[公式](https://ja.vuejs.org/guide/quick-start)をまずは確認。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`が置き換わったもの](https://qiita.com/ison12/items/6b5b3e0d8338b3baac83#npm%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)とのこと。
というわけで、こちらも明示的に`package.json`へ追加しました。

```
yarn add @vue/compiler-sfc
```

### vue-loader
[`vue-loader`のGithub](https://github.com/vuejs/vue-loader)を確認すると、v15までがVue2用で、Vue3はv16以上を使う必要がありそうです。そのため、`vue-loaderもバージョンを上げていきます。

```
yarn add vue-loader
```

### @fortawesome/vue-fontawesome
[Github](https://github.com/FortAwesome/vue-fontawesome)を確認すると`vue-fontawesome (with Vue 3)`とデカデカと書いてあります。普通に最新版を使えばVue3に対応しているようです。
```
yarn add @fortawesome/vue-fontawesome
```

### vue-konva
[vue-konvaの公式ドキュメント](https://konvajs.org/docs/vue/)を見ると、丁寧に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](https://github.com/lokyoung/vuejs-paginate)を確認してみると、明確にVue2に対応と記載されています。このパッケージはどうやらVue3に対応していないようです。ぐぐってみると、`vuejs-paginate-next`というライブラリが見つかり、そちらの[Github](https://github.com/cloudeep/vuejs-paginate-next)を確認すると、なんと`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"
    }
}
```

[次回]
[ビルド編](https://qiita.com/usk0513/items/41bff2bb9c69251114f1)へと続く。