AngularJSのソースを表示

{{Infobox Software
 | 名称                   = AngularJS
 | ロゴ =  [[File:AngularJS logo.svg|200px]]
 | スクリーンショット = 
 | 説明文 = 
 | 開発者 = 
 | 開発元                 = Google Inc. および コミュニティ
 | 初版                   = 2009年
 | 最新版                 = 4.1.0
 | 最新版発表日           = {{release date and age|2017|04|26}}<ref name="releases">{{Cite web|url=https://github.com/angular/angular/releases|title=Releases · angular/angular · GitHub|accessdate=2017-05-04}}</ref>
 | 最新評価版             = 4.1.0-rc.0
 | 最新評価版発表日       = {{release date and age|2017|04|21}}<ref name="releases" />
 | サポート状況           = アクティブ
 | プログラミング言語     = [[TypeScript]], [[JavaScript]]
 | 種別                   = [[Webアプリケーションフレームワーク]]
 | ライセンス             = [[MIT License]]
 | 公式サイト             = {{url|http://www.angularjs.org/}}
}}
'''AngularJS'''（アンギュラージェイエス）、または '''Angular''' は、[[Google]]と個人や企業の[[コミュニティ]]によって開発されている、完全に[[JavaScript]]で書かれた[[オープンソース]]のフロントエンド[[Webアプリケーションフレームワーク]]である。[[MIT License]]で[[ライセンス]]された[[フリーソフトウェア]]である。[[シングルページアプリケーション]]の開発において直面する多くの問題に取り組んでいる。JavaScriptコンポーネントは、クロスプラットフォームなモバイルアプリ開発用フレームワークである[[Apache Cordova]]を補完する。クライアントサイド用の[[Model View Controller|MVC]]および[[Model View ViewModel|MVVM]]アーキテクチャを、[[リッチインターネットアプリケーション]]で一般的に用いられるコンポーネント群とともに提供することにより、そのようなアプリの開発と[[ソフトウェアテスト|テスト]]を簡単にすることを目的としている。

AngularJSは[[シングルページアプリケーション]] (SPA) の開発が可能なフレームワークで、一つのフレームワーク内で全ての機能が完結するフルスタックフレームワークであることが特徴として挙げられる。<ref name="ics20160916">{{Cite web|url=https://ics.media/entry/13269|title=GoogleがAngular 2を正式リリース！未来のウェブ標準を意識した新しいフレームワーク|publisher=ICS MEDIA|date=2016-09-16|accessdate=2016-09-17}}</ref>

初版は、Miško HeveryとAdam Abronsによって[[2009年]]に発表され、[[2012年]]6月にバージョン1.0.0がリリースされた<ref>[http://googledevelopers.blogspot.jp/2012/06/better-web-templating-with-angularjs-10.html Better Web Templating with AngularJS 1.0 - Google Developers Blog]</ref>。[[2016年]]9月にはアーキテクチャを一新したバージョン2.0がリリースされており、言語自体も一般的なJavaScriptから、引き続きJavaScriptも使用可能であるもののその拡張言語である[[TypeScript]]推奨となっている。言語の変更もあり、フレームワークの名称もJSを取り除いた '''Angular''' へと変わっている。これに伴いフレームワーク自体の仕様も大幅に変更されており、1.xとは互換性がなくなっている。<ref name="ics20160916" />

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

AngularJS は、データベースに[[MongoDB|'''M'''ongoDB]]、ウェブアプリケーションサーバーフレームワークに[[Express.js|'''E'''xpress.js]]、フロントエンドフレームワークに'''A'''ngular.js、 実行環境に[[Node.js|'''N'''ode.js]]を用いて構成される[[MEAN (ソフトウェアバンドル)|MEANスタック]]のフロントエンド部分である。

==Angular JS==
[[File:Architecture of an Angular 2 application.png|thumb|right|Angular 2アプリのアーキテクチャ。大きな構成要素としてはモジュール、コンポーネント、テンプレート、メタデータ、データ結合、ディレクティブ、サービス、および依存性の注入である]]

AngularJSは、アプリケーションの[[ビジネスロジック]]を定義するには[[命令型プログラミング]]がより適している一方、[[ユーザインターフェイス]]の作成や[[ソフトウェアコンポーネント]]の連結には[[宣言型プログラミング]]を使うべきだという信条の下に作られている<ref>{{cite web |url=https://docs.angularjs.org/guide/introduction |title=What Is Angular? |deadurl=no |accessdate=12 February 2013}}</ref>。AngularJSフレームワークは、伝統的なHTMLに適合しつつ、モデルとビューを自動的に同期させられる双方向データ結合を通じて動的コンテンツを表示する拡張を加えたものである。その結果、Angular-JSでは、テスト容易性や生産性の向上をめざす目的の下で、明示的なDOM操作にはあまり重きをおかないようになっている。

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

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

==Scope==
Angularでは<code>scope</code>という単語が独特の意味で使われるので注意が必要である。

計算機科学における[[スコープ]]とは、プログラム内で、或る[[束縛 (情報工学)#名前束縛|名前束縛]]が有効な範囲を言う。[[ECMAScript|ECMA-262]]仕様はスコープを次のように定義している：クライアントサイドのウェブスクリプト内でFunctionオブジェクトが実行される語彙環境<ref name=es5-x10.2>{{cite web|title=Annotated ECMAScript 5.1, Section 10.2 Lexical Environments|url=https://es5.github.io/#x10.2|accessdate=2015-01-03}}</ref>。これは[[ラムダ計算]]でのスコープの定義と類似している<ref name="BarendregtBarendsen">{{Citation
  | last = Barendregt
  | first = Henk
  | author-link =
  | last2 = Barendsen
  | first2 = Erik
  | author2-link =
  | title = Introduction to Lambda Calculus
  | place =
  | publisher =
  | year = March 2000
  | volume =
  | edition =
  | url = ftp://ftp.cs.ru.nl/pub/CompMath.Found/lambda.pdf
  | doi =
  | id =
  | isbn = }}</ref>。

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

Angularにおける<code>scope</code>はある種の[[オブジェクト (プログラミング)|オブジェクト]]であり
<ref name=angular-scope>{{cite web |title= AngularJS: Developer Guide: Scopes |url= https://docs.angularjs.org/guide/scope |accessdate= 2015-01-03}}</ref>、それ自体がJavaScriptにおける他のオブジェクト同様に通常の変数スコープのルールに従って、プログラム内の任意の部分においてスコープ内であったり、スコープ外であったりする<ref name=ecmascript-scope>{{cite web |title= ECMA-262-3 in detail. Chapter 4. Scope chain. |url= http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain/ |accessdate= 2015-01-03}}</ref>。下記において<code>scope</code>という場合、それはAngularの<code>scope</code>オブジェクトを指しており、名前束縛のスコープを意味するものではない。

==双方向データ結合==
AngularJSの双方向[[データバインディング|データ結合]]は最も注目すべき特長であり、バックエンドのサーバー側が担ってきたテンプレーティングの責任を大いに軽減するものである。その代わり、テンプレートは
モデル内で定義された<code>scope</code>に含まれるデータに基づき、プレーンHTML内で書き込まれる。Angularの<code>$scope</code>サービスがモデル部分の変更を検知し、コントローラーを介してビュー内のHTML表現を変更する。同様に、ビュー側になされた全ての変更は、モデル側に反映される。これで積極的にDOMを操作する必要性を回避して、それによってウェブアプリをブートストラップしたり迅速にプロトタイプを作ったりすることを容易にしている<ref>{{cite web |url=http://net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features/ |title=5 Awesome AngularJS Features |deadurl=no |accessdate=13 February 2013}}</ref>。

AngularJSは、以前の処理で格納された値と現在の値をダーティ・チェック(dirty check)で比較して、モデルの値の変更を検出する仕組みである。この点、[[Ember.js]]や[[Backbone.js]]の、モデルの値が変更されたときにリスナーを叩く仕組みとは異なる<ref name="Misko Hevery">{{cite web | title = Databinding in angularjs | author = Misko Hevery | url = https://stackoverflow.com/a/9693933/146423 | accessdate= 2014-03-09 }}</ref>。

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

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

== 脚注 ==
{{脚注ヘルプ}}
{{Reflist}}

== 関連項目 ==
{{Commonscat}}
* [[Ajax]]
* [[Backbone.js]]
* [[MEAN (ソフトウェアバンドル)]]

== 外部リンク ==
* {{official|http://www.angularjs.org/}} {{Ref-en}}
* [https://github.com/angular/angular.js AngularJS (Github)]
* [http://groups.google.com/group/angular AngularJS Mailing list]
* [https://groups.google.com/d/forum/angularjs-jp AngularJS Japan User Group]

{{JavaScript}}
{{Software-stub}}

{{デフォルトソート:あんきゆらあしえいえす}}
[[Category:JavaScript]]
[[Category:ライブラリ (プログラミング)]]
[[Category:ウェブ開発]]