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

AngularJSアプリ開発を支援する便利モジュール（5）

　AngularJSは、テンプレートエンジン、データバインディング、ルーティング、DIコンテナーなどなど、Webアプリのフロントエンドを開発するために必要な機能をあまねくそろえたフルスタックのフレームワークです。もっとも、本格的な開発ではそれだけで賄えるわけではなく、要件に応じて、周辺のモジュールと連携するのが一般的です。本連載では、AngularJSで利用できる拡張ライブラリを、具体的な利用例とともに紹介します。

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

はじめに

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

表1　AngularJS標準のフィルター

分類	フィルター	概要
文字列	lowercase	大文字→小文字の変換
	uppercase	小文字→大文字の変換
	json	オブジェクトをJSON文字列に変換
	linky	URL／メールアドレスをリンクに整形
配列	orderBy	配列を指定のキーで並べ替え
	filter	配列を指定の条件で検索
	limitTo	配列のm～n件目を抽出
数値／日付	number	数値に桁区切り文字を付与、小数点以下の丸め
	currency	通貨形式に整形
	date	日付を整形

注1

　個々のフィルターの用法については、「AngularJS TIPS」のような記事を参照してください。

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

　そのような方は、本稿で紹介する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について、代表的なものを解説していきます。