Proxy

プロキシ（組み込みオブジェクト）

意味オブジェクト介入

Proxyとは？

Proxyオブジェクトは、他のオブジェクトの動作を制御するためのカスタム動作を定義するために使用されます。

Proxyの具体的な使い方

プロパティアクセスを監視するProxyの例

<button onclick='proxyExample()'>Proxy Example</button>
<div id='output'></div>
<script>
function proxyExample() {
  const target = { name: '山田太郎', age: 30 };
  const handler = {
    get: function(target, prop, receiver) {
      document.getElementById('output').innerHTML += 
        `プロパティ '${prop}' が取得されました。値: ${target[prop]}<br>`;
      return Reflect.get(...arguments);
    }
  };
  const proxiedTarget = new Proxy(target, handler);
  console.log(proxiedTarget.name);
  console.log(proxiedTarget.age);
}
</script>

この例では、'target'オブジェクトへのプロパティアクセスを'handler'を介して監視し、プロパティが読み取られるたびにその情報をページ上に表示します。ボタンをクリックすると、Proxyを通じてプロパティにアクセスし、その過程を可視化できます。

バリデーションを行うProxyの例

const validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('年齢は整数である必要があります。');
      }
      if (value < 0 || value > 150) {
        throw new RangeError('年齢は0から150の間である必要があります。');
      }
    }
    obj[prop] = value;
    return true;
  }
};

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

try {
  person.age = 30;
  console.log(person.age); // 30
  person.age = 'young';  // エラー
} catch (e) {
  console.error(e.message);
}

try {
  person.age = 200;  // エラー
} catch (e) {
  console.error(e.message);
}

👇出力結果

30
年齢は整数である必要があります。
年齢は0から150の間である必要があります。

この例では、Proxyを使用してオブジェクトのプロパティ設定時にバリデーションを行っています。'age'プロパティに対して、整数であることと0から150の範囲内であることを確認しています。

Proxyに関するよくある質問

Q. Proxyとは何ですか？

A. Proxyは、オブジェクトの基本的な操作（プロパティの検索、代入、列挙、関数呼び出しなど）をカスタマイズするためのオブジェクトです。これにより、オブジェクトの動作を変更したり、拡張したりすることができます。

Q. Proxyの使用例を教えてください。

A. Proxyの一般的な使用例には、バリデーション、ログ記録、プロパティの遅延読み込み、オブジェクトの変更の追跡、API呼び出しの抽象化などがあります。例えば、オブジェクトのプロパティにアクセスする際に自動的にログを記録したり、特定の条件下でのみプロパティの変更を許可したりすることができます。

Q. ProxyとObject.defineProperty()の違いは？

A. 両者はオブジェクトの動作をカスタマイズできますが、Proxyの方がより柔軟です。Proxyは新しいオブジェクトを作成し、元のオブジェクトを変更せずに動作を制御できます。また、Proxyはより多くの操作（例：in演算子、delete演算子）をトラップできます。一方、Object.defineProperty()は既存のオブジェクトを直接変更し、主にgetterとsetterの定義に使用されます。

JavaScriptを勉強するのにおすすめな問題集アプリの紹介

楽しくプログラミングを学ぶことで、プログラミングの理解度が深まります。『JavaScript問題集』は、楽しくJavaScriptを学ぶのに最適なアプリです。AIが出題する問題に答えていくことで、自然とJavaScriptの理解度が深まります。

AppStoreからダウンロード：https://apps.apple.com/jp/app/id6737941570

JavaScriptのProxyについても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのProxyやdate.getHours()、string.repeat()、date.setTime()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。