Angular開発で迷ったらコレ！@Directiveと@Componentを使い分けるポイント

2024-04-02

Angularにおける@Directiveと@Component

@Directive:

HTML要素に新しい機能やスタイルを追加するために使用されます。
テンプレートには直接使用できません。
属性ディレクティブと構造ディレクティブの2種類があります。
例：ngClass、ngIf

@Component:

テンプレートと論理を組み合わせた独立したUIコンポーネントを作成するために使用されます。
HTMLテンプレートを持ち、独自のスタイルを定義できます。
データバインディング、イベント処理、ライフサイクルフックなどの機能を使用できます。
例：AppComponent、HeaderComponent

主な違い:

項目	@Directive	@Component
役割	HTML要素に機能/スタイルを追加	UIコンポーネントを作成
テンプレート	使用不可	使用可能
種類	属性/構造	なし
機能	データバインディング限定	データバインディング、イベント処理、ライフサイクルフックなど

使い分け:

HTML要素に機能やスタイルを追加したい場合は、@Directiveを使用します。
独立したUIコンポーネントを作成したい場合は、@Componentを使用します。

例:

ボタンに太字スタイルを追加したい場合は、ngClassディレクティブを使用します。

補足:

@Directiveは@Componentの基底クラスです。
@Componentは、@Directiveにテンプレート機能を追加したものです。

用語解説:

属性ディレクティブ: HTML要素に属性を追加することで機能を追加するディレクティブ
構造ディレクティブ: HTML要素の構造を変えるディレクティブ
テンプレート: HTMLをベースとした、Angular独自の構文で書かれたファイル
データバインディング: コンポーネントのロジックとテンプレートの間でデータを双方向に同期する機能
イベント処理: ユーザー操作などのイベントを処理する機能
ライフサイクルフック: コンポーネントの生成、初期化、破棄などのタイミングで実行されるコード

@Directiveの例

<button [ngClass]="{'active': isActive}">ボタン</button>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  isActive: boolean = false;

  constructor() { }

  ngOnInit() {
  }

}

このコードでは、ngClassディレクティブを使用して、ボタンにactiveクラスを追加/削除しています。

@Componentの例

<h1>{{title}}</h1>
<p>This is my app.</p>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title: string = 'My App';

  constructor() { }

}