Angularのディレクティブとコンポーネントの違い
2024-10-19
Angularにおける@Directiveと@Componentの違い
Angularにおいて、@Directiveと@ComponentはどちらもDOM要素に新しい振る舞いを与えるための仕組みですが、その役割と使用方法に違いがあります。
@Directive
- 例
highlightディレクティブ: 選択されたテキストをハイライトする。autofocusディレクティブ: 入力フィールドに自動フォーカスを設定する。
- 特徴
- 任意のHTML要素に適用できる。
- 独自のテンプレートを持たない。
- 他のコンポーネントの内部で使用することができる。
- 一般的な用途
DOM要素にカスタムの振る舞いを追加したい場合に使用します。
@Component
- 例
app-rootコンポーネント: アプリケーションのルートコンポーネント。product-listコンポーネント: 商品一覧を表示するコンポーネント。
- 特徴
- ルートコンポーネントとしてアプリケーションのトップレベルのビューを定義する。
- 具体的な用途
アプリケーションのUIの構成要素を定義したい場合に使用します。
- @Component
アプリケーションのUIの構成要素を定義するための特定の仕組み。 - @Directive
DOM要素にカスタムの振る舞いを追加するための汎用的な仕組み。
@Directiveの例：ハイライトディレクティブ
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.sty le.backgroundColor = color;
}
}
- 解説
@Directiveデコレーターで、appHighlightというセレクターを指定しています。HostListenerデコレーターで、マウスが要素に入った時と出た時にイベントをトリガーし、highlightメソッドを呼び出します。highlightメソッドで、要素の背景色を変更し、ハイライト効果を実装します。
@Componentの例：シンプルなカウンター
import { Component } from '@angular/core';
@Component({
selector: 'app-counter',
template: `
<button (click)="increment()">Count: {{ count }}</button>
`
})
export class CounterComponent {
count = 0;
increment() {
this.count++;
}
}
- 解説
@Componentデコレーターで、app-counterというセレクターと、テンプレートを指定しています。- テンプレート内で、ボタンをクリックすると
incrementメソッドが呼び出され、countプロパティがインクリメントされます。
組み込みのディレクティブ
Angularは、NgIf、NgFor、NgStyleなど、多くの組み込みディレクティブを提供しています。これらのディレクティブは、一般的なユースケースに対応しており、カスタムディレクティブを作成する手間を省くことができます。
パイプ
パイプは、テンプレート内でデータをフォーマットしたり、変換したりするための仕組みです。カスタムパイプを作成することで、ディレクティブのようにデータを変換する処理を実装できますが、DOMへの直接的な操作は行えません。
サービス
サービスは、コンポーネント間で共有されるロジックやデータをカプセル化するための仕組みです。ディレクティブやコンポーネントからサービスを注入し、共通の機能を呼び出すことができます。
レンダラー
レンダラーは、DOMを直接操作するためのAPIです。より高度なカスタムレンダリングが必要な場合に利用できます。
カスタム要素
Web Componentsの仕様に基づいて、カスタム要素を作成することができます。Angularでもカスタム要素をサポートしており、他のフレームワークとの互換性や再利用性を高めることができます。
各手法の比較
angular typescript
