Skip to content

Commit c8e452c

Browse files
lacolacolacolaco
authored
fix: translate guide/components (#939)
1 parent 4c0b246 commit c8e452c

19 files changed

+2165
-1
lines changed

‎.textlintrc

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
{
22
"filters": {
3-
"comments": true
3+
"comments": true,
4+
"allowlist": {
5+
"allow": [
6+
"/<docs-code[\\s\\S]*?</docs-code>/m"
7+
]
8+
}
49
},
510
"rules": {
611
"prh": {

‎adev-ja/src/content/guide/components/advanced-configuration.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# コンポーネントの高度な設定
2+
3+
ヒント: このガイドでは、すでに[基本概念のガイド](essentials)を読んでいることを前提としています。Angularを初めて使用する場合は、最初にそちらを読んでください。
4+
5+
## ChangeDetectionStrategy
6+
7+
`@Component` デコレーターは、コンポーネントの**変更検知モード**を制御する `changeDetection` オプションを受け取ります。
8+
変更検知モードには2つのオプションがあります。
9+
10+
**`ChangeDetectionStrategy.Default`** は、名前が示す通り、デフォルトの戦略です。
11+
このモードでは、Angularは、アプリケーション全体で何か活動が行われた可能性があるたびに、
12+
コンポーネントのDOMが更新を必要とするかどうかを確認します。
13+
このチェックをトリガーする活動には、ユーザー操作、ネットワーク応答、タイマーなどがあります。
14+
15+
**`ChangeDetectionStrategy.OnPush`** は、Angularが実行する必要があるチェックの量を減らすオプションのモードです。
16+
このモードでは、フレームワークは、コンポーネントのDOMが更新を必要とするかどうかを次の場合にのみ確認します。
17+
18+
- コンポーネントの入力に、テンプレートのバインディングの結果として変更があった場合、または
19+
- このコンポーネントのイベントリスナーが実行された場合
20+
- コンポーネントが `ChangeDetectorRef.markForCheck` またはそれをラップする何か（`AsyncPipe` など）を介して、明示的にチェックのためにマークされている場合
21+
22+
さらに、OnPushコンポーネントがチェックされると、
23+
Angularはアプリケーションツリーを上向きにたどりながら、すべての祖先コンポーネントもチェックします。
24+
25+
## PreserveWhitespace
26+
27+
デフォルトでは、Angularはテンプレート内の余分な空白を削除し、折りたたみます。
28+
これは、改行やインデントから最もよく見られます。
29+
この設定は、コンポーネントのメタデータで `preserveWhitespace` を明示的に `false` に設定することで変更できます。
30+
31+
## カスタム要素スキーマ
32+
33+
デフォルトでは、Angularは未知のHTML要素に出会うとエラーをスローします。
34+
コンポーネントのメタデータの `schemas` プロパティに
35+
`CUSTOM_ELEMENTS_SCHEMA` を含めることで、この動作を無効にできます。
36+
37+
```ts
38+
import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
39+
40+
@Component({
41+
...,
42+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
43+
template: '<some-unknown-component></some-unknown-component>'
44+
})
45+
export class ComponentWithCustomElements { }
46+
```
47+
48+
Angularは、現時点で他のスキーマをサポートしていません。

‎adev-ja/src/content/guide/components/anatomy-of-components.md

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<docs-decorative-header title="コンポーネントの構造" imgSrc="adev/src/assets/images/components.svg"> <!-- markdownlint-disable-line -->
2+
</docs-decorative-header>
3+
4+
ヒント: このガイドでは、すでに[基本概念のガイド](essentials)を読んでいることを前提としています。Angularを初めて使う場合は、まずそちらをお読みください。
5+
6+
すべてのコンポーネントには次のものが必要です。
7+
8+
* ユーザー入力の処理やサーバーからのデータ取得などの*動作*を定義するTypeScriptクラス
9+
* DOMにレンダリングされる内容を制御するHTMLテンプレート
10+
* HTMLでコンポーネントがどのように使用されるかを定義する[CSSセレクター](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)
11+
12+
TypeScriptクラスの上部に `@Component` [デコレーター](https://www.typescriptlang.org/docs/handbook/decorators.html) を追加することで、コンポーネントにAngular固有の情報を与えます。
13+
14+
<docs-code language="ts" highlight="[1, 2, 3, 4]">
15+
@Component({
16+
selector: 'profile-photo',
17+
template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
18+
})
19+
export class ProfilePhoto { }
20+
</docs-code>
21+
22+
Angularテンプレートの書き方については、[テンプレートガイド](guide/templates)を参照してください。
23+
24+
`@Component` デコレーターに渡されるオブジェクトは、コンポーネントの**メタデータ**と呼ばれます。これには、このガイドで説明されている `selector`、`template`、その他のプロパティが含まれています。
25+
26+
コンポーネントには、オプションでそのコンポーネントのDOMに適用されるCSSスタイルのリストを含めることができます。
27+
28+
<docs-code language="ts" highlight="[4]">
29+
@Component({
30+
selector: 'profile-photo',
31+
template: `<img src="profile-photo.jpg" alt="Your profile photo">`,
32+
styles: `img { border-radius: 50%; }`,
33+
})
34+
export class ProfilePhoto { }
35+
</docs-code>
36+
37+
デフォルトでは、コンポーネントのスタイルは、そのコンポーネントのテンプレートで定義された要素にのみ影響を与えます。Angularのスタイリングアプローチの詳細については、[コンポーネントのスタイリング](guide/components/styling)を参照してください。
38+
39+
代わりに、テンプレートとスタイルを別々のファイルに書くこともできます。
40+
41+
<docs-code language="ts" highlight="[3, 4]">
42+
@Component({
43+
selector: 'profile-photo',
44+
templateUrl: 'profile-photo.html',
45+
styleUrl: 'profile-photo.css',
46+
})
47+
export class ProfilePhoto { }
48+
</docs-code>
49+
50+
これにより、プロジェクト内の*プレゼンテーション*と*動作*の懸念を分離できます。プロジェクト全体で一貫したアプローチを選択することも、コンポーネントごとに使用するものを決定できます。
51+
52+
`templateUrl` と `styleUrl` はどちらも、コンポーネントが存在するディレクトリを基準とした相対パスです。
53+
54+
## コンポーネントの使用
55+
56+
すべてのコンポーネントは[CSSセレクター](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)を定義します。
57+
58+
<docs-code language="ts" highlight="[2]">
59+
@Component({
60+
selector: 'profile-photo',
61+
...
62+
})
63+
export class ProfilePhoto { }
64+
</docs-code>
65+
66+
Angularがサポートするセレクターの種類と、セレクターを選択する際のガイダンスについては、[コンポーネントセレクター](guide/components/selectors)を参照してください。
67+
68+
他のコンポーネントのテンプレートに一致するHTML要素を作成することで、コンポーネントを使用します。
69+
70+
<docs-code language="ts" highlight="[4]">
71+
@Component({
72+
selector: 'user-profile',
73+
template: `
74+
<profile-photo />
75+
<button>Upload a new profile photo</button>`,
76+
...,
77+
})
78+
export class UserProfile { }
79+
</docs-code>
80+
81+
テンプレートで他のコンポーネントを参照して使用する方法は、[コンポーネントのインポートと使用](guide/components/importing)を参照してください。
82+
83+
Angularは、遭遇した一致するHTML要素ごとに、コンポーネントのインスタンスを作成します。コンポーネントのセレクターに一致するDOM要素は、そのコンポーネントの**ホスト要素**と呼ばれます。コンポーネントのテンプレートの内容は、そのホスト要素内にレンダリングされます。
84+
85+
コンポーネントによってレンダリングされたDOM (コンポーネントのテンプレートに対応)は、
86+
そのコンポーネントの**ビュー**と呼ばれます。
87+
88+
このようにコンポーネントを組み合わせることで、**Angular アプリケーションはコンポーネントのツリーとして考えることができます**。
89+
90+
```mermaid
91+
flowchart TD
92+
A[AccountSettings]-->B
93+
A-->C
94+
B[UserProfile]-->D
95+
B-->E
96+
C[PaymentInfo]
97+
D[ProfilePic]
98+
E[UserBio]
99+
```
100+
101+
102+
このツリー構造は、[依存性の注入](guide/di)や[子クエリ](guide/components/queries)など、その他のAngularの概念を理解する上で重要です。

‎adev-ja/src/content/guide/components/content-projection.md

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
# `ng-content` を使ったコンテンツの投影
2+
3+
ヒント: このガイドは、すでに [基本概念のガイド](essentials) を読んだことを前提としています。Angularを初めて使う場合は、まずそちらを読んでください。
4+
5+
多くの場合、さまざまな種類のコンテンツを格納するコンポーネントを作成する必要があります。
6+
例えば、カスタムカードコンポーネントを作成したいとします。
7+
8+
```ts
9+
@Component({
10+
selector: 'custom-card',
11+
template: '<div class="card-shadow"> <!-- card content goes here --> </div>',
12+
})
13+
export class CustomCard {/* ... */}
14+
```
15+
16+
**`<ng-content>` 要素は、コンテンツを配置する場所を示すプレースホルダーとして使用できます。**:
17+
18+
```ts
19+
@Component({
20+
selector: 'custom-card',
21+
template: '<div class="card-shadow"> <ng-content></ng-content> </div>',
22+
})
23+
export class CustomCard {/* ... */}
24+
```
25+
26+
ヒント: `<ng-content>` は、
27+
[ネイティブの `<slot>` 要素](https://developer.mozilla.org/docs/Web/HTML/Element/slot) と似ていますが、
28+
Angular固有の機能も備えています。
29+
30+
`<ng-content>` を使用したコンポーネントを使用する場合、
31+
コンポーネントホスト要素の子要素はすべて、その `<ng-content>` の場所にレンダリング、あるいは **投影されます**:
32+
33+
```ts
34+
// コンポーネントソース
35+
@Component({
36+
selector: 'custom-card',
37+
template: `
38+
<div class="card-shadow">
39+
<ng-content />
40+
</div>
41+
`,
42+
})
43+
export class CustomCard {/* ... */}
44+
```
45+
46+
```html
47+
<!-- コンポーネントの利用 -->
48+
<custom-card>
49+
<p>これは投影されたコンテンツです</p>
50+
</custom-card>
51+
```
52+
53+
```html
54+
<!-- レンダリングされたDOM -->
55+
<custom-card>
56+
<div class="card-shadow">
57+
<p>これは投影されたコンテンツです</p>
58+
</div>
59+
</custom-card>
60+
```
61+
62+
Angularは、このように渡されるコンポーネントの子要素を、そのコンポーネントの **コンテンツ** と呼びます。
63+
これはコンポーネントの **ビュー** とは異なります。
64+
ビューは、コンポーネントのテンプレートで定義された要素を指します。
65+
66+
**`<ng-content>` 要素は、コンポーネントでも DOM 要素でもありません。**
67+
代わりに、コンテンツをレンダリングする場所をAngularに伝える特別なプレースホルダーです。
68+
Angularのコンパイラは、ビルド時にすべての `<ng-content>` 要素を処理します。
69+
実行時に `<ng-content>` を挿入、削除、または変更できません。
70+
**<span style="text-decoration:underline;">ディレクティブ</span>**、スタイル、または任意の属性を `<ng-content>` に追加できません。
71+
72+
`<ng-content>` を `ngIf`、`ngFor`、または `ngSwitch` で条件付きで含めるべきではありません。
73+
コンポーネントコンテンツの条件付きレンダリングについては、
74+
[テンプレートフラグメント](api/core/ng-template) を参照してください。
75+
76+
## 複数のコンテンツプレースホルダー
77+
78+
Angularは、CSSセレクターに基づいて、複数の異なる要素を異なる `<ng-content>` プレースホルダーへの投影をサポートしています。
79+
上記のカードの例を拡張して、`select` 属性を使用して、カードのタイトルと本文の2つのプレースホルダーを作成できます。
80+
81+
```html
82+
<!-- コンポーネントテンプレート -->
83+
<div class="card-shadow">
84+
<ng-content select="card-title"></ng-content>
85+
<div class="card-divider"></div>
86+
<ng-content select="card-body"></ng-content>
87+
</div>
88+
```
89+
90+
```html
91+
<!-- コンポーネントの利用 -->
92+
<custom-card>
93+
<card-title>こんにちは</card-title>
94+
<card-body>例へようこそ</card-body>
95+
</custom-card>
96+
```
97+
98+
```html
99+
<!-- レンダリングされたDOM -->
100+
<custom-card>
101+
<div class="card-shadow">
102+
<card-title>こんにちは</card-title>
103+
<div class="card-divider"></div>
104+
<card-body>例へようこそ</card-body>
105+
</div>
106+
</custom-card>
107+
```
108+
109+
`<ng-content>` プレースホルダーは、
110+
[コンポーネントセレクター](guide/components/selectors) と同じCSSセレクターをサポートしています。
111+
112+
`select` 属性を持つ `<ng-content>` プレースホルダーを1つ以上、
113+
`select` 属性を持たない `<ng-content>` プレースホルダーを1つ含める場合、
114+
後者は `select` 属性に一致しなかったすべての要素をキャプチャします。
115+
116+
```html
117+
<!-- コンポーネントテンプレート -->
118+
<div class="card-shadow">
119+
<ng-content select="card-title"></ng-content>
120+
<div class="card-divider"></div>
121+
<!-- "card-title" 以外をすべてキャプチャ -->
122+
<ng-content></ng-content>
123+
</div>
124+
```
125+
126+
```html
127+
<!-- コンポーネントの利用 -->
128+
<custom-card>
129+
<card-title>こんにちは</card-title>
130+
<img src="..." />
131+
<p>例へようこそ</p>
132+
</custom-card>
133+
```
134+
135+
```html
136+
<!-- レンダリングされたDOM -->
137+
<custom-card>
138+
<div class="card-shadow">
139+
<card-title>こんにちは</card-title>
140+
<div class="card-divider"></div>
141+
<img src="..." />
142+
<p>例へようこそ></p>
143+
</div>
144+
</custom-card>
145+
```
146+
147+
コンポーネントに `select` 属性を持たない `<ng-content>` プレースホルダーが含まれていない場合、
148+
コンポーネントのいずれかのプレースホルダーに一致しない要素はDOMにレンダリングされません。
149+
150+
## 投影のためのコンテンツのエイリアシング
151+
152+
Angularは、任意の要素にCSSセレクターを指定できる特殊な属性 `ngProjectAs` をサポートしています。
153+
`ngProjectAs` を持つ要素が `<ng-content>` プレースホルダーに対してチェックされると、
154+
Angularは要素のIDではなく `ngProjectAs` の値と比較します。
155+
156+
```html
157+
<!-- コンポーネントテンプレート -->
158+
<div class="card-shadow">
159+
<ng-content select="card-title"></ng-content>
160+
<div class="card-divider"></div>
161+
<ng-content></ng-content>
162+
</div>
163+
```
164+
165+
```html
166+
<!-- コンポーネントの利用 -->
167+
<custom-card>
168+
<h3 ngProjectAs="card-title">こんにちは</h3>
169+
170+
<p>例へようこそ</p>
171+
</custom-card>
172+
```
173+
174+
```html
175+
<!-- レンダリングされたDOM -->
176+
<custom-card>
177+
<div class="card-shadow">
178+
<h3>こんにちは</h3>
179+
<div class="card-divider"></div>
180+
<p>例へようこそ></p>
181+
</div>
182+
</custom-card>
183+
```
184+
185+
`ngProjectAs` は静的な値のみをサポートし、動的な式にはバインドできません。

0 commit comments

Comments
 (0)