Proxy と Reflect は何に使うのですか？

Question

Accepted Answer

**Proxy** はオブジェクトをラップし、その上での基本操作（get、set、has、delete など）を、**トラップ（trap）**と呼ばれるハンドラ関数を通じて**インターセプト（横取り）**できるようにします。**Reflect** はそれらの操作のデフォルト版を関数として提供するので、トラップが通常の動作へクリーンに転送できます。

```js
const user = { name: "Ann" };

proxied.name;     // logs "read name" → "Ann"
proxied.age = -5; // throws — intercepted by the set trap
```

## 実際のユースケース

- **リアクティビティ**: Vue 3 のリアクティビティシステムは state を Proxy でラップし、プロパティの読み書きのタイミングを正確に把握して、それに応じて再レンダリングします。
- **バリデーション／アクセス制御**: プロパティ書き込みにルールを強制する。
- **ロギング／計装**: デバッグのためにアクセスをトレースする。
- **デフォルト値／仮想プロパティ**: 存在しないキーに対して計算された値を返す。
- **負の配列インデックス**、イミュータブルなラッパー、メソッドを動的に生成する API クライアントなど。

## なぜ Reflect が存在するのか

トラップの内部では*デフォルト*の操作を実行する必要があります。（`target[key]` の代わりに）`Reflect.get/set` を使うと、継承された getter/setter に対する正しい `receiver` のようなエッジケースを適切に処理できます。

## なぜ重要なのか

Proxy は、フレームワークが依存する強力なメタプログラミングを可能にします。

トレードオフは**オーバーヘッド**です — すべての操作があなたのトラップを通るため — したがって、日常的なオブジェクトに対してではなく、インターセプトが本当に見合う場面で使いましょう。