コンポーネントによる構築 • Angular 日本語版

コンポーネントは、プロジェクトを理解しやすい部品に分割し、明確な責任を持たせることで、コードの保守性とスケーラビリティを向上させます。

Todoアプリケーションをコンポーネントのツリーに分解する例を示します。

このガイドでは、Angularでコンポーネントを作成および使用する方法について説明します。

コンポーネントの定義

すべてのコンポーネントには、核となる次のプロパティがあります。

いくつかの設定を含む @Componentデコレーター
DOMにレンダリングされる内容を制御するHTMLテンプレート
HTMLでコンポーネントがどのように使用されるかを定義する CSSセレクター
状態管理、ユーザー入力処理、サーバーからのデータフェッチなどの動作を持つTypeScriptクラス

TodoListItemコンポーネントの簡略化された例を次に示します。

      // todo-list-item.component.ts
@Component({
  selector: 'todo-list-item',
  template: `
    <li>(TODO) Read Angular Essentials Guide</li>
  `,
})
export class TodoListItem {
  /* コンポーネントの動作はここで定義します。 */
}

コンポーネントでよく見られるその他のメタデータには次のものがあります。

standalone: true — コンポーネントの作成を簡素化する推奨アプローチ
styles — コンポーネントに適用するCSSスタイルを含む文字列または文字列の配列

これを踏まえて、TodoListItem コンポーネントの更新バージョンを示します。

      // todo-list-item.component.ts
@Component({
  standalone: true,
  selector: 'todo-list-item',
  template: `
    <li>(TODO) Read Angular Essentials Guide</li>
  `,
  styles: `
    li {
      color: red;
      font-weight: 300;
    }
  `,
})
export class TodoListItem {
  /* コンポーネントの動作はここで定義します。 */
}

HTMLとCSSを別ファイルに分離する

HTMLやCSSを別ファイルで管理することを好むチーム向けに、Angularは templateUrl と styleUrl の2つの追加プロパティを提供します。

前の TodoListItem コンポーネントを使用して、代替アプローチは次のようになります。

      // todo-list-item.component.ts
@Component({
  standalone: true,
  selector: 'todo-list-item',
  templateUrl: './todo-list-item.component.html',
  styleUrl: './todo-list-item.component.css',
})
export class TodoListItem {
  /* コンポーネントの動作はここで定義します。 */
}

      <!-- todo-list-item.component.html -->
<li>(TODO) Read Angular Essentials Guide</li>

      // todo-list-item.component.css
li {
  color: red;
  font-weight: 300;
}

コンポーネントの使用

コンポーネントアーキテクチャの利点の1つは、アプリケーションがモジュール化されることです。つまり、コンポーネントは他のコンポーネントの中で使用できます。

コンポーネントを使用するには、次の手順を実行します。

ファイルにコンポーネントをインポートする
コンポーネントの imports 配列に追加する
テンプレートでコンポーネントのセレクターを使用する

前の TodoListItem コンポーネントをインポートする TodoList コンポーネントの例を次に示します。

      // todo-list.component.ts
import {TodoListItem} from './todo-list-item.component.ts';
@Component({
  standalone: true,
  imports: [TodoListItem],
  template: `
    <ul>
      <todo-list-item></todo-list-item>
    </ul>
  `,
})
export class TodoList {}

次のステップ

Angularのコンポーネントの仕組みがわかったところで、アプリケーションに動的なデータを追加して管理する方法について学びましょう。