0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Javascriptにおけるデコレータとは?

Posted at

JavaScriptにおけるデコレータは、関数やクラス、メソッドなどの動作を修飾するための仕組みです。デコレータは、他の関数やクラスに適用され、その処理を変更、拡張、またはラップするために使用されます。これにより、コードの再利用性やメンテナンス性を向上させることができます。

デコレータは、通常は関数として定義され、対象となる関数やクラスの定義の前に「@デコレータ名」の形式で記述されます。デコレータが適用された対象に対して、あらかじめ定義された処理が自動的に適用されるという仕組みです。

JavaScriptにおけるデコレータのサンプル

function logDecorator(target, name, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Calling ${name} with arguments: ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`${name} returned: ${result}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @logDecorator
  add(a, b) {
    return a + b;
  }
}

const calculator = new Calculator();
console.log(calculator.add(2, 3)); // This will log the arguments and result of the add method.

上記の例では、logDecorator デコレータが add メソッドに適用されています。デコレータはメソッドが呼び出されるたびに、メソッドの引数と戻り値をログ出力する処理を追加します。

デコレータは、ログ出力以外にも、認証、キャッシュ、パフォーマンス計測などの用途に使用されることがあります。一般的には、コードの再利用性と可読性を高めるために、特定の横断的な機能を関数やクラスに適用する際に利用されます。

Decorator におけるdescriptorとは?

デコレータにおける descriptor は、JavaScriptで関数やメソッドのプロパティを表すオブジェクトです。descriptor オブジェクトは、特定のプロパティの属性や動作を定義します。

descriptor オブジェクトは、通常以下のプロパティを持ちます。

  1. value: プロパティが関数の場合、関数本体がここに格納されます。
  2. writable: プロパティが書き込み可能かどうかを示すブール値です。
  3. enumerable: プロパティが列挙可能かどうかを示すブール値です。
  4. configurable: プロパティが変更可能かどうかを示すブール値です。
  5. get: ゲッターメソッドを指定します。
  6. set: セッターメソッドを指定します。

デコレータを使用する際に、デコレータ関数は通常、デコレートされる対象(関数やメソッド、クラス)の動作を変更するために descriptor オブジェクトを受け取り、そのプロパティを操作します。特にメソッドデコレーションの場合、descriptor.value に元のメソッドの関数本体が格納されており、デコレータはこの関数を変更、拡張、または置き換えるために descriptor.value を操作します。

先ほどの例でも示したように、デコレータが関数やメソッドの処理を変更する場合、デコレータ関数は descriptor オブジェクトを引数として受け取り、その中のプロパティを操作して新しい動作を定義します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?