Proxyオブジェクトを使ってみよう

2021.03.31.水
JavaScript

溝畑です。
今日はProxyオブジェクトについて。

JavaScript書いていて、とくにテンプレートとか使わず、HTML組み立てて差し替えるみたいなケースありませんか??
そのとき、とくにデータを精査せずそのまま組み立てると、思わぬところで表示がnullになったり・・・。
その度に条件つけて空文字にしてあげたり、結構面倒なことがあります。
(APIで統一してくれという話でもありますが)

そんな状況、Proxy使うと結構楽になりますよというお話です。

Proxyオブジェクト

使い方。


targetで指定したオブジェクトにhandlerでオブジェクトに対してどうするのか、トラップというメソッドを定義していきます。


この例だと、tempの時は後ろに「度」を付けています。
このようにオブジェクトにアクセスされたときの処理を書いておけます。

使い所

センサーから取得した値で、何らかの事情でエラー値が入っていることがある・・・ような状況を考えます。
(エラーのときは文字列で「E」、普通は数字が入ってる想定)
それをliで表示するようなコードです。


単純に書くと、こんな感じで三項演算子入れる感じになるのではないでしょうか?
これだけでなく、さらに条件が増えてくると、見栄えが悪くなっていきます。。

そこで処理をProxyに任せてみましょう。


こんな感じで、HTMLを組み立てるところがスッキリします。
さらに「欠損値にはnullが入るから、空で表示させてほしい」なんて要望がきたとしても、getの中に書いてしまえば、HTMLを組み立てている部分には影響しません。

予想外のデータが飛び込んでくることが多い場合には結構有用だと思ってます。

このようなパターンで困っていることがあれば、活用してみてください!

-->