Angular コンポーネントとは何ですか?

Question

Accepted Answer

**コンポーネント**は Angular UI の基本的な構成要素です。`@Component` で装飾された TypeScript **クラス**で、画面の一部分（その「ビュー」）を制御します。すべての Angular アプリはコンポーネントのツリーです。 ## コンポーネントの構成 ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` `@Component` デコレータは 3 つのものをまとめます。**セレクタ**（HTML で使用する方法）、**テンプレート**（マークアップ）、および**スタイル**（このコンポーネントにスコープされます）。 ## クラスはロジックとデータを保持します ```html

``` クラスのパブリックプロパティとメソッドは、バインディングを通じてテンプレート内で直接アクセス可能です — これは Angular がデータとビューを接続する方法の核です。 ## コンポーネントを使用する ```html ``` ## スタイルはデフォルトでカプセル化されます ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular はコンポーネントスタイルを自動的にスコープします（View Encapsulation）。そのため CSS はコンポーネント間でリークしません。 ## なぜ重要なのかコンポーネントは、すべての Angular アプリを構造化する方法です。テンプレート + ロジック + スコープされたスタイルの自己完結型の単位をツリーに構成します。 `@Component` デコレータ（セレクタ、テンプレート、スタイル）と、クラスのプロパティ/メソッドがテンプレートにバインドされる仕組みを理解することは、Angular 開発の絶対的な基盤です。他のすべてはコンポーネントモデルの上に構築されます。