• AngularJSとは?
• AngularJSの思想

AngularJSとは?

AngularJSは動的Webアプリケーションのためのフレームワークです。 テンプレート言語としてHTMLを使用し、アプリケーションのコンポーネントを分かりやすく簡潔にするためにHTML文法を拡張します。 AngularJSを使うことで、データバインディングと依存注入を通して大部分の余計なコードを排除し、 ブラウザのJavaScriptとサーバー技術が、理想的なパートナーとなるような手助けをしてくれます。

AngularJSは、HTMLが持つ特徴を元に、それをアプリケーション用にするための設計がされています。(翻訳に自信なし) HTMLは静的ドキュメントのための非常に優れた(宣言)言語ですが、アプリケーションを構築するための方法は含まれていません。 そのため、Webアプリケーションを構築するために、一生懸命ブラウザに対してトリックを施さなければならない、 という事になりがちです。

この動的アプリケーションと静的ドキュメントとの間に存在するミスマッチを解消するために、 下記のような対応がよく取られます。

ライブラリ

Webアプリケーションを書く際に非常に便利な関数を集めたコレクションです。 コード内で開発者が必要に応じてライブラリ内の適した関数を呼び出します。
(例: jQuery)

フレームワーク

開発者のコードの細部を格納するWebアプリケーション特有の実装。 フレームワークはアプリケーション独自の用途に合わせて、開発者のコードを呼び出します。 (例:knockout, ember, 他)

これらに対して、AngularJSは別のアプローチを取ります。 AngularJSは、HTML中心のドキュメントと、アプリケーションが必要に応じて生成する新しいHTMLとの間のミスマッチを、 極力少なくするための試みがされています。 AngularJSは、我々(AngularJS開発チーム)が「ディレクティブ(Directive)」と呼ぶ仕組みを通して、ブラウザに新しい文法を伝えます。 新しい文法には、下記のようなものがあります。

• {{}}によるデータバインディング。
• DOMの一部分の繰り返し/非表示のための、DOM制御構造
• フォームとフォーム入力値の検証のサポート
• DOM要素へのコードバインディングの割り当て
• 再利用可能なコンポーネントのためのHTMLのグループ化

クライアントサイドでの解決法

AngularJSは、Webアプリケーションのクライアントサイドを構築する全体のパズルの1ピースという事ではありません。 明確に定義された構造の中にAjax連携コードを書かせ、そのコードと全てのDOMを取り扱います。 そのため、AngularJSはCRUDアプリケーションの構築方法について固執的な傾向があります。 ただし、その固執的な部分を確認しようとする事が、それを自由に変更できるようになるための第一歩になります。 AngularJSを始めるのにあたり、下記のことを頭にいれておきましょう。

• 開発者は、データバインディング、(テンプレート)ディレクティブ、フォーム検証、ルーティング、ディープリンク、再利用可能なコンポーネント、依存注入、 の仕組みの中で、CRUDアプリケーションを構築する必要があります。
• テスト機能として、ユニットテスト、end-to-endテスト、モック、テストハーネスが用意されています。
• アプリエケーションを作り始めるのにあたり、出発点としてディレクトリレイアウトとテストスクリプトを用意します。

AngularJSの使い所

AngularJSは、高階層での抽象化を開発者へ提供することで、アプリケーションの開発を簡素化します。 ただし、抽象化は柔軟性を犠牲にするという一面もあるため、 必ずしも全てのアプリケーションがAngularJSに適しているわけではありません。 AngularJSはCRUDアプリケーション構築を念頭において、作られたもので、 幸いCRUDアプリケーションが、Webアプリケーションの大部分を占めています。 AngularJSがどんなアプリケーションで使うのが適切なのか、また不適切なのかを理解しておくことが大切です。

JavaScriptとHTMLによるゲームやGUIエディターは、強烈且つ複雑なDOM操作が必要なアプリケーションの例です。 こういった種類のアプリケーションは、CRUDアプリケーションとは大きく異なり、AngularJSには適さないでしょう。 このようなケースでは、jQueryのような低階層での抽象化を行うライブラリを使用する方が良いでしょう。

AngularJSの思想

AngularはUI構築とソフトウェアコンポーネントを同時に行う際には、 命令形のコードはビジネスロジックが表現するのに優れてはいるものの、 命令形のコードより宣言コードの方が優れているという信念のもとに構築されています。

• これは、アプリケーションロジックからDOM操作を切り離す非常に良いアイディアです。 また、コードのテストにおいてもメリットが多くなります。
• アプリケーションのテストはアプリケーションを書くことと同じぐらい重要であると考えることは、本当に本当に重要なことです。 テストのし易さはコードの構築方法によって、物凄く影響を受けます。
• これは、アプリケーションのクライアント側とサーバ側を切り分ける素晴らしいアイディアです。 これにより、開発作業を並行して進行することを可能にし、双方の再利用を可能にします。
• もし、フレームワークのアプリケーション構築のガイドに沿って開発者が UIのデザイン、ビジネスロジック、テスト It is very helpful indeed if the framework guides developers through the entire journey of building an app: from designing the UI, through writing the business logic, to testing. It is always good to make common tasks trivial and difficult tasks possible.

Angularは次のような事から開発者を開放してくれます。

コールバックの登録

コールバックの登録はコードを乱し、コードの動きを確認することを困難にします。 このようなコールバックなどの共通の定型コードを削除するのは良いことで、 Angularは、しなければいけないことの多くのJavaScriptコーディングを大幅に減らし、 アプリケーションが何をしているのかを確認しやすくしてくれます。

プログラムに基づいたHTMLのDOM操作

HTMLのDOM操作はAjaxアプリケーションの要であるものの、開発者にとっては重荷でありエラーの発生源になりやすいものです。 Angularは、どのようにUIがアプリケーションの状態によって変化するかを宣言的に指定することで、 低階層のDOM操作タスクから開発者を開放してくれます。 Angularでアプリケーションを書けば、ほとんどの場合DOM操作をプログラム的に書くことなく、任意の処理を実装することが可能です。

UIからデータを集め

CRUD操作は、Ajaxアプリケーションの大部分を占めています。 サーバから受け取ったデータの集まりをHTMLフォームの内部オブジェクトへ移し、 ユーザーへフォームでの編集を許可し、フォームの値を検証し、検証のエラーを表示し、 内部モデルへ値を返し、そしてサーバーへそれを返すといったフローは多くの定形コードを生み出してしまいます。 Angularは定形コードの多くを排除し、全てを詳細に実装するよりも、 アプリケーションの全体のフローの描写をそのままコードに反映させます。

開発を始めるために大量の初期化コードを書くこと

一般的に、"Hello Word"を表示するAjaxアプリケーションを作るだけでも、土台となるコードを大量に書く必要があります。 Angularであれば、Guiceのような、 依存注入(DI)形式の自動注入を使用することで、アプリケーションを容易に作り始めることを可能にしてくれます。 これにより、素早く機能開発を始めることが出来るようになり、 さらに自動テストでの初期化プロセスの制御を完全に取得することが出来ます。

 Back to top