Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/07/31 14:00

 前回と前々回は、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 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オブジェクト。ディレクティブで指定した属性した値を取得するために使用する。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:AngularJSではじめるJavaScriptフレームワーク開発スタイル

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5