デコレーター入門

TypeScriptのデコレーターは、メタデータを追加したり、クラス、メソッド、プロパティの動作を変更したりできる特殊な関数です。

開発を簡略化するために、Angularなどのフレームワークでよく使われます。

デコレーターの仕組み

デコレーターは、クラスまたはそのメンバー（メソッド、プロパティなど）に適用する関数です。

たとえば、Angularの@Componentは、クラスをコンポーネントとして定義するためのメタデータを追加するデコレーターです。

組み込みデコレーターの使用

TypeScriptには、次のような組み込みデコレーターがあります:

• @readonly: プロパティを読み取り専用にします。
• @enumerable: プロパティを列挙可能にするかどうかを制御します。

これらのデコレーターを使うと、プロパティやメソッドの動作を直接変更できます。

シンプルなデコレーターの作成

独自のデコレーターを作成して、メッセージをログに記録したり、機能を追加したりできます:

プロパティに適用します: @Log。

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

クラスデコレーター

クラスデコレーターは、クラス全体の動作を変更または拡張するために使用します:

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

クラスに適用します: @SimpleDecorator。

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

メソッドデコレーター

メソッドデコレーターは、クラスメソッドの動作を変更します:

メソッドで使用します: @LogMethod。

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

Angularでのデコレーターの使用

Angularでは、コンポーネントにメタデータを追加するためにデコレーターを多用します:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

@Componentデコレーターによって、クラスがAngularコンポーネントとして定義されます。

デコレーターを使用する際のベストプラクティス

デコレーターを使用する際は、次の点に注意してください:

• シンプルで、目的を絞ったものにしてください。
• 複雑なロジックではなく、メタデータに使用してください。
• 可能な場合は組み込みデコレーターを活用して、時間を節約してください。

おめでとうございます！

TypeScriptでデコレーターがどのように動作し、コードの変更や拡張にどのように利用できるかを学びました。デコレーターを使って実験を続け、プロジェクトでの活用方法を身につけていきましょう。