Angular の

Pipes は、基になるデータを変更せずにテンプレート内のデータを変換するために使用される単純な関数です。パイプは値を受け取り、それを処理し、フォーマットされた出力または変換された出力を返します。これらは、日付、数値、文字列、さらには配列やオブジェクトの書式設定によく使用されます。

基礎となるデータ モデルを変更することなく、ビュー内で直接、データをより読みやすい形式または関連性の高い形式で書式設定して表示できます。

パイプを使用すると、コードをクリーンかつ読み取り可能に保つことができます。テンプレートやコンポーネントに複雑なロジックを記述する代わりに、そのロジックを パイプ にカプセル化して、アプリケーションのさまざまな部分で再利用できます。
たとえば、ユーザーが記事の公開日を確認できるブログ プラットフォームを開発しているとします。日付は、生の形式「2024–08–31T14:48:00.000Z」ではなく、「2024 年 8 月 31 日」などの使いやすい形式で表示する必要があります。 pipes を使用すると、コンポーネント内の日付を手動でフォーマットしてコードを煩雑にして読みやすさを低下させる代わりに、テンプレート内で Angular の組み込みの DatePipe を使用できます。

Published on: {{ article.publishDate | date:'longDate' }}

パイプを適用するには、上記のコード例に示すように、テンプレート式内で pipe operator (|) を使用します。

内蔵パイプ

Angular には、一般的なタスク (DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe、AsyncPipe、JsonPipe、 など) をカバーするいくつかの組み込みパイプが付属しています。これらの使用方法を知ることで、コードをよりクリーンかつ効率的にすることができます。

例:

{{ user | json }}
Price: {{ product.price | currency:'USD' }}
{{ user.name | uppercase }}

価格: {{ product.price |通貨:'USD' }}

{{ ユーザー名 |大文字 }}

パラメータ化されたパイプ

多くの Angular パイプは、動作をカスタマイズするパラメータを受け入れます。

パラメータを指定するには、パイプ名の後にコロン (:)とパラメータ値

一部の パイプは、追加のコロンで区切られた 複数のパラメータを受け入れます。

パラメータは、オプションまたは必須にすることができます。通貨をフォーマットし、パラメータとして通貨タイプを指定する必要があるカスタム パイプがあるとします。このパラメータが指定されていない場合、パイプは値を正しくフォーマットできない可能性があります。

The product price is {{ price | customCurrency:'USD' }}

1.パラメータ付きの DatePipe

Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}

これにより、日付が「2024 年 8 月 31 日、午後 2 時 48 分 00 秒」という形式になります。

2.パラメータ付き CurrencyPipe

Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}

これにより、価格が「€1,235」としてフォーマットされます（小数点以下を四捨五入）。

チェーンパイプ

複数のパイプをチェーンして複雑な変換を実現できます。

{{ article.content | slice:0:100 | uppercase }}

これにより、article.content の最初の 100 文字がスライスされ、大文字に変換されます。

カスタムパイプ

場合によっては、組み込みパイプが特定のニーズを満たさない場合があり、特定のロジックを処理するためにカスタム パイプを作成する必要があります。その方法は次のとおりです。

例：

次の例では、「こんにちは、アリス!」のような挨拶を名前に追加するパイプを作成します

次のコマンドを実行して新しいパイプを生成します:

ng generate pipe greet

さて、src/app ディレクトリ内のgreet.pipe.ts ファイルを変更して、パイプ ロジックを含めましょう:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

パイプの準備ができたら、テンプレートで使用できます。

{{ 'Alice' | greet }}

パラメータ化されたカスタムパイプの作成

次に、挨拶をカスタマイズできるようにして、「こんにちは、アリス!」と言うことができるようにします。または「ようこそ、アリス！」パイプに何を渡すかによって異なります。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

transform メソッドに 2 番目のパラメーター、greeting が追加されました。挨拶が指定されていない場合は、デフォルトの「Hello」が使用されます。

テンプレート内の挨拶をカスタマイズできるようになりました。

{{ 'Alice' | greet:'Hi' }}
{{ 'Bob' | greet:'Welcome' }}

純粋なパイプと不純なパイプ

1.ピュアパイプ
デフォルトでは、すべての Angular パイプは pure です。 純粋なパイプは、入力データ (数値や文字列など) またはオブジェクトへの参照 (配列や日付など) が変更された場合にのみ呼び出されます。これにより、パイプが不必要に実行されなくなるため、純粋なパイプが効率的かつ高パフォーマンスになります。

ただし、項目の配列など、データがより複雑な場合、配列への参照が変更されていないため、Angular は配列内の変更 (新しい項目の追加など) に気付かない可能性があります。

不要な再レンダリングを避け、パフォーマンスを維持するために、必要な場合を除き、パイプを純粋に保ってください。

例：

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

テンプレート内:

• {{ item.name }} - {{ item.price | formatPrice }}

セール中の items 配列に新しいアイテムを追加すると、それがリストに表示されることが期待できます。ただし、単に新しい項目を配列にプッシュした場合、配列参照が変更されていないため、リストが更新されない可能性があります。

2. 不純なパイプ

不純なパイプは、Angular が変更検出サイクルを実行するたびに呼び出されます。ただし、頻繁に実行されるため、アプリの速度が低下する可能性があります。

例：

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

テンプレート内:

• {{ item.name }} - {{ item.price | formatPrice }}

新しい項目を追加すると、パイプが変更を認識してリストを更新します。

パイプ使用のベストプラクティス

1. パイプをシンプルに保ちます。パイプ内での大量の計算を避ける

2. パイプに明確かつ説明的な名前を付ける

3. パイプを単一の責任に集中させ続ける

4. 可能な限り不純なパイプを避ける

5. カスタム パイプを徹底的にテストする

結論

Angular pipes はデータ変換タスクを合理化し、コードをよりモジュール化し、再利用し、保守しやすくします。これらは、アプリケーション全体で一貫性を確保し、テンプレートの読みやすさを向上させるのに役立ちます。これは、スケーラブルで保守可能なアプリケーションを開発するために重要です。