javascript Proxy Object

【D3.js】proxyを使ってデータセットが変更されたらチャートを再描画する。

D3.jsを使ってデータビジュアライゼーションを作成するときにありがちな処理として、入力フォームの値が変更されたらチャートを再描画するというのがあります。入力フォームのchangeイベントが発火したらフォームの値を取得してredrawするわけですが、入力項目の数が増えてきたりすると管理が面倒になってきます。
できることなら、入力フォームのイベントとチャートの描画は疎結合にして、データセットが変更されたらチャートを描画するような処理にしたいところです。
ECMAScript 2015にて実装されたproxy機能を使うとオブジェクトの変更を簡単に監視することができるので、データセットの変更を監視して再描画処理を行うことができます。

※ Proxy Objectは2016/9/6現在、一部のブラウザでしか使用することができません。

Can I use Proxy Object

Can I use… Support tables for HTML5, CSS3, etc

簡単な使い方

proxyオブジェクトの機能については、MDNを参照していただくとして、最も単純なgeter,seterの監視処理を試してみます。

上記のコードは、dataオブジェクトにgeter,seterのトラップを定義したハンドラを束縛し、proxyオブジェクトを生成しています。
実際にブラウザのJavaScriptコンソール上でproxyオブジェクトを操作した結果が以下です。

proxy2016-09-06 10-20-19

proxyオブジェクトに新たなプロパティを設定するとdataオブジェクトにその内容が反映されているのが見て取れます。
同時にハンドラ内に記述されたconsole.logが実行されています。
proxyオブジェクトを使用することでオブジェクトに簡単にobserveを仕込むことができました。

D3サンプル

proxyハンドラ内にチャートを再描画する処理を挟み込み、データセットに変更があったらチャートを再描画するサンプルです。

D3 - use Proxy

bl.ocks – D3 use Proxy