AngularJSのディレクティブ機能でHTMLテンプレートを使いこなそう

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第6回

　本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。今回は、ディレクティブ機能を使ってHTMLテンプレートを記述するために、基本的なディレクティブ機能と制御に関わるディレクティブ機能をご紹介します。

はじめに

　AngularJSでは最初から多くのディレクティブ機能が備わっています。このディレクティブ機能を使ってHTMLテンプレートを記述していきますが、慣れないとどのようなディレクティブがどのような動作をするのかがわからなく、リファレンスとコードを行き来することになります。

　また、リファレンスでは用途ごとの整理されているわけではないので、分かりにくい一面もあります。そのため、今回は基本的なディレクティブ機能と制御に関わるディレクティブ機能に限定し紹介します。

対象読者

• jQueryなどを使っている開発者
• JavaScriptを使った複数人でのプロジェクトに参加している方
• JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方

必要な環境

　この記事では、AngularJSを使用し、Chrome（39.0）、IE11、Firefox（35.0）、Safari（8.0.2）の環境にて確認を行っています。

全ての基本となるAngularJS式（Expression）

　多くの場合、テンプレート（HTML）に{{式}}のように記述をしてモデルとのデータバインディングを行います。この「式」の記述方法には、表1（式の記述例）のようにモデルの変数名だけでなく簡単なコードが記述できます。

表1　式の記述例

記述例	結果
{{value1}}	1
{{1+2}}	3
{{value1 + getValue(2)}}	3
{{"sample"}}	sample
{{list[0]}}	りんご
{{list[1] + "と" + list[2]}}	ばななといちご
{{list[getValue(2)]}}	いちご
{{items['banana']}}	ばなな
{{items.banana}}	ばなな

　リスト1はこの実行結果で使用されている変数やメソッドです。

リスト1　実行時の利用されるモデル（js/controllers/expression.jsの抜粋）

$scope.value1 = 1;
$scope.getValue = function(val){
    return val;
};
$scope.list = ["りんご","ばなな","いちご"];
$scope.items = {
    'apple' : 'りんご',
    'banana' : 'ばなな'
};

　記述する式はJavaScriptのコードとして実行しているわけではありませんので、「繰り返し」や「条件」などを用いた複雑な記述はできませんが、かなり柔軟な記述ができます。その分、HTMLコードがわかりにくくなりやすいので、複雑なことはコントローラ側で処理をするように気をつける必要があります。