JavaScript 注釈: デコレータが注釈構文をクラスに追加する方法

1. デコレータの提案前の注釈
2. デコレーター入門
3. デコレータの構文
4. デコレータの評価
5. デコレーターの呼び出し
6. デコレータの例

この記事では、現在の JavaScript で注釈がどのように見えるかについて説明します。 私たちがアノテーションと呼ぶのは、Java のような言語の古典的なアノテーションとは違うからです。

ただし、2022 年 4 月 24 日現在、Decorators はまだステージ 3 の提案です。 これは、JavaScript でデコレーターがまだ使用できないことを意味します。

ただし、それらが利用可能になると、クラス宣言の注釈構文を追加する方法が提供されます。

デコレータの提案前の注釈

JavaScript のデコレータの提案より前に、注釈に最も近いのは "use script" ディレクティブです。 例えば：

(function() {
'use strict';
// code in strict mode
})();

上記のコードでは、"use strict" ディレクティブにより、関数内で厳密モードが実行されます。

デコレーター入門

デコレータの提案 によると、デコレータは、外部の動作を変更することなく、メタプログラミングや値への機能追加に使用できる関数です。 彼らは次のことに取り組みます。

1. クラス
2. クラスメソッド
3. クラスフィールド
4. クラスアクセサ
5. クラスの自動アクセサー

これらの要素でデコレーターを呼び出した後、デコレーターは次のことを実行できます。

1. デコレーターは、メソッドを別のメソッドに、またはクラスを別のクラスに置き換えることができます。
2. デコレーターは、アクセサー関数を介して装飾された値へのアクセスを提供できます。
3. デコレータは、装飾したい値を初期化できます。

デコレータの構文

Decorators の提案は現在、ステージ 3 にあります。 ただし、ステージ 2 の構文を使用します。したがって、デコレーターの構文には以下が適用されます。

1. 式は一連の変数に制限されます。 また、角かっこ表記ではなく、ドット表記でプロパティ アクセスを行います。

   ただし、任意の式が必要な場合は、@(expression) を使用できます。

2. クラス式とクラス宣言をデコレートできます。

3. クラス デコレータは export と default の後にあります。

デコレータの評価

デコレータの評価は、次の手順に従います。

1. デコレーター式は、計算されたプロパティ名で評価されます。
2. デコレータは、クラス定義中に 関数と呼ばれます。 これは、メソッドの評価後、プロトタイプとコンストラクターの前に発生します。
3. デコレーターは、コンストラクターとプロトタイプを一度に変更します。

デコレーターの呼び出し

デコレーターを呼び出すと、2つのパラメーターを受け取ります。 これらのパラメータは次のとおりです。

1. 飾りたい価値。 クラス フィールドの場合、この値は未定義です。
2. 装飾される値に関する情報を含むコンテキスト オブジェクト。

デコレータの例

以下は、Decorator 提案の類似コード に触発されたサンプル コードです。

export function log(target) {
  if (typeof target.descriptor.value === 'function') {
    const original = target.descriptor.value;
    target.descriptor.value = function(...args) {
      console.log('arguments: ', args);
      const result = original.apply(this, args);
      console.log('result: ', result);
      return result;
    }
  }
  return target;
}

その後、デコレータは次のように機能します。

import {log} from './decorators.js';

export default class DogSounds {
  @log
  barkSound() {
    console.log('woof');
  }

  @log
  say(to_say) {
    console.log(to_say)
    return 'The dog said ' + to_say
  }
}

上記のコードから、@ 記号を介したデコレータの適用は、Java などの言語の注釈に似ていることがわかります。

1. JavaScript でデコレータを使用できますか?

   いいえ。2022 年 4 月の時点では、まだステージ 3 の ECMA 提案であるためです。

2. JavaScript でデコレータを使用できるのはいつですか?

   デコレータの提案がステージ 4 に達し、ECMAScript の次の版に含まれると、JavaScript でデコレータを使用できるようになります。