From b9a77db5a9c335fbf96fec99d1dd7cf9ffab4efd Mon Sep 17 00:00:00 2001 From: EdamAme <121654029+EdamAme-x@users.noreply.github.com> Date: Mon, 9 Oct 2023 09:19:20 +0900 Subject: [PATCH 1/4] Translated into Japanese --- aio-ja/content/guide/pipe-template.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/aio-ja/content/guide/pipe-template.md b/aio-ja/content/guide/pipe-template.md index a89910e469..14b7f48b31 100644 --- a/aio-ja/content/guide/pipe-template.md +++ b/aio-ja/content/guide/pipe-template.md @@ -1,17 +1,17 @@ -# Using a pipe in a template +# テンプレートでパイプを使う -To apply a pipe, use the pipe operator (`|`) within a template expression as shown in the following code example, along with the *name* of the pipe, which is `date` for the built-in [`DatePipe`](api/common/DatePipe). +パイプを適用するには、次のコード例に示すように、パイプ演算子 (`|`) をテンプレート式内で使用します。パイプの*名前*は、組み込みの [`DatePipe`](api/common/DatePipe) の場合は `date` です。 -The tabs in the example show the following: +次のように表示されます。 -* `app.component.html` uses `date` in a separate template to display a birthday. -* `hero-birthday1.component.ts` uses the same pipe as part of an in-line template in a component that also sets the birthday value. +* `app.component.html` は誕生日を表示するために別のテンプレートで `date`を使っている。 +* `hero-birthday1.component.ts`は、誕生日の値を設定するコンポーネントの*インラインテンプレート*の一部として、同じパイプを使用している。 -The component's `birthday` value flows through the pipe operator, `|` to the [`date`](api/common/DatePipe) function. +コンポーネントの `birthday` の値は、パイプ演算子 `|` を通して [`date`](api/common/DatePipe) 関数に渡されます。 -@reviewed 2022-04-07 +@reviewed 2023-10-09 From 4daaa9260d5d491a4ae700421241b2cafcaa09ef Mon Sep 17 00:00:00 2001 From: EdamAme <121654029+EdamAme-x@users.noreply.github.com> Date: Mon, 9 Oct 2023 09:35:14 +0900 Subject: [PATCH 2/4] add --- .../content/guide/pipes-custom-data-trans.md | 64 ++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) diff --git a/aio-ja/content/guide/pipes-custom-data-trans.md b/aio-ja/content/guide/pipes-custom-data-trans.md index d061393558..40e8697685 100644 --- a/aio-ja/content/guide/pipes-custom-data-trans.md +++ b/aio-ja/content/guide/pipes-custom-data-trans.md @@ -6,7 +6,69 @@ Then, use your custom pipe in template expressions, the same way you use built-i ## Marking a class as a pipe To mark a class as a pipe and supply configuration metadata, apply the [`@Pipe`](/api/core/Pipe "API reference for Pipe") [decorator](/guide/glossary#decorator--decoration "Definition for decorator") to the class. +# カスタムデータ変換のためのパイプの作成 +組み込みのパイプでは提供されていない変換をカプセル化するためのカスタムパイプを作成します。 +次に、カスタムパイプをテンプレート式で使用し、組み込みのパイプと同じ方法で入力値を表示用の出力値に変換します。 + +## クラスをパイプとしてマークする + +クラスをパイプとしてマークし、設定メタデータを提供するには、クラスに [`@Pipe`](/api/core/Pipe "Pipe の API リファレンス") [デコレータ](/guide/glossary#decorator--decoration "デコレータの定義") を適用します。 + +パイプクラス名には [UpperCamelCase](guide/glossary#case-types "ケースタイプの定義")（クラス名の一般的な慣例）を使用し、対応する `name` 文字列には [camelCase](guide/glossary#case-types "ケースタイプの定義") を使用します。 +`name` にはハイフンを使用しないでください。 + +詳細とさらなる例については、[パイプの名前](guide/styleguide#pipe-names "Angular コーディングスタイルガイドの中のパイプの名前")を参照してください。 + +`name` をテンプレート式で組み込みのパイプと同じように使用します。 + +
+ +* `declarations` フィールドにパイプを含めることで、テンプレートで使用できるようになります。例のアプリケーション内の `app.module.ts` ファイルを参照してください（）。詳細については、[NgModules](guide/ngmodules "NgModules の紹介")を参照してください。 +* カスタムパイプを登録します。[Angular CLI](cli "CLI の概要とコマンドリファレンス") [`ng generate pipe`](cli/generate#pipe "CLI コマンドリファレンス内の ng generate pipe")コマンドを使用すると、パイプが自動的に登録されます。 + +
+ +## PipeTransform インターフェースの使用 + +カスタムパイプクラスで [`PipeTransform`](/api/core/PipeTransform "PipeTransform の API リファレンス") インターフェースを実装して変換を実行します。 + +Angular は `transform` メソッドを最初の引数としてバインディングの値、第二の引数としてリスト形式のパラメータを渡し、変換された値を返します。 + +## 例: 値を指数関数的に変換する + +ゲームでは、ヒーローのパワーを指数関数的に上げる変換を実装したい場合があります。 +たとえば、ヒーローのスコアが2の場合、ヒーローのパワーを10倍にすると、スコアは1024になります。 +この変換にはカスタムパイプを使用します。 + +次のコード例では、2つのコンポーネント定義が表示されます： + +* `exponential-strength.pipe.ts` コンポーネントは、`transform` メソッドを持つカスタムパイプ `exponentialStrength` を定義し、変換を実行します。 + パイプに渡すためのパラメータとして `transform` メソッドに引数（`exponent`）を定義します。 +* `power-booster.component.ts` コンポーネントは、パイプを使用する方法を示し、値（`2`）と指数パラメータ（`10`）を指定します。 + + + + + + +ブラウザには次のように表示されます： + + + +Power Booster + +Superpower boost: 1024 + + + +
+ +``内で `exponentialStrength` パイプの動作を確認するには、テンプレート内の値とオプションの指数を変更してください。 + +
+ +@reviewed 2023-01-06 Use [UpperCamelCase](guide/glossary#case-types "Definition of case types") (the general convention for class names) for the pipe class name, and [camelCase](guide/glossary#case-types "Definition of case types") for the corresponding `name` string. Do not use hyphens in the `name`. @@ -60,4 +122,4 @@ To examine the behavior of the `exponentialStrength` pipe in the -@reviewed 2023-01-06 +@reviewed 2023-10-06 From 3c26f6c05b1621977d2e05cd6b5b2910a2c15294 Mon Sep 17 00:00:00 2001 From: EdamAme <121654029+EdamAme-x@users.noreply.github.com> Date: Mon, 9 Oct 2023 09:36:37 +0900 Subject: [PATCH 3/4] fix --- aio-ja/content/guide/pipes-custom-data-trans.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/aio-ja/content/guide/pipes-custom-data-trans.md b/aio-ja/content/guide/pipes-custom-data-trans.md index 40e8697685..197b9fb271 100644 --- a/aio-ja/content/guide/pipes-custom-data-trans.md +++ b/aio-ja/content/guide/pipes-custom-data-trans.md @@ -1,11 +1,3 @@ -# Creating pipes for custom data transformations - -Create custom pipes to encapsulate transformations that are not provided with the built-in pipes. -Then, use your custom pipe in template expressions, the same way you use built-in pipes—to transform input values to output values for display. - -## Marking a class as a pipe - -To mark a class as a pipe and supply configuration metadata, apply the [`@Pipe`](/api/core/Pipe "API reference for Pipe") [decorator](/guide/glossary#decorator--decoration "Definition for decorator") to the class. # カスタムデータ変換のためのパイプの作成 組み込みのパイプでは提供されていない変換をカプセル化するためのカスタムパイプを作成します。 From b7672ac4c1828c50fac409bcf8e2671e22d97bf5 Mon Sep 17 00:00:00 2001 From: EdamAme <121654029+EdamAme-x@users.noreply.github.com> Date: Mon, 9 Oct 2023 09:37:45 +0900 Subject: [PATCH 4/4] fix --- .../content/guide/pipes-custom-data-trans.md | 54 ------------------- 1 file changed, 54 deletions(-) diff --git a/aio-ja/content/guide/pipes-custom-data-trans.md b/aio-ja/content/guide/pipes-custom-data-trans.md index 197b9fb271..8f02cdb675 100644 --- a/aio-ja/content/guide/pipes-custom-data-trans.md +++ b/aio-ja/content/guide/pipes-custom-data-trans.md @@ -60,58 +60,4 @@ Superpower boost: 1024 -@reviewed 2023-01-06 -Use [UpperCamelCase](guide/glossary#case-types "Definition of case types") (the general convention for class names) for the pipe class name, and [camelCase](guide/glossary#case-types "Definition of case types") for the corresponding `name` string. -Do not use hyphens in the `name`. - -For details and more examples, see [Pipe names](guide/styleguide#pipe-names "Pipe names in the Angular coding style guide"). - -Use `name` in template expressions as you would for a built-in pipe. - -
- -* Include your pipe in the `declarations` field of the `NgModule` metadata in order for it to be available to a template. See the `app.module.ts` file in the example application (). For details, see [NgModules](guide/ngmodules "NgModules introduction"). -* Register your custom pipes. The [Angular CLI](cli "CLI Overview and Command Reference") [`ng generate pipe`](cli/generate#pipe "ng generate pipe in the CLI Command Reference") command registers the pipe automatically. - -
- -## Using the PipeTransform interface - -Implement the [`PipeTransform`](/api/core/PipeTransform "API reference for PipeTransform") interface in your custom pipe class to perform the transformation. - -Angular invokes the `transform` method with the value of a binding as the first argument, and any parameters as the second argument in list form, and returns the transformed value. - -## Example: Transforming a value exponentially - -In a game, you might want to implement a transformation that raises a value exponentially to increase a hero's power. -For example, if the hero's score is 2, boosting the hero's power exponentially by 10 produces a score of 1024. -Use a custom pipe for this transformation. - -The following code example shows two component definitions: - -* The `exponential-strength.pipe.ts` component defines a custom pipe named `exponentialStrength` with the `transform` method that performs the transformation. - It defines an argument to the `transform` method (`exponent`) for a parameter passed to the pipe. -* The `power-booster.component.ts` component demonstrates how to use the pipe, specifying a value (`2`) and the exponent parameter (`10`). - - - - - - -The browser displays the following: - - - -Power Booster - -Superpower boost: 1024 - - - -
- -To examine the behavior of the `exponentialStrength` pipe in the , change the value and optional exponent in the template. - -
- @reviewed 2023-10-06