【JavaScript】parentNodeの連発やめて、closestを使おう!


2020年1月20日

皆さんこんにちは、末ちゃんです。
年も明けてビッグニュース!ついに、Windows7のサポートが終了しました!
※ ただし企業向けに有償で延長サポートがあります。

ウェブ開発においてWindows7のIE11のサポートの手間から解放される日も近いでしょう。

同時にChromium搭載のEdgeが正式リリースされました!
じきWindows Update経由で皆さんの手元に届きますので、今しばらくお待ちください。

すぐ使いたい人は以下からどうぞ!
https://www.microsoft.com/en-us/edge

parentNode連発をやめよう

さて新年一発目のネタは、JavaScriptネタです。

あるあるネタで、とある要素内の子要素であるボタンをクリックしたら、その要素を非表示にするといったシチュエーションでこんなコードみたことありませんか・・・?

一目見るだけで訳がわかりません。

このような運用でカバー的なコードを書かずとも、便利な関数がありますのでそちらを使いましょう。

はい、一目見て何をしたいかがよくわかるコードになりました。
e.target の祖父要素である .parent を探していることがよくわかりますね。

ただし、IEは対応していないのでpolyfillを使用する必要があります。

まとめ

コードを書くだけにかかわらず、誰が見ても分かりやすいものを書くことは大切です。
仕事をしていると時間に追われていい加減になりがちですが、あとのことを考える余裕を持つのを今年の目標にしていきます!

 

Share Button