[JavaScript] Proxyオブジェクトを利用して、オブジェクトの変更を簡単に検知する

2020/8/6 javascript

　オブジェクトの変更をトリガーになにかをしたいとき、愚直にsetterを書いたり、rxjsを使ったりすることが多かったですが、比較的簡単な書き方をご紹介します。

Proxyを使う

　ビルトインオブジェクトのProxyは、オブジェクトのインターセプトを行うのに非常に便利なオブジェクトです。

　試しに、オブジェクトに値が書き込まれたら、consoleにkeyとvalueを出力する、というプログラムを書いてみましょう。

const config = new Proxy({}, {
    set(obj, prop, newval) {
        console.log(`${prop}: ${newval}`);
        obj[prop] = newval;
        return true;
      }
    });
config.test = "Proxy Test !!";  // -> test: Proxy Test !!

　setterに引っ掛けるだけで簡単に変更を検知し、処理を挿入することができました。もちろんgetも同様に検知することができます。

注意点

　比較的新しいオブジェクトなので、ブラウザの対応状況には注意が必要です。とはいっても、互換性をご覧頂ければわかるとおり、InternetExplorerを未だにサポートするような要件でなければ、特に気にする必要はありません。

　Safariが一部機能をサポートしていません（handler.getPrototypeOf）が、こちらも特に問題はないでしょう。

まとめ

　JavaScriptは特に、こういった新しいオブジェクトが日々生まれています。知っているだけでもかなり便利かつ簡単に使えるものが多いので、是非情報収集してみてください。