プロキシパターン

Proxy オブジェクトを使用することで、特定のオブジェクトとの相互作用をより細かく制御できます。プロキシオブジェクトは、値の取得や値の設定など、オブジェクトと相互作用するときの動作を決定することができます。

使用する場合

• オブジェクトのアクセスに検証、フォーマット、通知、またはデバッグを追加する必要がある場合に使用します
• オブジェクトのプロパティの get と set を制御および中断する場合に役立ちます

使用しない場合

• パフォーマンスが重要なホットパスで、プロパティアクセスのたびにプロキシのオーバーヘッドが問題となる場合
• シンプルな getter/setter メソッドまたは Object.defineProperty で同じ検証を少ないインダイレクションで実現できる場合
• ターゲットオブジェクトへのアクセスが稀で、中断ロジックが不要な場合

説明

• get と set トラップを定義するハンドラーオブジェクトを使って Proxy を作成します
• ハンドラー内で Reflect オブジェクトを使用して、プロパティアクセスと変更をより簡潔に行います
• set トラップに検証ロジックを追加して、データの整合性を確保します
• パフォーマンスが重要なコードパスではプロキシを使用しないようにしてください。オーバーヘッドが増加します

詳細

一般的に、プロキシは誰かの身代わりを意味します。その人に直接話しかけるのではなく、あなたが到達しようとしていた人を代理するプロキシの人に話しかけます。JavaScript でも同じことが起こります。ターゲットオブジェクトと直接相互作用するのではなく、Proxy オブジェクトと相互作用します。

John Doe を表す person オブジェクトを作成しましょう。

const person = {
  name: "John Doe",
  age: 42,
  nationality: "American",
};

このオブジェクトと直接相互作用するのではなく、プロキシオブジェクトと相互作用したいとします。JavaScript では、Proxy の新しいインスタンスを作成することで、簡単に新しいプロキシを作成できます。

const person = {
  name: "John Doe",
  age: 42,
  nationality: "American",
};

const personProxy = new Proxy(person, {});

Proxy の 2 番目の引数は、ハンドラー を表すオブジェクトです。ハンドラーオブジェクトでは、相互作用の種類に基づいて特定の動作を定義できます。プロキシハンドラーに追加できる 多くのメソッド がありますが、最も一般的な 2 つは get と set です：

• get: プロパティへの アクセス を試みるときに呼び出されます
• set: プロパティの 変更 を試みるときに呼び出されます

person オブジェクトと直接相互作用するのではなく、personProxy と相互作用します。

personProxy プロキシにハンドラーを追加しましょう。プロパティを変更しようとして Proxy の set メソッドを呼び出すときは、プロキシがプロパティの以前の値と新しい値をログに出力するようにします。プロパティへのアクセスを試みて Proxy の get メソッドを呼び出すときは、プロキシがキーと値を含むより読みやすい文をログに出力するようにします。

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    console.log(`The value of ${prop} is ${obj[prop]}`);
    return obj[prop];
  },
  set: (obj, prop, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    obj[prop] = value;
    return true;
  },
});

name プロパティにアクセスするとき、プロキシはより読みやすい文を返しました：The value of name is John Doe。

age プロパティを変更するとき、プロキシはこのプロパティの前の値と新しい値を返しました：Changed age from 42 to 43。

プロキシは 検証 を追加するのに役立ちます。ユーザーが person の年齢を文字列値に変更したり、空の名前を指定したりするべきではありません。または、ユーザーがオブジェクトに存在しないプロパティにアクセスしようとしている場合は、ユーザーに通知する必要があります。

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    if (!obj[prop]) {
      console.log(
        `Hmm.. this property doesn't seem to exist on the target object`
      );
    } else {
      console.log(`The value of ${prop} is ${obj[prop]}`);
    }
    return obj[prop];
  },
  set: (obj, prop, value) => {
    if (prop === "age" && typeof value !== "number") {
      console.log(`Sorry, you can only pass numeric values for age.`);
    } else if (prop === "name" && value.length < 2) {
      console.log(`You need to provide a valid name.`);
    } else {
      console.log(`Changed ${prop} from ${obj[prop]} to ${value}.`);
      obj[prop] = value;
    }
    return true;
  },
});

プロキシは、person オブジェクトを不正な値で変更していないことを確認し、データの純粋性を保つのに役立ちます！

Reflect

JavaScript は、プロキシを使用するときにターゲットオブジェクトを簡単に操作できるようにする Reflect という組み込みオブジェクトを提供します。

以前は、ブラケット記法で値を直接取得または設定してプロキシ内のターゲットオブジェクトのプロパティを変更およびアクセスしようとしていました。代わりに、Reflect オブジェクトを使用できます。Reflect オブジェクトのメソッドは、ハンドラーオブジェクトのメソッドと同じ名前です。

obj[prop] 経由でプロパティにアクセスしたり、obj[prop] = value 経由でプロパティを設定したりする代わりに、Reflect.get() と Reflect.set() 経由でターゲットオブジェクトのプロパティにアクセスまたは変更できます。メソッドはハンドラーオブジェクトのメソッドと同じ引数を受け取ります。

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    console.log(`The value of ${prop} is ${Reflect.get(obj, prop)}`);
    return Reflect.get(obj, prop);
  },
  set: (obj, prop, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    return Reflect.set(obj, prop, value);
  },
});

Reflect オブジェクトを使用することで、ターゲットオブジェクトのプロパティに簡単にアクセスし、変更できます。

トレードオフ

プロキシは、オブジェクトの動作を制御するための強力な方法です。プロキシはさまざまなユースケースを持つことができます。検証、フォーマット、通知、またはデバッグに役立つことができます。

Proxy オブジェクトを過度に使用したり、各ハンドラーメソッド呼び出しで重い操作を実行したりすると、アプリケーションのパフォーマンスに悪影響を与える可能性があります。パフォーマンスが重要なコードではプロキシを使用しないようにすることが最善です。

ソース

• patterns.dev/vanilla/proxy-pattern

参考資料

• Proxy - MDN
• JavaScript Proxy - David Walsh
• Awesome ES2015 Proxy - GitHub @mikaelbr
• Thoughts on ES6 Proxies Performance - Valeri Karpov