AngularJS
開発元 Googleおよびコミュニティ
初版 2009年
最新版
1.8.3 / 2022年4月8日 (4年前) (2022-04-08)[1]
リポジトリ ウィキデータを編集
プログラミング
言語
JavaScript
サポート状況 サポート終了[2]
種別 Webアプリケーションフレームワーク
ライセンス MITライセンス
公式サイト angularjs.org ウィキデータを編集
テンプレートを表示

AngularJS(アンギュラージェイエス)は、Googleと個人や企業のコミュニティによって開発されていた、完全にJavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークである。MITライセンスライセンスされた自由ソフトウェアである。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操作をアプリケーションロジックから分離する。これの難しさは、コードがどのように構造化されているかによって劇的に影響される。
  • アプリケーションのクライアントサイドとサーバーサイドを分離する。これによって、開発作業を同時並行で進められ、双方の側で再利用が可能になる。
  • アプリをビルドしていく流れ(UIをデザインするところから、ビジネスロジックを書き、テストするまで)に構造を与える。

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.jsBackbone.jsの、モデルの値が変更されたときにリスナーを叩く仕組みとは異なる[11]

パフォーマンス

編集

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

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

脚注

編集
  1. ^ Tags · angular/angular.js · GitHub”. 2023年7月17日閲覧。
  2. ^ a b AngularJS: Miscellaneous: Version Support Status”. 2023年7月17日閲覧。
  3. ^ a b GoogleがAngular 2を正式リリース!未来のウェブ標準を意識した新しいフレームワーク”. ICS MEDIA (2016年9月16日). 2016年9月17日閲覧。
  4. ^ Better Web Templating with AngularJS 1.0 - Google Developers Blog
  5. ^ What Is Angular?”. 2013年2月12日閲覧。
  6. ^ Annotated ECMAScript 5.1, Section 10.2 Lexical Environments”. 2015年1月3日閲覧。
  7. ^ Barendregt, Henk; Barendsen, Erik (March 2000), Introduction to Lambda Calculus, ftp://ftp.cs.ru.nl/pub/CompMath.Found/lambda.pdf 
  8. ^ AngularJS: Developer Guide: Scopes”. 2015年1月3日閲覧。
  9. ^ ECMA-262-3 in detail. Chapter 4. Scope chain.”. 2015年1月3日閲覧。
  10. ^ 5 Awesome AngularJS Features”. 2013年2月13日閲覧。
  11. ^ a b Misko Hevery. “Databinding in angularjs”. 2014年3月9日閲覧。

関連項目

編集

外部リンク

編集

📚 Artikel Terkait di Wikipedia

変数 (プログラミング)

local function scope, but it does not lose its value when program execution leaves this scope.」(http://php.net/manual/en/language.variables.scope.php#language

ニュージーランド・レコード産業協会

の異なるチャートがリストされ、最も有名なのは RadioScope100 と NZ40 Airplay Chart だった。2011年10月に、radioscope.net.nz のサイトは全てのページについて HTTP 404 エラーを返すようになり、トップページには「RadioScope

Internet Protocol

addressing and fragmentation." IPv4 specification. ^ "specifically limited in scope to ... deliver a package of bits ... from a source to a destination over

静的スコープ

静的スコープ(せいてきスコープ、英: static scope)とは、プログラミング言語におけるスコープの一種。字句のみから決定できるため、字句スコープまたはレキシカルスコープ (lexical scope) ともいう。 まず、一般的なローカル変数のスコープについて考える。

GNU Lesser General Public License

is not a derivative work of the Library, and therefore falls outside the scope of this License. LGPL の一つの特徴は、(LGPLv2.1では第3節、LGPLv3では第2項の条項により)ソフトウェアのL

ローカル変数

はブロックの先頭部分でのみ定義可能だったが、C99からはC++同様に任意の位置で定義可能である。 ある関数fにおけるローカル変数aのスコープ (scope) すなわち可視性は、その関数f内において、その変数aが宣言された場所から、その変数aが定義されたブロックを抜けるまでである。スコープ外からは参

プロバイオティクス

Probiotics and Prebiotics (ISAPP) consensus statement on the definition and scope of postbiotics”. Nature Reviews Gastroenterology & Hepatology 18 (9): 649–667

マーケティング手法の一覧

ビジネスモデル (w:business model) 市場占有率 (w:market share) 範囲の経済 (w:economies of scope) 3C分析 近視眼的マーケティング (w:marketing myopia) プロダクトマネジメント (w:product management)