溝畑です。
今日はProxyオブジェクトについて。
JavaScript書いていて、とくにテンプレートとか使わず、HTML組み立てて差し替えるみたいなケースありませんか？？
そのとき、とくにデータを精査せずそのまま組み立てると、思わぬところで表示がnullになったり・・・。
その度に条件つけて空文字にしてあげたり、結構面倒なことがあります。
(APIで統一してくれという話でもありますが)
そんな状況、Proxy使うと結構楽になりますよというお話です。
Proxyオブジェクト
使い方。|
1 |
const proxy = new Proxy(target, handler) |
targetで指定したオブジェクトにhandlerでオブジェクトに対してどうするのか、トラップというメソッドを定義していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const data = { name: '○○市' temp: 20 } const proxy = new Proxy(data, { get(target, name) { if (name === 'temp') { return target[name] + '度' } return target[name] } }) console.log(proxy.temp) // 20度 |
この例だと、tempの時は後ろに「度」を付けています。
このようにオブジェクトにアクセスされたときの処理を書いておけます。
使い所
センサーから取得した値で、何らかの事情でエラー値が入っていることがある・・・ような状況を考えます。(エラーのときは文字列で「E」、普通は数字が入ってる想定)
それをliで表示するようなコードです。
|
1 2 3 4 5 |
const rows = data.map(v => { return ` <li>${v.temp !== 'E'? v.temp : 'Error'}</li> ` }) |
単純に書くと、こんな感じで三項演算子入れる感じになるのではないでしょうか？
これだけでなく、さらに条件が増えてくると、見栄えが悪くなっていきます。。
そこで処理をProxyに任せてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const rows = data.map(v => { const proxy = new Proxy(v, { get(target, name) { if (name === 'temp' && target[name] === 'E') { return 'Error' } return target[name] } }) return ` <li>${proxy.temp}</li> ` }) |
こんな感じで、HTMLを組み立てるところがスッキリします。
さらに「欠損値にはnullが入るから、空で表示させてほしい」なんて要望がきたとしても、getの中に書いてしまえば、HTMLを組み立てている部分には影響しません。
予想外のデータが飛び込んでくることが多い場合には結構有用だと思ってます。
このようなパターンで困っていることがあれば、活用してみてください！
