究極のJavaScriptフレームワークの比較：AngularとReact

私がほぼ毎日尋ねられる質問は、ReactJSまたはAngularから始めるべきかということです。 ただし、先に進む前に、免責事項をお知らせします。

これは、私がどちらか一方を打ち負かしたり、常にどちらか一方を使用する必要があると言ったりするブログではありません。 すべての開発者とすべてのプロジェクトは完全に異なり、要件のセットも異なるため、常にReactJSを使用するか、常にAngularを使用する必要があると言うのはかなりばかげています。

論理的議論

Angularはフレームワークであり、Reactは技術的にはそれ自体がライブラリであると主張するかもしれません。 私はこの事実を否定していませんが、これは私が今は入りたくない議論です。 Reactに追加できるパッケージがあり、Angularと直接競合するフレームワークになります。 正確なフレームワークと正確なライブラリではなく、2つのエコシステムを比較しています。

学習曲線

Angularから始めましょう。 さらに別の免責事項：私がAngularと言うとき、私はAngularJSではなくAngular4について話している。

Angularは大きなフレームワークです。つまり、強力で、多くのフレームワークが含まれています。 学ぶべきことがたくさんあります。 依存性注入、ディレクティブデコレータ、パイプなど、多くの新しい威圧的な語彙を聞くことになります。次に、JavaScriptに加えて静的型付けを含む他の多くの機能であるTypescriptを処理する必要があります。

AngularはReactよりも意見が分かれています。これは、Reactを使用すると、同じことを100万通りの方法で実行できるため、私の意見の利点の1つです。 Angularでは、一般的に特定のことを行う方法が1つか2つあります。これにより、従うのが簡単になり、何をすべきかについてより明確な指示が得られます。

しかし、繰り返しになりますが、それは好みに帰着します。 さまざまな方法で物事を行う柔軟性が必要な場合があります。 私が述べたように、ReactJSは、コアライブラリだけについて話している場合はライブラリであり、Angularフレームワークよりもはるかに小さく、学習がはるかに簡単です。 あなたはより短い時間でReactを学ぶと言うことができます。 Reactはそれ自体が優れたビューライブラリですが、大規模なアプリケーションにはそれほど強力ではありません。 Reactでルーティング、検証、HTTPリクエストが必要な場合は、他のパッケージをインストールする必要があり、それが学習曲線に追加されます。

2人の異なる開発者からのReactコードを見ると、HTTPリクエストを作成しているのか、状態とプロパティを処理しているのかにかかわらず、おそらく完全に異なって見えるでしょう。 これらはすべて非常に異なる方法で処理される可能性があり、多くの場合、間違った方法で処理される可能性があります。

あなたはベストプラクティスを見つけ、すべての問題はなくなりますが、それは学習曲線に追加されます。

Angular Reactとは異なり、テンプレートは使用しません。 これは、JSXまたはJavaScript拡張機能またはJavaScript構文拡張機能と呼ばれるものを使用します。これにより、JavaScriptにHTMLを埋め込むことができます。 最初、これは少し風変わりに思えるかもしれません。 特に、マークアップとJavaScriptを分離するように教えられたときは特にそうです。

いくつかの異なる変更を加えて、JavaScript内にHTMLを配置するようなものと考えてください。クラス属性を使用できず、クラス名を使用する必要があります。

最後に、Reduxがあります。 Reactは、アプリケーションレベルの状態マネージャーであるReduxまたはFluxでよく使用されます。 私の意見では、Reduxはセットアップするだけで一生懸命頑張っており、その概念を学ぶのは難しいです。

使いすぎだと思います。 多くの開発者は、不要な場所でreduxを使用していると思います。 小さなアプリケーションには必要ありませんが、多くの開発者はそれを使用することを主張しています。 それは再び好みに帰着します。 Reduxは非常に強力です。私はそれを奪いたくありません。 学習曲線について話すとき、理解するのは非常に難しいです。

勝者：それはネクタイです

パフォーマンス

AngularとReactのパフォーマンスを直接比較することは公平ではありません。 Angularは、ルーティング、フォームツール、HTTPライブラリ、リアクティブ拡張機能などを含む完全なフロントツーバックフレームワークです。これらの機能はすべて、フレームワークを肥大化させ、速度を低下させます。 ただし、React自体は単なるビューライブラリであり、はるかに小さく高速です。

ルーター、HTTPクライアント、またはReactアプリケーションに追加するものなどのパッケージの追加を開始すると、Angularの場所にもう少し近づき始め、それらを公平に比較​​し始めることができますが、その後もReactはパフォーマンス部門で優勝。 これは一般的に非常に高速なテクノロジーです。

Angular2からAngular4への変更は、パフォーマンスを向上させるためにかなりの効果を発揮しました。 Angular4はAngular2よりもパフォーマンスが優れています。それでも、Reactはパフォーマンス部門で勝っています。

AngularvsReact。 出典：Academind.com

勝者：React

特徴

どちらのフレームワークにも、同じ一般的な機能と利点がたくさんあります。コードを整理する、コンポーネントベースである、動的なマークアップを提供するなどです。これらは多くの同じことを行うために使用され、同じ機能がたくさん。

個々の機能のいくつかを見ていきます。 Angularには、明らかにReactよりもはるかに多くの機能があります。 Reactで使用される2つのエコシステムと一般的なパッケージについて話していることを思い出させてください。

Angularはすべて含まれているフレームワークです。 コンポーネントルーター、オブザーバブル用のリアクティブ拡張機能、HTTPクライアント、検証用のフォームのモジュールが付属しており、リストは続きます。 さらに、他のフレームワークにはない方法で双方向のデータバインディングを提供します。 ビューからモデルへのデータのバインドは、ngmodelディレクティブを使用すると非常に簡単です。

Angularは、MVC（Model View Controller）または少なくともそのデザインパターンとは異なる側面もサポートします。 また、単体テストとエンドツーエンドテストの両方のテストを簡単に実装できる機能も付属しています。 Angularには、エンタープライズレベルのフロントエンドアプリケーションを構築するための機能が満載されています。 一方、Reactはその核心に多くを含んでいません。 ただし、Angularにすぐに使用できる機能に加えて、いくつかの追加機能を追加することもできます。

Reactは非常に強力な仮想DOMを使用します。 実際のDomの独自の軽量バージョンを作成し、全体を更新するのではなく、必要なものだけを含めて更新します。 仮想DOMは、Reactが非常に高速である主な理由です。

ReactはJSXを使用します。これは、必要なあらゆるタイプのJavaScriptを含めることができるため、標準のテンプレートよりも強力です。 JSXはReactを使用する必要はありませんが、それは物事を非常に簡単にします。 JSXをAngularで使用しない理由は考えられません。 Reactは、コンポーネントの状態とプロパティを管理するのにも非常に優れています。 これにより、データの操作やコンポーネント間の受け渡しが非常に簡単になります。 コンポーネント間でデータを渡す場合、AngularはReactで行うよりもはるかに困難です。

CoreReactはアプリレベルの状態を維持するのが難しいです。 コンポーネントの状態は簡単ですが、真のアプリレベルの状態管理が必要な場合は、ReduxまたはFluxが必要になります。これは、前に言ったように、学ぶのがかなり混乱します。 新しいReactルーターバージョン4のようによく使用される外部パッケージは、把握するのが少し難しいですが、実行とセットアップを学ぶと非常に強力です。 それを使用するためのさまざまな方法もたくさんあります。 ReactにはAngularのようなコアHTTPコンポーネントはありませんが、外部HTTPクライアントであるFetchまたはAxiosを使用でき、Reactの証明にはEnzymeが人気があります。 実際のライブラリの一部ではありませんが、Reactで一般的に使用されるさまざまなパッケージがいくつかあります。

どちらのテクノロジーも多くの機能を共有していますが、コアテクノロジーを比較するだけの場合は、Angularが勝者です。

勝者：Angular

ツーリング

AngularとReactには、非常に優れたコマンドラインインターフェイスがいくつかあります。 AngularCLIとCreateReactAppはどちらも非常に優れており、開発を合理化することができます。 Angular CLIは、コンポーネントやサービスなどをすばやく生成できるため、もう少し強力です。 CreateReactはそれを行うことができません。 ファイルと基本構造まで、すべて自分で作成する必要があります。 どちらのシステムもWebパックを使用し、独自の自動読み込み開発サーバーを備え、コンパイルツールとビルドツールを備えています。 明らかに、AngularにはTypescriptをトランスパイルするという追加のタスクがあります。 CLIには、ngserveを実行するときにそのためのスクリプトがあります。 それはすべて舞台裏で起こりました。 そのためにTSCまたはTypescriptコンパイラと呼ばれるものを使用し、両方にテストツールもあります。 Create React AppはテストにJestを使用します。これらのツールの一部は、アプリケーションを本番環境に構築して静的アセットにし、サーバーにアップロードしたり、バックエンドクライアントフォルダーに配置したりする機能です。

フルスタックアプリケーションの場合、これらは非常に重要です。 それらを使用する必要はありません。 Reactアプリケーションは、Webパックを使用してゼロから構築できます。 これらにより、アプリケーションをビルドするだけでなく、本番用にコンパイルしてビルドすることも非常に簡単になります。

彼らは両方ともその部門でもきれいです。

勝者：Angular

生態系

私が言ったように、これらのテクノロジーは両方とも独自のエコシステムを持っており、今ではWebブラウザーをはるかに超えて広がっています。

Ionicは、モバイルアプリのネイティブラッパー内で実行されるAngularアプリケーションである人気のあるハイブリッドフレームワークです。 Angularを使用してモバイルアプリを作成できます。 ハイブリッドアプリは、ネイティブアプリケーションに比べて少し扱いに​​くい場合があります。 ユーザーエクスペリエンスは、それほど速くなく、応答性が低い場合があります。 さまざまなハイブリッドフレームワークの中で、Ionic3が最適です。 NativeScriptもあります。これを使用すると、JavaScriptだけでなくAngularを使用して真のネイティブアプリiOSおよびAndroidアプリを構築できます。

それにもかかわらず、NativeScriptは、少なくとも現時点ではFacebookのReactNativeほど優れているようには見えません。 マテリアルデザインのファンなら、Angularにはマテリアルデザインコンポーネントライブラリもあります。 Angular Universalは、サーバー側でAngularをレンダリングするために使用できるシードプロジェクトです。 Reaxreduxに触発された状態管理ライブラリであるNgRxストアもあります。 これは、ピアレデューサーによって変更された状態に基づいています。 また、Reactive拡張機能と統合されています。

あなたは気づいたでしょう。 一度、それらの1つは、他のコピーを別の方法で実行します。 ReactとAngularは、JavaScriptフレームワークのMicrosoftとAppleになりました。

Reactにはかなりのエコシステムがあります。 人気のReactNativeがあります。 これは、Webテクノロジーを使用してモバイルアプリを構築するための最良の方法です。 React Nativeは高速で、多くのアプリケーションが正しく構築されていれば、SwiftまたはJavaで構築されたネイティブアプリがすぐそこにあります。 ReactにはMaterial-UIと呼ばれるマテリアルデザインライブラリがあり、Angularのマテリアルデザインコンポーネントによく似ていますが、より成熟しています。 JSは、サーバー側のReactアプリケーションをレンダリングするためのフレームワークです。 これを可能な限り簡単な方法で行うことを目的としているため、AngularUniversalと比較することができます。 MobXは、状態を管理するもう1つの方法です。 reduxとは少し異なります。 オブザーバブルとオブザーバーを定義するためのデコレーターのセットを提供し、状態にリアクティブロジックを導入します。

StorybookはReactの開発環境です。 これにより、コンポーネントライブラリを参照したり、各コンポーネントのさまざまな状態を表示したり、コンポーネントをインタラクティブに開発およびテストしたりできます。 Reactive VRは、Reactをバーチャルリアリティに取り入れています。 Reactデスクトップは、Reactsライブラリの上に構築されたJavaScriptライブラリであり、多くのmacOSおよびWindows10コンポーネントを備えたネイティブデスクトップエクスペリエンスをWebにもたらすと思われます。 Reactエコシステムは非常に大きく強力です。 Reactはテクノロジーのあらゆる側面に浸透しており、明らかに勝者です。

勝者：React

スーツやネクタイをしている人はAngularを使用しており、だらしないひげを生やしたヒップスターはReactを使用しています。

結論：それはネクタイです

これらのフレームワークを決定する場合は、さまざまなカテゴリを調べて、興味のあるものを確認してください。 両方を試して、どちらを早く拾うかを確認してください。 このブログよりもさらに調査を行ってください。 1つのブログから必要なすべての情報を取得することは決してないので、もう少し読んでください。

ネイティブモバイルアプリ開発を含むより大きなエコシステムを検討している場合は、よく考えずにReactを選択してください。 機能を求めているなら、Angularは巨大です。 必要以上の機能があります。