AngularJS フィルター完全ガイド

AngularJSの「フィルター」（filters）は、データを表示する際にその内容を変更したりフォーマットしたりするために使用される非常に強力で便利な機能です。この記事では、AngularJSのフィルターについて詳細に説明し、その使用方法や実際のアプリケーションにどのように組み込むかについて解説します。まず、フィルターの基本概念から始め、その後、標準のフィルター、カスタムフィルターの作成方法、そしてフィルターを活用するための実際の例に進んでいきます。

1. フィルターの基本概念

AngularJSにおけるフィルターは、データを変更するための関数です。たとえば、日付や通貨の表示をユーザーにわかりやすくするために使います。フィルターは主にビュー内でデータの表示を整形するために利用され、コントローラー内でデータを変更することなく、ビューの段階で必要な形式に整えます。

AngularJSでは、フィルターを「パイプ（|）」を使ってテンプレート内で呼び出します。次のコードスニペットは、フィルターを使った基本的な例です。

html
CopyEdit
<span>{{ today | date }}span>

この例では、todayという変数がdateフィルターを通じて日付形式に変換され、ビューに表示されます。

2. AngularJSの標準フィルター

AngularJSにはいくつかの標準的なフィルターが用意されています。これらはすぐに使用できる便利なフィルターで、日付のフォーマットやリストの並べ替え、通貨表示などに役立ちます。以下はそのいくつかの例です。

2.1 date フィルター

dateフィルターは、日付を特定の形式で表示するために使用されます。たとえば、次のように使います。

html
CopyEdit
<span>{{ today | date:'yyyy/MM/dd' }}span>

これにより、todayの値（例えば、2025-04-22）が「2025/04/22」の形式で表示されます。

2.2 currency フィルター

currencyフィルターは、数値を通貨形式で表示するために使用します。たとえば、次のように使います。

html
CopyEdit
<span>{{ amount | currency:'¥' }}span>

これにより、amount（例えば、1000）が「¥1,000.00」の形式で表示されます。

2.3 uppercase と lowercase フィルター

文字列を大文字または小文字に変換するために使用します。たとえば、次のように使います。

html
CopyEdit
<span>{{ text | uppercase }}span>

これにより、textがすべて大文字で表示されます。

html
CopyEdit
<span>{{ text | lowercase }}span>

これにより、textがすべて小文字で表示されます。

2.4 filter フィルター

リストや配列をフィルタリングするためのフィルターです。たとえば、次のように使います。

html
CopyEdit
<ul>
  <li ng-repeat="item in items | filter: 'apple'">{{ item }}li>
ul>

このコードは、itemsリストから「apple」を含む項目のみを表示します。

3. カスタムフィルターの作成

標準のフィルターでは対応できない特定のニーズに合わせて、カスタムフィルターを作成することができます。カスタムフィルターは、angular.moduleのfilterメソッドを使って定義します。以下はその基本的な例です。

3.1 カスタムフィルターの定義

javascript
CopyEdit
angular.module('myApp', [])
  .filter('reverse', function() {
    return function(input) {
      if (input) {
        return input.split('').reverse().join('');
      }
      return input;
    };
  });

この例では、文字列を逆順にするreverseフィルターを定義しています。

3.2 カスタムフィルターの使用

カスタムフィルターは、標準のフィルターと同じようにビューで使用できます。たとえば、次のように使用します。

html
CopyEdit
<span>{{ 'hello' | reverse }}span>

このコードは「olleh」と表示されます。

4. フィルターのパフォーマンス

AngularJSでは、フィルターがビューを更新するたびに適用されるため、フィルターが複雑になるとパフォーマンスに影響を与えることがあります。特に、大きなデータセットを扱う場合や頻繁にデータが更新される場合には、パフォーマンスの最適化が必要になることがあります。

4.1 パフォーマンスの最適化方法

• track byの使用: ng-repeatで大きなリストを繰り返し表示する場合、track byを使用することでパフォーマンスを向上させることができます。これにより、AngularJSはリストの変更をより効率的に追跡できます。

html
CopyEdit
<ul>
  <li ng-repeat="item in items | filter: searchText track by item.id">{{ item.name }}li>
ul>

• カスタムフィルターの計算を最小限にする: フィルター内で複雑な計算を行わないようにし、できるだけ簡単な処理を行うようにします。

• $watchの利用を控える: AngularJSはデータの変更を監視しますが、監視する項目が多すぎるとパフォーマンスが低下します。できるだけ必要な項目だけを監視するようにしましょう。

5. 実際の使用例

AngularJSのフィルターは、さまざまな実際のシナリオで有用です。以下にいくつかの使用例を挙げます。

5.1 ユーザーリストの表示

例えば、ユーザー名のリストを表示する場合、名前をアルファベット順に並べ替えたり、特定の条件でフィルタリングしたりするのにフィルターが使われます。

html
CopyEdit
<ul>
  <li ng-repeat="user in users | orderBy: 'name' | filter: searchText">{{ user.name }}li>
ul>

5.2 日時のフォーマット

たとえば、サーバーから受け取った日時データを、ユーザーが理解しやすいフォーマットで表示したい場合に、dateフィルターを使うと便利です。

html
CopyEdit
<span>{{ orderDate | date:'yyyy/MM/dd HH:mm' }}span>

6. 結論

AngularJSのフィルターは、データの表示や変換を効率的に行うための非常に強力なツールです。標準フィルターを使用することで、よく使われるデータの変換作業を簡単に行え、カスタムフィルターを作成することで、さらに複雑な要件にも対応できます。パフォーマンスに関しては注意が必要ですが、適切に使えば、ユーザーインターフェースを非常に使いやすく、効率的にすることができます。フィルターを活用することで、AngularJSのアプリケーション開発がさらに柔軟で効果的になります。