0Pricing
Angular Academy · レッスン

パイプの連結とパラメーター化

パイプを組み合わせ、引数を渡します。

「パイプの連結とパラメーター化」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

パイプに引数を渡す

パイプには、コロンの後に引数を渡せます。形式は {{ value | pipeName:arg1:arg2 }} です。各引数は、それぞれコロンで区切ります。

1つの引数

1つの引数を受け取るパイプは数多くあります。たとえば、date パイプはフォーマット文字列を受け取ります。

<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->

複数の引数

slice パイプは開始インデックスと終了インデックスを受け取り、それぞれを個別のコロンで渡します。

<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->

動的な引数

引数にはリテラルだけでなく、コンポーネントのプロパティも指定できます。これにより、パイプの動作をリアクティブに変更できます。

<p>{{ price | currency:currencyCode }}</p>

// component
currencyCode = "GBP";
price = 99;

パイプのチェーンとは

パイプは連結して使用でき、あるパイプの出力を次のパイプの入力にできます。パイプは左から右に実行されます。

<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->

チェーンの例

ここでは、日付をフォーマットしてから大文字に変換しています。まず date パイプが実行され、次に uppercase が実行されます。

<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->

順序が重要

連結したパイプの順序によって結果が変わります。ここでは uppercase を slice の前に適用しても後に適用しても同じテキストになりますが、変換を行うパイプでは順序が大きく影響することがあります。

<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->

<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->

引数とチェーンの組み合わせ

引数とチェーンは自由に組み合わせられます。各パイプは、直前のパイプの出力を値として受け取ります。

<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>

currency とのチェーン

数値を通貨形式にフォーマットしてから、余分な部分を取り除きます。一般的ではありませんが、パイプが組み合わせ可能な構成要素であることが分かります。

<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->

読みやすくするためのヒント

長いパイプチェーンは、コードの読みやすさを損なうことがあります。チェーンが複雑になった場合は、コンポーネントやカスタムパイプで値を計算することを検討してください。

// instead of a long template chain,
// compute in the component:
get displayName(): string {
  return this.name.slice(0, 5).toUpperCase();
}

パイプの前後の空白

| と : の前後のスペースは省略できますが、読みやすさのために入れることをおすすめします。Angular は余分な空白を無視します。

<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->

理解度チェック

パイプの引数とチェーンについての理解度を確認しましょう。

まとめ

コロンを使って1つまたは複数の引数を渡す方法、コンポーネントのプロパティから動的な引数を指定する方法、そして出力を左から右に渡すようにパイプを連結する方法を学びました。

次は、独自のカスタムパイプを作成します。

よくある質問

「パイプの連結とパラメーター化」レッスンは無料ですか？

はい。「パイプの連結とパラメーター化」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「パイプの連結とパラメーター化」で何を学びますか？

パイプを組み合わせ、引数を渡します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「パイプの連結とパラメーター化」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 組み込みパイプの使用
  2. パイプの連結とパラメーター化
  3. カスタムパイプの作成
  4. PureパイプとImpureパイプ
← Angular Academyに戻る