ドキュメント価格ブログ
お問い合わせ
ログイン無料で新規登録
Back to Tech Articles

TypeScript デコレータの理解と実装によるコードパターンの強化

8月 12, 2025
# Misc

Wenhao Wang

Dev Intern · Leapcell

この記事はEnglish、한국어、Deutschでも利用できます
Cover of "TypeScript デコレータの理解と実装によるコードパターンの強化"

はじめに

進化し続けるモダンなWeb開発の状況において、クリーンで保守可能でスケーラブルなコードを作成することは最優先事項です。アプリケーションの複雑さが増すにつれて、開発者はコードベースのさまざまな部分にわたって、メソッド呼び出しのロギング、入力の検証、アクセス制御の強制などの繰り返しタスクに遭遇することがよくあります。従来のオブジェクト指向プログラミングは、継承やコンポジションなどのメカニズムを提供しますが、これらは単体でのコードや絡み合った依存関係につながることがあります。そこで、TypeScript デコレータは強力でエレガントなソリューションとして登場します。これらは、元の実装を変更することなく、メタデータを追加したり、クラス、メソッド、プロパティ、パラメータの動作を変更したりするための宣言的な方法を提供します。デコレータを理解し活用することで、コードの可読性を大幅に向上させ、冗長性を削減し、より堅牢なアーキテクチャパターンを促進することができます。この記事では、TypeScript デコレータの背後にある基本的な概念、その根本的な仕組み、そしてロギングと権限チェックの説得力のある例を通じて、それらの実際的な適用方法を検証します。

TypeScript デコレータのコアコンセプト

詳細に入る前に、デコレータに関連するコア用語を明確に理解しましょう。

  • デコレータ: クラス宣言、メソッド、アクセサ、プロパティ、またはパラメータにアタッチできる特別な種類の宣言です。デコレータは、@記号の後にファンクション名が続きます。
  • デコレータファクトリ: 実行時にデコレータによって呼び出される式を返すファンクションです。これにより、デコレータに引数を渡すことができます。
  • ターゲット: デコレータが適用されるエンティティ（クラスコンストラクタ、メソッドディスクリプタ、プロパティディスクリプタ、またはパラメータインデックスなど）。
  • プロパティディスクリプタ: プロパティの属性（value、writable、enumerable、configurable など）を記述するオブジェクト。これは、メソッドおよびアクセサデコレータに関連します。

デコレータは、宣言時（コードが実行するときではなく、コードが定義されるとき）に、デコレートしているものに応じて特定の引数で実行されるファンクションです。この実行順序は、それらがコードをどのように変更するかを理解する上で重要です。

デコレータの内部動作

根本的なレベルでは、TypeScript がデコレータを検出すると、コンパイル中にデコレートされたコードを変換します。この変換は、本質的にデコレータファンクションで定義されたロジックを使用してターゲットをラップまたは変更します。

実行順序を次に示します。

  1. パラメータデコレータが最初に、各パラメータに適用されます。
  2. メソッド、アクセサ、またはプロパティデコレータが次に、それらが現れる順序で適用されます。
  3. クラスデコレータが最後に適用されます。

同じターゲット上の複数のデコレータは、下から上に向かって適用されます。つまり、宣言に最も近いデコレータが最初に適用され、その結果が次のデコレータに渡されます。

デコレータの実装：ステップバイステップガイド

デコレータはファンクションとして定義できます。このファンクションのシグネチャは、デコレートするものによって異なります。デコレータサポートを有効にするには、tsconfig.json に以下が含まれていることを確認してください。

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true // 基本的なデコレータには必須ではありませんが、リフレクションに便利です。
  }
}

クラスデコレータ

クラスデコレータは、クラスのコンストラクタファンクションを唯一の引数として受け取ります。クラス定義を観察、変更、または置き換えることができます。

function ClassLogger(constructor: Function) {
  console.log(`Class: ${constructor.name} was defined.`);
  // ここにプロパティ、メソッドを追加したり、コンストラクタを置き換えたりできます。
  // デモンストレーションのために、ログを記録するだけにします。
}

@ClassLogger
class UserService {
  constructor(public name: string) {}

  getUserName() {
    return this.name;
  }
}

const user = new UserService("Alice"); // 出力: Class: UserService was defined. (定義時に)

メソッドデコレータ

メソッドデコレータは 3 つの引数を受け取ります。

  1. target: クラスのプロトタイプ（インスタンスメソッドの場合）またはコンストラクタファンクション（静的メソッドの場合）。
  2. propertyKey: メソッドの名前。
  3. descriptor: メソッドのプロパティディスクリプタ。

メソッド定義を検査、変更、または置き換えることができます。

function MethodLogger(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value; // 元のメソッドを保存
  console.log(`Decorating method: ${propertyKey} on class: ${target.constructor.name}`);

  descriptor.value = function(...args: any[]) {
    console.log(`Calling method: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args); // 元のメソッドを呼び出す
    console.log(`Method: ${propertyKey} returned: ${JSON.stringify(result)}`);
    return result;
  };

  return descriptor; // 変更されたディスクリプタを返す
}

class ProductService {
  constructor(private products: string[] = []) {}

  @MethodLogger
  getProduct(id: number): string | undefined {
    return this.products[id];
  }

  @MethodLogger
  addProduct(name: string) {
    this.products.push(name);
    return `Added ${name}`;
  }
}

const productService = new ProductService(["Laptop", "Mouse"]);
productService.getProduct(0);
// 出力:
// Decorating method: getProduct on class: ProductService
// Decorating method: addProduct on class: ProductService
// Calling method: getProduct with arguments: [0]
// Method: getProduct returned: "Laptop"
productService.addProduct("Keyboard");
// 出力:
// Calling method: addProduct with arguments: ["Keyboard"]
// Method: addProduct returned: "Added Keyboard"

プロパティデコレータ

プロパティデコレータは 2 つの引数を受け取ります。

  1. target: クラスのプロトタイプ（インスタンスプロパティの場合）またはコンストラクタファンクション（静的プロパティの場合）。
  2. propertyKey: プロパティの名前。

プロパティデコレータはいくらか限定的です。宣言されているプロパティを観察できるだけですが、プロパティディスクリプタは直接変更できません。それらはディスクリプタを受け取らないためです。ただし、ファクトリとして使用されている場合は、新しいプロパティディスクリプタを返すことができます。より一般的には、メタデータを登録したり、アクセサファンクションを追加したりするために使用されます。

function PropertyValidation(target: any, propertyKey: string) {
  let value: string; // プロパティの内部ストレージ

  const getter = function() {
    console.log(`Getting value for ${propertyKey}: ${value}`);
    return value;
  };

  const setter = function(newVal: string) {
    if (newVal.length < 3) {
      console.warn(`Validation failed for ${propertyKey}: Value too short.`);
    }
    console.log(`Setting value for ${propertyKey}: ${newVal}`);
    value = newVal;
  };

  // プロパティをゲッターとセッターで置き換える
  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class User {
  @PropertyValidation
  username: string = "";

  constructor(username: string) {
    this.username = username;
  }
}

const user2 = new User("Bob");
// 出力: Setting value for username: Bob
user2.username; // 出力: Getting value for username: Bob
user2.username = "Al";
// 出力: Validation failed for username: Value too short.
// 出力: Setting value for username: Al
user2.username = "Charlie";
// 出力: Setting value for username: Charlie

パラメータデコレータ

パラメータデコレータは 3 つの引数を受け取ります。

  1. target: クラスのプロトタイプ（インスタンスメンバーの場合）またはコンストラクタファンクション（静的メンバーの場合）。
  2. propertyKey: メソッドの名前。
  3. parameterIndex: メソッドの引数リストにおけるパラメータのインデックス。

パラメータデコレータは通常、検証や依存性注入のためのパラメータのマーク付けなど、メタデータリフレクションに使用されます。パラメータの型や動作を直接変更することはできません。

function Required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
  // 必須パラメータに関するメタデータを保存
  const existingRequiredParameters: number[] = Reflect.getOwnMetadata("required", target, propertyKey) || [];
  existingRequiredParameters.push(parameterIndex);
  Reflect.defineMetadata("required", existingRequiredParameters, target, propertyKey);
}

// これには「reflect-metadata」のインストールが必要です: `npm install reflect-metadata --save`
// そしてインポートします: `import "reflect-metadata";`

class UserController {
  registerUser(
    @Required username: string,
    password: string,
    @Required email: string
  ) {
    console.log(`Registering user: ${username}, ${email}`);
    // ... ロジック
  }
}

// 例（デコレータの外側で、メタデータをチェックするため）
function validate(instance: any, methodName: string, args: any[]) {
  const requiredParams: number[] = Reflect.getOwnMetadata("required", instance, methodName);
  if (requiredParams) {
    for (const index of requiredParams) {
      if (args[index] === undefined || args[index] === null || args[index] === "") {
        throw new Error(`Parameter at index ${index} is required for method ${methodName}.`);
      }
    }
  }
}

const userController = new UserController();
try {
  userController.registerUser("JohnDoe", "password123", "john.doe@example.com");
  validate(userController, "registerUser", ["JohnDoe", "password123", "john.doe@example.com"]);
  userController.registerUser("", "pass", "email@test.com"); // これはファンクション呼び出しは成功しますが、カスタム検証ヘルパーは失敗します。
  validate(userController, "registerUser", ["", "pass", "email@test.com"]);
} catch (error: any) {
  console.error(error.message); // 出力: Parameter at index 0 is required for method registerUser.
}

実用的応用

デコレータは、コードベースのさまざまな部分にクロスカーティングな関心事を繰り返し追加する必要があるシナリオで輝きます。

メソッド呼び出しのロギング

上記の MethodLogger で実証されたように、デコレータはメソッドの実行、引数や戻り値を含めて、自動的にログを記録するのに優れています。これは、デバッグ、監視、監査に非常に役立ちます。

// 簡潔さのために上記 MethodLogger を再利用
// function MethodLogger(target: any, propertyKey: string, descriptor: PropertyDescriptor) { ... }

class AuthService {
  private users: { [key: string]: string } = { admin: "securepass" };

  @MethodLogger
  login(username: string, pass: string): boolean {
    if (this.users[username] === pass) {
      console.log(`User ${username} logged in successfully.`);
      return true;
    }
    console.warn(`Login failed for user ${username}.`);
    return false;
  }

  @MethodLogger
  changePassword(username: string, oldPass: string, newPass: string): boolean {
    if (this.users[username] === oldPass) {
      this.users[username] = newPass;
      console.log(`Password changed for user ${username}.`);
      return true;
    }
    console.error(`Failed to change password for user ${username}. Incorrect old password.`);
    return false;
  }
}

const authService = new AuthService();
authService.login("admin", "securepass");
authService.changePassword("admin", "securepass", "newSecurePass");
authService.login("admin", "wrongpass");

これにより、login や changePassword の呼び出しの詳細情報が、コアロジックを変更することなく自動的にログに記録され、ビジネスロジックをクリーンに保つことができます。

アクセス制御の強制（権限）

メソッドデコレータは、現在のユーザーが必要な権限を持っているかどうかのチェックによって、ロールベースのアクセス制御（RBAC）を実装するために使用できます。これは通常、必要なロールを渡すためにデコレータファクトリを必要とします。

enum UserRole {
  Admin = "admin",
  Editor = "editor",
  Viewer = "viewer"
}

// 現在のユーザーのロールをシミュレート
let currentUserRoles: UserRole[] = [UserRole.Editor];

function HasRole(requiredRole: UserRole) {
  return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function(...args: any[]) {
      if (!currentUserRoles.includes(requiredRole)) {
        console.warn(`Access Denied: User does not have the '${requiredRole}' role to call ${propertyKey}.`);
        return; // またはエラーをスロー
      }
      return originalMethod.apply(this, args);
    };

    return descriptor;
  };
}

class AdminDashboard {
  @HasRole(UserRole.Admin)
  deleteUser(userId: string) {
    console.log(`Admin deleting user ${userId}...`);
    // ... 実際の削除ロジック
  }

  @HasRole(UserRole.Editor)
  editArticle(articleId: string, content: string) {
    console.log(`Editor editing article ${articleId}: ${content.substring(0, 20)}...`);
    // ... 実際の編集ロジック
  }

  @HasRole(UserRole.Viewer)
  viewReports() {
    console.log("Viewer accessing reports...");
    // ... 実際のレポート表示ロジック
  }
}

const dashboard = new AdminDashboard();

console.log("Current User Roles:", currentUserRoles);

dashboard.deleteUser("user123");
dashboard.editArticle("article456", "New article content...");
dashboard.viewReports();

console.log("\nChanging user roles to Admin...");
currentUserRoles = [UserRole.Admin];
dashboard.deleteUser("user123");
dashboard.editArticle("article456", "Updated content..."); // Admin は Editor の権限も持っています（他の手段で構成されている場合）。
dashboard.viewReports();

この例では、HasRole デコレータがメソッドの実行を許可する前に、動的にユーザーの権限をチェックします。これにより、権限ロジックが集中化され、多くのメソッドに適用する際に再利用可能で簡単になります。

結論

TypeScript デコレータは、メタプログラミングのための強力でエレガントなメカニズムを提供し、開発者がクラスメンバーとパラメータを宣言的に拡張および変更できるようにします。ロギングやアクセス制御などのクロスカーティングな関心事をコアビジネスロジックから分離することで、デコレータは、よりクリーンで、保守しやすく、非常に再利用可能なコードを促進します。デコレータを採用することで、コードアーキテクチャと開発者の効率に大幅な改善をもたらすことができます。

Share this article

HackerNews

More Posts from Leapcell

cover

Rustのモジュラーランドスケープと効率的なプロジェクト管理のナビゲーション

cover

ViteとWebpack：モダンJavaScriptビルドツールの徹底比較

Popular Posts