AngularJSでカスタムディレクティブを作ってみよう

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

　前回と前々回は、AngularJS 1.4や新しい機能のトピックスを解説し、多少話題がそれてしまいましたが、これまでビルトインディレクティブの使い方などを紹介してきました。今回は、カスタムディレクティブの作り方を紹介していきます。AngularJSではコントローラやサービスなどでは直接DOM操作を行うことが推奨されていません。従って、複雑なDOM操作をしようとするとカスタムディレクティブを作成する必要が出てくるケースがあります。カスタムディレクティブというと少々難しい感じがありますが、今回、簡単なディレクティブの作成からの説明を行っていますので是非参考にしてください。

対象読者

• 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　HelloWorldを表示するディレクティブの実行例

　リスト1のHTMLテンプレートのコードとリスト2の実装のコードを見れば、非常に簡単にカスタムディレクティブが作成できるのがわかると思います。

リスト1　HTMLテンプレート（hello/hello.html）

<!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ディレクティブが実行されるように指定します。

リスト2　Helloディレクティブの実装（hello/hello.js）

(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のように表示されます。

　あまり、実用性のないサンプルでしたが、それでもカスタムディレクティブを作成する際の最低限の機能は使っていますので、このままでも応用次第で実用性があるものが作れます。

表1　link関数の引数

引数名	説明
scope	ディレクティブで利用できるスコープオブジェクト。この例ではコントローラのスコープと同一。
element	ディレクティブのDOM要素。
attrs	ディレクティブで使用しているAttributeオブジェクト。ディレクティブで指定した属性した値を取得するために使用する。