※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。

Proxyとは

ProxyはECMAScript 2015から追加されたオブジェクトで、オブジェクトが持つ機能をラップすることにより、オブジェクトの機能をカスタマイズすることができます。

Proxyの関連用語

Proxyを知る上で必要な用語です。

handler
・・・トラップを入れるためのオブジェクトで、プレースホルダ的な扱いをされます。

trap
・・・Proxyがプロパティへのアクセスを実装するためのメソッド。

target
・・・プロキシするオブジェクト。

invariant
・・・オブジェクトの機能をカスタマイズした時に変更しない不変的な条件のこと。

Proxyの使い方

基本的な構文は以下の通りです。

let proxy = new Proxy(target, handler);

targetにはラップしたいオブジェクトまたは関数を定義します。

handlerには関数をプロパティとして持つオブジェクトを定義します。オブジェクトに定義された関数がProxyの操作が行われた時の挙動となります。
handlerの中でラップ前に本来の挙動を呼び出したい時はReflectというオブジェクトを呼び出します。

例

オブジェクトに渡された値にバリデーションをかけるような簡単な例です。

const handler = {
  get: function(target, prop) {
    if (target[prop] === 'foo') {
      return target[prop];
    }

    return 'Default Value';
  }
};

const proxy = new Proxy({}, handler);
proxy.foo = 'foo';
proxy.bar = 'bar';

console.log(proxy.foo); // foo
console.log(proxy.bar); // Default Value

getトラップが実装されたhandlerオブジェクトを定義し、Proxyオブジェクトである{}（空のオブジェクト）がオブジェクトのプロパティを取得した際に、取得された値によって条件分岐するという処理になっています。

所感

JavaScriptの仕様で用意されていないオブジェクトを独自に実装したい時や本来のオブジェクトの挙動を変更したいときなどに便利そうですね。

#参考

• MDN - Proxy