あらためてReactとVueを比較してみる〔2020年最新版〕

---

どーもじゃけぇ(@bb_ja_k)です。

フリーランスとして普段はフロントエンドメインで仕事してます。

３大モダンフロントエンド フレームワーク/ライブラリ と言えば

React、Vue、Angular

ですね。

「まずはどれか習得しようかなぁ」と考えている人の多くはReactかVueの選択で悩むのではないでしょうか。

フロントエンドは本当に技術の革新が早いので、ReactとVueの比較記事を見ても割と古い情報での比較が散見されます。

ReactはHooksの登場で大きく変わりましたし、VueもComposition APIを含むメジャーバージョンアップであるVue3も控えています。

正直これから勉強を始める人は何がなんだかって感じだと思いますし、せっかくだったらなるべく無駄にならないほうをやりたいなーと思うことでしょう。(自分もモダンフロントエンドを勉強し始めた時めっちゃ調べました←)

ということでこの記事ではなるべく最新の情報においてReactとVueを比較することで皆さんの技術選択の見通しを良くすることを目的とします。

指摘やご意見等コメントどんどん頂けたらと思います。参考になる部分があればシェアもしていただけると嬉しいです。

ReactとVueの比較表

全体をイメージしやすいように表でまとめました。

画像とテーブルどちらも載せておきます。画像はご自由に保存して社内等でご使用ください。

尚、ReactはHooksを前提としての記述となっています(新しく作る場合クラスコンポーネントはほぼ使用することがないと思うので…)

	React	Vue	備考
テンプレート	JSX記法 (JavaScriptの中にHTMLタグを書いていく)	見慣れたHTMLベース	Vueは基本的に.vueファイル内にHTML、JS、CSSを３つエリアに分けて書くので 一般的なWEB開発経験者は取り組み易い。 一方ReactはJSファイルのみで構成され、JSXというJS内でHTMLを返却する記法に慣れる必要がある。
データバインディング	単方向性 (データは常に単一方向に動く)	双方向性 (データは双方向に動く)	Reactは「UIは状態の関数」という思想があり、純粋関数の組み合わせのようなコンポーネントの組み方をする。 Vueはデータバインディングに便利な機能を持ち合わせているが、その反面データの流れが複雑になる ケースがある。
テスト、デバッグ	◯	△	上記(データバインディング)の理由で、よりテスタブルなのはReactである。
型保持性 (TypeScriptとの相性)	◯	△	ReactはJSのファイルのみで記述することもあり、TypeScriptとの組み合わせが容易(相性が良い) Vueは相性が良くないと言われていたがTypeScript化に向けて動いており、 composition-api (vue3で導入予定だがvue2ではpluginとして利用可能)の導入により型推論が有効になるので、 相性は徐々に改善されている。
学習コスト	JavaScriptをある程度 知らないと高い	比較的低い	ReactはJSの機能を存分に生かして開発していくのでJSへの理解がある程度必要。 Vueはいくつかの便利なディレクティブを用意してくれているので、ReactほどJSを使い倒さなくても開発可能。
公式ドキュメント	チュートリアル コンセプト 基本機能の紹介	基本機能の紹介 充実している 他ライブラリも紹介	どちらも公式ドキュメントは日本語で充実しているが、Vueのほうがより丁寧な印象。 Vueはルーターや状態管理もほぼ一択なので、公式ドキュメント内で使い方が紹介されている。 Reactは実際に３目並べを作るチュートリアルが用意されている。 Reactはその他の周辺ライブラリは別途自分で選定、使い方を調べる必要がある。
スケーラビリティ	大規模へのスケールも可	小〜中規模が良い	データの単方向性、テスタブルなこともありReactは小〜大規模まで耐えうると言われている。 Vueの簡易さは両刃の剣であり、スケールにつれてデバッグとテストが困難になりがち。
市場	世界的に見るとReactが圧倒的	中国を中心に アジア圏で人気	Vueは後発ということもありここ2.3年でシェアを伸ばしつつも世界的なシェアではReactが圧倒的。 特に2019年のReact Hooksの登場でシェアに拍車がかかったよう。 Vueは世界的に見るとまだまだシェアが低いが、中国を中心にアジア圏で人気となっている。 (開発したのが中国人のEvan You)
将来性	FaceBookによるバックアップ	コミュニティベース	大企業のバックアップがあるという点でReactの安心感は大きい。 (FaceBookもReactにけっこう力を注いでいる) Vueはここ数年でシェアを獲得しているが、大企業のサポートがあるわけではないので今後はまだ不透明 (公式サイトで募金支援ページを設けてたりする)
こんなシステム(チーム) に向いている	ある程度の規模にスケールする可能性有 型やテスト等堅牢な開発をしたい 有識者が１人いる PJに応じて柔軟にセットアップしたい	動くものをさくっと作りたい JSに精通している人がいない デザイナーと共同したい ある程度の枠組みの中で開発したい	Reactの場合周辺ライブラリも同時に取り入れて柔軟に開発していく必要があるので有識者が１人いないと スタートは苦労する。スケールへの耐性や堅牢度を高く保ちたいシステム向き。 Vueの場合、見慣れたHTMLテンプレートベースなので習熟度の高くないメンバーもキャッチアップし易く、 デザイナー(マークアップ)も加わりやすいのでとにかく動くものをサクッと作りたい時向き。

少し見辛いですがご了承くださいm(..)m

以下でそれぞれ説明していきます。

ReactとVueの違い

テンプレート

テンプレートですが、ReactはJSX記法というものを一般的に使用する一方、VueはHTMLベースのテンプレート構文を使用します。
※VueでもJSXを使用できますが、そんな物好きはなかなかいないでしょうね…


JSXは慣れると使い勝手が良いんですが、如何せん従来の雰囲気に慣れている人は最初戸惑います。(私自身もそうでした)
※ただIonicのCEOでもあるMax Lynch氏がツイートで、「この技術使う前にはもう戻れないなってやつ何ですか？私はJSXです」と言っていたくらいなのでやはり慣れた先の恩恵はあります

What's the one piece of frontend tech that you could never go back from?

For me it's JSX

— Max Lynch (@maxlynch) April 27, 2020

JSXの例

Vueの一般的な構文

取っつきやすく、デザイナーがマークアップもするなどの場合、Vueのほうが取り組みやすいと思います。

データバインディング

Reactはデータの流れが単方向に固定されている一方、Vueは双方向データバインディングとなっています。

正直触ったことがない人はこれを聞いても「？？？」って感じだと思います。分かります分かります。

例えばテキストボックスに入力された値を変数に保持する場合、

となりますが、

とすることで、テキストボックスの値を変えてもstateが更新されますし、JavaScriptでstateを更新してもテキストボックスの値が変わります。

またemitという機構を用いることで子→親という操作もできてしまいます。

これだけ見れば「お、Vue便利じゃん」って思うかもしれません。たしかに便利は便利です。

ただデータのフローに柔軟性があるということはそれだけカオス化しやすいということでもあります。



一方Reactは「UIは状態の関数」という思想があり、純粋関数を組み合わせるようにコンポーネントを構築していきます。

便利さを求めるのか、堅牢さを求めるのか、case by caseかと思います。

テスト、デバッグ

コンポーネントのテストをする場合、外部の状態が結果に影響を与えないというのがよりテスタブルなのは分かるかと思います。

上述しましたが、Reactはデータのフローが単一方向でHooksの場合、純粋関数の組み合わせのようなコンポーネントの組み方をするのでテストが書きやすいです。

Vueはwatchやemit等があり他人が組んだコンポーネントを見たときに「あっここでこんなことしてたのか…っ」ってことが結構でてきます。

なのでテストの重要度が求められるようなプロジェクトの場合はReactのほうがハッピーになれるかもしれません。
※もちろんReact使えば絶対テスタブルかというとそんなこともないのでコンポーネント設計は大事です…

型保持性(TypeScriptとの相性)

これから新規にサービスを作っていく場合、TypeScriptを使わない理由はありません。

エディタの補完によってDX(Developer Experience)は格段に上がりますし、リファクタリング時などに事前にエラーを検出してくれるので改修も怖くなくなります。

となるとやはりTypeScriptとの相性というのは技術選定において大切な要素になります。

これに関してはReactに軍配があがります。

現在のVue2は型推論が上手くきかない等しんどい部分が多く、改善の意見も多かったみたいですね。

その影響もあってかVue3で導入予定のComposition APIを使えば型推論は改善されTypeScriptもだいぶ使いやすくなります。

ReactはそもそもJSファイルのみで構成されるので現在特にTypeScriptとの相性で不便なところはありません。

学習コスト

「学習コスト」というのは技術選定において大きなファクターとなります。

海外の記事を読んでいても技術比較の記事には大抵“Learning Curve”がポイントとして上がります。学習曲線ですね。

で、ReactとVueはどうかと言うと、

Vueはフレームワークということもあり、「こうしたければこれ使ってネ」みたいな感じで便利なディレクティブ等を用意してくれています。

また、上述したように見慣れたHTMLベースのテンプレート構文なのでその点も踏まえると学習コストはReactに比べ低いと言えます。

一方ReactはJavaScriptの機能をふんだんに使って作っていくこと、JSX構文に慣れること、その他周辺ライブラリについても知る必要があること等を踏まえると学習コストは高くなると言えます。(逆に言うとJSを既にそれなりに知っている人はReactのほうが面白いと感じるかも)

ただ有名な話ですが、

と言われています。


実際私もReact経験してからVueやったパターンでしたが、特に苦労することはなかったです。

学習曲線のどの部分を重要視するかによっても選択は変わってきそうです。

公式ドキュメント

公式ドキュメントは今はどちらも日本語のものが用意されていて非常に分かりやすいと思います。

React公式ドキュメント

Vue公式ドキュメント

Reactは基本機能の紹介や思想の話、特徴的なのは３目並べを実際に作るチュートリアルが用意されていることです。

Vueは各機能やディレクティブの使い方が丁寧に書いてあります。

また、Vue RouterやVuexなどの開発に必要になる周辺ライブラリの紹介も公式ドキュメント内でしてくれています。これから始める人に公式ドキュメントだけで開発できるように寄り添ってくれている感じです。

ReactはRouterや状態管理のライブラリ等は別途自分で調べて選定していく必要があります。

フレームワークとライブラリという根底にある考えが違うのも公式ドキュメントにあらわれてますね。

スケーラビリティ

大規模開発へのスケールに耐えうるか、というのも大切な観点です。

ここまでの話で想像はつくかと思いますが、スケーラビリティが高いのはReactです。

要因としてはデータの単方向性と、それに伴ってテスタブルなことが大きいです。

Vueの魅力である「簡易さ」というのは両刃の剣で、スケールするにつれてテストやデバッグが困難になっていきがちです。

市場

両者の市場はどうなっているのかと言うと、世界的に見ると圧倒的にReactが人気です。

Vueは後発ながらここ2、3年でシェアを伸ばしておりGitHubのスター数だけで言うとReactを超えています。

ただ2019年にReact Hooksがリリースされ、React人気に拍車がかかりました。


「モダンフロントエンドはHooksによって完成された」


とツイートしてる海外のdeveloperの人もいました←

Vueの特徴としては中国を中心にアジア圏で人気ということでしょうか。Vueを開発したのが中国人というのが原因かと思います。
(GitHubのスター数も中国人の人口が影響しているのではないかと推測している…)

日本国内だけで見るとどうなんでしょう(°°)

1、2年前はVueが多かった印象ですが、最近Reactを良く聞くようになった感もあります。

将来性

いかに素晴らしい技術もなくなってしまえば意味がありません。

「将来的にどうか」という点でも比べてみましょう。

Reactは何よりFacebookという大企業が開発しているので、安心感はあります。

Facebookも結構Reactに力を入れており、社内の開発にもReactを使用しているので積極的な改善に期待できます。



Vueはと言うと、大企業のバックアップがあるわけではありません。(逆にそれでここまでシェアを伸ばしているというのは可能性を感じる)

公式ページ内にサポート(募金)を求めるページがあるのも印象的です。

コミュニティーベースでこの調子で改善を繰り返していくのか、どこかに買収されるのか、不安もありつつ期待もあるという感じでしょうか。

こんなシステム(チーム)に向いている

最後に、「じゃあ結局どんな場合にどっちが向いているのか」ということをまとめたいと思います。

この記事を書くにあたりあらためて海外の記事等々読み漁りましたが、結局共通して書いてあるのが

「どちらも素晴らしいものなので、チームやプロジェクトなど様々な要因を加味して選定をするべきだ」

ということでした。

自分もその通りだと感じています。

Reactは自由度が高いので、チームに1人有識者がいないとしんどいと思います。

逆に1人でも有識者がいれば挑戦する価値はあります。

Reactの場合cssの当て方１つとっても色々な選択肢があるので、プロジェクトに応じて柔軟にセットアップしたいチーム等は楽しめるのではないかと思います。

Vueの場合、見慣れたHTMLテンプレートベースなので習熟度の高くないメンバーもキャッチアップし易く、デザイナー(マークアップ)も加わりやすいのでとにかく動くものをサクッと作りたい時にマッチします。

柔軟さよりも、ある程度決められた枠組みの中で開発したいという場合には良い選択です。

「どんなシステムか」
「どんなメンバーがいるのか」
「何を大切にしたいのか」

によってチーム開発での技術選定は変わってきそうです。

結局ReactとVueどっちがオススメ？

では個人でこれから勉強しようと思っている人向けに「結局どっちがオススメなのか」をお伝えします。

ただこれからは俯瞰ではなく完全な主観なので悪しからず！

結論から言うとReactがオススメです。

Reactでやること、概念等はVueのそれを包含していると思います。(現にComposition API等Reactによってきている感がある)

JavaScriptのレベルも上がるし、関数型言語的な考え方も身につきます。

Hooks以降の人気も圧倒的ですし、やはり欧米で評価されているというのも大きいです。

ただ、

「そもそもJavaScriptも最近勉強し始めたばっかりだ！」
「DOMってなんだ！」

っていう人はいきなりReactは混乱すると思うのであまりオススメしないです。やるなら人より頑張れるという自信のある人で←

じゃあいきなりVueやれば良いのかというとあまりそうとは思えなくて、個人的には素のJavaScriptまたはjQueryを使ってTODOリストや掲示板みたいなものを1回作ってみたほうが良いと思います。

手続き的にDOM操作することがどういうことなのか、それがReactやVueを使うことででどう変わるのか、これを体感することは非常に重要です。(ここで仮想DOMってSUGEEEEEってなる)

その後にReactやるか、Vueやるかはこの記事を参考にしつつ決めてみてください。

↓に参考記事のリンクも載せておくので是非是非読んで見てください。情報が新しいものを中心にまとめてます。

参考記事

React.js vs. Vue.js
　Hooksの登場によりReactが最適なフレームワークのように思える。
　Hooksは「UIは状態の関数である」を最もシンプルに表現できる

JSフレームワーク事情2020年始め
　数字から見ると世界的にReactがシェアを奪っている
　その理由はTypeScriptとの相性、Hooksの登場が大きいと考える

Vue・React・Angularのパフォーマンス比較検証
　Reactが性能面で総合的に有利(※ただReactはライブラリを足し足しで使っていくので必ずしもこの限りではない部分もあるかと思います)
　Vueは大量にコンポーネントを配置するような場面においては不利
　ただ、小規模なプロダクトにおいて負荷が問題になる場面は少ない

Angular vs React vs Vue: Which Framework to Choose in 2020
　1番歴史が浅いが、ここ数年でVueの人気は伸びている(現にGitHubのstar数はReactより多い)
　Reactの学習は公式ドキュメントである程度できるが、実際にはその他ライブラリと組み合わせてつかう必要があるので未知数
　Vueは高いカスタマイズ性がありReactより習得は容易、反面貧弱なコードも許容するためテスト、デバッグが困難になることがある
　Reactは歴史、市場的にも将来は明るい。柔軟性を好むスタートアップ向き
　Vueは後発でここまで人気が出ているのはよく出来ている証拠だ。大きな企業のバックアップがない点でまだ慎重になる必要があるが、簡易さを好む企業にはマッチするだろう。

さいごに

抜け漏れや、記述のおかしいところあるかもしれません。

このブログのコメントでも良いですし、以下のツイートへのリプでも結構ですので何かありましたら気軽にアクション頂けたらと思います！

書きました！
2020年現在のReactとVueを比較してます。
何かしら技術選定の見通しを立てるのに役に立てばと思います。

記事内の比較表はご自由に保存して頂いて大丈夫なので是非お使い下さい🚀

– あらためてReactとVueを比較してみる〔2020年最新版〕https://t.co/bMnvN8mswP

— フリーランス-じゃけぇ-.tsx@ノーマウント勉強会主催 (@bb_ja_k) April 30, 2020

スコープでReactの導入支援等もしますので、お仕事のご相談ももしあればご連絡ください。

フロントエンド万歳！

それでは！また！！