AngularJSアプリで使えるフィルター80個てんこもり（Angular Filter）

　なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載『AngularJSではじめるJavaScriptフレームワーク開発スタイル』などを併せて参照してください。

はじめに

　フィルターとは、与えられた変数（式）の値を加工するための仕組みです。主にテンプレート（Angular式）から利用します。以下に、AngularJS標準で用意されているフィルターをまとめておきます（注1）。

　ごく基本的な用途に限定されているせいか、「随分と少ないな」というのが第一印象かもしれません。もちろん、自作のフィルターを作成するのはそれほど難しいことではありませんが、よくありそうな機能をいちいち自作するのは車輪の再発明なのでは、と感じる人は多いのではないでしょうか。

　そのような方は、本稿で紹介するAngular Filterの導入を検討してみてはどうでしょう。Angular Filterは、名前のとおり、AngularJSアプリで利用できるフィルターライブラリ。コレクション（配列）、文字列、数値演算、判定関連のフィルターが80種類近くも提供されています。AngularJS標準のフィルターに不満を感じたら、まずはAngular Filterに目的の機能がないか、確認してみるのも良いのではないでしょうか。自作を決断するのは、それからでも遅くはありません！

対象読者

• AngularJSについて基本的な概念を理解している方
• AngularJSでSPA（Single Page Application）を実装したいと考えている方
• AngularJS標準のフィルターでは不足だと感じている方

検証環境

　この記事では、以下の環境でサンプルの動作を確認しています。

• AngularJS 1.4.6
• Angular Filter 0.5.5
• Chrome 45
• Firefox 40
• Internet Explorer 11

　Angular Filterは、Bowerを利用することで、以下のコマンドでインストールできます。Bowerに関する詳細は、別稿『Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower』を参照してください。

> bower install --save angular-filter

　Angular Filterの機能は、大きくString（文字列操作）、Math（数値演算）、Boolean（判定）、Collection（配列操作）に分類できます。判定については、データ型や値の大小を判定するだけの、見た目そのままなフィルターなので、以下では、これを除くString／Math／Collectionについて、代表的なものを解説していきます。