SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
親コントローラと連携したカスタムディレクティブを作成する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSではじめるJavaScriptフレームワーク開発スタイル連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8845 2015/07/31 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング