対象読者
- jQueryなどを使っている開発者
- JavaScriptを使った複数人でのプロジェクトに参加している方
- JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方
必要な環境
この記事では、AngularJS（バージョン1.4)を使用し、Chrome（43.0）、IE11、Firefox（38.0）、Safari（8.0.6）の環境にて確認を行っています。
カスタムディレクティブの使い所
AngularJSを使っていて、下記のようなことを思い始めてきた時には、カスタムディレクティブを使ってみるとよいでしょう。
- コントローラ内でちょっとした処理なのだから直接DOMを操作したい。
- 何度も何度も同じ記述してng-includeなどを使って共通化したが、同時にコントローラもセットで管理したい。
- jQueryベースのサードパーティなどDOM操作をするためのライブラリを自分好みに組み込みたい。
「Hello World」ディレクティブの作成
カスタムディレクティブを作成するというと、難しそうな雰囲気を感じてしまいます。また、AngularJSの開発者向けガイドを読むと非常に複雑なことが記述されています。
しかし、全てを理解、もしくは使用する必要はありません。自分が必要な部分から利用していけばよいので、まずは、非常に簡単なディレクティブから、カスタムディレクティブの雰囲気を感じていただければと思います。
最初の例では図1のようにhelloという属性があるタグの中身に「Hello World」という文字を表示します。
リスト1のHTMLテンプレートのコードとリスト2の実装のコードを見れば、非常に簡単にカスタムディレクティブが作成できるのがわかると思います。
<!DOCTYPE html>
<html lang="ja" ng-app="hello">
<head >
<meta charset="UTF-8">
<title>Hello Directive</title>
<script type="text/javascript" src="../vendors/angular.js"></script>
<script type="text/javascript" src="hello.js"></script> <!-- （1）helloモジュールの読み込み -->
</head>
<body>
<div hello></div> <!-- （2）helloディレクティブを指定する -->
</body>
</html>
ここではhelloモジュールとしてカスタムディレクティブを作成したので、リスト2のコードを読み込みます。（2）では、helloディレクティブが実行されるように指定します。
(function(){
'use strict';
angular.module('hello',[])
.directive('hello',[HelloDirective]); // （1）helloディレクティブを作成する
// （2）ディレクティブ定義
function HelloDirective(){
return function(scope,element,attrs){
element.append('Hello World'); // （3）HTMLの操作を実装する
}
}
}());
（1）ではhelloディレクティブをモジュールに登録します。ここでの例では単語が一つだけですので気にしませんが、ディレクティブ名は小文字から始まるcamelCaseになりますので注意してください。
（2）ではディレクティブの定義をします。ディレクティブでは、一般的にディレクティブ定義オブジェクトを戻り値として返すことで詳細な操作を定義できます。ただし、今回のように、DOMの操作を行うだけであれば、そのための関数（link関数）を返すようにすれば十分です。link関数で利用できる引数は表1の通りです。
（3）で実際にHTMLの操作をするコードを記述すれば、図1のように表示されます。
あまり、実用性のないサンプルでしたが、それでもカスタムディレクティブを作成する際の最低限の機能は使っていますので、このままでも応用次第で実用性があるものが作れます。
| 引数名 | 説明 |
|---|---|
| scope | ディレクティブで利用できるスコープオブジェクト。この例ではコントローラのスコープと同一。 |
| element | ディレクティブのDOM要素。 |
| attrs | ディレクティブで使用しているAttributeオブジェクト。ディレクティブで指定した属性した値を取得するために使用する。 |
