JavaScript/Proxy

Proxy

Proxy は、JavaScript でオブジェクトに対する操作（プロパティの取得、設定、削除など）をカスタマイズできる仕組みです。これにより、オブジェクトの振る舞いを柔軟に制御することができます。Proxy を使用すると、監視、検証、ロギング、仮想プロパティなどの機能を実現できます。

構文

const proxy = new Proxy(target, handler);

target: プロキシされるオブジェクト（オリジナルのオブジェクト）。
handler: ターゲットの操作をトラップ（捕捉）するメソッドを定義するオブジェクト。

説明

Proxy は以下のような操作をトラップするためのメソッドを提供します。これらを handler オブジェクトに実装することで、操作をカスタマイズできます。

トラップメソッド	説明
`get(target, property, receiver)`	プロパティの取得（例: `proxy.property`）。
`set(target, property, value, receiver)`	プロパティの設定（例: `proxy.property = value`）。
`deleteProperty(target, property)`	プロパティの削除（例: `delete proxy.property`）。
`apply(target, thisArg, argumentsList)`	関数の呼び出し（例: `proxy()`）。
`construct(target, argumentsList, newTarget)`	コンストラクタの呼び出し（例: `new proxy()`）。
その他	`has`, `ownKeys`, `defineProperty`, `getOwnPropertyDescriptor` などのトラップも使用可能。

使用例

// プロパティの取得を監視する Proxy
const target = { name: 'Alice' };
const handler = {
  get(target, property) {
    console.log(`Getting property: ${property}`);
    return target[property];
  }
};
const proxy = new Proxy(target, handler);

console.log(proxy.name); // "Getting property: name", "Alice"

この例では、get トラップを定義し、プロパティが取得された際にログを出力しています。

// プロパティの設定を制御する Proxy
const target = { age: 25 };
const handler = {
  set(target, property, value) {
    if (typeof value !== 'number') {
      throw new TypeError('The value must be a number');
    }
    target[property] = value;
    return true;
  }
};
const proxy = new Proxy(target, handler);

proxy.age = 30; // 成功
proxy.age = 'thirty'; // TypeError: The value must be a number

この例では、set トラップを定義し、プロパティに数値以外の値を設定しようとするとエラーをスローします。

特徴と注意点

柔軟性: Proxy を使用すると、標準的なオブジェクト操作に対してカスタムロジックを簡単に追加できます。
パフォーマンス: Proxy は便利ですが、過度に使用するとパフォーマンスが低下する可能性があります。
非互換性: 一部のトラップは、厳格モードの制約やブラウザ間の実装差により、意図した動作をしない場合があります。

使用例: 仮想プロパティ

Proxy を使用すると、存在しないプロパティに対して動的に値を生成することができます。

const target = {};
const handler = {
  get(target, property) {
    return property in target ? target[property] : `Hello, ${property}!`;
  }
};
const proxy = new Proxy(target, handler);

console.log(proxy.world); // "Hello, world!"

この例では、プロパティが存在しない場合にデフォルトのメッセージを返します。

参考

JavaScript/Proxy

目次

Proxy

構文

説明

使用例

特徴と注意点

使用例: 仮想プロパティ

関連項目

参考