AngularJS

AngularJS
開発元	Googleおよびコミュニティ
初版	2009年
最新版	1.8.3 / 2022年4月8日 (3年前)
リポジトリ	github.com/angular/angular.js;
プログラミング; 言語	JavaScript
サポート状況	サポート終了
種別	Webアプリケーションフレームワーク
ライセンス	MIT License
公式サイト	angularjs.org
	テンプレートを表示

AngularJS（アンギュラージェイエス）は、Googleと個人や企業のコミュニティによって開発されていた、完全にJavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークである。MIT Licenseでライセンスされた自由ソフトウェアである。2022年1月にサポートを終了した。^[2]

シングルページアプリケーションの開発において直面する多くの問題に取り組んでいる。JavaScriptコンポーネントは、クロスプラットフォームなモバイルアプリ開発用フレームワークであるApache Cordovaを補完する。クライアントサイド用のMVCおよびMVVMアーキテクチャを、リッチインターネットアプリケーションで一般的に用いられるコンポーネント群とともに提供することにより、そのようなアプリの開発とテストを簡単にすることを目的としている。

AngularJSはシングルページアプリケーション (SPA) の開発が可能なフレームワークで、一つのフレームワーク内で全ての機能が完結するフルスタックフレームワークであることが特徴として挙げられる。^[3]

初版は、Miško HeveryとAdam Abronsによって2009年に発表され、2012年6月にバージョン1.0.0がリリースされた^[4]。2016年9月にはアーキテクチャを一新したバージョン2.0がリリースされており、言語自体も一般的なJavaScriptから、引き続きJavaScriptも使用可能であるもののその拡張言語であるTypeScript推奨となっている。言語の変更もあり、フレームワークの名称もJSを取り除いたAngularへと変わっている。これに伴いフレームワーク自体の仕様も大幅に変更されており、1.xとは互換性がなくなっている^[3]。

AngularJSフレームワークは、追加的なカスタムタグ属性が埋め込まれたHTMLを読むことにより起動される。AngularJSはこれらの属性をディレクティブとして解釈し、当該ページの入力または出力の一部分を、通常のJavaScript変数により表現されたモデルに結び付ける。これらのJavaScript変数の値は、コード内で設定できるほか、静的または動的なJSONリソースから取得することもできる。

AngularJS は、データベースにMongoDB、ウェブアプリケーションサーバーフレームワークにExpress.js、フロントエンドフレームワークにAngular.js、実行環境にNode.jsを用いて構成されるMEANスタックのフロントエンド部分である。

概要

AngularJSは、アプリケーションのビジネスロジックを定義するには命令型プログラミングがより適している一方、ユーザインタフェースの作成やソフトウェアコンポーネントの連結には宣言型プログラミングを使うべきだという信条の下に作られている^[5]。AngularJSフレームワークは、伝統的なHTMLに適合しつつ、モデルとビューを自動的に同期させられる双方向データ結合を通じて動的コンテンツを表示する拡張を加えたものである。その結果、AngularJSでは、テスト容易性や生産性の向上をめざす目的の下で、明示的なDOM操作にはあまり重きをおかないようになっている。

AngularJSの設計目標には次のようなものが含まれる:

DOM操作をアプリケーションロジックから分離する。これの難しさは、コードがどのように構造化されているかによって劇的に影響される。
アプリケーションのクライアントサイドとサーバーサイドを分離する。これによって、開発作業を同時並行で進められ、双方の側で再利用が可能になる。
アプリをビルドしていく流れ（ＵＩをデザインするところから、ビジネスロジックを書き、テストするまで）に構造を与える。

AngularJSは表示、データ、ロジック部分を分離するMVCパターンを実装している。 AngularJSでは依存性の注入を用いて、伝統的にはサーバサイドのサービスであった、ビュー依存のコントローラなどをクライアントサイドのウェブアプリケーションに持ってくる。その結果、サーバ負荷のかなりの部分が削減される。

Scope

AngularJSではscopeという単語が独特の意味で使われるので注意が必要である。

計算機科学におけるスコープとは、プログラム内で、ある名前束縛が有効な範囲を言う。ECMA-262仕様はスコープを次のように定義している：クライアントサイドのウェブスクリプト内でFunctionオブジェクトが実行される語彙環境^[6]。これはラムダ計算でのスコープの定義と類似している^[7]。

"MVC" アーキテクチャにおけるスコープは「モデル」を形成しており、このスコープ内で定義された全ての変数は「ビュー」からも「コントローラー」からもアクセス可能である。このスコープが「ビュー」と「コントローラー」を結び付ける糊の役目を果たしている。

AngularJSにおけるscopeはある種のオブジェクトであり ^[8]、それ自体がJavaScriptにおける他のオブジェクト同様に通常の変数スコープのルールに従って、プログラム内の任意の部分においてスコープ内であったり、スコープ外であったりする^[9]。下記においてscopeという場合、それはAngularJSのscopeオブジェクトを指しており、名前束縛のスコープを意味するものではない。

双方向データ結合

AngularJSの双方向データ結合は最も注目すべき特長であり、バックエンドのサーバ側が担ってきたテンプレーティングの責任を大いに軽減するものである。その代わり、テンプレートはモデル内で定義されたscopeに含まれるデータに基づき、プレーンHTML内で書き込まれる。AngularJSの$scopeサービスがモデル部分の変更を検知し、コントローラを介してビュー内のHTML表現を変更する。同様に、ビュー側になされた全ての変更は、モデル側に反映される。これで積極的にDOMを操作する必要性を回避して、それによってウェブアプリをブートストラップしたり迅速にプロトタイプを作ったりすることを容易にしている^[10]。

AngularJSは、以前の処理で格納された値と現在の値をダーティ・チェック (dirty check) で比較して、モデルの値の変更を検出する仕組みである。この点、Ember.jsやBackbone.jsの、モデルの値が変更されたときにリスナーを叩く仕組みとは異なる^[11]。

パフォーマンス

AngularJS は「消化サイクル」(digest cycle) の考え方で設計されている。このサイクルはループと考えることができ、このループ中にAngularJSは全ての$scopeが監視している全ての変数に何らかの変更があるかどうか検査する。従って、もし変数$scope.myVarがコントローラ内で定義されていて、この変数が監視対象としてマークされている場合、AngularJSはmyVarに対する変更をループが回る度に調べることになる(いわゆるダーティ・チェック)。

このやり方でAngularJSがループのたびに$scope内にある大量の変数をチェックしていたら描画が重くなる可能性がある。Hevery氏は、いかなるページであっても監視対象は2000個以下に保つべきだと示唆している^[11]。