AngularJS TIPS
フィルターを自作するには？（filterメソッド）
独自のフィルターを作成するための基本的な手順を説明する。サンプルとして文字列の前後にある空白を除去するtrimフィルターを作成する。
本連載でも紹介してきたように、AngularJSには標準でも汎用的なフィルターが用意されています。しかし、実践的なアプリ開発には、標準的なフィルターだけでは事足りない場合も少なくありません。そのような場合のために、AngularJSではフィルターを自作するための窓口（filterメソッド）が用意されています。
［Note］Angular Filterについて
その他、拡張モジュールであるAngular Filterを利用する方法もあります。Angular Filterは、80前後の拡張フィルターを提供するモジュールで、文字列／数値／コレクション関連を中心に、さまざまな加工／演算機能を提供してくれます。フィルターを自作したい局面では、まずはAngular Filterに類似の機能がないかを確認してみるのも一つの手です。
Angular Filterについて詳細は、拙著『AngularJSライブラリ 活用レシピ 厳選 108』（Kindle版）などの専門書も参照してください。
本稿では、filterメソッドを利用して、フィルターを自作する方法を解説します。例えば以下は、文字列の前後から空白を除去するtrimフィルターの例です。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<pre>{{msg | trim}}</pre>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('myApp', [])
// 1trimフィルターを定義
.filter('trim', function() {
return function(value) {
// 2加工対象の値が文字列であるかを判定
if (!angular.isString(value)) {
return value;
}
// 3文字列の前後から空白を除去
return value.trim();
};
})
.controller('MyController', ['$scope', function($scope) {
$scope.msg = ' こんにちは、世界！ ';
}]);
</script>
</body>
</html>
|
filterメソッドの、一般的な構文は以下の通りです（1）。
［構文］filterメソッド
filter(name, factory)
- name： フィルター名
- factory： フィルター関数を生成するファクトリー関数
引数factoryには、フィルターの実体（フィルター関数）そのものではなく、「フィルター関数を生成する」ためのファクトリー関数を指定している点に注目です。フィルター関数の条件は、以下の通りです。
- 引数として、フィルターの処理対象となる値を受け取る（引数は
value） - 戻り値として、フィルターで加工した結果を返す
ここでは、受け取った引数valueを、まずangular.isStringメソッドで文字列かどうか判定します（2）。文字列でない場合には、渡された値をそのまま返します。フィルターによって判定すべき内容は変化しますが、最低限、対象の値が意図した型であるかだけはチェックしておくべきです。
あとは、trimメソッドで文字列valueの空白を除去するだけです。
このように定義されたtrimフィルターは、標準フィルターと同じ要領で呼び出せることを確認してください。
処理対象：カスタムフィルター カテゴリ：基本
API：angular.Module カテゴリ：ng（コアモジュール） > type（型）
API：$filterProvider カテゴリ：ng（コアモジュール） > provider（プロバイダー）
API：angular.isString カテゴリ：ng（コアモジュール） > function（関数）
※以下では、本稿の前後を合わせて5回分（第43回～第47回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
43. AngularJSで文書ツリーを操作するには？（element）
AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。
44. AngularJSアプリでjQueryを利用するには？（element／ng-jq）
HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説。常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明する。
45. 【現在、表示中】≫ フィルターを自作するには？（filterメソッド）
独自のフィルターを作成するための基本的な手順を説明する。サンプルとして文字列の前後にある空白を除去するtrimフィルターを作成する。
46. パラメーターを持ったフィルターを定義するには？（filter／identity／noopメソッド）
独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。
47. 既存のフィルターを利用して新たなフィルターを定義するには？（$filterサービス）
既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。
