最近、ReactやVueなどVirtualDOMを使った技術がトレンドになっています。VirtualDOMの特徴として、DOMの状態を管理から開放されて、変数を変えるだけで自動的に表示に反映される仕組みがあります。
変数の変更を感知し、表示に反映するために使われるのがProxyになります。VirtualDOMに限らず使える場面が多いオブジェクトなので、ぜひ使い方を覚えましょう。
基本的な使い方
Proxyはオブジェクトまたは配列に対してしか使えません。単なる数字や文字列では使えないので注意してください。以下はごく基本的なコードです。
まずProxyは既存の変数にとハンドラーを引数に取ります。
handlerはget/setを基本としたオブジェクトになります。値を追加した時にset、アクセスした際にgetがコールされます。targetは元のオブジェクト（obj）で、nameはアクセスしようとしたメソッド名（またはキー）になります。そしてvalueとして適用しようとした値が送られます。
getはターゲットと実行するメソッド名（またはキー）が送られてきます。
配列の場合
Proxyはオブジェクトだけでなく配列にも使えます。
使い方はオブジェクトの時と変わりません。ただし、配列の中にオブジェクトがあった場合、そのオブジェクトの中を変えても通知されないので注意が必要です。
他のオブジェクト
他のオブジェクト（関数、クラス）などに対してもProxyが使えます。ただしクラスなどでインスタンスに対して適用したい場合は、クラスではなくインスタンスに対してProxyを適用する必要があります。
Proxyを使うと、データを更新した時に関連するデータや表示をまとめて更新するといったことが簡単にできます。また、値を判別して例外を出すことで入力チェックのように使うこともできます。
ぜひProxyを使って関連する処理をまとめてみてください。