みなさんこんにちは、masa です。前回に続いて AngularJS を取り上げます。いやー AngularJS は奥が深いです。使いこなそうとすればするほどその引き出しの多さに驚かされます。
さて、今日はそんな AngularJS のフィルター機能について解説してみたいと思います。

旧来のようにサーバー側でデータを整形してから渡すのではなく、フロントエンド側でデータを受け取ってから整形する方法が AngularJS でいうフィルター機能です。

通常、シングルページアプリケーションを作る際、サーバーサイドの仕事はデータベースを操作してフロントに JSON 形式などでデータを渡すことがメインとなりますが、データの整形はどちらでやるのがいいのか？ということ。

結論から言ってしまうと

 

配列に対するフィルターは AngularJS でやらないほうがいい

 

たしかにサーバーサイドは常に生データをフロントに渡すだけにして、HTML 側のタグでちょちょいと整形するのが楽なことは楽です。整形し直したいときにあとでビジネスロジックをいじらなくて済みますし。

しかし、例として以下のロジックを見てください。

<div ng-controller="hogeController">

  <input type="text" ng-model="name"><br/>
  <button ng-click="memberAdd(name)">追加します</button>
  
  <div ng-repeat="member in members">
    {{member | hogeFilter}}<br/>
  </div>

</div>

ユーザーがテキストボックスに名前を入れて「追加します」ボタンを押すと、members に追加して表示します。そして members すべてに対して hogeFilter というカスタムフィルターを掛けています。

現在、members 配列の要素数が 50 だったとします。（つまりメンバーが50人いる）
この状態で Michael （マイケル氏）をメンバーに追加しようとすると、

 

１文字入力する度に50要素に対してフィルターが発動します

 

つまり、Michael 7文字すべてを入力した時点で 350 回フィルターが実行されることになります。これは AngularJS が1文字入力される度に、フィルター後のデータを監視しているためです。

これがもっと大きい配列になったりするとブラウザ側の処理がめちゃくちゃ重くなりますので、注意が必要です。もちろん、limitTo や orderBy のようなデータ表示数を絞ったり、ソートするようなものならいいかもしれませんが、普通は SQL でやってしまうと思います・・。

いかがでしたか？個人的にはフィルターはすべてサーバーサイドでやろうかなと思案しています。今後もちょいちょい AngularJS ネタを書いていきたいと思います。