11<docs-decorative-header title =" コンポーネント " imgSrc =" adev/src/assets/images/components.svg " > <!-- markdownlint-disable-line -->
2- Angular でアプリケーションを作成するための基本的な構成要素 。
2+ Angularでアプリケーションを作成するための基本的な構成要素 。
33</docs-decorative-header >
44
55コンポーネントは、プロジェクトを理解しやすい部品に分割し、明確な責任を持たせることで、コードの保守性とスケーラビリティを向上させます。
66
7- Todo アプリケーションをコンポーネントのツリーに分解する例を示します 。
7+ Todoアプリケーションをコンポーネントのツリーに分解する例を示します 。
88
99``` mermaid
1010flowchart TD
@@ -15,18 +15,18 @@ flowchart TD
1515 D[TodoListItem]
1616```
1717
18- このガイドでは、Angular でコンポーネントを作成および使用する方法について説明します 。
18+ このガイドでは、Angularでコンポーネントを作成および使用する方法について説明します 。
1919
2020## コンポーネントの定義
2121
2222すべてのコンポーネントには、核となる次のプロパティがあります。
2323
24241 . いくつかの設定を含む ` @Component ` [ デコレーター] ( https://www.typescriptlang.org/docs/handbook/decorators.html )
25- 2 . DOM にレンダリングされる内容を制御する HTMLテンプレート
26- 3 . HTML でコンポーネントがどのように使用されるかを定義する [ CSSセレクター] ( https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors )
27- 4 . 状態管理、ユーザー入力処理、サーバーからのデータフェッチなどの動作を持つ TypeScriptクラス
25+ 2 . DOMにレンダリングされる内容を制御するHTMLテンプレート
26+ 3 . HTMLでコンポーネントがどのように使用されるかを定義する [ CSSセレクター] ( https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors )
27+ 4 . 状態管理、ユーザー入力処理、サーバーからのデータフェッチなどの動作を持つTypeScriptクラス
2828
29- TodoListItem コンポーネントの簡略化された例を次に示します 。
29+ TodoListItemコンポーネントの簡略化された例を次に示します 。
3030
3131``` ts
3232// todo-list-item.component.ts
@@ -44,7 +44,7 @@ export class TodoListItem {
4444コンポーネントでよく見られるその他のメタデータには次のものがあります。
4545
4646- ` standalone: true ` — コンポーネントの作成を簡素化する推奨アプローチ
47- - ` styles ` — コンポーネントに適用する CSSスタイルを含む文字列または文字列の配列
47+ - ` styles ` — コンポーネントに適用するCSSスタイルを含む文字列または文字列の配列
4848
4949これを踏まえて、` TodoListItem ` コンポーネントの更新バージョンを示します。
5050
@@ -70,7 +70,7 @@ export class TodoListItem {
7070
7171### HTMLとCSSを別ファイルに分離する
7272
73- HTMLやCSSを別ファイルで管理することを好むチーム向けに、Angular は ` templateUrl ` と ` styleUrl ` の2つの追加プロパティを提供します。
73+ HTMLやCSSを別ファイルで管理することを好むチーム向けに、Angularは ` templateUrl ` と ` styleUrl ` の2つの追加プロパティを提供します。
7474
7575前の ` TodoListItem ` コンポーネントを使用して、代替アプローチは次のようになります。
7676
0 commit comments