カスタムパイプの作成
再利用可能な変換パイプを構築します。
「カスタムパイプの作成」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
カスタムパイプを使う理由
組み込みパイプだけでは不十分な場合は、テンプレートで再利用できる変換ロジックをカプセル化する カスタムパイプ を作成できます。
@Pipe デコレーター
パイプは @Pipe でデコレートされたクラスです。name プロパティには、テンプレートで使用する名前を指定します。
import { Pipe } from "@angular/core";
@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}PipeTransform の実装
パイプクラスは PipeTransform インターフェースを実装します。このインターフェースでは、1つの transform メソッドが必要です。
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
transform(value: string): string {
return value + "!";
}
}transform メソッド
transform の最初のパラメーターは、パイプに渡された値です。戻り値が、そのままレンダリングされる出力になります。
transform(value: string): string {
return value.trim();
}作成したパイプを使う
パイプを standalone コンポーネントにインポートし、組み込みパイプと同じようにテンプレートでその名前を使用します。
@Component({
selector: "app-demo",
standalone: true,
imports: [ExclaimPipe],
template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!引数を受け取る
value の後に追加したパラメーターが、パイプの引数になります。呼び出し側ではコロンを使って渡します。
@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
transform(value: string, times: number): string {
return value.repeat(times);
}
}
// {{ "ab" | repeat:3 }} -> ababab引数のデフォルト値
引数にデフォルト値を設定すると、呼び出し側で省略できます。これにより、パイプを柔軟に保てます。
transform(value: string, times: number = 2): string {
return value.repeat(times);
}
// {{ "ab" | repeat }} -> ababnull と undefined の処理
入力値が存在しない場合に備えて、必ずチェックしてください。値が null または undefined の場合は、適切な代替値を返します。
transform(value: string | null): string {
if (value == null) return "";
return value.toUpperCase();
}Truncate パイプの例
ここでは、長いテキストを短くして省略記号を付ける実用的なパイプを紹介します。
@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit: number = 20): string {
if (!value) return "";
return value.length > limit
? value.slice(0, limit) + "..."
: value;
}
}戻り値の型指定
戻り値の型を注釈すると、TypeScript とテンプレートで型安全性を保てます。パイプは文字列に限らず、任意の型を返せます。
@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
transform(value: number): number {
return value * 2;
}
}モジュール（NgModule）への登録
standalone コンポーネントではなく NgModule を使用する場合は、パイプを declarations に宣言し、必要に応じて export します。
@NgModule({
declarations: [TruncatePipe],
exports: [TruncatePipe]
})
export class SharedModule {}理解度チェック
カスタムパイプについての理解度を確認しましょう。
まとめ
@Pipe と PipeTransform を使ってカスタムパイプを作成し、デフォルト値付きの引数を受け取り、null に対処して、standalone コンポーネントまたは NgModule に登録する方法を学びました。
次は、pure パイプと impure パイプについて学びます。
よくある質問
「カスタムパイプの作成」レッスンは無料ですか？
はい。「カスタムパイプの作成」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「カスタムパイプの作成」で何を学びますか？
再利用可能な変換パイプを構築します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「カスタムパイプの作成」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。