Angularでは、独自のディレクティブやパイプを作成することで、UIの表現力やロジックの再利用性を高めることができます。
本章では、複雑なデータ変換を行うカスタムパイプ、DOM操作や表示制御を行うカスタムディレクティブ、そして再利用性の高いユーティリティ構築の手法を紹介します。
1. カスタムパイプ作成（複雑な表示変換）
パイプ（pipe）は、テンプレート内で値を変換・整形するために使用します。
Angularでは、標準のdateやuppercaseに加えて、独自パイプを作成して複雑な変換ロジックを抽象化できます。
■ パイプの作成例（カンマ区切り＋単位付き）
ng generate pipe numberWithUnit
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'numberWithUnit' })
export class NumberWithUnitPipe implements PipeTransform {
transform(value: number, unit: string = '円'): string {
if (isNaN(value)) return '';
return value.toLocaleString() + unit;
}
}
テンプレート使用例：{{ 1500000 | numberWithUnit:'円' }}
→ 1,500,000円
これにより、金額・距離・重さなどさまざまな単位表記のフォーマット処理を一元化できます。
2. カスタムディレクティブでDOM制御
ディレクティブは、HTML要素に特定の動作やスタイル変更を付与するための機能です。
カスタムディレクティブを使えば、要素の強調表示やクリックイベント処理、条件付きのDOM操作などを簡潔に再利用できます。
■ ハイライトディレクティブの例
ng generate directive highlight
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
constructor(private el: ElementRef, private renderer: Renderer2) {}
@HostListener('mouseenter') onMouseEnter() {
this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
}
}
テンプレート使用例：<div appHighlight>ホバーすると背景が黄色に！</div>
■ 条件付きスタイル適用や動的制御も可能
ディレクティブに引数を渡して、動的に動作を変えることもできます。
表示・非表示、無効化、スタイル適用など、頻出処理の共通化に有効です。
3. 再利用性の高いユーティリティ構築
カスタムパイプやディレクティブは、SharedModuleなどにまとめておくことで、どのコンポーネントからでも簡単に利用できます。
■ SharedModuleで共通化
@NgModule({
declarations: [NumberWithUnitPipe, HighlightDirective],
exports: [NumberWithUnitPipe, HighlightDirective]
})
export class SharedModule {}
再利用パターンの一例：
- 通貨・距離・日付などの形式変換 → カスタムパイプ
- 共通UIエフェクトやバリデーション → ディレクティブ
- 動的クラスやスタイルの切り替え → ディレクティブ
まとめ
Angularにおけるカスタムパイプとディレクティブは、UIの品質と再利用性を高める重要なツールです。処理ロジックをテンプレートから分離し、見通しの良いコンポーネント設計を実現できます。
実務では、これらをうまく活用して、「どの画面でも使える共通部品」として仕組み化するのが理想です。
