JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのProxy()オブジェクトとは？基本的な使い方とgetトラップの活用例を解説

Proxy()オブジェクトとは

ECMAScript 6（ES2015）で導入された新機能のひとつがProxy()オブジェクトです。Proxy()は、プロパティの参照・代入・列挙・関数の呼び出しなど、オブジェクトに対する基本操作に独自のカスタム動作を定義するために使用されます。

Proxy()を理解するうえで押さえておきたい、3つの重要なキーワードがあります。

  1. handler（ハンドラー）：トラップ（traps）を格納するプレースホルダーとなるオブジェクト。
  2. traps（トラップ）：プロパティへのアクセスを横取り（捕捉）し、独自の処理を差し込むための仕組み。
  3. target（ターゲット）：Proxyによって仮想化される対象となるオブジェクト。

構文

var p = new Proxy(target, handler);

通常のオブジェクトアクセスの例

次の例では、「p」というオブジェクトに「Name」と「Age」のプロパティが定義されています。ここで、オブジェクトに存在しないプロパティ「designation」へアクセスすると、出力結果のようにundefinedが返されます。

例

<html>
<body>
<script>
   var p = {
      Name: 'Ram kumar',
      Age: 27
   };
   document.write(p.Name);
   document.write("</br>");
   document.write(p.Age);
   document.write("</br>");
   document.write(p.designation);
</script>
</body>
</html>

出力結果

Ram kumar
27
undefined

Proxy()と「get」トラップでundefinedを回避する

Proxy()を利用すれば、この「undefined」の出力を防ぐことができます。Proxyは「get」トラップを使って、定義されていないプロパティへのアクセスを捕捉します。Proxy内で定義されたハンドラーは、ターゲットオブジェクトと要求されたキーの名前を「get」トラップへ渡します。

次の例では、オブジェクト「p」にはもともと「designation」や「role」といったプロパティは存在しません。しかしProxy()を導入することで、オブジェクトとそのプロパティへのアクセスが「get」トラップによって捕捉され、値が割り当てられていないプロパティに対しては代わりの文字列が返されるようになります。

例

<html>
<body>
<script>
   var p = {
      Name: 'Ram kumar',
      Age: 27
   };
   var handler = {
      get: function(target, prop) {
         return prop in target ? target[prop] : 'Content developer';
      }
   };
   var prox = new Proxy(p, handler);
   document.write(prox.Name);
   document.write("</br>");
   document.write(prox.Age);
   document.write("</br>");
   document.write(prox.designation);
   document.write("</br>");
   document.write(prox.role);
</script>
</body>
</html>

出力結果

Ram kumar
27
Content developer
Content developer

このように、Proxy()の「get」トラップを活用すれば、存在しないプロパティへのアクセス時にデフォルト値を返すなど、オブジェクトの振る舞いを柔軟に制御できます。なお、Proxyには「get」のほかにも、代入を監視する「set」、プロパティの存在確認を扱う「has」、削除処理を捕捉する「deleteProperty」など、多彩なトラップが用意されています。

  1. JavaScriptでのSentryの使い方とは？主な機能をわかりやすく解説

    Sentryとは？JavaScript開発を支えるデバッグ・監視ツールSentryは、本番環境（プロダクション）で稼働しているコードを追跡できる、JavaScript向けの総合的なデバッグ・監視ツールパッケージです。開発環境では再現しないエラーや、ユーザーの端末上でのみ発生する不具合を効率的に把握できるため、Webアプリケーションの品質向上に欠かせない存在となっています。Sentryが提供する主な機能は以下の通りです。1. 環境情報と使用状況の記録によるバグ再現エラー発生時のOS、ブラウザ、デバイス、URLなどの環境情報やユーザーの操作状況を自動的に記録します。これにより、報告だけでは再現が難

  2. JavaScriptのProxy（プロキシ）オブジェクトとは？使い方をサンプルコードで解説

    Proxyオブジェクトとは JavaScriptのProxy（プロキシ）オブジェクトは、元のオブジェクトや関数をラップ（包み込む）し、プロパティへのアクセスや関数の呼び出しなどの基本的な操作に対して、独自のカスタム処理を挟むための仕組みです。 Proxyは次の2つの引数を受け取ります。 target：操作対象となる元のオブジェクト handler：カスタム動作（トラップ）を定義するオブジェクト handler内では、プロパティ取得時に呼ばれるget、プロパティ設定時に呼ばれるsetなど、さまざまなトラップを定義できます。 サンプルコード 以下は、Proxyオブジェクトを使って、オブジェク