組み込みパイプの使用
パイプで日付、数値、テキストを整形します。
「組み込みパイプの使用」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
Pipeとは
pipeは、テンプレート内でデータを表示用に直接変換します。値、パイプ文字|、パイプ名の順に記述します。
パイプを使うと、コンポーネントに余分なロジックを記述せずに、日付、数値、通貨、テキストを整形できます。
Pipeの構文
基本形は{{ value | pipeName }}です。Angularは値をパイプに渡し、変換された結果を描画します。
<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->uppercaseとlowercaseのPipe
uppercaseとlowercaseは、文字列の大文字と小文字を変換します。ラベルや見出しに簡単に使える、よく利用されるパイプです。
@Component({
selector: "app-demo",
template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
name = "angular";
}
// renders: ANGULARdate Pipe
dateパイプは、Dateオブジェクトまたはタイムスタンプを読みやすい文字列に整形します。デフォルトではmedium形式の日付を使用します。
<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->
// component
today = new Date();日付の整形
dateパイプには、"shortDate"、"fullDate"、または"yyyy-MM-dd"のようなカスタムパターンなど、フォーマット文字列を渡せます。
<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->
<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->currency Pipe
currencyパイプは、数値を通貨形式に整形します。デフォルトではUSDを使用しますが、通貨コードを渡すこともできます。
<p>{{ price | currency }}</p>
<!-- $42.50 -->
<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->
// component
price = 42.5;numberとpercentのPipe
numberパイプは桁数のオプションを使って数値を整形し、percentパイプは値をパーセンテージとして表示します。
<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->
<p>{{ 0.25 | percent }}</p>
<!-- 25% -->digitsInfoを理解する
numberパイプは、minIntegerDigits.minFractionDigits-maxFractionDigits形式のdigitsInfo文字列を受け取ります。たとえば"1.2-2"では、小数点以下を必ず2桁表示します。
<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->
<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->json Pipe
jsonパイプは、任意のオブジェクトをJSON文字列にシリアライズします。主にテンプレートのデバッグに使われ、データの形を確認できます。
<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->
// component
user = { id: 1, name: "Ada" };slice Pipe
sliceパイプは、JavaScriptのsliceと同様に、配列または文字列の一部を返します。リストを短くする場合に便利です。
<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->
<li *ngFor="let item of items | slice:0:3">{{ item }}</li>StandaloneコンポーネントでのPipeのimport
Standaloneコンポーネントでは、使用するパイプをimportする必要があります。たとえば@angular/commonからDatePipeやCurrencyPipeをimportします。
import { DatePipe, CurrencyPipe } from "@angular/common";
@Component({
selector: "app-demo",
standalone: true,
imports: [DatePipe, CurrencyPipe],
template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
today = new Date();
}クイックチェック
組み込みパイプについての理解を確認します。
まとめ
uppercase、lowercase、date、currency、number、percent、json、sliceという主要な組み込みパイプについて学びました。
パイプを使うと、整形処理をテンプレート内に保ちながら、すっきりと宣言的に記述できます。次は、パイプを連結し、引数を渡す方法を学びます。
よくある質問
「組み込みパイプの使用」レッスンは無料ですか？
はい。「組み込みパイプの使用」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「組み込みパイプの使用」で何を学びますか？
パイプで日付、数値、テキストを整形します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「組み込みパイプの使用」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。