Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

フィルターを自作するには?(filterメソッド)

2016年2月23日

独自のフィルターを作成するための基本的な手順を説明する。サンプルとして文字列の前後にある空白を除去するtrimフィルターを作成する。

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

 本連載でも紹介してきたように、AngularJSには標準でも汎用的なフィルターが用意されています。しかし、実践的なアプリ開発には、標準的なフィルターだけでは事足りない場合も少なくありません。そのような場合のために、AngularJSではフィルターを自作するための窓口(filterメソッド)が用意されています。

[Note]Angular Filterについて

 その他、拡張モジュールであるAngular Filterを利用する方法もあります。Angular Filterは、80前後の拡張フィルターを提供するモジュールで、文字列/数値/コレクション関連を中心に、さまざまな加工/演算機能を提供してくれます。フィルターを自作したい局面では、まずはAngular Filterに類似の機能がないかを確認してみるのも一つの手です。

 Angular Filterについて詳細は、拙著『AngularJSライブラリ 活用レシピ 厳選 108』(Kindle版)などの専門書も参照してください。

 本稿では、filterメソッドを利用して、フィルターを自作する方法を解説します。例えば以下は、文字列の前後から空白を除去するtrimフィルターの例です。

HTML
<!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>
自作のフィルターを定義するコード(trim.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]を参照してください。

AngularJS TIPS
43. AngularJSで文書ツリーを操作するには?(element)

AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。

AngularJS TIPS
44. AngularJSアプリでjQueryを利用するには?(element/ng-jq)

HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説。常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明する。

AngularJS TIPS
45. 【現在、表示中】≫ フィルターを自作するには?(filterメソッド)

独自のフィルターを作成するための基本的な手順を説明する。サンプルとして文字列の前後にある空白を除去するtrimフィルターを作成する。

AngularJS TIPS
46. パラメーターを持ったフィルターを定義するには?(filter/identity/noopメソッド)

独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。

AngularJS TIPS
47. 既存のフィルターを利用して新たなフィルターを定義するには?($filterサービス)

既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。

サイトからのお知らせ

Twitterでつぶやこう!