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