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

MEANスタックを用いたWebアプリの開発方法について紹介していく本連載。今回は、AngularJSでもよく使用する機能であるフィルタの使い方とそのカスタマイズ方法、そして、独自で定義するディレクティブ（カスタムディレクティブ）の作成について解説。

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

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

今回の主な内容

　MEANスタックを用いたWebアプリの開発方法について紹介していく本連載「MEANスタックで始めるWebアプリ開発入門」。前回の記事、「AngularJSの「サービス」で理解するDI（Dependency Injection：依存性注入）の基本」では、AngularJSにおけるDIとサービスの使い方について解説しました。

　今回はAngularJSでもよく使用する機能であるフィルタの使い方とそのカスタマイズ方法、そして、独自で定義するディレクティブ（カスタムディレクティブ）の作成について解説します。

　なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。

ビルトイン（デフォルト）のフィルタを使う

　AngularJSには、「フィルタ」という、データ整形のための機能をデフォルトで持っています。フィルタを使用することでモデルの値を変更せずにデータを絞り込んだり、フォーマットを変更したりすることが可能です。

　フィルタは幾つかの方法で使用できますが、HTMLのエクスプレッション構文（「{{」と「}}」)で、「|」（パイプ）を使ってフィルタを記述するのが一般的です。

<!-- {{ モデル名 | フィルタ名}} -->
{{ sampleModel | currency }}

　AngularJSではデフォルトでフィルタが用意されています。幾つか紹介しましょう。

通貨を表示する「currency」フィルタ

　currencyフィルタは、通貨を表示するためのフィルタです。フィルタを適用すると、モデルに対して通貨用のフォーマットを適用します。

　上記のように、デフォルトでは値の先頭に「$」、3桁ごとに「,」（カンマ）が挿入されますが、これはUSドルのフォーマットです。日本用の円表記フォーマットにするには、別途i18n用のファイルを使用する必要があります。

　ここからは、currencyフィルタを使います。まずは円表記にするために、i18n用のファイルを用意します。AngularJSをインストールしたときと同じく、bowerを使ってangular-i18nをインストールしましょう。

% cd path/your/sample-angular
% bower install angular-i18n

　htmlファイルを下記のように記述します。

<!DOCTYPE html>
<html ng-app='mySimpleApp'>
<head>
    <script src="bower_components/angular/angular.js"></script>
    <!-- i18n用ファイルを読み込み -->
    <script src="bower_components/angular-i18n/angular-locale_ja-jp.js"></script>
</head>
 
<script>
    var myApp = angular.module('mySimpleApp', []);
    myApp.controller('myController',function ($scope) {
                $scope.price = 1000;
    });
</script>
 
<body ng-controller="myController">
    <input type="text" ng-model="price">
    <p>currencyフィルタ未適用 : {{price}}</p>
    <p>currencyフィルタ適用 : {{price | currency}}</p>
</body>
</html>

　Bowerでインストールしたangular-locale_ja-jp.js（i18nのファイル）はangular.jsより後で読み込みます。このファイルがあるだけで、currencyの表示が円表記になります。

日付を任意のフォーマットで表示する「date」フィルタ

　dateフィルタもよく使用するフィルタの1つです。これは日付を任意のフォーマットで表示するためのもので、自分でフォーマットを指定したり、デフォルトで用意されているフォーマットを使ったりすることができます。

・
・
<script>
    var myApp = angular.module('mySimpleApp', []);
    myApp.controller('myController',function ($scope) {
        $scope.dt = new Date();
    });
</script>
 
<body ng-controller="myController">
<input type="text" ng-model="price">
    <p>dateフィルタ未適用 : {{dt}}</p>
    <p>dateフィルタ適用 (fullDate) : {{dt | date : 'fullDate'}}</p>
    <p>dateフィルタ適用 (フォーマット指定) : {{dt | date : 'yyyy/MM/dd'}}</p>
</body>
</html>

　フォーマットはドキュメントにあるように、さまざまな種類があります。状況に応じて使い分けてください。

「フィルタのチェイン」と「カスタムフィルタの作り方」

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ソリューションの全体像を俯瞰し、上記解決の道がどこに向かおうとしているのかを探ってみます。