JavaScriptのProxyちょいまとめ

JavaScriptにはProxyというのがあるらしい

Honoの作者の方が、Xで「RPCがJSのProxyで動いている」といったつぶやきを見ました。JSのProxy...??と気になったので、少し調べてみました。

JavaScriptのProxy

Proxyって何

Proxy|MDN

Proxy オブジェクトにより別のオブジェクトのプロキシーを作成することができ、そのオブジェクトの基本的な操作に介入したり再定義したりすることができます。

JavaScriptのProxyは、オブジェクトに対する基本的な操作（プロパティの取得、設定、削除、関数の呼び出しなど）をインターセプトし、カスタマイズするためのメカニズムです。

ターゲットオブジェクトとハンドラーという2つの主要な要素から構成される

• ターゲットオブジェクト: 操作の対象となる元のオブジェクト。
• ハンドラー: 特定のトラップメソッドを持つオブジェクト。これらのメソッドが呼び出されることで、ターゲットオブジェクトへの操作をカスタマイズできます。

トラップメソッド

トラップメソッドとは、ターゲットオブジェクトへの特定の操作をインターセプトする関数です。

• get(target, property, receiver): プロパティの取得をインターセプトする
• set(target, property, value, receiver): プロパティの設定をインターセプトする
• deleteProperty(target, property): プロパティの削除をインターセプトする
• apply(target, thisArg, argumentsList): 関数呼び出しをインターセプトする
• ...etc

活用例

柔軟にいろいろできるので、こんな感じでライブラリで使用されています。

• Vue.jsのリアクティブシステム
• MobXの状態管理
• Immerによる不変データ構造の操作
• Apollo Clientのキャッシュ管理
• Svelteのリアクティブ宣言

まとめ

Proxyを使うことで、オブジェクトの操作をインターセプトして書き換えられます。近いうちにサンプルコードを作って実装イメージをつけていきたいと思います。実務での活用ポイントはあまり思いつかないですが。