AngularJS TIPS
AngularJSを利用するには？
クライアントサイド開発でも、本格的なアプリケーションフレームワークを利用しよう。世界中で人気爆発中のAngularJSの基本機能を目的別リファレンスの形式でまとめる連載スタート。
【対応バージョン】 AngularJS v1対応の記事です。v4以降に関しては「TIPS：Angularの基本構造を理解して、アプリ開発を始めるには？」を、v2に関しては「TIPS：Angular 2を利用するには？（準備編）」を参照してください。
このシリーズでは、何回かにわたって、AngularJSの基本機能を目的別リファレンスの形式でまとめていきます。
AngularJSとは、グーグル（Google）とコミュニティによって開発が進められているJavaScriptフレームワークです。オープンソースライセンスであるMITに基づいて配布されています。
従来、クライアントサイド開発といえば、jQueryが定番でしたが、jQueryはあくまでページ操作を中心にサポートするライブラリであり、大規模なクライアントサイドの開発分野をあまねくサポートするわけではありません。
一方で、クライアントサイド開発の世界では、JavaScriptに依存する割合がいや増しています。HTML5／Ajaxの普及、スマホ普及に伴うRIA*1の衰退、SPA*2の流行などなど、JavaScript開発を後押しするキーワードは、枚挙にいとまがありません。開発規模の増大に伴い、JavaScriptの世界でも、サーバーサイドでの開発と同じく、本格的なアプリケーションフレームワークが求められているのです。
- *1 Rich Internet Application。Flash、Silverlightなどの技術が代表的です。
- *2 Single Page Application。URLを遷移させず、一枚のページ上で全ての操作を行うようなアプリの形態を言います。
JavaScriptフレームワークには、Backbone.js、Knockout.js、Ember.jsなどなど、すでにさまざまなものが存在しています。が、その中でもAngularJSは人気も高く、グーグルが開発に携わっていることから安心して学習できるフレームワークです。
AngularJSの特徴
AngularJSの最大の特徴は、なんといってもフルスタックであるという点です。クライアントサイド開発で必要となる大方の機能がAngularJSひとつを導入するだけで、一通りそろいますので、環境の準備に手間暇がかかりません。また、ライブラリ同士の相性やバージョン間の不整合などを意識することなく、開発を進めることができます。
以下に、AngularJSが提供する具体的な機能をざっと列挙しておきます。
| 機能 | 概要 |
|---|---|
| テンプレートエンジン | モデルの値をレイアウトするための機能 |
| 双方向データバインディング | モデル／ビュー間での値の変更を互いに反映させる機能 |
| ディレクティブ | 条件分岐、繰り返し、イベント処理など、ビューで利用する定型的な機能を提供するカスタムタグ／属性 |
| フィルター | ビューに出力すべき値を加工する機能 |
| ルーティング | URLに応じて適用するテンプレートを切り替え |
なお、AngularJSはMVW（Model－View－Whatever）パターンを取り入れたフレームワークです。あまり聞きなれない言葉かもしれませんが、サーバーサイドのアプリケーションフレームワークに慣れた人であれば、MVC（Model－View－Controller）の派生パターンと考えれば分かりやすいでしょう。クライアントサイドJavaScriptの世界では、MVCのControllerの解釈が異なることがよくあります。そこでAngularJSでは、不毛な議論を避けるためにModelとView以外の部分は何でもあり（Whatever）という意味で、「MVWパターン」という呼称を採用しています。
AngularJSの導入
AngularJSでは、動作に必要なライブラリをCDN（Content Delivery Network）で提供しています。「事前準備が不要」「（一般的には）パフォーマンスに優れる」という理由から、まずはこちらでの利用をお勧めします。
以下は、CDNを利用したAngularJSの最低限の構成です。
|
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
【ここにコンテンツを記述する】
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</body>
</html>
|
他のライブラリがそうあるべきであるのと同じく、AngularJSもページの末尾（＝<body>閉じタグの直前）で読み込んでください。これは、ライブラリダウンロードによって、ページの描画がブロックされるのを防ぐためです。太字の部分は、利用するAngularJSのバージョンによって使い分けます。
また、<html>要素のng-appという見慣れない属性にも注目です。これはAngularJSで提供される命令（＝ディレクティブ）の一種で、「AngularJSの機能を有効化しなさい」という意味です。AngularJSでは、このように独自のタグ／属性でもって、HTMLページに動的な機能を付与しているのです。具体的なディレクティブについては、本連載の中で順次解説する予定です。
ng-app属性がない場合、または、ng-app属性を持つ要素の配下以外では、AngularJSの機能は動作しませんので注意してください。その性質上、特別な理由がない限りは、ng-app属性は<html>要素、もしくは<body>要素に付与するのが一般的です。
AngularJSをオフラインで動作させる
もちろん、あらかじめダウンロードしたライブラリをインポートすることで、オフライン環境でAngularJSを利用することもできます。ダウンロードページは、以下です。
［Download］ボタンをクリックすると、以下のようなダイアログが開きますので、［Branch］で利用するバージョンを、［Build］でダウンロードする形式を選択します。「Minified」はコメントや空白などを除去した圧縮版、「Uncompressed」はコメントなどを残した非圧縮版です。ソースコードを確認しながら開発したい場合にはUncompressed版を、本番環境ではMinified版を利用してください。
ダウンロードしたangular.min.js（非圧縮版の場合はangular.js）を任意のフォルダーに配置した上で、以下のようにインポートします。パスは配置先に応じて読み替えてください。
|
<script src="angular.min.js"></script>
|
AngularJSの動作を確認する
最後に、AngularJSが正しく動作していることを確認してみます。先ほどのリストの【ここにコンテンツを記述する】の部分に、以下のコードを追加してみましょう。
|
{{1 + 2}}
|
{{...}}は、エクスプレッションと呼ばれる構文で、AngularJSではHTMLソース内に動的なコード（式）を埋め込むために、エクスプレッションを利用します。この例であれば1 + 2という簡単な数値演算式です。
AngularJSが正しく有効になっていれば、ブラウザーには3という結果が表示されます。試しに<html>要素のng-app属性を削除すると、{{1 + 2}}という式がそのまま表示されてしまう（＝AngularJSが動作していない）ことが確認できるはずです。
処理対象：{{1+2}} カテゴリ：式（Expressions）
API：ngApp（ng-app） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. 【現在、表示中】≫ AngularJSを利用するには？
クライアントサイド開発でも、本格的なアプリケーションフレームワークを利用しよう。世界中で人気爆発中のAngularJSの基本機能を目的別リファレンスの形式でまとめる連載スタート。
3. AngularJSでコントローラーを定義するには？
AngularJSアプリの最も基本的な構成要素である「コントローラー」の基礎として、コントローラー経由でスコープを準備し、テンプレートに反映させる方法を説明する。
5. モデルをテキストボックスなどのフォーム要素にバインドするには？（ng-model）
ビューの変更をモデルに反映させ、逆にモデルの変更をビューに反映させる、AngularJSの双方向データバインディングの基本を解説する。デフォルト値の設定方法も説明。
