【2023年版】React vs Angular vs Vue.js。JSフレームワーク徹底比較！

この記事では、現在もっとも人気のある3つのJavaScriptフレームワークを様々な角度から比較・分析し、プログラミングを学習する人に、またフレームワークの導入を検討する企業に向けて、どのようなケースでどのフレームワークを選択すべきかアドバイスをしたい。

なお、著者はフロントエンドエンジニアとして２年ほど業務でAngularを使用している。ReactとVue.jsはプライベートなプロジェクトにてそれぞれ1カ月ほど使用している。

フレームワークとは？

まずはフレームワークの定義について確認しておきたい。

フレームワークとは、あるプログラミング言語を使用して、システム開発をおこなうための共通の枠組み。

フレームワークが提供する型に従って開発をおこなうことにより、一貫性があり可読性に優れたソフトウェアが開発できる。

なお、この記事ではJavaScriptをJS、TypeScriptをTSと省略する。

React・Angular・Vue.js

今回、比較するのはReact・Angular・Vue.jsという、今もっともポピュラーな3つのJSフレームワーク。

それぞれを詳しく見ていこう。

基本的な情報

以下の表は3つのフレームワークの基本的な情報をまとめたものだ。

なお、3つのフレームワークともにMITライセンスで管理されており、無料で使用することができる。

シングルページアプリケーション（SPA）について

3つのフレームワークに共通するのが、どれもシングルページアプリケーション（以下SPA）を制作できるという点。

SPAとは、ひとつのWebページにアプリ全体を納めるという構造を持つアプリケーションのことを指す。

SPAではページを切り替える際に読み込みが発生しないので、デスクトップアプリケーションのような快適な操作性をユーザに提供できる。

デメリットとしては、サイトを始めて開くときやページをリフレッシュする際のロード時間が長いという点が挙げられる。

React

ReactはFacebookにより開発されているJSフレームワーク。

ReactはUIに特化したフレームワークでありデフォルトでは最小限の機能しか持たないが、サードパーティ製のアドオンを使うことにより高機能なWebアプリケーションを作成することも可能だ。公式サイトではReactはフレームワークではなくライブラリと呼んでいる。

Reactアプリはコンポーネントの組み合わせによって構成され、ビューとロジックはひとつのファイルに記述する。

コンポーネントはJSXと呼ばれるJavaScriptを拡張した構文で記述することもできる。

Reactは世界中で使われているため、サードパーティ製のアドオンやライブラリの数も非常に多い。これらを使用すれば素早く高品質でデザイン性に優れたWebアプリを作成することができる。

また、React Nativeを使用すればスマーフォンのアプリ（Android、iOS）も作成することができる。

Angular

AngularはGoogleにより開発されているJSフレームワーク。

アメリカやヨーロッパではReactと同じレベルで広く普及しているフレームワークだが、日本では採用している企業は少ないようだ。

他の2つのフレームワークとは異なりAngularはフルスタックフレームワークであり、Webアプリケーションの開発に必要となるルーティング、ユニットテストなどの機能はパッケージに含まれている。

機能が多いだけにマスターするのに必要となる学習コストは高くなる。追加でアドオンなどを入れる必要は無いので、互換性や相性を気にしながらライブラリを探す手間は省ける。

なお、AngularJSはAngularの前身にあたるフレームワーク。動作原理やHTMLの構文など多くの部分で違いがあるため、まったく別のフレームワークだと考えたほうがいいだろう。

Vue.js

Vue.jsはここ数年で注目を集めるようになったJavaScriptのフレームワーク。

開発者のEvan You氏は元Googleの開発者であり、Vue.jsは開発コンセプトの部分でAngularJSからインスピレーションを受けている。

ただし、フレームワークの特性としては、バーチャルDOMの使用、ビューへのフォーカスといった部分でAngularよりもReactに多くの共通点を見出せるだろう。

Vue.jsの一番の特徴は必要な機能だけ追加していくという、ミニマリスティックなコンセプトだ。また、学習コストが低いとされており、Webサイトの開発に必要な知識を備えていればすぐにVue.jsを使ったプロジェクトに参加できる。

様々な観点から比較する

ここからはそれぞれのフレームワークを様々な観点から比較してみよう。

ロード時間や反応速度

まずはロード時間や反応速度などのパフォーマンスの面から比較していきたい。

結論から言えば今回紹介した3つのフレームワークはどれもユーザにストレスを与えない軽快な動作を実現しており、パフォーマンスの面から候補を絞り込むといったことはする必要が無いだろう。

ファイルサイズはAngularが一番大きいがそれでも平均的なウェブサイトのサイズである約2MB以下だ。

学習コスト

学習コストに関して言えば、Vue.js < React < Angularという順で習得に必要となる時間は多くなるだろう。

ただし、Vue.jsやReactでそれなりの規模のプロジェクトを作成するなら、追加のライブラリが必要となるのでその分の学習コストはプラスで計算しないといけないだろう。

なお、先進的なWebアプリケーションを開発したいのであれば、WebRTCやServiceWorkerなどの技術を使いこなさないといけない。そのために必要となる技術勉強のための時間やプロトタイプ作成のための時間は、フレームワークの習得時間とは別に必要だと考えなければならない。

将来性

フレームワークを選択するうえで、開発が今後も継続されていくか、また利用するユーザ数が減少することが無いかというのは大きなポイントとなる。

まず、JavaScriptを使ったWebアプリケーションという点で考えれば、今後、市場が大きくなるのは確実でありこの先10年程度は衰えることが無いだろう。

RaectはFacebook、AngularはGoogleにより開発されていることからこの2つのフレームワークは今後も継続してアップデートされていくのは確実だと思われる。Vue.jsは今後のコミュニティしだいだが注目度の高さからすぐに廃れるということは考えづらいだろう。

結論

最後にそれぞれのフレームワークを比較しながら、個人・企業それぞれにとってベストなフレームワークの選択方法について考えていきたい。

導入するべきフレームワーク

まずは企業にとって導入すべきフレームワークについて。

どのフレームワークを選ぶかは以下の３点を加味して考慮してほしい。

• プロジェクトの規模
• デザイン重視 or 機能重視
• 開発チームのバックグラウンド

プロジェクトの規模

プロジェクトの規模が大きく開発に携わるメンバーの数も多いならば、フルスタックフレームワークであるAngularをオススメする。

Angularは規模が大きくなっても複雑さを増幅させないようなアーキテクチャの仕組みがすでにある。

まずはプロトタイプ的な感じでプロジェクトをスタートさせたいならば、学習コストの低いVue.jsが最良の選択だろう。

デザイン重視 or 機能重視

開発するアプリのタイプによっても適したフレームワークは異なる。

多くの機能を持ち習得に時間のかかるAngularはデザイン重視のアプリの開発に向いていないのかもしれない。

デザイン・機能どちらも重視するのであれば、ビューに重きを置き、なおかつ数多くのプロジェクトで既に使用されているReactを選択するといいだろう。

開発チームのバックグラウンド

既存の開発チームのためにJSフレームワークを選ぶのなら、チームメンバーのバックグラウンドにも考慮したほうがいいだろう。

今までJavaなどの言語でデスクトップのアプリケーションを制作してきたメンバーであれば、オブジェクト指向で静的型付け言語の特徴を持つTypeScriptのキャラクターを全面に押し出したAngularがベストな選択肢かもしれない。

メンバーがJavaScriptをメインで使ってきた人たちならば、HTML・CSS・JavaScriptというWebの基本セットを下地となるReact、 Vue.jsが適しているだろう。

学習するべきフレームワーク

次に開発者が学習するべきフレームワークについて。

結論から言えば、どれを選んだとしても使っている企業がまったく見つからないということは無いだろうし、今後そのフレームワークが使われなくなるという心配はしなくてもいいだろう。

それでもどれを選んでいいのか分からないという人は、以下の理由からまずはReactを習うのが無難だろう。

• すでに多くの企業で使われている。
• UdemyやYouTube上の学習教材が豊富。
• サードパーティ製のライブラリも充実している。
• StackOverflowでの質問数も多い。

プログラマの求人案内に定期的に目を通し、どういう規模のどういった職種でどのフレームワークが一番よく使われているのかというのを把握するのに務めてほしい。