React JS が Angular や Vue JS よりも優れているのはなぜですか?

公開: 2020-05-29

Web ページは、主に HTML、CSS、および JavaScript プログラミング言語 (Web の 3 つの基本的な構成要素) で構築されていることはよく知られています。具体的には、HTML は Web ページ上にメニュー、テキスト、ボックスなどの要素を作成します。 CSS は、これらの要素のスタイル、デザイン、および Web ページへの配置に利用されます。最後に、これらの要素とのやり取りや操作を容易にする JavaScript です。ディスカッションのテーマは JavaScript を中心に展開します。特に React.Js と、Angular および Vue.Js に対するその優位性。

要約すると、React JS は、その優れた仮想 DOM 機能、堅牢なコミュニティサポート、豊富なドキュメント、軽量属性、扱いやすい学習曲線、および React Native でモバイル機能を使用できる柔軟性により、Angular や Vue JS よりも優れています。

JavaScript: グルー言語

React の優位性を正当化するケースの優先順位を設定するために、いくつかの基本事項を要約します。 JavaScript は、他のコンポーネントのアセンブリに使用されるグルー言語として認識されることがよくあります。 3 つの Web ビルディングブロックのうち、HTML と CSS はそれほど複雑ではありません (ただし、主に静的な設計目的で使用されます)。ただし、動的な Web コンテンツを作成する開発者にとっては、JavaScript が優先されます。これは、JavaScript が同時代のものよりもはるかに大きく複雑である理由を示しています。基本的に、ほとんどの Web ページで採用されているデファクトスタンダードになりつつあります。

その結果、過去 10 年間で、Web サイトの開発と保守を容易にするために、JavaScript の上に複数のフロントエンドフレームワークが設計されてきました。その結果、2020 年の時点で、これらのフロントエンド JavaScript フレームワークの中で最も人気があったのは、React と Vue、次に Angular でした。

JavaScript および JavaScript ベースのフレームワークとライブラリが Web 開発の重要なツールであることを簡単に説明しました。そこで、ブログの文脈を設定するために、簡単にさかのぼって JavaScript の歴史と開発の概要を説明しましょう。

Web テクノロジーとブラウザーの歴史

最初の Web ブラウザーは、1990 年 12 月に開発され、Tim Berners-Lee が主任開発者としてリリースされました。彼は同時に、Web サイトのインデックス作成とナビゲーションのための World Wide Web のアプリケーションプロトコルである Hypertext Transfer Protocol (HTTP) を開発し、リリースしました。

その後、初のグラフィカル Web ブラウザである Mosaic が 1993 年にリリースされました。同様に、同じ年に HTML が開発されました。これは JavaScript が作成される数年前のことですが、CSS は JavaScript の 1 年後の 1996 年にリリースされました。これら 3 つの言語は、後に「Web 開発者が習得しなければならない 3 つの技術」と呼ばれる技術スタックを形成したことで有名です。

JavaScript の開発

Mosaic ブラウザに続く有名なブラウザの 1 つは、1994 年にリリースされた Netscape Navigator ブラウザです。1995 年、当時人気のあった Netscape の開発者は、プログラマーの Brendan Elch を雇って、Web ページ用の新しい動的スクリプト言語を作成しました。クライアント側のデータ操作。

市場への対応として、Netscape は、HTML に限定されるのではなく、動的な Web サイトを作成する必要性を認識しました。残念ながら、初期の Web サイトのほとんどは HTML のみを採用していたため、計算効率が低かった。そのため、Netscape は、DOM (ドキュメントオブジェクトモデル) 操作を対象とした単純な Web スクリプト言語を考案することを余儀なくされました。その結果、このプロジェクトは Java の機能と構文に触発されました– わずかな構文の類似性にもかかわらず、それらは根本的に異なります。

1996 年 3 月に正式にリリースされた JavaScript は、最終的に、HTML だけでは不可能だった新しい機能を Web ページで有効にしました。たとえば、ユーザー入力への応答、ポップアップウィンドウの表示、要素の色の変更などです。 Netscape は後に Mozilla を所有していた America Online (AOL) に買収され、インターネット標準としての JavaScript の指数関数的な成長に貢献しました。

XML、AJAX、およびシングルページアプリケーションの出現

2000 年代初頭、Web ユーザーはサーバーの応答が遅く、データ転送に時間がかかることに不満を感じていました。これらは、時代を特徴付ける低速のインターネット接続によってさらに悪化しました。 AJAX テクノロジスタック (非同期 XML および JavaScript) の開発につながった

この点で、XML は HTML に似たマークアップ言語ですが、コンテンツ表示ではなくデータ表現に使用されます。 XML は、AJAX スタックの作成により、JavaScript 内で関連するようになりました。

多くの場合、AJAX は、全体としてバンドルされたいくつかのテクノロジのコレクションとして説明され、XHTML、CSS、DOM、XML、XLST、XML HttpRequest、および JavaScript で構成されます。また、AJAX 内では、JavaScript が他のすべてのツールをまとめてバインドします。 その結果、AJAX は、コンテンツ全体をダウンロードせずに HTML ページの一部を更新する方法を提供しました。

単一ページのアプリケーション

一般に、すべての JavaScript フレームワークは単一ページアプリケーションの原則を採用しています。実際には、Single Page Application (SPA) は個々のコンポーネントで構成されるアプリケーションであり、最初のページにアクセスしたときにメモリにロードされ、その後個別に置換または更新できるため、Web ページ全体をリロードする必要はありません。すべてのユーザーアクションで。

さらに、SPA を使用すると、コンポーネントを再利用できるため、必要なコードの量が大幅に削減されます。最初のシングルページアプリケーションは 2002 年に実装され、JavaScript は実装対象言語の 1 つとして意図されていました。シングルページアプリケーションの成功は、主に先行する AJAX テクノロジと、サーバー通信におけるその優位性によるものです。

JavaScript と HTML の関係

HTML は、jQuery と同様に、JavaScript を補完するものとして機能します。または、HTML 要素にコンパイルされる統合された HTML のような構文として。これのインスタンスは、React で開発するときに使用することをお勧めする JSX 構文です。これは純粋な JavaScript でも HTML でもなく、両者の融合です。したがって、基本的には、HTML の基本的な要素作成と構造機能を JavaScript の動的機能と統合します。

CSS と HTML の関係

CSS は一般的に JavaScript と組み合わせて使用されます。伝統的な形式の例は、CSS プロパティを個別の .css ファイルに実装することです。もう 1 つの形式は、CSS-in-JS や styled-components などの特殊なライブラリを使用して、CSS を JavaScript フレームワーク自体に統合することです。このようなライブラリを使用すると、開発者は CSS に似た構文で視覚要素のスタイルを設定する JavaScript コードを記述できます。このコードは通常、ブラウザーで純粋な CSS にコンパイルされます。

JavaScript のサーバー側実装の出現

最終的に、2009 年には JavaScript のサーバー側実装である Node.js がリリースされました。 Node.js は JavaScript ドメインをバックエンドに拡張し、JavaScript がフルスタック言語になることを可能にしました。

Node.js は、現在最も採用されている JavaScript ランタイム環境であり、Web ブラウザー環境外で JavaScript コードを実行するために使用されます。 Node.js の作成者は、サーバー側の機能を利用して、当時人気のあった Apache HTTP サーバー (PHP でよく使用される) に代わる、より効率的な代替手段を開発することを目指しました。 Node.js は、C++ を使用して構築された Google の V8 JavaScript エンジンを使用して作成されました。

フロントエンド JavaScript フレームワーク

基礎ができたので、レンガを積み上げて、React.js への傾向の理由を掘り下げることができます。

フレームワークとライブラリ

この JavaScript トリオについて話すとき、一般的な議論はライブラリとしての資格です。皮肉なことに、React はライブラリと呼ばれることもあれば、フレームワークと呼ばれることもあります。ただし、明確さと一貫性のために、フレームワークをライブラリから分離すると便利なことがよくあります。

特に、ライブラリは不揮発性リソースの受動的なコレクションであり、開発者はリソースの使用方法を制御できます。それらは通常非常に単純で、特定のタスクを 1 つしか実行しないため、ツールとして分類できます。

フレームワークはあまり受動的ではないように設計されており、開発目的でスケルトンを利用し、制御フローを強制することにより、開発者が特定の方法で物事を行うように強制します。たとえば、開発者には、Web アプリケーション全体を開発およびセットアップするための定義済みの方法が提供されます。 Web アプリケーションライブラリはそうではありませんが、代わりに、ネットワークリクエストやスタイリング操作など、より単純なサブドメイン操作を提供します。

Vue と Angular は技術的にはフレームワークと見なされますが、React がフレームワークなのかライブラリなのかについてはまだ意見の相違があります。 React の最初の開発者はこれをライブラリと呼んでいましたが、今でもフレームワークとしてより一般的に使用されています。

なぜ React が支配的な選択肢なのか!

振り返ってみると、React は XHP (Facebook によって作成された PHP ライブラリ) の JavaScript ポートとして開発されました。一般に、XHP はカスタムコンポーネントの作成を可能にする PHP の修正であり、悪意のあるユーザーの攻撃を防ぐことを目的としていました。その後、この JavaScript 移植プロジェクトから、React の共通標準言語となった JSX (JavaScript XML) が生まれました。

すべてを考慮すると、React のスコープは他のアプリケーションよりも狭く、アプリケーションのユーザーインターフェイスをレンダリングするだけです。ただし、軽量構造の利点を維持しているため、学習と使用のコストが低くなります。そうは言っても、Vue や Angular と同じ目的で使用されるため、フレームワークと見なすことができます。

優れた仮想 DOM 機能。

React は、DOM に従って機能を最適化した最初のフレームワークです。 DOM 操作は、使用されるコンピューティングリソースの点で非常にコストがかかるため、これが成功の要因でした。具体的には、React は、直感的な状態管理と仮想 DOM を使用してこの操作を制御することにより、可能な限り少ない DOM 操作を実行するように設計されています。

この仮想 DOM の活用により、React の更新が高速化されますが、メモリの消費量が増えます。また、ブラウザ DOM の高速更新を実行するために、react はメモリ内に仮想 DOM ツリーのコピーを保持しますが、これにより追加のメモリが消費されます。その結果、React の人気により、モバイル開発用の React Native などの多数のスピンオフライブラリが生まれました。

一方向のデータフロー

React では、データは下向きに流れることを意図しており、一方向のデータフローと呼ばれます。 Angular と Vue の双方向データバインディングによってコードがよりきれいでシンプルになりますが、React は優れた管理性とパフォーマンスで補います。私たちの議論における顕著な利点。

React が Angular より優れている理由

より多くのコンテキストを得るために、ケースバイケースで比較してみましょう。大規模なアプリケーション開発を目的とした Angular は、プログラミング機能とファイルサイズの点で、よりフル機能の JavaScript フレームワークです。

ただし、React と比較すると、Angular には負の肥大化、複雑さ、および重いスタイルの開発特性があります。小規模な開発プロジェクトに推奨され、学習曲線が急勾配であるとされています。さらに悪いことに、AngularJS はもはや積極的に開発されていません。

Angular は完全に TypeScript で構築されており、多くのコードが必要なため、少し複雑です。それどころか、React は非常に「シンプル」であり、本来の方向性はビューの制御と操作に重点を置いています。基本的に、開発者は必要なものを正確に選択できますが、多数のサードパーティパッケージを使用する機能も利用できます。そのため、React には Angular と比較して多くのオーバーヘッドが含まれていません。

React が Vue より優れている理由

Vue.js は、Google 社員の Evan You によって作成されました。 Evan は AngularJS に触発されましたが、より合理化された改良バージョンを作成したいと考えていました。その軽量な属性、優れたパフォーマンス、優れたプログラミングスタイルにもかかわらず、Vue のマイナス面はそのぎこちなさです。ここで React の優位性が際立ちます。

たとえば、Vue.js には React とは対照的に明確なベストプラクティスがないため、主要なアプリケーションの保守が困難になる可能性があります。ただし、React のベストプラクティスはコミュニティにあります。たとえば、実行可能なワークフローの作成は、公式の create-react-app パッケージによって有効になります。上記の点により、React は多くの複雑なコードを記述および保守する機能を適切に提供します。

ES6 構文

さらに、開発者は ES6 構文を Vue でも利用できますが、React はこの点で Vue よりも最適に設計されています。 Vue は現在 TypeScript のサポートを提供していますが、単一のコマンドで TS をサポートする CRA (Create React App) を使用する React のように、そのサポートは十分に洗練されていません。さらに、Vue では、真の完全な TypeScript アプリケーションを作成するために、カスタムデコレータと機能を備えたサードパーティパッケージが必要です。残念ながら、公式ドキュメントには、開始するために必要なすべての情報が記載されているわけではありません。 React のもう 1 つの利点！

議論を固めるために、より明確な特定のベンチマークを使用して、議論をさらに分類してみましょう。

1. フレームワークのサイズ

npm レジストリ内のフレームワークの縮小されたパッケージのサイズは、開発者がフレームワークを選択するのを思いとどまらせたり、奨励したりすることはほとんどありませんが、それでも私たちの議論を助けることができます. Angular は他よりかなり大きく (187.6 kB)、React は 6.4 kB で、Vue はその中間の 63.5 kB です。

一般に、パッケージサイズの比較は、Angular がより幅広い機能をサポートし、含まれていることを示していますが、React はより合理化された開発用に設計されています。したがって、React の性質により、開発者は効率を改善するための選択肢が少なくなり、小規模なプロジェクトに便利です。

さらに、Angular の複雑な構造は、React や Vue と比較して、特にメモリ割り当てに関して、パフォーマンスが低下する潜在的なリスクにつながります。

2. 開発経験、学習曲線、および可用性

一般的に言えば、TypeScript 自体は、JavaScript よりも習得が難しくも簡単でもありません。ただし、JavaScript ほど広く使用されておらず、JavaScript よりも少ないライブラリと全体的なドキュメントが含まれています。これらの要因と、構文の違い、および JavaScript のわずかに異なるバリエーションでのコーディングに慣れるのにかかる時間とが相まって、Angular よりも React にわずかな利点があります。

3. 言語ベースの状況

もう 1 つの重要なポイントは、React と Vue が JavaScript ES6 をベース言語として使用していることです。 ES6 は 2015 年からの最新の JavaScript 業界標準です。一方、Angular 1 は以前のバージョンである JavaScript ES5 を活用し、Angular 2 は TypeScript に依存しています。

TypeScript を使用すると、開発者は従来の JavaScript プログラミング形式を取り除くことができますが、ユーザーコミュニティは限られています。これは、JavaScript の別の新しい構文上の厳密なスーパーセットが出現した場合、TypeScript が消滅する潜在的なリスクがあることを意味します。逆に JavaScript ES6 は、JavaScript で開発する場合の現在の業界基準であるため、すぐになくなることはありません。

4. ドキュメンテーション

正直なところ、ドキュメントの入手可能性は、これらすべてのフレームワークで満足のいくものです。とはいえ、React のドキュメントが最も多くの言語 (16) で利用可能であることは注目に値します。 Vue は遅れをとっており、ドキュメントは 8 か国語で提供されていますが、Angular のドキュメントは 4 か国語で利用できます。 React のドキュメントは首尾一貫しており、さまざまな開発者向けの配信において統一された理論を持っています。

残念ながら、Angular のフレームワークの状況は、AngularJS と Angular 2 の間で分割されているという点で、開発者にとっていくつかの困難をもたらす可能性があります。特に小さなサイトや短い回答を閲覧する場合。

5. コミュニティサポート

ほとんどの場合、React は、現在すべての JavaScript フレームワークの中で最大のコミュニティサポートを持っています。これは、ディスカッションフォーラムとチャットルームの幅広さによって実証されています。また、ユーザーは最新のニュースをフォローしたり、Facebook や Twitter でのディスカッションに参加したりできます。

Svelte フレームワーク (佳作)

JavaScript 分野への比較的新しいエントリについて言及するのが賢明だと考えました。 Rich Harris によって開発され、2016 年に最初にリリースされた Svelte は、2019 年を通して大きな人気を博しました。ローカル状態の処理の変更など、JavaScript にいくつかの機能強化が導入されました。

また、Svelte には仮想 DOM がなく、記述されたコードが実行時ではなくビルド時に JavaScript に変換されることも注目に値します。基本的に、宣言要素を実際の DOM に変換することを回避します。

概要

Vue には Github の星がわずかに多くありますが、React は依然として優れており、認識できる弱点はなく、パフォーマンスの長所も優れています。本質的に、パフォーマンスの向上は、ロード時間の短縮とユーザー満足度の向上を意味します。さらに、商用 Web サイトの場合、数ミリ秒の読み込み時間の短縮により、ユーザーの操作と維持率が向上するため、収益が増加します。

最終的に、JavaScript フレームワークの展望の将来を予測することは困難です。証拠が示すように、React は予見可能な将来の主要なフレームワークであり続ける可能性があります。ただし、優れたパフォーマンスと豊富なドキュメントを備えた、十分にサポートされた成熟したフレームワークを利用してアプリケーションを開発しようとしている開発者にとっては、React が優れた選択肢です。