From a2e3d094eec7e0f6fd0554ec8018632f54ffb05a Mon Sep 17 00:00:00 2001 From: Darkss Date: Mon, 15 Jan 2024 21:24:22 +0900 Subject: [PATCH 1/3] =?UTF-8?q?20240115=20=E5=92=8C=E8=A8=B3=E4=BD=9C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aio-ja/content/guide/pipe-template.en.md | 16 ++++++++++++++++ aio-ja/content/guide/pipe-template.md | 12 ++++++------ 2 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 aio-ja/content/guide/pipe-template.en.md diff --git a/aio-ja/content/guide/pipe-template.en.md b/aio-ja/content/guide/pipe-template.en.md new file mode 100644 index 0000000000..c532ebc831 --- /dev/null +++ b/aio-ja/content/guide/pipe-template.en.md @@ -0,0 +1,16 @@ +# 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. + + + +The component's `birthday` value flows through the pipe operator (`|`) to the [`DatePipe`](api/common/DatePipe) whose pipe name is `date`. +The pipe renders the date in the default format as **Apr 15, 1988**. + +Look at the component class. + + + +Because this is a [standalone component](guide/standalone-components), it imports the `DatePipe` from `@angular/common`, the source of all built-in pipes. + +@reviewed 2023-08-14 diff --git a/aio-ja/content/guide/pipe-template.md b/aio-ja/content/guide/pipe-template.md index c532ebc831..a6f32bd9fd 100644 --- a/aio-ja/content/guide/pipe-template.md +++ b/aio-ja/content/guide/pipe-template.md @@ -1,16 +1,16 @@ -# 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. +パイプを適用するために、次のコードの例に示されるように、テンプレート式内部でパイプ演算子(`|`)を使用します。 -The component's `birthday` value flows through the pipe operator (`|`) to the [`DatePipe`](api/common/DatePipe) whose pipe name is `date`. -The pipe renders the date in the default format as **Apr 15, 1988**. +`birthday`の値はパイプ演算子(`|`)を通じてnameが`date`の[`DatePipe`](api/common/DatePipe)に流れます。 +パイプはdateをデフォルトフォーマットの**Apr 15, 1988**に変換します。 -Look at the component class. +コンポーネントクラスを見てください。 -Because this is a [standalone component](guide/standalone-components), it imports the `DatePipe` from `@angular/common`, the source of all built-in pipes. +これは[スタンドアロンコンポーネント](guide/standalone-components)のため、すべての組み込みパイプの源である`@angular/common`から`DatePipe`をインポートします。 @reviewed 2023-08-14 From e3032e6c2cc422044c857cbbcfe057d9fab0d9c4 Mon Sep 17 00:00:00 2001 From: Darkss Date: Mon, 12 Feb 2024 20:28:32 +0900 Subject: [PATCH 2/3] The document was translated. --- .../content/guide/pipes-transform-data.en.md | 50 +++++++++++++++++++ aio-ja/content/guide/pipes-transform-data.md | 40 +++++++-------- 2 files changed, 70 insertions(+), 20 deletions(-) create mode 100644 aio-ja/content/guide/pipes-transform-data.en.md diff --git a/aio-ja/content/guide/pipes-transform-data.en.md b/aio-ja/content/guide/pipes-transform-data.en.md new file mode 100644 index 0000000000..6e211df5c6 --- /dev/null +++ b/aio-ja/content/guide/pipes-transform-data.en.md @@ -0,0 +1,50 @@ +# Transforming data with parameters and chained pipes + +Some pipes have _optional_ parameters to fine-tune the pipe's output. + +For example, the [`CurrencyPipe`](api/common/CurrencyPipe 'API reference') accepts a country code as a parameter. +To specify the parameter, follow the pipe name (`currency`) with a colon (`:`) and the parameter value (a country code). + +The template expression `{{ amount | currency:'EUR' }}` displays the amount, prefixed with the Euros symbol (€). + +Some pipes accept multiple _optional_ parameters. Pass each parameter to the pipe, separated by colons. + +For example, `{{ amount | currency:'EUR':'Euros '}}` displays the amount with the label "Euros" (the second parameter) instead of the Euros symbol. + +Some pipes, such as [`SlicePipe`](/api/common/SlicePipe 'API reference for SlicePipe'), _require_ at least one parameter and may allow more _optional_ parameters. + +The expression `{{ anArray | slice:1:5 }}` displays a new string containing a subset of the elements starting with element `1` and ending with element `5`. + +## Example: Formatting a date + +The following example demonstrates two ways to format a hero's birthdate with the [`DatePipe`](api/common/DatePipe 'API reference'). + + + + + + +In the template, the first expression passes the birthdate to the `DatePipe` _with a literal_ date format parameter, "shortDate". The output is **04/15/88**. + +The second expression passes the birthdate to the `DatePipe` with a date format parameter _bound to a component property_ (`format`). + +Clicking the "Toggle" button switches that property value between two of the [many possible pre-defined formats](api/common/DatePipe#pre-defined-format-options), `'mediumDate'` and `'fullDate'`. The output is either **April 15, 1988** or **Friday, April 15, 1988**. + +The page displays the birthdate in the specified format. + +## Example: Chaining two pipes together + +Connect multiple pipes, using "pipe chaining syntax", so that the output of one pipe becomes the input to the next. + +The following example passes the birthdate to the `DatePipe` and then forwards the result to the [`UpperCasePipe`](api/common/UpperCasePipe 'API reference') pipe, using "pipe chaining syntax". + +Once again, it demonstrates the `DatePipe` both _with_ and _without_ a format parameter. Note that both results (**APR 15, 1988** and **FRIDAY, APRIL 15, 1988**) are in uppercase. + + + + + + +Switch to the class file to see that this is a [standalone component](guide/standalone-components); it imports the two pipes from `@angular/common`, the source of all built-in pipes. + +@reviewed 2023-08-14 diff --git a/aio-ja/content/guide/pipes-transform-data.md b/aio-ja/content/guide/pipes-transform-data.md index 6e211df5c6..91ae5a35aa 100644 --- a/aio-ja/content/guide/pipes-transform-data.md +++ b/aio-ja/content/guide/pipes-transform-data.md @@ -1,50 +1,50 @@ -# Transforming data with parameters and chained pipes +# パラメーターと連鎖されたパイプによるデータの変換 -Some pipes have _optional_ parameters to fine-tune the pipe's output. +パイプの中には出力を微調整するために_オプショナル_パラメーターをもつものがあります。 -For example, the [`CurrencyPipe`](api/common/CurrencyPipe 'API reference') accepts a country code as a parameter. -To specify the parameter, follow the pipe name (`currency`) with a colon (`:`) and the parameter value (a country code). +たとえば、[`CurrencyPipe`](api/common/CurrencyPipe 'API reference')はパラメータとして国コードを受け取ります。 +パラメーターを指定するために、パイプ名(`currency`)の後にコロン(`:`)を置き、続けてパラメーターの値(国コード)を書きます。 -The template expression `{{ amount | currency:'EUR' }}` displays the amount, prefixed with the Euros symbol (€). +テンプレート式`{{ amount | currency:'EUR' }}`はamountを表示しますが、ユーロ記号(€)がプリフィクスになります。 -Some pipes accept multiple _optional_ parameters. Pass each parameter to the pipe, separated by colons. +パイプの中には_オプショナル_パラメーターを複数受け取るものもあります。パイプにそれぞれのパラメーターを渡すのですが、コロンで区切ります。 -For example, `{{ amount | currency:'EUR':'Euros '}}` displays the amount with the label "Euros" (the second parameter) instead of the Euros symbol. +たとえば、`{{ amount | currency:'EUR':'Euros '}}`はユーロ記号の代わりにラベル"Euros"(2つ目のパラメーター)でamountを表示します。 -Some pipes, such as [`SlicePipe`](/api/common/SlicePipe 'API reference for SlicePipe'), _require_ at least one parameter and may allow more _optional_ parameters. +[`SlicePipe`](/api/common/SlicePipe 'API reference for SlicePipe')のように、パイプの中には少なくとも1つのパラメーターを_必須とする_と同時に_オプショナル_ パラメーターを受け取るものがあります。 -The expression `{{ anArray | slice:1:5 }}` displays a new string containing a subset of the elements starting with element `1` and ending with element `5`. +式`{{ anArray | slice:1:5 }}`は要素`1`で始まり要素`5`で終わる部分集合を含む新しい文字列を表示します。 -## Example: Formatting a date +## 例： 日付の書式を整える -The following example demonstrates two ways to format a hero's birthdate with the [`DatePipe`](api/common/DatePipe 'API reference'). +次の例は[`DatePipe`](api/common/DatePipe 'API reference')でヒーローの誕生日の書記を整える方法をデモンストレーションします。 -In the template, the first expression passes the birthdate to the `DatePipe` _with a literal_ date format parameter, "shortDate". The output is **04/15/88**. +テンプレートでは、最初の表現では誕生日を_リテラルな_日付フォーマットのパラメーターである"shortDate"を用いて`DatePipe`に渡しています。出力は**04/15/88**です。 -The second expression passes the birthdate to the `DatePipe` with a date format parameter _bound to a component property_ (`format`). +2つ目の式では誕生日を_コンポーネントのプロパティーにバインドされた_日付フォーマットパラメーター(`format`)を用いてDatePipeに渡しています。 -Clicking the "Toggle" button switches that property value between two of the [many possible pre-defined formats](api/common/DatePipe#pre-defined-format-options), `'mediumDate'` and `'fullDate'`. The output is either **April 15, 1988** or **Friday, April 15, 1988**. +"Toggle"ボタンをクリックすることで[沢山の事前に定義されたフォーマット](api/common/DatePipe#pre-defined-format-options)のうち2つである`'mediumDate'`と`'fullDate'`を切り替えることができます。出力は**April 15, 1988**か**Friday, April 15, 1988**です。 -The page displays the birthdate in the specified format. +ページは指定されたフォーマットで誕生日を表示します。 -## Example: Chaining two pipes together +## 例: 2つのパイプを一緒に変更 -Connect multiple pipes, using "pipe chaining syntax", so that the output of one pipe becomes the input to the next. +１つのパイプの出力が次のパイプの入力になるように、「パイプ連鎖文法」を使うことで複数のパイプをつなぎます。 -The following example passes the birthdate to the `DatePipe` and then forwards the result to the [`UpperCasePipe`](api/common/UpperCasePipe 'API reference') pipe, using "pipe chaining syntax". +次の例は誕生日を`DatePipe`に渡してから[`UpperCasePipe`](api/common/UpperCasePipe 'API reference')パイプに「パイプ連鎖文法」を使うことでその結果を送ります。 -Once again, it demonstrates the `DatePipe` both _with_ and _without_ a format parameter. Note that both results (**APR 15, 1988** and **FRIDAY, APRIL 15, 1988**) are in uppercase. +前回同様、フォーマットパラメーターを_伴う_および_伴わない_場合の両者において`DatePipe`のデモンストレーションをします。両者の結果(**APR 15, 1988**および**FRIDAY, APRIL 15, 1988**)は大文字になることを注意してください。 -Switch to the class file to see that this is a [standalone component](guide/standalone-components); it imports the two pipes from `@angular/common`, the source of all built-in pipes. +これが[スタンドアロンコポーネント](guide/standalone-components)であることを確認するためにクラスファイルに切り替えてください。すべての組み込みパイプの源である`@angular/common`から2つのパイプをインポートしています。 @reviewed 2023-08-14 From cc61c080febc4ac6a71137e1958252db8d43d406 Mon Sep 17 00:00:00 2001 From: Darkss Date: Thu, 15 Feb 2024 21:46:52 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?= =?UTF-8?q?=E3=81=A7=E3=81=AE=E6=8C=87=E6=91=98=E4=BA=8B=E9=A0=85=E3=82=92?= =?UTF-8?q?=E5=8F=8D=E6=98=A0=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aio-ja/content/guide/pipe-template.md | 4 ++-- aio-ja/content/guide/pipes-transform-data.md | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/aio-ja/content/guide/pipe-template.md b/aio-ja/content/guide/pipe-template.md index a6f32bd9fd..376a76ddf7 100644 --- a/aio-ja/content/guide/pipe-template.md +++ b/aio-ja/content/guide/pipe-template.md @@ -5,12 +5,12 @@ `birthday`の値はパイプ演算子(`|`)を通じてnameが`date`の[`DatePipe`](api/common/DatePipe)に流れます。 -パイプはdateをデフォルトフォーマットの**Apr 15, 1988**に変換します。 +パイプは日付をデフォルトフォーマットの**Apr 15, 1988**に変換します。 コンポーネントクラスを見てください。 -これは[スタンドアロンコンポーネント](guide/standalone-components)のため、すべての組み込みパイプの源である`@angular/common`から`DatePipe`をインポートします。 +これは[スタンドアロンコンポーネント](guide/standalone-components)であるため、すべての組み込みパイプの源である`@angular/common`から`DatePipe`をインポートします。 @reviewed 2023-08-14 diff --git a/aio-ja/content/guide/pipes-transform-data.md b/aio-ja/content/guide/pipes-transform-data.md index 91ae5a35aa..69ab024a7c 100644 --- a/aio-ja/content/guide/pipes-transform-data.md +++ b/aio-ja/content/guide/pipes-transform-data.md @@ -24,15 +24,15 @@ -テンプレートでは、最初の表現では誕生日を_リテラルな_日付フォーマットのパラメーターである"shortDate"を用いて`DatePipe`に渡しています。出力は**04/15/88**です。 +テンプレートでは、最初の式では_リテラルの_日付フォーマットのパラメーターである"shortDate"を用いて誕生日を`DatePipe`に渡しています。出力は**04/15/88**です。 2つ目の式では誕生日を_コンポーネントのプロパティーにバインドされた_日付フォーマットパラメーター(`format`)を用いてDatePipeに渡しています。 -"Toggle"ボタンをクリックすることで[沢山の事前に定義されたフォーマット](api/common/DatePipe#pre-defined-format-options)のうち2つである`'mediumDate'`と`'fullDate'`を切り替えることができます。出力は**April 15, 1988**か**Friday, April 15, 1988**です。 +"Toggle"ボタンをクリックすることで[たくさんの事前に定義されたフォーマット](api/common/DatePipe#pre-defined-format-options)のうち2つである`'mediumDate'`と`'fullDate'`を切り替えることができます。出力は**April 15, 1988**か**Friday, April 15, 1988**です。 ページは指定されたフォーマットで誕生日を表示します。 -## 例: 2つのパイプを一緒に変更 +## 例: 2つのパイプを連結する １つのパイプの出力が次のパイプの入力になるように、「パイプ連鎖文法」を使うことで複数のパイプをつなぎます。 @@ -45,6 +45,6 @@ -これが[スタンドアロンコポーネント](guide/standalone-components)であることを確認するためにクラスファイルに切り替えてください。すべての組み込みパイプの源である`@angular/common`から2つのパイプをインポートしています。 +これが[スタンドアロンコンポーネント](guide/standalone-components)であることを確認するためにクラスファイルに切り替えてください。すべての組み込みパイプの源である`@angular/common`から2つのパイプをインポートしています。 @reviewed 2023-08-14