React、Angular、Vueの3つの主要なフロントエンド技術の詳細説明

1. 反応する

React (React.js または ReactJS とも呼ばれます) は、ユーザーインターフェイスを構築するための JavaScript ライブラリです。これは、Facebook と個々の開発者および企業のコミュニティによって管理されています。

React は、シングルページアプリケーションまたはモバイルアプリケーションを開発するための基盤として使用できます。ただし、React はデータを DOM にレンダリングすることのみを目的としているため、React アプリケーションを作成するには、通常、状態管理とルーティングのための追加のライブラリを使用する必要があります。Redux や React Router は、そのようなライブラリの例です。

基本的な使い方

以下は、HTML で JSX と JavaScript を使用する React の簡単な例です。

Greeter 関数は、prop greeting を受け入れる React コンポーネントです。変数 App は Greeter コンポーネントのインスタンスであり、greeting プロパティは「Hello World!」に設定されています。次に、ReactDOM.render メソッドは、DOM 要素 (id は myReactApp) 内の Greeter コンポーネントをレンダリングします。

Web ブラウザで表示すると、結果は次のようになります。

注目すべき機能

コンポーネント化

React コードは、コンポーネントと呼ばれるエンティティで構成されています。 React DOM ライブラリを使用して、コンポーネントを DOM 内の特定の要素にレンダリングできます。コンポーネントをレンダリングするときに、「props」と呼ばれる値を渡すことができます。

React でコンポーネントを宣言する主な 2 つの方法は、関数コンポーネントとクラスベースコンポーネントです。

機能コンポーネント

関数コンポーネントは、JSX を返す関数を使用して宣言されます。

クラスコンポーネント

クラスベースのコンポーネントは、ES6 クラスを使用して宣言されます。これらのコンポーネントの状態はコンポーネント全体で保持され、props を介して子コンポーネントに渡すことができるため、「ステートフル」コンポーネントとも呼ばれます。

仮想DOM

React のもう一つの注目すべき機能は、仮想ドキュメントオブジェクトモデル、つまり仮想 DOM を使用することです。 React はメモリ内のデータ構造キャッシュを作成し、変更の差分を計算し、実際に変更されたサブコンポーネントのみをレンダリングすることで、ブラウザに表示される DOM を効率的に更新します。

ライフサイクルメソッド

ライフサイクルメソッドとは、コンポーネントのライフサイクル中に設定されたポイントでコードを実行できるようにするフック処理関数を指します。

shouldComponentUpdate を使用すると、レンダリングが不要な場合に false を返すことで、開発者はコンポーネントの不要な再レンダリングを防ぐことができます。
componentDidMount は、コンポーネントが「マウント」された後に呼び出されます (コンポーネントは、通常、DOM ノードに関連付けることによって、ユーザーインターフェイスに作成されます)。これは、API を介してリモートデータソースからデータの読み込みをトリガーするためによく使用されます。
componentWillUnmount は、コンポーネントが破棄される、つまり「アンマウント」される直前に呼び出されます。これは通常、コンポーネントがアンマウントされたときに単純に削除されないコンポーネントのリソース依存関係をクリーンアップするために使用されます (たとえば、コンポーネントに関連付けられた setInterval() インスタンスや、コンポーネントの存在によってドキュメントに設定された eventListeners を削除します)。
レンダリングは最も重要なライフサイクルメソッドであり、どのコンポーネントにも存在する必要がある唯一のメソッドです。通常、コンポーネントの状態が更新されるたびに呼び出されます。

JSX

JSX (JavaScript XML) は、JavaScript 言語構文の拡張です。 JSX は見た目が HTML に似ており、開発者に馴染みのある構文を使用してコンポーネントのレンダリングを構造化する方法を提供します。 React コンポーネントは JSX を使用して記述されることが多いですが、必ずしもそうである必要はありません (コンポーネントは純粋な JavaScript で記述することもできます)。 JSX は、Facebook が PHP 用に作成した XHP と呼ばれる別の拡張構文に似ています。

JSX コードの例:

ネストされた要素

同じレベルにある複数の要素は、上の図の <div> 要素のようなコンテナ要素でラップする必要があります。

財産

JSX は、HTML によって提供される属性に対応することを目的とした要素属性のセットを提供します。これらのカスタムプロパティもコンポーネントに渡すことができ、すべてのプロパティはコンポーネントによって props として受け取られます。

JavaScript 式

中括弧 {} を使用して、JSX 内で JavaScript 式 (ステートメントではない) を使用できます。

上記コードの表示結果は次のとおりです。

条件文

JSX では if-else ステートメントは使用できませんが、代わりに条件式を使用できます。次の例では、i が 1 の場合、{ i === 1 ? 'true' : 'false' } を文字列 'true' としてレンダリングします。

結果は次のようになります:

条件式では関数と JSX を使用できます。

結果は次のようになります:

JSX で記述されたコードは、Web ブラウザーで理解できるようにするには、Babel などのツールで変換する必要があります。この処理は通常、ソフトウェアのビルドプロセス中に実行され、その後、ビルドされたアプリケーションがデプロイされます。

HTML を超えたアーキテクチャ

React の基本的なアーキテクチャは、ブラウザで HTML をレンダリングするためだけのものではありません。たとえば、Facebook には <canvas> タグにレンダリングされる動的チャートがありますが、Netflix と PayPal はユニバーサルローディングを使用して、サーバーとクライアントの両方で同じ HTML をレンダリングします。

Reactフック

フックは、開発者が関数コンポーネントから React の状態とライフサイクル機能に「フック」できるようにする関数です。コードの読みやすさと理解しやすさが向上します。フックはクラスコンポーネント内では機能しません。その最終的な目的は、React でクラスコンポーネントの存在を排除することです。

React には、useState、useContext、useReducer、useEffect などの組み込みフックがいくつか用意されています。これらはすべて、Hooks API リファレンスに記載されています。最もよく使用されるのは useState と useEffect で、それぞれ React コンポーネントの状態を制御し、状態の変化を検出します。

フックのルール

フックには、フックを使用する前に従う必要があるいくつかのルールもあります。

フックは最上位レベルでのみ呼び出すことができます (ループや if ステートメント内では呼び出すことができません)。
フックは、React 関数コンポーネント内でのみ呼び出すことができ、通常の関数やクラスコンポーネント内では呼び出すことができません。カスタムフック

独自のフック (カスタムフックとも呼ばれます) を構築すると、コンポーネントロジックを再利用可能な関数に抽出できます。カスタムフックは、名前が「use」で始まり、他のフックを呼び出すことができる JavaScript 関数です。これらにはフックと同じルールが適用されます。

一般的な用語

React は完全な「アプリケーションライブラリ」を提供しようとはしません。これはユーザーインターフェイスの構築に特化して設計されているため、一部の開発者がアプリケーションの構築に必要だと考えるツールの多くは含まれていません。これにより、開発者は任意のライブラリを選択して、ネットワークアクセスやローカルデータストレージの実行などのタスクを実行できます。この状況により、Web アプリケーションを作成するときに React テクノロジの標準を統一できないことも判明します。

Fluxアーキテクチャの使用

React の単方向データフローの概念 (AngularJS/Angular の双方向データフローとは対照的) をサポートするために、Flux アーキテクチャは、一般的なモデルビューコントローラー (MVC) アーキテクチャの代表的な代替手段です。 Flux の特徴は、データアクションが中央ディスパッチャーを介してストレージウェアハウスに送信され、ストレージウェアハウスデータの変更がビューに送り返されることです。 React で使用する場合、この転送はコンポーネントのプロパティを介して行われます。

Flux は、Observer パターンのバリエーションと考えることができます。

Flux アーキテクチャの React コンポーネントは、渡されたプロパティを直接変更するのではなく、ディスパッチャによって送信されたデータアクションを作成してストアを変更できるコールバック関数を渡す必要があります。データアクションは、発生した事柄を説明するオブジェクトです。たとえば、データアクションは、ユーザーが別のユーザーを「フォロー」していることを説明します。次のようなデータが含まれる場合があります:

ユーザーID、

対象ユーザーID、

そして、USER_FOLLOWED_ANOTHER_USER 列挙型。

リポジトリは、スケジューラから受信したデータアクションに基づいて自身を変更できるデータモデルです。

このパターンは、「属性は下方向に流れ、データアクションは上方向に流れる」と表現されることもあります。 Flux の誕生以来、多くの Flux 実装が作成されてきましたが、その中で最も有名なのは、単一のストレージリポジトリ (データの唯一の真実のソースとも呼ばれる) を備えた Redux です。

歴史

React は Facebook のソフトウェアエンジニアである Jordan Walke によって作成され、PHP の HTML コンポーネントライブラリ XHP に触発されて「FaxJS」と呼ばれる React の初期のプロトタイプをリリースしました。これは2011年にFacebookのニュースフィードに初めて導入され、その後2012年にInstagramにも導入されました。 2013 年 5 月に米国で開催された JSConf カンファレンスでオープンソース化されました。

React Native は、2015 年 2 月に Facebook の React Conf で発表され、2015 年 3 月にオープンソース化され、ネイティブ Android、iOS、UWP 開発が可能になりました。

2017 年 4 月 18 日、Facebook は、ユーザーインターフェイスを構築するための React ライブラリの新しいコアアルゴリズムである React Fiber を発表しました。React Fiber は、React ライブラリの今後の改善と機能開発の基盤となります。

2017 年 9 月 26 日に、React 16.0 が正式にリリースされました。

2019 年 2 月 16 日に、React Hooks を導入した React 16.8 が正式にリリースされました。

一般的なコマンド

プロジェクトを作成します。

npx 作成-React-アプリマイアプリ

開発環境操作:

npm スタート

実稼働環境のパッケージ化:

npm 実行ビルド

【公式サイト】

http://react.org/ より

【最新バージョン】

2020年3月19日 16.13.1

【認可】

MITライセンス

角度

Angular (多くの場合、「Angular 2+」または「Angular v2 以上」と呼ばれます) は、Google の Angular チームと個人および企業のコミュニティが主導する、オープンソースの TypeScript ベースの Web アプリケーションフレームワークです。 Angular は、AngularJS を構築した同じチームによってゼロから書き直されました。

AngularとAngularJSの違い

Angular には「スコープ」やコントローラーの概念はなく、代わりにコンポーネントの階層を主要なアーキテクチャ機能として使用します。
Angular には、プロパティバインディングの "[]" とイベントバインディングの "()" に重点を置いた、異なる式構文があります。
モジュール性 - 多くのコア機能がモジュールに移動されました
Angular では、次の機能を導入する Microsoft の TypeScript 言語の使用を推奨しています。

（１）ジェネリックを含む静的型付け

（２）注記

TypeScript は ECMAScript 6 (ES6) のスーパーセットであり、ECMAScript 5 (JavaScript) と下位互換性があります。
動的ロード
非同期テンプレートコンパイル
RxJS によって提供される反復コールバック。 RxJS は状態の可視性とデバッグを制限しますが、これらの問題は ngReact や ngrx などのリアクティブアドオンで解決できます。
Angular Universal をサポートしており、サーバー上で Angular アプリケーションを実行できます。

歴史

名前

当初、AngularJS の書き直しは「Angular 2」と呼ばれていましたが、開発者の間で混乱が生じました。明確にするために、チームはフレームワークごとに異なる用語が使用され、「AngularJS」はバージョン 1.X を指し、「Angular」はバージョン 2 以上を指すと発表しました。

バージョン2

Angular 2.0 は、2014 年 10 月 22 日〜 23 日に開催された ng-Europe カンファレンスで発表されました。バージョン 2.0 での大幅な変更は開発者の間でかなりの論争を引き起こしました。

2015 年 4 月 30 日、Angular 開発者は、Angular 2 がアルファ版から開発者プレビュー版に移行することを発表しました。2015 年 12 月、Angular 2 はベータ版に移行しました。最初のリリース候補は 2016 年 5 月にリリースされ、最終バージョンは 2016 年 9 月 14 日にリリースされました。

バージョン4

ルーターパッケージのバージョンの不一致による混乱を避けるため、3をスキップして、2016年12月13日にAngular 4がリリースされました。その際にリリースされたバージョンはv3.3.0でした。最終バージョンは 2017 年 3 月 23 日にリリースされました。Angular 4 は Angular 2 と下位互換性があります。

Angular 4.3 バージョンは、4.xx バージョンの代替となるマイナーリリースです。

バージョン 4.3 では、より小型で使いやすく、より強力な HTTP リクエストライブラリである HttpClient が導入されました。キーパーとリゾルバーの新しいルーターライフサイクルイベント。 4つの新しいイベント。 GuardsCheckStart、GuardsCheckEnd、ResolveStart、および ResolveEnd は、NavigationStart などの既存のライフサイクルイベントセットに加わります。条件付きでアニメーションを無効にします。バージョン 5

Angular 5 は 2017 年 11 月 1 日にリリースされました。Angular 5 の主な改善点には、プログレッシブウェブアプリケーションのサポート、ビルドオプティマイザー、マテリアルデザインに関連する改善点などがあります。

バージョン 6

Angular 6は2018年5月4日にリリースされました。このバージョンでは、基盤となるフレームワークではなく、ツールチェーンに重点が置かれており、ngupdate、ng add、Angular 要素、Angular Material+CDK コンポーネント、Angular Material スターターコンポーネント、CLI ワークスペース、ライブラリサポート、ツリーシェイキングプロバイダー、アニメーションパフォーマンスの改善、RxJS v6 など、将来の Angular の更新とアップグレードが容易になります。

バージョン 7

Angular 7は2018年10月18日にリリースされました。アップデートには、アプリケーションのパフォーマンス、Angular Material と CDK、仮想スクロール、Select のアクセシビリティの改善、カスタム要素の Web 標準を使用したコンテンツ投影のサポート、Typescript 3.1、RxJS 6.3、Node 10 (Node 8 も引き続きサポートされます) の依存関係のアップデートが含まれます。

バージョン 8

Angular 8は2019年5月28日にリリースされました。すべてのアプリケーションコードの差分読み込み、遅延ルーティングの動的インポート、Web ワーカー、TypeScript 3.4 のサポートを備えており、Angular Ivy はプレビューとして利用できます。角度

Ivy プレビューには以下が含まれます:

生成されたコードは実行時に読みやすく、デバッグも容易になります。
再構築時間の短縮
ペイロードの削減
テンプレートの型チェックの改善
下位互換性

バージョン9

Angular 9は2020年2月6日にリリースされました。バージョン 9 では、デフォルトで Ivy コンパイラが使用されます。 Angular は TypeScript 3.6 および 3.7 と互換性があります。数百のバグ修正に加えて、Ivy コンパイラとランタイムには多くの利点があります。

より小さなソフトウェアパッケージ
より速いテスト
デバッグの改善
CSSクラスとスタイルのバインディングの改善
型チェックの改善
ビルドエラーの改善
ビルド時間の改善、AOT がデフォルトで有効化
国際化能力の向上

コンポーネント化

コンポーネントの例

HTML部分

タイプスクリプト部分

ルーティング

データ管理

サービスクラスの定義

通話サービスクラス

一般的なコマンド

ターミナルから、Angular CLI をグローバルにインストールします。

npm インストール -g @angular/cli

ng new コマンドを使用して新しい Angular CLI ワークスペースを作成します。

ng 新しいプロジェクト名

開発環境操作:

ngサーブ

実稼働環境のパッケージ化:

ビルド --prod

【公式サイト】

出典:

【最新バージョン】

2020年4月15日の9.1.2

【認可】

MITライセンス

3. ビュー

Vue.js (多くの場合、単に Vue と呼ばれます。発音は「view」のように /vjuː/ です) は、ユーザーインターフェイスとシングルページアプリケーションを構築するためのオープンソースのモデルビュービューモデル JavaScript フレームワークです。これは Evan You によって作成され、彼と Netlify や Netguru を含むさまざまな企業のコアメンバーによって保守されています。

概要

Vue.js の特徴は、プログレッシブアーキテクチャを採用し、宣言型レンダリングとコンポーネント合成に重点を置いていることです。ルーティング、状態管理、ビルドツールなど、複雑なアプリケーションに必要な高度な機能は、公式に管理されているサポートライブラリとパッケージを通じて提供され、Nuxt.js は最も人気のあるソリューションの 1 つです。

Vue.js では、ディレクティブと呼ばれる HTML 属性を使用して HTML を拡張できます。

歴史

Vue は Evan You によって作成されました。 Google 在籍中、AngularJS 技術を使用した複数のプロジェクトの開発に参加し、後に Vue を作成しました。彼は後に自分の思考過程を要約した。「AngularJS の本当に優れた部分を利用して、軽量なものを作れたらどうなるだろうと考えました。」プロジェクトへの最初のソースコードのコミットは 2013 年 7 月で、Vue は 2014 年 2 月に初めてリリースされました。

コンポーネント化

Vue コンポーネントは基本的な HTML 要素を拡張して、再利用可能なコードをカプセル化します。高レベルの観点から見ると、コンポーネントは Vue コンパイラが動作をアタッチするカスタム要素です。 Vue では、コンポーネントは基本的に、事前設定されたオプションを持つ Vue インスタンスです。次のコードスニペットには、Vue コンポーネントの例が含まれています。このコンポーネントはボタンを表示し、ボタンがクリックされた回数を出力します。

テンプレート

Vue は HTML ベースのテンプレート構文を使用して、レンダリングされた DOM を Vue インスタンスの基になるデータにバインドできるようにします。すべての Vue テンプレートは有効な HTML であり、準拠したブラウザと HTML パーサーによって解析できます。 Vue はテンプレートを仮想 DOM レンダリング関数にコンパイルします。仮想ドキュメントオブジェクトモデル (または「DOM」) により、Vue はブラウザーを更新する前にメモリ内でコンポーネントをレンダリングできます。リアクティブシステムと組み合わせることで、Vue は再レンダリングする必要があるコンポーネントの最小数を計算し、アプリの状態が変化したときに最小限の DOM 操作を開始できます。

Vue ユーザーはテンプレート構文を使用することも、JSX を使用してレンダリング関数を直接記述することもできます。これにより、ソフトウェアコンポーネントからアプリケーションを構築できます。

反応システム

Vue は、純粋な JavaScript オブジェクトと最適化された再レンダリングを使用するリアクティブシステムを備えています。各コンポーネントはレンダリング中にリアクティブ依存関係を追跡するため、システムは再レンダリングするタイミングと、再レンダリングが必要なコンポーネントを正確に把握できます。

変換効果

Vue は、DOM にアイテムが挿入、更新、または削除されるときに遷移効果を展開するためのさまざまな方法を提供します。これには次のツールが含まれます。

CSS変換とアニメーションを自動的に適用するクラス
Animate.css などのサードパーティの CSS アニメーションライブラリを統合します。
変換フック中は、JavaScript を使用して DOM を直接操作します。
Velocity.js などのサードパーティの JavaScript アニメーションライブラリを統合します。

変換コンポーネント内の要素が挿入または削除されると、次のことが起こります。

Vue は、ターゲット要素に CSS 変換またはアニメーションが適用されているかどうかを自動的に検出します。ある場合、CSS 変換クラスは適切なタイミングで追加/削除されます。
変換コンポーネントが JavaScript フックを提供する場合、それらのフックは適切なタイミングで呼び出されます。
CSS 変換/アニメーションが検出されず、JavaScript フックが提供されていない場合、挿入および/または削除の DOM 操作は次のフレームですぐに実行されます。

ルーティング

シングルページアプリケーション (SPA) の従来の欠点の 1 つは、特定の Web ページ内の正確な「サブ」ページへのリンクを共有できないことです。 SPA はユーザーに単一の URL ベースのサーバー応答のみを提供するため (通常は index.html または index.vue を提供する)、特定の画面をブックマークしたり、特定のセクションへのリンクを共有したりすることが困難または不可能になることがよくあります。この問題を解決するために、多くのクライアント側ルーターは「ハッシュバン」(#!) を使用して、http://page.com/#!/ などの動的 URL を区切ります。ただし、HTML5 では、ほとんどの最新ブラウザがハッシュバンなしのルーティングをサポートしています。

Vue は、現在の URL パスに基づいてページに表示されるコンテンツを変更するためのインターフェイスを提供します。これは、さまざまな方法 (電子メールリンク、更新、ページ内リンクなど) で実行できます。さらに、フロントエンドルーターを使用すると、ボタンやリンクで特定のブラウザーイベント (クリックなど) が発生したときに、ブラウザーパスを意図的に遷移させることができます。 Vue 自体にはフロントエンドルーティングは付属していません。しかし、オープンソースの「vue-router」パッケージは、アプリケーションの URL を更新するための API を提供し、戻るボタン (ナビゲーション履歴) をサポートし、電子メールのパスワードリセットまたは電子メール検証リンクの認証 URL パラメータをサポートします。ネストされたルートをネストされたコンポーネントにマッピングすることをサポートし、きめ細かい遷移制御を提供します。 vue-router を追加すると、コンポーネントは所属するルートにのみマッピングする必要があり、親/ルートルートは子ルートをレンダリングする場所を示す必要があります。

上記のコード:

http://websitename.com/user/<id> にフロントエンドパスを設定します。
これは、 (const User...) で定義された User コンポーネントでレンダリングされます。
ユーザーコンポーネントが $route オブジェクトの params キー ($route.params.id) を使用してユーザー固有の ID を入力できるようにします。
このテンプレート (ルーターに渡されるパラメータに基づいて変更されます) は、<router-view></router-view> div#app 内の DOM にレンダリングされます。
最終的に生成される HTML は次のようになります: http://websitename.com/user/1:

エコシステム

コアライブラリに付属するツールとライブラリは、コアチームと貢献者によって開発されています。

公式ツール

Devtools - Vue.js アプリケーションをデバッグするためのブラウザ devtools 拡張機能。
Vue CLI - Vue.js の迅速な開発のための標準ツール
Vue Loader - 単一ファイルコンポーネント (SFC) 形式で Vue コンポーネントを記述できる Webpack ローダー。

公式図書館

Vue Router - Vue.js の公式ルーター
Vuex – Flux パターンに基づいた Vue.js の集中状態管理。
Vue Server Renderer - Vue.js のサーバー側レンダリング。

一般的なコマンド

インストールツール

npm インストール -g @vue/cli

プロジェクトを作成します。

vue でプロジェクトを作成

開発環境操作:

npm 実行サーブ

実稼働環境のパッケージ化:

npm 実行ビルド

【公式サイト】

https://vue.js.org/ より

【最新バージョン】

2019年12月13日の2.6.1

【認可】

MITライセンス

IV. 要約

この記事では、現在のトップフロントエンドテクノロジーについて比較的詳細に説明します。フロントエンドテクノロジーの主な方向性は、シングルページアプリケーション (SPA) です。このビジネス向けのフロントエンドテクノロジーを選択する際には、次の点を考慮する必要があります。

1. メンバーの現在のスキル。これは非常に現実的な問題です。ほとんどのプログラマーは、より慣れているテクノロジーを選択します。ここで、現在使い慣れているテクノロジーが最良の選択肢であるかどうかを考える必要があります。

2. 利用可能な学習時間。使用したいテクノロジーを学習するのに時間がかかることがわかった場合、この時間的支出は開発の進捗と矛盾しますか?

3. プロジェクトの複雑さを最小限に抑えられるかどうかが重要な要素です。高度なテクノロジーが高度な理由は、開発者が実際のビジネス開発に時間とエネルギーを集中できるようにするためです。使用するテクノロジーに、ビジネスに関係のない多くの構成が必要な場合は、「もっと良い方法はないか」と自問する必要があります。

以上がReact、Angular、Vueの3大フロントエンド技術の詳しい説明です。React、Angular、Vueの3大フロントエンド技術についてさらに詳しく知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください！

以下もご興味があるかもしれません: