[Angular マスター] Day 2 - コンポーネントの基本

コンポーネントとは

Angularのコンポーネントは、画面を構成する再利用可能なUI部品です。ヘッダー、サイドバー、プロフィールカード、投稿一覧など、画面を小さな部品に分けて作ります。

コンポーネント単位で考えると、複雑な画面も整理しやすくなります。

graph TD
    A[アプリケーション] --> B[ヘッダー]
    A --> C[メイン画面]
    A --> D[フッター]
    C --> E[プロフィールカード]
    C --> F[投稿リスト]

コンポーネントの3要素

Angularコンポーネントは、主に三つの要素でできています。

要素	役割
Template	HTMLとして表示する内容
Styles	見た目の調整
Class	データやメソッドなどのロジック

この三つを一つの部品として扱うことで、画面ごとの責務を分けられます。

Standalone Component

最近のAngularでは、Standalone Componentを使う書き方が基本になっています。NgModuleに強く依存せず、コンポーネント単体で必要な依存関係を持てます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-profile-card',
  standalone: true,
  template: `<h2></h2>`,
})
export class ProfileCardComponent {
  name = 'Angular User';
}

CLIで作成する

Angular CLIを使うと、必要なファイルをまとめて作れます。

ng generate component profile-card

慣れるまではCLIで生成し、作られたファイルを見ながら構造を覚えるのがおすすめです。

学習ポイント

Angularでは、画面を一枚の大きなHTMLとして作るのではなく、意味のあるコンポーネントに分けて組み立てます。この考え方に慣れることが、Angular学習の最初の山です。