Angular で TypeScript デコレータを使用する方法

TypeScript デコレータは、クラス、メソッド、アクセサ、プロパティ、またはパラメータに添付できる特別な種類の宣言です。Angular では、デコレータはクラスにメタデータを追加する方法を提供するため、再利用可能なコンポーネント、サービスなどを作成するのに非常に役立ちます。このガイドでは、Angular で TypeScript デコレータを使用する方法を説明し、使用方法を理解するのに役立つ例を示します。

TypeScript デコレータとは何ですか?

デコレータは、クラスまたはクラスメンバーの動作を変更する関数です。Angular では、デコレータはコンポーネント、ディレクティブ、パイプ、および注入可能なサービスを定義するために使用されます。デコレータは、クラスにメタデータを適用する宣言的な方法を提供します。Angular は、コンポーネントのインスタンスの作成や依存関係の注入など、さまざまな目的でデコレータを使用します。

一般的な Angular デコレータ

Angular には、さまざまな目的で使用される組み込みデコレータがいくつかあります。以下は、最も一般的な Angular デコレータです。

@Component - Angular コンポーネントを定義します。
@Directive - Angular ディレクティブを定義します。
@Pipe - Angular パイプを定義します。
@Injectable - 他のコンポーネントまたはサービスに注入できるサービスを定義します。
@Input - プロパティを装飾してデータバインディング入力にします。
@Output - プロパティを装飾して、イベントバインディング出力にします。

@Component デコレータの使用

@Component デコレータは、Angular コンポーネントを定義するために使用されます。セレクター、テンプレート、スタイル、その他の構成など、コンポーネントに関するメタデータを提供します。

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

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

この例では、@Component デコレータは、「Hello, World!」を表示するテンプレートを持つ単純なコンポーネントを定義します。selector は、このコンポーネントに使用するカスタム HTML タグを指定します。

@Injectable デコレータの使用

@Injectable デコレータは、他のコンポーネントやサービスに注入できるサービスクラスを定義するために使用されます。これは、Angular の依存性注入システムの重要な部分です。

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

ここで、@Injectable デコレータは、DataService をアプリケーション全体で依存性注入に使用できるようにします。

@Input および @Output デコレータの使用

@Input および @Output デコレータは、Angular コンポーネントで入力プロパティと出力イベントを作成するために使用されます。これらは通常、コンポーネント通信に使用されます。

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

この例では、@Input デコレータは、親コンポーネントから子コンポーネントにデータを渡すために使用されます。@Output デコレータは、イベントを通じて子コンポーネントから親コンポーネントにデータを返すために使用されます。

カスタムデコレータの作成

Angular では、カスタムデコレータを作成して、クラス、メソッド、またはプロパティに特定の動作やメタデータを追加できます。以下は、単純なクラスデコレータの例です。

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

ここで、LogClass 関数は、クラスが定義されたときにコンソールにログを記録するカスタムデコレータです。@LogClass を MyService に適用すると、作成中にメッセージがログに記録されます。

結論

Angular のデコレータは、クラス、メソッド、プロパティ、およびパラメータにメタデータと動作を追加する強力な方法を提供します。 @Component、@Injectable、@Input、@Output などの組み込みデコレータの使用方法を理解することは、効果的な Angular 開発に不可欠です。さらに、アプリケーションの特定のニーズを満たすカスタムデコレータを作成して、開発プロセスに柔軟性を追加することもできます。

typescript デコレータ angular コンポーネント入力出力注入可能サービスカスタムメタデータ例 typescriptdecorators クラス関数