きままに記録箱

フロントエンドたまに他のはなし

Vue 3を取り巻く状況について移行作業を経験した身の視点で思ったこと

今日はてブこんな記事が話題になっていました。

記事を読んでて、以前そこそこ大きめのサービスでバージョン2からの移行作業を経験した者として色々思うことがあったので個人的な思いを書きまとめてみることにします。

筆者自身はComposition APIの難易度よりもエコシステム・コミュニティ周りの影響も強いように思っているため、書き方よりこれらの話がメインです。

Vue全体に対する個人的なスタンス

まっしろな状態から始める場合は全然選択肢に入ると思っています。

一方でバージョン2から3へ移行する場合は、覚悟を決めて時間に余裕を持ってやる必要があります。むしろこれが一番の鬼門です。メンバーがフロントエンド開発に慣れてないとやってられなくなるレベルです。

Vue3への移行の辛さ

筆者が以前関わっていたプロジェクトではComposition APIには移行せず、2時代のOptions APIのまま進めてたのですが、先を見据えた対応を進めていたため、エコシステム・周辺ライブラリの大幅変更に追いつくのに必死でした(VuelifyみたいなUIライブラリを使ってなかったのは救い、、、)。

このとき個人的につらいなと思ったのが以下2点です。

  1. EOL(サポート終了)のアナウンスタイミング
  2. 周辺ライブラリの大幅入れ替え・breaking change

順に語っていきます。

EOLのアナウンスタイミング

Vue2のEOLが初めて明言されたのが3が登場して2年近く経った2022年6月のこの記事だったと記憶しています。

blog.vuejs.org

表向きはバージョン2.7のアナウンス記事ですが、最後の最後にこの一言が登場します。 ただしこのときはまだVue2のサイトには大きなEOLに関するアナウンスはまだなく、気づかなかった人も結構いたんじゃないかと思います。

This means Vue 2 will reach End of Life by the end of 2023

同年11月頃に以下の記事が投稿されて、EOLへのカウントダウンが本格化。

v2.vuejs.org

一方同じ時期にNuxt3も安定版に移行してました...って

nuxt.com

VueはまだしもNuxt、もう1年しかないのにNuxt2を使い続けている人達に対してこの仕打ちはあまりにもひどくないですかね。。。 Vue2がEOLを迎えた瞬間、Nuxt2もEOLになるわけですが、未だNuxt2の公式サイトを見てもこの記載はありません。

endoflife.date

これではすでに勢いマシマシだったNext.js、早い段階からベータ版と目立ったアナウンスを出していたNuxt3とほぼ同じ時期に安定版が出ていたSvelteKitに逃げたくなります。筆者はすでに逃げましたが。

周辺ライブラリの大幅入れ替え

「Vue 3 migration guide」というアップデート手順が丁寧に記載されているページがある。 このページを見てもらえばわかるが、推奨ライブラリがほとんど入れ替わってしまっている。

v3-migration.vuejs.org

一応Vue 2では定番だったVue CLIおよびVuexも引き続きバージョンアップすれば使えるものの、前者はすでにメンテナンスモード、後者も更新がほとんどない。なので、近いうちに非推奨にされそうな雰囲気がしてたまらず、結局推奨の方に変えたほうがいいよねってなる*1。 Piniaは大きいアプリを作っているとこの仕様が本当に痛すぎる…

あと、文面上はバージョンアップだけになっているVue Routerとtest utils(テストツール)もVue 3のAPI 刷新に合わせて変更箇所は多いです。武器になるはずのユニットテストすら当分は全然動かせません。

唯一の希望がESLintのプラグインではないかと思うくらいなレベルです*2

Nuxtはライブラリごとに基本それ専用のModulesを使うことになるので、その結果どうなったかはお察しの通りです。

おわりに

色々不満を書いてしまいましたが、バージョン2からの移行がしんどすぎるだけで新規でアプリを作っていくならグッドだよというのは強調しておきます。

最後にこの時期移行を頑張っている人たちのために助けになる記事を置いて置きます。

これは移行作業に携わっていたときに書き進めていたメモをもとに書いた筆者の記事です。 主に下準備段階に関してまとめています。

zenn.dev

こちらの記事は書き方がメインとなっています。2と3のコード比較も乗っていて非常にわかりやすいです。

zenn.dev

Nuxtはこんな記事が最近出てました。

zenn.dev

破壊的変更は人が離れるのでやっぱりダメです。

*1:ViteはNext.jsの世界にいるとどうしても語られませんが、早いし全部ES Modulesベースで使えるので非常に素晴らしいライブラリだと思っています。

*2:Vue本体をアップデートするだけならツールが用意されていて、丁寧にメッセージを出してくれるので、個人的にはマシだと考えます。なおその後のエラーは状況によりけりです...