サンプルコードで身につける: パイプ — 値を表示用に整形する

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1date パイプで日付の書式を指定する

同じ Date の値でも、date パイプの引数を変えるだけで見せ方を切り替えられることを示す例です。yyyy や MM などの書式文字を組み合わせて、記事の公開日やログの時刻など用途に合った表示を作ります。元の値は Date のまま変わらないので、比較や計算には引き続き使えます。

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-article-meta',
  imports: [DatePipe],
  // 同じ Date でも書式指定で見せ方を変えられる
  template:
    '<p>{{ publishedAt | date:"yyyy/MM/dd" }}</p>' +
    '<p>{{ publishedAt | date:"yyyy年M月d日 HH:mm" }}</p>' +
    '<p>{{ publishedAt | date:"EEEE" }}</p>',
})
export class ArticleMetaComponent {
  // 月は0始まりなので 5 は6月
  publishedAt = new Date(2026, 5, 13, 9, 30);
}

2number と currency で数値を整形する

number パイプは3桁区切り、currency パイプは通貨記号付きの表示にします。number:"1.1-1" のような引数で「整数部は最低1桁、小数部は1桁固定」と桁数も制御できます。閲覧数・評価・価格が並ぶ商品カードのような画面で、数値の見た目を整える定番の組み合わせです。

import { Component } from '@angular/core';
import { CurrencyPipe, DecimalPipe } from '@angular/common';

@Component({
  selector: 'app-price-card',
  // number パイプの実体は DecimalPipe という名前で提供されている
  imports: [CurrencyPipe, DecimalPipe],
  template:
    '<p>閲覧数: {{ viewCount | number }}</p>' +
    '<p>評価: {{ rating | number:"1.1-1" }}</p>' +
    '<p>価格: {{ price | currency:"JPY" }}</p>',
})
export class PriceCardComponent {
  viewCount = 1234567; // -> 1,234,567
  rating = 4.267;      // -> 4.3
  price = 49800;       // -> ￥49,800
}

3uppercase / lowercase で表記をそろえる

uppercase は英字をすべて大文字に、lowercase はすべて小文字にして表示します。型番の表示は大文字、URLの一部は小文字、のようにデータの大小文字が混ざっていても表示側でそろえられます。元の値は変わらないという「表示だけの変換」の性質が、3行目の比較でそのまま確かめられます。

import { Component } from '@angular/core';
import { LowerCasePipe, UpperCasePipe } from '@angular/common';

@Component({
  selector: 'app-product-code',
  imports: [UpperCasePipe, LowerCasePipe],
  // 元の値は変えず、表示だけを大文字・小文字にそろえる
  template:
    '<p>型番表示: {{ code | uppercase }}</p>' +
    '<p>URL用: {{ code | lowercase }}</p>' +
    '<p>元の値: {{ code }}</p>',
})
export class ProductCodeComponent {
  code = 'Ng-2026-Basic';
}

4json パイプでオブジェクトの中身を確認する

json パイプはオブジェクトをJSON文字列にして表示します。開発中に「今この signal の中身はどうなっているか」を画面で直接見たいときのデバッグ手段として便利で、console.log を仕込むより手早いことも多いです。pre タグと組み合わせると改行とインデントが保たれて読みやすくなります。

import { Component, signal } from '@angular/core';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-debug-panel',
  imports: [JsonPipe],
  // 開発中だけ置いて、オブジェクトの中身を画面で確認する
  template: '<pre>{{ profile() | json }}</pre>',
})
export class DebugPanelComponent {
  profile = signal({
    name: '田中',
    age: 28,
    tags: ['angular', 'pipe'],
  });
}

5パイプを連結して順番に変換する

縦棒を続けて書くと、左のパイプの結果が右のパイプの入力になり、順番に変換されます。この例では slice で先頭10文字を切り出してから uppercase で大文字にしています。それぞれのパイプに : で引数を渡せるので、「切り出してから整形」のような2段階の見せ方をテンプレートだけで完結できます。

import { Component } from '@angular/core';
import { DatePipe, SlicePipe, UpperCasePipe } from '@angular/common';

@Component({
  selector: 'app-log-row',
  imports: [DatePipe, SlicePipe, UpperCasePipe],
  // 左から順に適用される: slice で切り出し -> uppercase で大文字化
  template:
    '<p>{{ message | slice:0:10 | uppercase }}</p>' +
    '<p>{{ loggedAt | date:"HH:mm:ss" }}</p>',
})
export class LogRowComponent {
  message = 'deploy finished successfully'; // -> DEPLOY FIN
  loggedAt = new Date();
}