この記事は Agent Grow Advent Calendar 2020 21 日目の記事です。

React VS Vue の戦いにそろそろ決着をつけようじゃないか

みなさん、Webフロントエンドで JavaScript 書いてますか？書いてますよね？

以前は Web開発といえば、サーバー側で HTML を作ってそのままブラウザで表示、
というパターンが多かったですが、
最近ではサーバーは API 化して、表示まわりは JavaScript で制御、
というスタイルも結構多くなってきましたよね。

そのため、フロントエンドにも何かしらライブラリを入れることも、
当たり前になってきました。

2020 年だと、主流は

React https://ja.reactjs.org/
Vue https://jp.vuejs.org/index.html

この二つ。
新しい Web サービスを作ろう！と思ったときに、
大体はこのどちらかを選ぶことになります。

さて、ここで問題が。
実際に、プロジェクトにどちらかを導入するにあたって、「実際の所、どちらを選んだら良いんだろう･･･？」
ということを必ず考える事になります。

実際、「React VS Vue」で検索をしてみると、情報が山のように出てきます。
皆さんが悩んだように、誰しもが悩み、そして一部の人は記事にしてまとめてくれています。

で、大抵の場合は、それぞれを色々な始点から、しっかりと比較をして、くれています。
メリット・デメリットを比べて、
「React と Vue はそれぞれこんな利点があって、どっちも良いライブラリだよね！」
という結末に落ち着くことになります。

それは間違いなく事実です。
どちらのライブラリも素晴らしいし、
ほとんどのケースで、どちらを選んでも後悔することはないでしょう。
私だって、React も Vue も同じように愛しています。

でもちょっとまって。
調べた結局、あなたはどちらを選択すればいいのでしょうか？

高機能で自由度が高いと言われがちな React ?
それとも学習しやすいらしい Vue ?

･･･困りましたね？
世の中にはそうやって困ってきた人が数多くいます。
（私も困った一人です）

いいでしょう。
せっかくの機会です。
今回この記事で、私が独断で決めてあげましょう。

もちろん、どちらも同じように素晴らしいですし、それぞれ得意なこと・不得意なことがあります。
開発チームのスキルセットによっても考えるべきポイントは変わってきますし、
React, Vue 以外の選択肢だってある。

でも、そういうのを全部一旦忘れて。
2021 年、あなたが React か Vue, どちらを選択すべきか。
私の独断で決めましょう。

皆様におかれましては、この結論を見た上で、それに乗っかるのも良し。
もっと客観的な比較を読んで、現実を見て選択するのも良しです。

では。
React VS Vue。
どっちを使うか問題に終止符を打ちに行きましょうか。

※
「Angular はどうなのか?」ですって!?
申し訳ないですが、あれは今回の比較からは外してしまいました。

去年のデータですが、一度使った人の半数以上は「もう一度使いたいとは思わない」と回答しています。
https://2019.stateofjs.com/front-end-frameworks/angular/

もちろん、Angular にも良いところはありますし、選択肢として悪いとは言いません。
ただ、今回は、元々どれも素晴らしいライブラリであるところを、無理矢理独断で選ぶという趣旨ですから、
半数以上のユーザーに、二度と使いたくないと思わせた事実を覆してまで、
考慮すべきライブラリか･･･ということで外しています。

結論・Vue を使いましょう。

最初に結論をお伝えしておきます。
2021 年。あなたは Vue を使いましょう。

React 派の皆さん、そう怒らないで。

もちろん、 Vue を使おうと言うからには、理由があります。

これからご説明していきましょう。

Vue を使う理由その1: 見た目で分かりやすい

最初にして最大の利点。
コードを比べたとき、見た目で分かりやすいのが Vue です。

Vue は初心者がとっつきやすいとか、
React は細かい制御ができるとか、そういう話は置いておきましょう。

Vue のコードが分かりやすい理由。
それは純粋にただ一つ、SFC を使うことで、HTML と JS を分けてかけるからです。

https://jp.vuejs.org/v2/guide/single-file-components.html

Vue では、HTML 部分と JS のロジック部分を分けて書くことができます。
一方、React では JSX と呼ばれる、JS の中にタグを書くような記法を使用します。

たとえば、 1,2,3 の文字を、配列をループして
単純にブラウザに表示するコンポーネントを作ってみるとこちら。
パッと見で、構造が分かりやすいのはどちらでしょうか？

ほとんどの人が Vue の方が、やっていることがなんとなく分かりやすい、と感じるはずです。

理由は、HTML、すなわち文章・デザイン上の構造部分と、
JS のロジック部分が分離しているから。

熟練エンジニアの皆さんは「いや、どっちも大して変わらないだろ」と思うかもしれません。
何なら、react の方がある意味すっきりと見えていいのでは？という方もいらっしゃるかもしれません。

しかし、フロントエンド開発の経験が浅い人や、デザイナーの方など、
フロントエンドでのコーディングをメインでされてきていない方からしたらどうでしょうか？

構造について、簡単な記法を覚えるだけで読める Vue の方が読みやすいことは間違いないでしょう。

あなたがどのようなプロジェクトで開発するかにもよりますが、
プロジェクトの進行次第では、様々な人が関わる内容になるかもしれません。

プロジェクトの将来的な展望も込みで、この Vue の分かりやすさは非常に強い利点だと考え、
これを一つ目の理由としました。

Vue を使う理由その2: ライブラリで迷わない

Vue では、ルーターやストアなど、開発でよく使うライブラリが
ほぼ公式でサポートされています。

一方、React では公式となるライブラリがない分、
高機能なライブラリを自分で選択して、外部から持ってきて使うことができます。

React のように、様々なライブラリを組み合わせて使うという進め方も、
確かに利点があります。

しかし、そもそもですが、大抵の開発において、ライブラリの選択幅があることは重要でしょうか？

私としては、ライブラリでやりたいことは大抵決まっているだろうと考えています。
であれば、そこに対して選定の手間や学習の手間をかけることより、
公式でサポートされているような、ある程度使いやすく・つなぎやすいライブラリを持ってきて、
より実開発に時間を割く方が有益･･･だと判断しています。

ということで、これを二つ目の理由としました。

Vue を使う理由その3: ライブラリ自体の開発が安定指向

Vue と React を比較すると、Vue の方が機能追加や改変が緩やかです。

裏取りできるような情報が見つけられなかったので、
それぞれの開発状況を見た私感にはなりますが、

React: 先進的な機能を取り入れ、出来ることの幅を広げ、JS フロントエンドの発展を牽引する
Vue: 書きやすく、メンテナンスしやすいコードになるよう設計し、プロジェクトを安定的に成長させる

という側面を持っているように感じています。

その特色が濃く出ている所として、React ではドキュメント上にも「実験的機能」として、
新しい機能を積極的に取り入れていくセクションが設けられています。
React では、貪欲に新たな内容を取り入れ、
使っていくことでそれらを洗練させたものへと昇華させていく形での機能開発が進められていますね。

逆に Vue では、最近 Vue3 としてメジャーアップデートがありましたが、
追加されている機能を見てみると、React がたどった内容と同じ方向性の内容のものが多くあります。
（例えば、コンポーネントがクラスベースの書き方ではなく、関数型の方針に変わっている等）
React で成功した内容を取り入れることで、
確実にバージョンアップを図っていく…という姿勢が見えます。

また、Vue3 のリリースは実は初期の予定よりそこそこ遅延したのですが、それも、
「新しい技術を早く提供するよりも、安定的に使用できるライブラリを提供することに価値がある」
という方針に従って開発を進めてきた結果であり、
やはり開発姿勢として、安定して使えるということを大切にしているようです。

新しい技術を使いたいと考えている場合は、React 一択です。
逆に、安定した、使いやすい技術を使いたいと考えている場合は、Vue の方が良いでしょう。

基本的には、プロジェクト開発ではライブラリの仕様変更・バグを考えずに開発に専念できることが、
開発スピード・安定性・機能の充実につながるでしょうから、
三つ目の理由として、Vue を推すのにも十分な理由になるのではないでしょうか。