AngularJS とは何ですか? Archi構造、特徴、利点
ジェームズ・ハートマン
⚡ スマートサマリー
ここでは、AngularJSの概要、アーキテクチャ、および機能を初心者向けに解説します。Model-View-Whatever設計、双方向データバインディング、ディレクティブ、実行可能な最初のアプリケーション、そしてすべてのチームが知っておくべき2021年12月の長期サポート終了について取り上げます。
AngularJS とは何ですか?
AngularJS は、オープンソースのモデルビューコントローラーフレームワークで、 JavaスクリプトAngularJS は 2010 年代で最も人気のある Web フレームワークの 1 つです。ping 主にシングルページアプリケーション向け。このフレームワークは、以下の開発者グループによって開発されました。 Google そのもの。
圧倒的なサポートのおかげで Google 幅広いコミュニティフォーラムからのアイデアを取り入れ、このフレームワークは運用期間を通じて常に最新の状態に保たれてきました。また、当時の主要な開発トレンドも取り入れていたため、現在でも多くの本番環境で使用されているコードがこのフレームワーク上で動作しています。
⚠️ 重要: AngularJS はサポート終了となりました。 Google 2018年7月1日にAngularJS 1.xを3年間の長期サポート期間に入れ、COVID-19の影響で6か月延長しました。そのサポートは ２０１８年１２月２７日バージョン1.8.3は最終リリースであり、 Google これ以上のバグ修正やセキュリティパッチは提供されません。既存のシステムを維持するためにAngularJSを学び、最新の技術を選択してください。 角度の 何か新しいことに対して。
用語に関して、最初に明確にしておくべき点が1つあります。AngularJSはMVCフレームワークとして広く説明されており、これは便利な出発点です。しかし、AngularJSチーム自身は、別のラベルを好んでいます。 MVW（モデルビュー・ホワットエバー）ランタイムの動作が従来のMVCよりもModel-View-ViewModelに近いからです。 AngularJSのドキュメント これは動的なWebアプリケーションのための構造フレームワークと呼ばれています。その点を踏まえて、各要素がどのように組み合わさるのかを見ていきましょう。
AngularJS Archi構造
AngularJSはMVCアーキテクチャを採用しています。MVCフレームワークの図を以下に示します。
AngularJS Archi構造図
3つの層それぞれに明確な役割がある。
- コントローラーはビジネス ロジックを持つレイヤーを表します。 ユーザー イベントは、コントローラー内に保存されている関数をトリガーします。 ユーザー イベントはコントローラーの一部です。
- ビューは、エンドユーザーに提供されるプレゼンテーション層を表すために使用されます。
- モデルはデータを表すために使用されます。モデル内のデータは、プリミティブ宣言のみを持つシンプルなものにすることができます。たとえば、学生向けアプリケーションを管理している場合、データ モデルには学生 ID と名前のみを含めることができます。または、構造化データ モデルを使用して複雑にすることもできます。自動車所有アプリケーションを管理している場合、エンジン容量、座席数などの観点から車両自体を定義する構造を持つことができます。
実際には、コントローラーが手動でビューにデータを送信することはほとんどありません。AngularJSはモデルを監視し、ビューを自動的に更新します。この自動同期は、次に説明する機能セットによって実現されています。
AngularJSの特徴
AngularJSには、市場で最も強力なフレームワークの1つとなる以下の主要な機能があります。
- MVC – このフレームワークは、次のような有名な概念に基づいて構築されています。 MVC (モデル-ビュー-コントローラー)。 これは、現代のすべての Web アプリケーションで使用されているデザイン パターンです。 このパターンは、ビジネス ロジック層、データ層、およびプレゼンテーション層を個別のセクションに分割することに基づいています。 さまざまなセクションへの分割は、それぞれをより簡単に管理できるようにするために行われます。
- データモデルバインディング HTMLコントロールにデータをバインドするために特別なコードを記述する必要はありません。AngularJSを使えば、ほんの少しのコードを追加するだけで実現できます。
- 書くコードが少なくなる – DOM操作を大量に実行する場合 Javaスクリプト あらゆるアプリケーションを設計するには、多くのコードを書く必要がありました。しかし、AngularJSを使えば、DOM操作に必要なコード量が大幅に少なくなることに驚くでしょう。
- ユニット テスト 準備完了 – デザイナー Google AngularJSを開発しただけでなく、AngularJSアプリケーションの単体テストの設計に役立つ「Karma」と呼ばれるテストフレームワークも開発しました。
- 説明書 – マーカーなど ng-app、ng-model、ng-repeat 通常のHTML要素に動作を追加する。
これらの機能は実際に実行してみると最も理解しやすいので、次のセクションでは動作するページをゼロから構築します。
AngularJSの設定方法と最初のアプリケーションの構築方法
データバインディングについて読むことと、実際に動作を見ることは全く別物です。AngularJSはパッケージマネージャー、バンドラー、コンパイラを必要としないため、最初のアプリケーションはハードディスクから直接実行される単一のHTMLファイルになります。
ステップ1）AngularJSライブラリを追加する
1つのスクリプトタグでCDNからライブラリを読み込みます。バージョン1.8.3はAngularJSの最終リリースなので、ページをフローティングバージョンではなく、この正確なバージョンに固定してください。
ステップ2）アプリケーションのルートをng-appでマークする
ng-app ディレクティブは、AngularJS コンパイラにページのどの部分を所有するかを指示します。これを html タグに配置すると、ドキュメント全体がフレームワークに渡され、指定した値によって作成するモジュールの名前が決まります。
ステップ3）ng-modelと式を使用してデータをバインドする
ng-model ディレクティブは入力要素をスコープ上のプロパティにバインドし、二重中括弧式はページ上の別の場所に同じプロパティを出力します。バインディングは双方向なので、ping ボックス内の見出しは、独自のイベントハンドラを必要とせずに即座に更新されます。
ステップ4）ロジック用のコントローラーを追加する
コントローラーは単純な Java$scopeオブジェクトを受け取り、初期値を設定するスクリプト関数。モジュールに登録することで、ng-controllerディレクティブから利用できるようになります。
<!DOCTYPE html> <html ng-app="helloApp"> <head> <meta charset="UTF-8"> <title>AngularJS Hello World</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script> </head> <body> <div ng-controller="GreetController"> <input type="text" ng-model="name" placeholder="Enter your name"> <h3>Hello {{ name }}!</h3> </div> <script> // Step 1: create the module named in ng-app angular.module("helloApp", []) // Step 2: register a controller on that module .controller("GreetController", function ($scope) { $scope.name = "World"; }); </script> </body> </html>
ステップ5）ページを実行して結果を確認する
ファイルをindex.htmlとして保存し、任意のブラウザで開いてください。最初は「Hello World!」という見出しが表示されますが、キーを押すたびに自動的に書き換えられます。Webサーバーもビルドプロセスも一切必要ありません。
何も表示されない場合は、ブラウザのコンソールを開き、CDNスクリプトが読み込まれていること、およびng-app内のモジュール名がangular.moduleに渡された名前と完全に一致していることを確認してください。一致しない場合は、エラーメッセージが表示されません。この小さなページだけでも、次に説明する利点がすでに示されています。
AngularJS の利点
AngularJS の利点は次のとおりです。
- オープンソースのフレームワークであるため、エラーや問題の発生件数は最小限に抑えられると期待できます。
- 双方向バインディング – AngularJS はデータ層とプレゼンテーション層を同期させます。追加のコードを記述する必要はありません。 JavaHTMLコードとデータレイヤーのデータを同期させるためのスクリプトコード。AngularJSはこれを自動的に行ってくれます。どのコントロールがモデルのどの部分にバインドされているかを指定するだけで済みます。
- ルーティング – AngularJSはルーティング、つまりあるビューから別のビューへの移動を処理できます。これはシングルページアプリケーションの重要な基本機能であり、ユーザーの操作に基づいてWebアプリケーション内のさまざまな機能に移動しながらも、同じページにとどまることができます。
- AngularJSはテストをサポートしています。 単体テスト, 統合テスト.
- AngularJSは、ディレクティブと呼ばれる独自の要素を提供することでHTMLを拡張します。簡単に言うと、ディレクティブはDOM要素上のマーカー（属性、要素名、コメント、CSSクラスなど）であり、AngularJSのHTMLコンパイラに対して、そのDOM要素に特定の動作を適用するように指示します。これらのディレクティブは、既存のHTML要素の機能を拡張し、Webアプリケーションの機能を強化するのに役立ちます。
AngularJS の利点
バランスの取れた視点も同様に重要なので、次にトレードオフについて説明します。
AngularJSの欠点と制限
どのフレームワークにも何らかのトレードオフがあり、AngularJSも例外ではありません。AngularJSアプリケーションを保守するチームから最もよく報告される制限事項は以下のとおりです。
- 独自のセキュリティ層はありません AngularJSは認証も認可も提供しないため、両方ともサーバー側で実施する必要があります。
- 完全に依存している Javaスクリプト – 訪問者が無効にした場合 Javaスクリプトがない場合は、ページは単純なマークアップに戻り、レンダリングされません。
- 消化サイクル性能 変更は監視対象の値を繰り返し比較することで検出されるため、数千ものバインディングを持つページは動作が遅く感じられる場合があります。
- 急な学習曲線 範囲、指令、工場、サービス、プロバイダーは重複しており、同じ結果を達成するための方法が複数存在することがよくあります。
- 検索エンジンの可視性 – ビューはブラウザ内で組み立てられるため、クローラーがページを確実にインデックス化するには、プリレンダリングなどの追加作業が必要です。
- これ以上の更新はありません 2021年12月31日以降、公式のパッチが存在しないため、新たに発見された脆弱性は、商用ベンダーが修正プログラムを提供しない限り、修正されないままとなります。
最後の点が、ほとんどのチームを後継フレームワークへと向かわせる要因となっている。後継フレームワークは、同じ名前であっても、実際には別の製品である。
AngularJSとAngularの違いとは？
AngularJSとAngularは名前が似ているため混同されがちですが、それぞれ異なる言語、アーキテクチャ、リリースラインを持つ独立したフレームワークです。AngularJSは、このページで説明されている1.xシリーズのみを指します。Angularはバージョン2以降、つまり2016年にリリースされた全面的な書き直し版であり、現在も活発に開発が続けられています。 Code 意図的な移動作業なしには、それらの間を移動することはない。
| 比較基準 | AngularJS (1.x) | Angular（バージョン2以降） |
|---|---|---|
| 言語 | Javaスクリプト | TypeScript |
| 建築用ブロック | コントローラーとスコープ | コンポーネントとクラス |
| Archi構造 | MVC / MVW | コンポーネントベースの |
| モバイルサポート | モバイル向けには設計されていません | モバイルサポート内蔵 |
| 依存性注入 | 文字列ベース、複数の構文 | 階層型、タイプベース |
| コマンドラインツール | 供給なし | 角度CLI |
| サポート状況 | 2021年12月31日終了 | 積極的に維持されている |
実際的な結果として、AngularJSコントローラーをAngularプロジェクトにそのまま組み込むことはできません。移行とは、各コントローラーをコンポーネントとして書き直すことを意味するため、アップグレードではなく、本格的なエンジニアリング作業として計画する必要があります。つまり、AngularJSは保守スキルとして、Angularは新規開発のためのプラットフォームとして捉えるべきです。
