AngularJSを使いこなすなら絶対に知っておきたいフィルタとカスタムディレクティブの基本：MEANスタックで始めるWebアプリ開発入門（10）（3/3 ページ）

» 2016年08月16日 05時00分公開

[中村修太，クラスメソッド]

カスタムディレクティブとは

　連載第8回の「Web開発者が覚えておきたい、よく使うAngularJSのビルトインディレクティブ12選まとめ」では「AngularJSで提供されているHTMLを拡張する仕組みを使って作成した機能をディレクティブと呼ぶ」と解説しまた。

　ディレクティブとは再利用可能なUI部品です。AngularJSでは、このディレクティブを使用してアプリを作成していきますが、デフォルトのディレクティブ（ビルトインディレクティブ）だけでは要件を満たせない場合があります。そういった場合や画面構成要素をまとめたい場合には、自分でディレクティブを作成する必要があります。

　ディレクティブの機能は多く、実装するために知らなければならないこともあるため、本章ではシンプルなカスタムディレクティブ作成を通じてディレクティブの基本動作を確認してみます。

カスタムディレクティブの作り方

　下記のようなシンプルなカスタムディレクティブを記述してみましょう。

・
・
<script>
    var myApp = angular.module('mySimpleApp', []);
 
    myApp.controller('myController', ['$scope',
        function ($scope) {
        }
    ]).directive('mySimpleDirective', function () {
        return {
            //コンパイル
            compile: function (tElement, tAttrs, tTransclude) {
 
                console.log("compile!");
                tElement.text("my simple diretive.");
                //リンク
                return function link(scope, element, attrs, controller) {
                    console.log("link!");
                    scope.$watch('message', function (newValue) {
                        console.log("watch!");
                        tElement.text(newValue);
                    });
                };
            }
        }
    });
</script>
 
<body ng-controller="myController">
    <input type="text" ng-model="message">
    <!-- my-simple-directiveディレクティブの使用 -->
    <div my-simple-directive></div>
</body>

　カスタムディレクティブは、directive関数を使用して定義します。このプログラムを実行すると、ログには下記の順に表示され、画面には「my simple diretive.」という文字列が表示されます。

compile!
link!
watch!

　また、テキストボックスに値を入力すると、my-simple-directiveの値も同期されます（watch関数も、そのたびに実行される）。

　では、この処理の流れについて簡単に説明していきましょう。

【1】コンパイルの実行

　AngurarJSでは、アプリの起動時にHTML内からディレクティブを探します。このサンプルでは「my-simple-directive」が見つけられ、コンパイルが行われます（compile関数が実行される）。

　compile関数の引数は3つあり、下記を受け取ります。

ディレクティブ適用箇所の要素
ディレクティブ適用箇所の属性
ディレクティブの子要素展開用関数

【2】リンクの実行

　コンパイルの後はリンク処理が実行されます。リンク処理ではスコープとのバインドが行われるので、ここで$watchを使用して変数監視を指定します。なお、リンクはlink関数を定義するか、サンプルのようにcompile関数の戻り値としてlink関数を定義します。

【3】$watchに対して$digestループを実行

　$watchで指定したプロパティ（$scope.message）の変更をチェックし、変更があればDOMの書き換えを行います。

　なお、$digestと$digestループの詳細な説明については、下記サイトなどの情報をご確認ください。

次回はカスタムディレクティブの詳細について

　今回はよく使用するフィルタの使い方と、カスタムフィルタの定義方法、カスタムディレクティブの基本を紹介しました。

　次回はカスタムディレクティブの詳細について紹介する予定です。

著者紹介

中村修太（なかむらしゅうた）

クラスメソッド勤務の新しもの好きプログラマーです。数年前に東京から山口県に引っ越し、現在もリモート勤務しています。最近の趣味は空手とぬか漬け作り。

JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで
＠ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた＠ITの豊富なWeb開発関連記事とともに振り返る。
Socket.IOでセンサー＆MongoDB～AngularJSアプリ間の通信を行う
家電～Webアプリ間の双方向通信をSocket.IOで行うアプリについて、サーバー側のArduino連携やMongoDBへのデータ保存などと、クライアント側のAngularJSに分けて動作を解説します。
エンタープライズ開発現場が知っておきたいHTML5の4つの意義
Windows XP時代にエンタープライズ向けシステムのクライアント開発現場が抱えていた問題は、HTML5（Web標準）という一つ上のレイヤーからアプローチし解決する道が模索されています。本記事では、先月開催されたカンファレンス「Enterprise × HTML5 Web Application Conference 2014」から幾つかのセッションの内容をピックアップし、HTML5ソリューションの全体像を俯瞰し、上記解決の道がどこに向かおうとしているのかを探ってみます。