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

AngularJS TIPS

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

2016年2月29日

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

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

 フィルターにはlimitToorderByfilterなどのように、パラメーターを受け取れるものがあります。本稿では、そのようなパラメーター付きフィルターを定義する方法について解説します。

 サンプルには、以下のようなmapフィルターを独自に定義して利用します。与えられた配列から要素を順に取り出し、決められた規則で加工した結果を返す――mapメソッド(JavaScriptのArrayオブジェクト)のフィルター版です。

[構文]本稿で自作するmapフィルター

{{ array | map [:callback]}}

  • array: 処理対象の数値配列
  • callback: 配列を加工するためのコールバック関数

 では、具体的なサンプルを見ていきます。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<!--5加工した配列の内容を順番に取得-->
<ul>
  <li ng-repeat="value in data | map: myFunc">{{value}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('myApp', [])
  // mapフィルターを定義
  .filter('map', function() {
    // 1引数callbackを受け取れるように
    return function(array, callback) {
      // 加工対象の値が配列であるかを判定
      if (!angular.isArray(array)) {
        return array;
      }
      // 2引数callbackが空の場合は、デフォルト関数をセット
      callback = callback || angular.identity;
      // 3mapメソッドで配列を加工
      return array.map(callback);
    };
  })
  .controller('MyController', ['$scope', function($scope) {
    $scope.data = [1, 5, -3, 12];

    // 4mapフィルター(メソッド)に渡すコールバック関数
    $scope.myFunc = function(value, index, array) {
      return value * value;
    };
  }]);
</script>
</body>
</html>
パラメーター付きのフィルターを定義するコード(param.html)
加工済みの値をリストとして列挙
加工済みの値をリストとして列挙

 パラメーターを受け取れるようにするには、フィルター関数の第2引数以降を利用します。ここでは、引数callbackが相当します(1)。

 2は引数callbackが省略された場合の、デフォルト値の設定です。angular.identityメソッドは、与えられた引数を何もせずにそのまま返すだけの関数です。このように、コールバック関数のデフォルトの挙動を表すために、よく利用します。

[Note]angular.noopメソッドについて

 同じような目的を持ったプロパティとして、angular.noopメソッドもあります。angular.noopメソッドは「何も返さない」関数を表します(与えられた引数をそのまま返すこともありません)。identityメソッドと並んで、コールバック関数のデフォルト挙動を表すためによく利用するので、覚えておくとよいでしょう。

 コールバック関数を準備できたら、あとはArray#mapメソッドを呼び出して、配列を加工し、その結果を返すだけです(3)。これはmapメソッドのルールですが、コールバック関数は、以下の条件を満たしている必要があります(4)。

  • 引数は、先頭から「要素値」「インデックス番号」「元の配列」を受け取る
  • 戻り値は、加工後の要素値

 本サンプルの例では、受け取った値を2乗した結果を返しています。

 なお、配列を返すフィルターは、5のように、一般的にng-repeatディレクティブとセットで利用します。

処理対象:フィルタリング カテゴリ:基本
処理対象:カスタムフィルター カテゴリ:基本
API:angular.Module カテゴリ:ng(コアモジュール) > type(型)
API:$filterProvider カテゴリ:ng(コアモジュール) > provider(プロバイダー)
API:angular.identity|angular.noop カテゴリ:ng(コアモジュール) > function(関数)
API:ng-repeat(ngRepeat) カテゴリ:ng(コアモジュール) > directive(ディレクティブ)

※以下では、本稿の前後を合わせて5回分(第44回~第48回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

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フィルターを作成する。

AngularJS TIPS
48. thisキーワードの参照先を固定するには?(bindメソッド)

分脈により変換する「this」。その問題を解消するangular.bindメソッドの基本的な使い方を解説する。

サイトからのお知らせ

Twitterでつぶやこう!