Angular vs React vs Vue 2022

公開: 2020-11-26

すべてのフロントエンド開発者が聞いたことがあるWebアプリケーションを構築するための3つのフレームワークがあります：React、Vue.js、およびAngular。

ReactはUIライブラリであり、Angularは本格的なフロントエンドフレームワークであり、Vue.jsはプログレッシブフレームワークです。

これらはほぼ互換的に使用してフロントエンドアプリケーションを構築できますが、100％同じではないため、それらを比較して違いを理解することは理にかなっています。

各フレームワークはコンポーネントベースであり、UI機能を迅速に作成できます。

ただし、それらはすべて異なる構造とアーキテクチャを持っています。そのため、最初に、それらのアーキテクチャの違いを調べて、それらの背後にある哲学を理解します。

建築

React

Reactは特定のプロジェクト構造を強制するものではなく、以下の公式の「Hello World」の例からわかるように、わずか数行のコードでReactの使用を開始できます。

 ReactDOM.render（
  <h1> Hello、world！</ h1>、
  document.getElementById（ 'root'）
）;

Reactは、特定のプロジェクト構造を強制することなく、要素をレンダリングするためのUIライブラリとして使用できます。そのため、厳密にはフレームワークではありません。

React Elementsは、Reactアプリの最小の構成要素です。 React DOMは、何かが変更されるたびに効率的に更新するため、DOM要素よりも強力です。

コンポーネントは、アプリケーション全体で使用される独立した再利用可能な部分を定義する、より大きなビルディングブロックです。それらは小道具と呼ばれる入力を受け入れ、ユーザーに表示される要素を生成します。

ReactはJavaScriptに基づいていますが、ほとんどの場合、HTMLとJavaScriptを同時に含む要素を作成できる構文拡張であるJSX（JavaScript XML）と組み合わされています。

JSXで作成するものはすべて、React JavaScript APIを使用して作成することもできますが、ほとんどの開発者は、より直感的であるためJSXを好みます。

Vue

Vue.jsコアライブラリは、ビューレイヤーのみに焦点を当てています。 Vue RouterやVuexなどの公式およびサードパーティのパッケージを使用して機能を拡張し、実際のフレームワークに変換できるため、プログレッシブフレームワークと呼ばれます。

VueはMVVM（Model-View-ViewModel）パターンに厳密に関連付けられていませんが、そのデザインは部分的にそれに触発されています。 Vueでは、主にViewModelレイヤーで作業し、フレームワークが最新のビューをレンダリングできるようにアプリケーションデータが処理されるようにします。

Vueのテンプレート構文を使用すると、Viewコンポーネントを作成でき、使い慣れたHTMLと特別なディレクティブおよび機能を組み合わせます。生のJavaScriptとJSXもサポートされていますが、このテンプレート構文が推奨されます。

Vueのコンポーネントは小さく、自己完結型であり、アプリケーション全体で再利用できます。拡張子が.vueの単一ファイルコンポーネント（SFC）には、HTML、CSS、およびJavaScriptが含まれているため、関連するすべてのコードが1つのファイルに存在します。

SFCは、Vue.jsプロジェクト、特に大規模なプロジェクトでコードを整理するための推奨される方法です。 SFCを動作するJavaScriptコードにトランスパイルするには、WebpackやBrowserifyなどのツールが必要です。

Angular

この記事では、Angular 2について説明していますが、現在AngularJSとして知られているフレームワークの最初のバージョンではありません。

元のフレームワークであるAngularJSは、MVC（Model-View-Controller））フレームワークです。ただし、Angular 2では、コンポーネントベースでもあるため、MV *パターンとの厳密な関連付けはありません。

Angularのプロジェクトは、モジュール、コンポーネント、およびサービスに構造化されています。各Angularアプリケーションには、少なくとも1つのルートコンポーネントと1つのルートモジュールがあります。

Angularの各コンポーネントには、テンプレート、アプリケーションロジックを定義するクラス、およびMetaData（デコレーター）が含まれています。コンポーネントのメタデータは、ビューを作成して表示するために必要なビルディングブロックの場所をAngularに指示します。

AngularテンプレートはHTMLで記述されていますが、特にリアクティブデータを出力し、複数の要素をレンダリングするための特別なディレクティブを含むAngularテンプレート構文を含めることもできます。

Angularのサービスは、データのフェッチや入力の検証などのビジネスロジックタスクを委任するためにコンポーネントによって使用されます。それらはAngularアプリケーションの明確な部分です。 Angularはそれらの使用を強制しませんが、アプリを再利用可能な個別のサービスのセットとして構造化することを強くお勧めします。

AngularはTypeScriptに組み込まれているため、最もシームレスなエクスペリエンスを得るにはAngularの使用をお勧めしますが、プレーンJavaScriptもサポートされています。

生態系

オープンソースパッケージは、アプリケーションを開発する際の貴重な時間を節約します。それだけでなく、バトルテストが行われているため、カスタムメイドのコンポーネントやパッケージよりも優れていることがよくあります。

新しい機能をより簡単に作成するのに役立つ、すぐに使用できるコンポーネント、テーマ、およびその他のツールの可用性を確認することが重要です。

React

多くのフロントエンドアプリケーションは、ログインしているユーザーやその他のユーザー設定などの情報を格納するために、グローバル状態管理に依存しています。

JavaScriptの状態管理で最も人気のあるプロジェクトはReduxです。ほとんどの開発者は、Reduxチームによって維持されているReduxの公式Reactバインディングを使用しています。

Reactは人気があるため、入力コンポーネントとすぐに使用できる要素を見つけるのは非常に簡単です。それらはすべて、GoogleまたはGitHubで検索するだけです。

Reactエコシステムには、Reactで記述された単一のコードベースからネイティブiOSおよびAndroidアプリケーションを構築できるReactNativeも含まれています。したがって、Reactは、Webテクノロジーを使用してモバイルアプリケーションを構築する場合にも最適です。

Reactは、MongoDB、ExpressJS、React、およびNodeJSを含むMERNスタックの一部です。この組み合わせの優れている点は、単一の言語（JavaScript）がアプリケーション全体を強化することです。

Vue

ReduxはVueで使用できますが、公式のバインディングはありません。ただし、VuexはVueアプリケーション専用に作成された公式の状態管理ライブラリであるため、心配する必要はありません。 Vueとの統合が非常に優れていることを除けば、Vueの開発者ツールを使用してデバッグするのは簡単です。

Vueの初期には、すぐに使用できるコンポーネントを見つけるのは困難でした。コミュニティが成長したため、開発をスピードアップするために使用できるさまざまな入力コンポーネントと高度な要素があります。

モバイルアプリの開発には、Weexと呼ばれる新進気鋭のプロジェクトがあります。 WeexはAlibabaによって開発および使用されていますが、ReactNativeほど成熟していて強力ではありません。さらに、このプロジェクトは中国で開発および使用されているため、英語の問題に対するドキュメントや解決策を見つけるのは困難です。

VueはLaravelとうまく統合されているため、一緒に使用されることがよくあります。 Laravelは、新しいプロジェクトでVueを使用できるようにするために、完全なJavaScriptおよびCSSスキャフォールディングを提供します。

Angular

Angularでの状態管理には、NgRxプロジェクトを使用できます。 Reduxに触発されていますが、Angular用に特別に作成されています。

VueとReactの場合と同様に、プロジェクトにインポートできるすぐに使用できるコンポーネントが多数あります。 Angularのわずかな違いは、AngularMaterialプロジェクトには多くの公式コンポーネントがあることです。これは、Angularアプリケーション用のマテリアルデザインコンポーネントを提供するGoogleによる公式プロジェクトです。

NativeScriptを使用して、Angularでクロスプラットフォームのモバイルアプリケーションを構築できます。 Vueもサポートしていますが、Angularのサポートはより成熟しています。

Angularは、AngularをMongoDB、ExpressJS、およびNodeJSと組み合わせた有名なMEANスタックの一部です。 MERNスタックと同様に、フロントエンドとバックエンドの両方でJavaScriptに完全に依存しています。

Common Technologies

Angular、React、およびVueはすべて、PWAとも呼ばれるプログレッシブWebアプリの開発に使用できます。

PWAはモバイルアプリケーションではなく、スマートフォンユーザーがホーム画面へのショートカットとして追加できるWebアプリケーションであり、ネイティブモバイルアプリと同様のルックアンドフィールを提供します。

フレームワークごとにプレミアムテンプレートと既成のアプリケーションを見つけることもできますが、AngularとReactにはVueよりも多くのプレミアムオプションがあります。

パフォーマンス

フレームワークまたはライブラリを選択するときは、パフォーマンスについても考慮する必要があります。

多くの場合、特に小さなプロジェクトを構築している場合は、パフォーマンスについて心配する必要はありません。ただし、プロジェクトの範囲と複雑さが増すほど、パフォーマンスが問題になる可能性があります（今後もそうなるでしょう）。

フレームワークの選択よりも、開発の品質とWebパフォーマンスに関するベストプラクティスに従うことが重要であることに注意することが重要です。

ただし、パフォーマンスメトリックと違いがいくつかあるので、それらを調べて、それぞれが開発作業にどのように影響するかを説明します。

JSフレームワークベンチマーク：Angular vs React vs Vue

JS Frameworkベンチマークの結果は、テーブル内の行の作成や追加など、ほとんどのベンチマークですべてが非常に良好に機能することを示しています。

上記のように、VueはAngularやReactよりも行の選択がかなり遅くなります。一方、AngularとReactは、行を入れ替えるのにあまり効率的ではありません。

これらは、ベンチマークのレンダリングにおける唯一の実質的な違いであり、ほとんどの場合、目立った結果は得られません。行の選択は行の交換よりも一般的な機能であるため、このベンチマークでは、VueがAngularとReactに次ぐ3位になり、トップの位置を共有していると言えます。

メモリと起動時間に関しては、ReactとVueのスコアは非常に高くなりますが、Angularのスコアは少し遅くなります。 Angularは基本的なスクリプトを起動するのに150ミリ秒かかることがあり、実行するにはより多くのメモリが必要です。

パフォーマンストラック：Angular vs React vs Vue

Google ChromeLabsのPerfTrackには、何千ものウェブサイトの制作データが表示されます。これらの統計は、選択したフレームワークだけでなく、他の多くの影響を受けますが、数値を見てみましょう。

最初の満足のいくペイント

VueとReactのWebサイトは、起動してユーザーにコンテンツを表示するのに時間がかかる可能性があるAngularと比較して、このメトリックのランクが高くなっています。

最大の満足のいくペイント

Angularは、完全なページのレンダリングにおいて3つのフレームワークの中で最も低速であり、Angular Webサイトの27％のみが許容範囲内でスコアを付けています。

最初の入力遅延

3つのフレームワークすべてで、Webサイトの80％以上が最初の入力遅延の許容範囲内にあります。これは、ユーザーがページを操作できるようになるまでにかかる時間を示しています。

JavaScriptバイト

最も軽量なアプリケーションは、Vueで開発されたものであり、Vueアプリの68％が1MB未満のJavaScriptをロードしています。一方、AngularおよびReactアプリケーションは、コードサイズが大きくなる傾向があります。

これらのメトリックの使用方法

これらの数字から傾向を見ることができますが、結論を出すのに早すぎるべきではありません。たとえば、最後の図では、Vueはより軽量なアプリケーションの開発に使用され、Angularはより大きなプロジェクトに使用されているという説明があります。

統計は、適切な決定を下すために役立ちますが、一方のフレームワークが他方よりも高速または優れていることを証明するために統計を使用することはできません。

高度な機能

より高度なアプリケーションの場合、使用中のフロントエンドフレームワークは、パフォーマンスを向上させ、拡張性を高めることができるいくつかのタスクを実行できる必要があります。

重要な2つのテクノロジーは、サーバーサイドレンダリング（SSR）と仮想化です。

React

Reactは、公式のReactDOMServerパッケージを使用してサーバー側のレンダリングをサポートします。仮想化には、ReactVirtualizedと呼ばれる人気のあるサードパーティツールを使用できます。

Vue

サーバー側のレンダリングは、公式のSSRパッケージでもVueでサポートされています。さらに、Vue上に構築されSSRをサポートするNuxt.jsフレームワークを使用することもできます。

残念ながら、Vueの仮想化オプションはそれほど強力ではありません。私の意見では、Vue Virtual Scroll Listは仮想スクロールに最適なソリューションですが、少しバグがあり、ReactやAngularのオプションほど安定していません。

Angular

Angularには、SSR用の公式のAngular Universalパッケージと、仮想スクロールと大きなリストの効率的なレンダリングのための公式コンポーネントがあります。

学習曲線

これらのフレームワークのそれぞれを学ぶのはどれくらい簡単ですか？

この質問に答えるには、各フレームワークの複雑さとそれらが導入する概念を調べる必要があります。

React

最も基本的なユースケースでは、Reactは3つのフレームワークの中で最も複雑ではありません。これは、ライブラリをインポートするだけで、数行のコードでReactアプリケーションの作成を開始できるためです。

ただし、Hello Worldの例を除けば、ほとんどのReactアプリケーションはコンポーネントベースであり、ページ上のいくつかの要素をレンダリングするだけではありません。

一部の開発者がReactについて奇妙または困難だと感じることの1つは、JSXの学習は一方通行であるという事実です。生のJavaScriptも使用できますが、ほとんどのReact開発者はJSXを使用しているため、それを学ぶことはほとんど避けられません。

これは、Reactの学習曲線を少し急にすることができる主なものですが、それを除けば、JavaScriptを知っていて、Web開発の概念を理解している開発者にとって簡単に習得できるライブラリです。

Vue

VueはReactよりもセットアップが少し複雑です。これをライブラリとして使用して、HTML全体で使用できるコンポーネントを定義できますが、Reactと同様に、これはほとんどのプロジェクトの構築方法ではありません。

ほとんどのVueプロジェクトには、 App.vueという名前のルートコンポーネントと、さまざまなものを表示するための多数の子コンポーネントがあります。

構文に関しては、Vueのテンプレート構文だけを学ぶ必要があります。これは、HTMLを知っていれば非常に簡単に理解できます。条件付きレンダリングやリストレンダリング用のv-ifやv-forなどの基本的なディレクティブは、初心者でも簡単に理解できます。

さらに、Vueの単一ファイルコンポーネントはすべてのフロントエンドコードを1つの場所に保持するため、新しいプロジェクトを簡単に整理できます。

私の意見では、Vueはその単純さと直感的な構文のために、学ぶのが最も簡単です。

Angular

Angularは、3つの中で最も複雑なプロジェクト構造を持っており、本格的なフロントエンドフレームワークであるため、より多くの概念に依存しています。

コンポーネントの他に、Angularはモジュールとサービスをサポートしています。プロジェクトがスケールアップしたときにプロジェクトをより保守しやすくする特定の方法でコードベースを記述および設計することを期待しています。

構文に関しては、AngularはTypeScriptで最適に機能するため、AngularプロジェクトをビルドするときはTypeScriptを知っていることが重要です。

Vueの場合と同様に、Angularを使用して新しいUI機能のコーディングを開始できるように、HTMLのような構文にも精通している必要があります。

私の意見では、Angularはより複雑で、TypeScriptに依存しているため、平均的な開発者にとって学ぶのは最も困難です。

将来の予測

多くのオープンソースプロジェクトとフレームワークは忘却に陥り、維持されなくなります。ここで説明しているフレームワークについて心配する必要がありますか？

何が起こるかを完全に予測することはできませんが、進行中の開発作業は、これらのプロジェクトの健全性の良い指標です。人気と成長もプロジェクトの寿命を予測するための重要な指標なので、各フレームワークを見てみましょう。

React

React v17.0がリリースされましたが、驚くべきことに、開発者向けの新機能は含まれていません。

主な変更点は、この新しいバージョンにより、React自体のアップグレードが容易になることです。プロジェクト全体をアップグレードしなくても、Reactの一部だけを古いバージョンから新しいバージョンにアップグレードできます。

アプリケーションが新しいバージョンで変更または非推奨になる機能に依存している場合は、古いバージョンを維持してこの機能を維持できます。このアップデートにより、Reactは新しいバージョンの最新情報を入手しやすくなるため、長期的に最適な選択肢になります。

Reactは、毎週のnpmダウンロードで昨年から44％増加しました。絶対数では、それはまだ3つのプロジェクトの中で最もダウンロードされています。

Vue

Vue 3は2020年9月にリリースされ、Vue2が大規模なプロジェクトで抱えている多くの深刻な問題に取り組んでいます。 ReactHooksに触発されたCompositionAPIを導入し、コンポーネント間でロジックを再利用しやすくします。

プロジェクト全体がTypeScriptで書き直されました。これにより、新しいVueプロジェクトでのTypeScriptのサポートが向上すると同時に、プロジェクトの保守性が向上します。

Vue 3は非常に必要とされているアップグレードであり、Vueを大規模プロジェクトにより適したものにします。

Vueの毎週のダウンロード数は昨年から87％増加しており、Vueは相対的な観点から最も急速に成長しているフレームワークになっています。 Vueがこの成長率を維持できれば、すぐにAngularを確実に上回ります。

Angular

Angularは最近Ivyコンパイラを導入しました。ビルド時間を短縮し、アセットを最適化し、テストを高速化し、一般的に開発者のエクスペリエンスを向上させます。

Angularチームは、メジャーアップデートを年に2回リリースします。これには、新機能を含めることも、新しいブラウザーバージョンでフレームワークを高速化することもできます。

Angularは、昨年から毎週のダウンロード数が約50％増加しているため、今でも人気のあるプロジェクトです。

結論

Angular、React、Vueはすべて非常に活発に開発されています。彼らは定期的に新しいバージョンをリリースし、既存のバージョンを維持します。現在のサポートレベルはいずれの場合も高いため、これらのフレームワークのいずれかを安全に使用できます。

Angularは以前ほど速く成長していないことに注意することが重要ですが、Vueは、最近開始されたとしても、大幅に成長しているようです。

前述のように、どのフレームワークが長期的に関連性を維持するかを予測することはできませんが、各プロジェクトにはその背後にある素晴らしいコミュニティがあり、絶えず進化しています。

この記事での私の目標は、アーキテクチャの違いを説明し、各フレームワークの長所と短所を分析し、該当する場合はそれらを比較することでした。

新しいフレームワークに飛び込む前に、考慮すべきことがいくつかあります。

まず、新しいテクノロジーを選択する際には、チームの経験が決定的な要因になる可能性があります。

同様に、プロジェクトに開発者を雇うことができるように、あなたはあなたの地域で利用可能な才能を考慮する必要があります。

最後に、プロジェクト自体に関しては、複雑さと範囲もフレームワークの選択に影響を与える可能性があります。

すべての重要な違いを考慮に入れることで、目標とニーズに最適なフロントエンドフレームワークを決定できることを願っています。