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

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

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

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

parentNode連発をやめよう

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

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

<div class="parent">
  <div class="inner">
    <div class="body">
      <button class="button">ボタン</button>
    </div>
  </div>
</div>

const element = document.querySelector('.button');
element.addEventListener('click', (e) => {
  e.target.parentNode.parentNode.parentNode.classList.add('is-hide');
});

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

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

const element = document.querySelector('.button');
element.addEventListener('click', (e) => {
  e.target.closest('.parent').classList.add('is-hide');
});

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

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

まとめ

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