🕵️‍♂️

ReactからVue3に移行した理由と感想

2021/09/24に公開

去年の末から開発しているWEBアプリでVue3を利用してます。

ここ数年のWEB開発はずっとReactを使っていましたが、色々と不満が蓄積していたので、思い切って他のフレームワークを利用することにしました。

そして、色々なフレームワークを検証して分かったのは、

いまや、React以外のフレームワークでもフロント開発は問題ない

ということでした。

この記事では、ReactからVue3に移行した理由、ReactからVue3にして良かった点と悪かった点を記載します。

React

フロントの開発でReactを使うのは、ここ数年のフロントエンドでは最も標準的な選択です。

私が初めてReactに触れたのは2018年前半、当時のverisonはv16の前半だったと記憶してます。
最初の印象は

「ちょっと文法がキモイけど、AngularやBackboneと比較すると、プログラミングっぽく書けるフレームワークだな」

でした。

しかし、数ヶ月経った頃には

「これはfront開発のスタンダードになる」

と確信してました。

当時の日本では、Vue(Nuxt)が人気でしたが、当時のVueはBackboneと似ていて学習コストが低い分フレームワークの作り込みが甘く、大規模開発では苦しくなることは明白でした。

特にtypescriptのサポートが弱いのは致命的でした。
なぜなら型の定義は、バグの少ないプログラミングをする上で欠かせない仕組みだからです。

その後、Vueの勢いは衰えました。案の定、Typescript連携の弱さと大規模開発だと苦しくなることが明らかになってきたからです。

そして、いまやfrontの開発はReactが標準になりました。

最近では、VueからReactに移行する仕事も見かけるようになりました。

Reactから離れる

今現在もReactを使った開発はうまくいっています。

ReactとTypescriptの相性は最高です。
Reactの登場により、以前のjsフレームワークでは辛かったUIも簡単に作成できるようになりました。

私自身、今もNextやgatsbyでwebサイトを作り、Docusaurusでドキュメントを管理しています。

しかし長く使っているが故に、多くの不満点もあります。

具体的には

  • 小規模や中規模のサービスを作るには無駄が多い
  • ReduxやMobxを使ってもstateの管理がしにくい
  • コード量が多くなる
  • cssの指定がclassNameなど独自属性名をもっているので、デザイナーからあがってきたソースをそのまま貼れない
  • 仮想DOMのレンダリングが遅い
  • formなど入力項目の多い画面の実装が面倒
  • 後方互換性を気にしすぎていて、React自身のイノベーションが起きてない
  • 飽きた

などです。

中でも、
「仮想DOMのレンダリングが遅い」のと「ライブラリを使ってもstateのコードが管理しにくい」
のはコードを書く上で、常にストレスです。

また、Reactの後方互換性の確保は素晴らしいと思いますが、常に古いコードでも動作するので、現場だといつまで経ってもレガシーコードから新コードへの移行が行われない傾向があります。

人は強制されないと何もしない生き物です。
重要度は高いけど緊急性の低いタスクをやるのは、ごく一部の人だけです。

Javaが後方互換性を重視するあまり、Javaで作成された多くのエンタープライズシステムがversion upをおざなりにして、大きな負債を抱えているのは良い教訓でしょう。

今、Reactは同じ道を歩んでいるように思えます。

他にも、Reactのコードそのものが肥大化していてビルド時間が長いのもストレスです。

これらの理由から、

「Reactの全盛期はあと数年」

と思ったので、次のプロジェクトからReactから離れることを決めました。

Vue3の選択と経緯

現代の開発でフレームワークを使わない選択は、生産性を考えるとありえません。
なので、React以外の以下のフレームワークを調査しました。

  • Svelte
  • Solidjs
  • Yew
  • Vue3

どのフレームワークでも開発はできる(不満はある)と思いましたが、最後はVue3を選択しました。

せっかくなので、各フレームワークの簡単な説明をします。

Svelte

正直いうと、

Svelteでいこう

と途中まで考えていました。

仮想DOMを使ってないので、Reactよりレンダリングが早く、検索で取得できる情報も多いです。

しかし、

コードスタイルが気に入らない

ので採用をやめました。

また、まだライブラリが少なく、車輪の再発明が必要なので開発時間が無駄にかかるのもマイナス要素だと思いました。

Solidjs

solidjsは

将来Reactの座を脅かすフレームワーク

になりえると思いました。

solidjsを端的にいうと

React風にコードが書ける仮想DOMじゃないフレームワーク

です。

しかもSvelteよりレンダリングが高速です。

Reactの不満点の解消を目的に作成されているので、文句のつけようのないフレームワークなのですが、ライブラリが少なすぎるので採用を見送りました。

しかし、将来性を感じる良いフレームワークだと思いました。

Yew

Yewはrustで記載するWebAssemblyのフレームワークです。

rustはbatch処理で使っているので学習コストも低いだろうと思って試してみました。

しかし、

Yewを使う利点がほとんど見出せない

という結果に終わりました。

やはりwasmはIotなどのエッジ処理で真価を発揮すると思います。
今のWeb開発ではまだ必要ありません。

もちろんShopifyのような使い方をするならwasmは良い選択肢だと思います。
しかし、一般的なフロントの開発では必要ありません。

Vue3

最後は採用を決めた

Vue3

です。

当初からダメ出ししていたvueを候補に入れたのは、vue2とvue3は別物であるという情報を手に入れたからです。

実際調べていると、確かに別物であるとわかりました。vue3はvue2の失敗から学んで相当書き直されています。

このことからも、vue2までの仕組みは、長所より欠点が目立ちすぎたことがわかります。

そして書き直されたVue3は、

想像以上に出来が良かった

です。

特に良かったのは

  • Composition APIの導入
  • typescriptとの連携強化

です。

Composition APIを使えば、サービスがスケールしても大規模開発に耐えられます。また、Typescriptにも対応しているので、型に関する無駄なバグも発生しません。さらに、仮装DOMの速度もreactより相当に早く、本体のファイルサイズも軽いです。

他にも

  • コンポーネントの非同期化も楽に行える。
  • Viteの導入
  • 充実したライブラリ

と圧倒的な進化を遂げていました。

しばらく色々なパターンを試して、

「Vue3が良い」

と決めました。

Vue3での開発

Vue3で開発を開始してからほぼ1年になります。
versionも3.2.13まで上がり、さらに洗練されたフレームワークになってます。

結論としては、

ReactからVue3に変えて良かった

と思ってます。

理由は、

  • typescriptとの相性も問題ないレベル
  • GraphQL CodeのCodegenを使って、サーバーサイドとの繋ぎこみもあっという間に実装可能。もちろんtypescript対応。
  • コードの分離も細かく可能。jestを使ったunit testも書きやすい
  • e2eテストにはplaywright-pythonを使っているが、レンダリングも早いのでe2eテストの生産性も高い。

このように、良い点をあげればキリがないです。

Vue3以前のVueを使って失望し、Reactに変更した人は騙されたと思ってVue3も試して欲しいです。
本当に素晴らしい仕上がりになっています。

むしろ、

今から立ち上げるプロジェクトでReactを選択しようとしているならVue3にするべき

です。

一方で気になるのは

  • vue2までの書き方でも開発できる

ことです。

Vue3から導入された機能を使った開発は、進化したReact的で生産性が高いのですが、以前の開発パターンを用いてしまうと、スケールした時に結局Composition APIを利用するコードに書き直す必要になる可能性が高いです。

なので、

Reactの開発を経験してからVue3を使う

のが一番良いのではないかという結論に至ってます。

まとめ

ReactからVue3に思い切って変更したのは、良い判断だったと思います。

将来的には

solidjs

に期待していますが、あくまで仮想でないReactに過ぎないので、その内勢力図を大きく塗り替えるイノベーティブなフレームワークが生まれると思います。

それまではVue3は良い選択肢であり続けると思います。

この記事が皆さんの選択になれば幸いです。

Discussion