fix: translate template-syntax guides (#945)

* chore: copy files

* fix: translate template syntax guides

Author: lacolaco

adev-ja/src/content/guide/templates/attribute-binding.md

@@ -0,0 +1,53 @@
+# 属性バインディング
+
+Angularの属性バインディングを使用すると、属性の値を直接設定できます。
+属性バインディングを使用すると、アクセシビリティを向上させ、アプリケーションを動的にスタイル設定し、複数のCSSクラスまたはスタイルを同時に管理できます。
+
+## 構文
+
+属性バインディングの構文は [プロパティバインディング](guide/templates/property-binding) に似ていますが、角括弧で囲まれた要素プロパティの代わりに、属性名の前に `attr` プレフィックスとドットを付けます。
+次に、属性値を文字列に変換される式で設定します。
+
+<docs-code language="html">
+
+<p [attr.attribute-you-are-targeting]="expression"></p>
+
+</docs-code>
+
+HELPFUL: 式が `null` または `undefined` に解決されると、Angularは属性を完全に削除します。
+
+## ARIA 属性のバインディング
+
+属性バインディングの主なユースケースの1つは、ARIA属性を設定することです。
+
+ARIA属性にバインドするには、次のように入力します。
+
+<docs-code header="src/app/app.component.html" path="adev/src/content/examples/attribute-binding/src/app/app.component.html" visibleRegion="attrib-binding-aria"/>
+
+## `colspan` へのバインディング
+
+属性バインディングのもう1つの一般的なユースケースは、テーブルの `colspan` 属性です。 `colspan` 属性にバインディングすると、テーブルをプログラムで動的に保つことができます。 アプリケーションがテーブルに表示するデータの量に応じて、行がまたがる列の数は変わる可能性があります。
+
+`<td>` 属性 `colspan` で属性バインディングを使用するには
+
+1. 次の構文を使用して `colspan` 属性を指定します。 `[attr.colspan]`。
+1. `[attr.colspan]` を式に等しく設定します。
+
+次の例では、`colspan` 属性を式 `1 + 1` にバインドしています。
+
+<docs-code header="src/app/app.component.html" path="adev/src/content/examples/attribute-binding/src/app/app.component.html" visibleRegion="colspan"/>
+
+このバインディングにより、`<tr>` は2つの列にまたがります。
+
+HELPFUL: プロパティ名と属性名の間に違いがある場合があります。
+
+`colspan` は `<td>` の属性ですが、大文字の "S" を使った `colSpan` はプロパティです。
+属性バインディングを使用する場合は、小文字の "s" を使った `colspan` を使用してください。
+
+`colSpan` プロパティへのバインディング方法の詳細については、[プロパティバインディング](guide/templates/property-binding) の [`colspan` と `colSpan`](guide/templates/property-binding#colspan-and-colspan) セクションを参照してください。
+
+## 次へ
+
+<docs-pill-row>
+  <docs-pill href="guide/templates/class-binding" title="クラスとスタイルのバインディング"/>
+</docs-pill-row>

adev-ja/src/content/guide/templates/binding.md

@@ -0,0 +1,102 @@
+# バインディングを理解する
+
+Angularのテンプレートでは、バインディングによりテンプレートから作成されたUIの一部（DOM要素、ディレクティブ、またはコンポーネント）とモデル（テンプレートが属するコンポーネントインスタンス）間にライブ接続が確立されます。この接続はビューをモデルと同期させたり、ビューでイベントやユーザーアクションが発生したときにモデルに通知したり、その両方を行うために使用できます。Angularの [変更検知](best-practices/runtime-performance) アルゴリズムは、ビューとモデルを同期させる役割を担います。
+
+バインディングの例には、次のようなものがあります。
+
+* テキスト補間
+* プロパティバインディング
+* イベントバインディング
+* 双方向バインディング
+
+バインディングには常に、_ターゲット_（バインドされた値を受け取るもの）と、_テンプレート式_（モデルから値を生成するもの）の2つの部分があります。
+
+## 構文
+
+テンプレート式はJavaScript式に似ています。
+多くのJavaScript式は有効なテンプレート式ですが、以下の例外があります。
+
+副作用を持つ、または副作用を促進するJavaScript式は使用できません。具体的には、以下を含みます。
+
+* 代入 (`=`, `+=`, `-=`, `...`)
+* `new`, `typeof`, または `instanceof` などの演算子
+* <code>;</code> または <code>,</code> を使用した式チェーン
+* インクリメントおよびデクリメント演算子 `++` および `--`
+* ES2015+ の演算子のいくつか
+
+JavaScript構文からのその他の顕著な違いには、次のようなものがあります。
+
+* `|` や `&` などのビット単位の演算子はサポートされていません。
+
+## 式のコンテキスト
+
+補間された式には、式が属するアプリケーションの特定の部分であるコンテキストがあります。通常、このコンテキストはコンポーネントインスタンスです。
+
+次のスニペットでは、`recommended` 式と `itemImageUrl2` 式は、`AppComponent` のプロパティを参照しています。
+
+<docs-code path="adev/src/content/examples/interpolation/src/app/app.component.html" visibleRegion="component-context" header="src/app/app.component.html"/>
+
+式は、[テンプレート入力変数](guide/directives/structural-directives#shorthand) や [テンプレート参照変数](guide/templates/reference-variables) などの、_テンプレート_ のコンテキストのプロパティも参照できます。
+
+次の例では、`customer` のテンプレート入力変数を使用しています。
+
+<docs-code path="adev/src/content/examples/interpolation/src/app/app.component.html" visibleRegion="template-input-variable" header="src/app/app.component.html (template input variable)"/>
+
+次の例では、`#customerInput` のテンプレート参照変数を使用しています。
+
+<docs-code path="adev/src/content/examples/interpolation/src/app/app.component.html" visibleRegion="template-reference-variable" header="src/app/app.component.html (template reference variable)"/>
+
+HELPFUL: テンプレート式は、`undefined` を除いて、グローバル名前空間内のものは何も参照できません。 `window` や `document` は参照できません。また、`console.log()` や `Math.max()` を呼び出すことができず、式のコンテキストのメンバーの参照に限定されています。
+
+### 名前衝突の防止
+
+式が評価されるコンテキストは、テンプレート変数、ディレクティブのコンテキストオブジェクト（存在する場合）、およびコンポーネントのメンバーの結合です。
+複数の名前空間に属する名前を参照する場合、Angularは次の優先順位ロジックを適用してコンテキストを決定します。
+
+1. テンプレート変数名
+1. ディレクティブのコンテキスト内の名前
+1. コンポーネントのメンバー名
+
+変数が別のコンテキストの変数を隠すことを防ぐために、変数名を一意に保ちます。
+次の例では、`AppComponent` テンプレートは、`customer` のPadmaに挨拶します。
+
+`@for` は、`customers` 配列内の各 `customer` をリスト表示します。
+
+<docs-code path="adev/src/content/examples/interpolation/src/app/app.component.1.ts" visibleRegion="var-collision" header="src/app/app.component.ts"/>
+
+`@for` 内の `customer` は、_@for_ によって定義された暗黙の `<ng-template>` のコンテキストにあります。これは、`customers` 配列内の各 `customer` を参照し、"Ebony" と "Chiho" を表示します。"Padma" は、その配列内に存在しないため表示されません。
+
+一方、`<h1>` は、コンポーネントクラスの `customer` プロパティの値にバインドされた "Padma" を表示します。
+
+## 式のベストプラクティス
+
+テンプレート式を使用する際には、次のベストプラクティスに従ってください。
+
+* **短い式を使用する**
+
+可能な限り、プロパティ名やメソッド呼び出しを使用します。アプリケーションロジックとビジネスロジックは、開発とテストが可能なコンポーネントに保持します。
+
+* **迅速な実行**
+
+Angularは、変更検知サイクルのたびにテンプレート式を実行します。Promise解決、HTTP結果、タイマーイベント、キー押下、マウス移動など、多くの非同期アクティビティが変更検知サイクルをトリガーします。
+
+特に低速なデバイスでは、ユーザー体験をできるだけ効率的にするために、式は迅速に終了する必要があります。計算に多くのリソースを必要とする場合は、値をキャッシュすることを検討してください。
+
+## 可視的な副作用なし
+
+Angularの単方向データフローモデルに従って、テンプレート式は、ターゲットプロパティの値以外、アプリケーションの状態を変更すべきではありません。コンポーネントの値を読み取ることは、他の表示される値を変更すべきではありません。ビューは、1回のレンダリングパス全体で安定している必要があります。
+
+  <docs-callout title='冪等な式は副作用を減らします'>
+
+[冪等](https://ja.wikipedia.org/wiki/%E5%86%AA%E7%AD%89) な式は副作用がなく、Angularの変更検知のパフォーマンスを向上させます。Angularの用語では、冪等な式は、依存する値のいずれかが変更されるまでは、常に _まったく同じもの_ を返します。
+
+依存する値は、イベントループの1回のターン中に変更されるべきではありません。べき等な式が文字列または数値を返す場合、それを連続して2回呼び出した場合、同じ文字列または数値を返します。式がオブジェクト（`array` を含む）を返す場合、それを連続して2回呼び出した場合、同じオブジェクト _参照_ を返します。
+
+  </docs-callout>
+
+## 次へ
+
+<docs-pill-row>
+  <docs-pill href="guide/templates/property-binding" title="プロパティバインディング"/>
+  <docs-pill href="guide/templates/event-binding" title="イベントバインディング"/>
+</docs-pill-row>

adev-ja/src/content/guide/templates/class-binding.md

@@ -0,0 +1,93 @@
+# クラスとスタイルのバインディング
+
+クラスとスタイルのバインディングを使用して、要素の `class` 属性からCSSクラス名を追加および削除したり、スタイルを動的に設定したりします。
+
+## 単一の CSS `class` へのバインディング
+
+単一のクラスバインディングを作成するには、次のように入力します。
+
+`[class.sale]="onSale"`
+
+バインドされた式 `onSale` が真の場合、Angularはクラスを追加し、式が偽の場合、クラスを削除します。ただし、`undefined` を除きます。`undefined` の動作は、要素上の異なるディレクティブで同じクラスに複数のバインディングが存在する場合に特に役立ちます。
+
+## 複数の CSS クラスへのバインディング
+
+複数のクラスにバインドするには、次のように入力します。
+
+`[class]="classExpression"`
+
+式は次のいずれかになります。
+
+* クラス名のスペース区切り文字列。
+* クラス名をキー、真または偽の式を値とするオブジェクト。
+* クラス名の配列。
+
+オブジェクト形式を使用すると、Angularは関連付けられた値が真の場合にのみクラスを追加します。
+
+IMPORTANT: オブジェクトのような式（`object`、`Array`、`Map`、`Set` など）を使用する場合、Angularがクラスリストを更新するにはオブジェクトのIDが変更されている必要があります。
+オブジェクトのIDを変更せずにプロパティを更新しても、効果はありません。
+
+同じクラス名に複数のバインディングがある場合、Angularはスタイリングの優先順位を使用して、どのバインディングを使用するかを決定します。
+
+次の表は、クラスバインディング構文をまとめたものです。
+
+| バインディングの種類        | 構文                       | 入力の種類                                                                 | 入力値の例            |
+|:---                             |:---                          |:---                                                                        |:---                   |
+| 単一のクラスバインディング    | `[class.sale]="onSale"`     | <code>boolean | undefined | null</code>                       | `true`、`false`          |
+| 複数のクラスバインディング   | `[class]="classExpression"` | `string`                                                                   | `"my-class-1 my-class-2 my-class-3"` |
+| 複数のクラスバインディング   | `[class]="classExpression"` | <code>Record<string, boolean | undefined | null></code> | `{foo: true, bar: false}`      |
+| 複数のクラスバインディング   | `[class]="classExpression"` | <code>Array<string></code>                                            | `['foo', 'bar']`         |
+
+## 単一のスタイルへのバインディング
+
+単一のスタイルバインディングを作成するには、プレフィックス `style` の後にドットとCSSスタイルの名前を続けます。
+
+たとえば、`width` スタイルを設定するには、次のように入力します。`[style.width]="width"`
+
+Angularは、通常は文字列であるバインドされた式の値にプロパティを設定します。オプションで、`em` や `%` などの単位拡張子を付けることができます。これには数値型が必要です。
+
+1. スタイルをダッシュケースで記述するには、次のように入力します。
+
+    <docs-code language="html"><nav [style.background-color]="expression"></nav></docs-code>
+
+2. スタイルをキャメルケースで記述するには、次のように入力します。
+
+    <docs-code language="html"><nav [style.backgroundColor]="expression"></nav></docs-code>
+
+## 複数のスタイルへのバインディング
+
+複数のスタイルを切り替えるには、`[style]` 属性にバインドします（例：`[style]="styleExpression"`）。`styleExpression` は次のいずれかになります。
+
+* `"width: 100px; height: 100px; background-color: cornflowerblue;"` などのスタイルの文字列リスト。
+* `{width: '100px', height: '100px', backgroundColor: 'cornflowerblue'}` などの、スタイル名をキー、スタイル値を値とするオブジェクト。
+
+`[style]` に配列をバインドすることはサポートされていないことに注意してください。
+
+IMPORTANT: `[style]` をオブジェクト式にバインドする場合、Angularがクラスリストを更新するにはオブジェクトのIDが変更されている必要があります。
+オブジェクトのIDを変更せずにプロパティを更新しても、効果はありません。
+
+### 単一スタイルと複数スタイルのバインディングの例
+
+<docs-code path="adev/src/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts" header="nav-bar.component.ts"/>
+
+同じスタイル属性に複数のバインディングがある場合、Angularはスタイリングの優先順位を使用して、どのバインディングを使用するかを決定します。
+
+次の表は、スタイルバインディング構文をまとめたものです。
+
+| バインディングの種類                    | 構文                       | 入力の種類                                                                 | 入力値の例            |
+|:---                             |:---                          |:---                                                                        |:---                   |
+| 単一のスタイルバインディング            | `[style.width]="width"`     | <code>string | undefined | null</code>                       | `"100px"`              |
+| 単一のスタイルバインディング（単位付き） | `[style.width.px]="width"`  | <code>number | undefined | null</code>                       | `100`                   |
+| 複数のスタイルバインディング             | `[style]="styleExpression"` | `string`                                                                   | `"width: 100px; height: 100px"` |
+| 複数のスタイルバインディング             | `[style]="styleExpression"` | <code>Record<string, string | undefined | null></code> | `{width: '100px', height: '100px'}` |
+
+## スタイリングの優先順位
+
+単一のHTML要素には、CSSクラスリストとスタイル値が複数のソース（たとえば、複数のディレクティブからのホストバインディング）にバインドされている場合があります。
+
+## 次へ
+
+<docs-pill-row>
+  <docs-pill href="/guide/components/styling" title="コンポーネントのスタイリング"/>
+  <docs-pill href="/guide/animations" title="Angularアニメーションの概要"/>
+</docs-pill-row>