JavaScriptのclosestを利用して最も近い祖先要素を操作する7つの方法

●JavaScriptのclosestメソッドとは？
●closestメソッドを使った要素の取得方法
●closestメソッドの応用例
まとめ

●JavaScriptのclosestメソッドとは？

JavaScriptを使ってWebサイトやアプリケーションを開発していると、特定の条件を満たす祖先要素を取得したいというシーンに遭遇することがよくあります。

そんな時に活躍するのがclosestメソッドです。

closestメソッドは、指定した要素から見て、最も近い祖先要素を効率的に探し出してくれる頼もしい味方なのです。

○closestメソッドの基本的な使い方

closestメソッドの使い方は至ってシンプルです。

まず、closestメソッドを適用したい要素を選択します。

そして、closestメソッドに引数としてセレクタを渡すだけ。

するとclosestメソッドは、指定したセレクタに合致する最も近い祖先要素を見つけ出し、その要素を返してくれます。

まるで迷子になった子供を優しく家まで送り届けてくれるかのようですね。

○サンプルコード1：最も近い祖先要素を取得する

実際のコードを見てみましょう。

次のようなHTMLがあるとします。

<div class="grandparent">
  <div class="parent">
    <div class="child">孫要素</div>
  </div>
</div>

ここで、孫要素から見て最も近い”parent”クラスを持つ祖先要素を取得したいとします。

その場合、このようなJavaScriptコードを書けば、目的の要素を手に入れることができます。

const child = document.querySelector('.child');
const parent = child.closest('.parent');
console.log(parent); // <div class="parent">...</div>

childという変数に孫要素を代入し、その要素に対してclosestメソッドを使って’.parent’セレクタを渡しています。

するとclosestメソッドは、孫要素から見て最も近い”parent”クラスを持つ要素を見つけ出し、その要素をparent変数に代入してくれます。

これでめでたく目的の祖先要素を取得できました。

○closestメソッドのブラウザ対応状況

ところで、closestメソッドって新しめのメソッドなのでは？と思った方もいるかもしれません。

実はその通りで、closestメソッドが登場したのはそれほど昔のことではありません。

しかし、現在ではほとんどのモダンブラウザでclosestメソッドがサポートされています。

IEを含む古いブラウザでは使えないこともありますが、最新のChrome、Firefox、Safariなどでは問題なく動作します。

ただ、念のためにブラウザ対応状況を確認しておくことをおすすめします。

●closestメソッドを使った要素の取得方法

前章ではclosestメソッドの基本的な使い方を見てきましたが、実際の開発現場ではもっと複雑な条件で祖先要素を取得したいことがあります。

そんな時にもclosestメソッドは力を発揮してくれます。

ここからは、closestメソッドをさらに使いこなすためのテクニックを見ていきましょう。

○サンプルコード2：特定のクラスを持つ祖先要素を取得する

まずは、特定のクラスを持つ祖先要素を取得する方法です。

次のようなHTMLがあるとします。

const element = document.querySelector('.child');
const ancestor = element.closest('div');
console.log(ancestor);

このコードは、”child”クラスを持つ要素から見て、最も近いdiv要素を取得しようとしています。

しかし、実際に実行してみると、nullが返ってきてしまうことがあります。

これはなぜでしょうか？

実は、このエラーの原因は、指定したセレクタに該当する祖先要素が存在しないことにあります。

つまり、”child”クラスを持つ要素から見て、div要素が祖先に存在しない場合、closestメソッドはnullを返すのです。

この場合の対処法は、セレクタを見直すことです。

HTMLの構造を確認し、目的の要素に到達できるセレクタを指定するようにしましょう。

また、nullチェックを行うことで、エラーを回避することもできます。

const element = document.querySelector('.child');
const ancestor = element.closest('div');
if (ancestor) {
  console.log(ancestor);
} else {
  console.log('div要素が見つかりませんでした');
}

○エラー2：closestメソッドが見つからない場合

次に、closestメソッドが見つからない場合のエラーを見てみましょう。

次のようなコードを書いたとします。

const element = document.querySelector('.child');
const ancestor = element.closet('.parent');
console.log(ancestor);

このコードでは、closestメソッドのスペルを間違えています（closetと書いている）。

そのため、実行するとエラーが発生します。

このエラーの対処法は単純で、スペルミスを修正することです。

正しくは、closestメソッドですね。

const element = document.querySelector('.child');
const ancestor = element.closest('.parent');
console.log(ancestor);

ちょっとしたタイプミスが原因でエラーが発生することは珍しくありません。

エラーメッセージをよく読んで、スペルミスがないか確認する習慣をつけましょう。

○エラー3：closestメソッドがnullを返す場合

最後に、closestメソッドがnullを返す場合のエラーを見てみましょう。

次のようなコードを考えます。

<div class="parent">
  <div class="child"></div>
</div>

const element = document.querySelector('.child');
const ancestor = element.closest('.grandparent');
console.log(ancestor.textContent);

このコードは、”child”クラスを持つ要素から、”grandparent”クラスを持つ祖先要素を取得しようとしています。

しかし、該当する要素が存在しないため、closestメソッドはnullを返します。

そして、nullに対してtextContentプロパティにアクセスしようとするため、エラーが発生するのです。

この場合の対処法は、nullチェックを行うことです。

次のように、closestメソッドの戻り値がnullでないことを確認してから、プロパティにアクセスするようにしましょう。

const element = document.querySelector('.child');
const ancestor = element.closest('.grandparent');
if (ancestor) {
  console.log(ancestor.textContent);
} else {
  console.log('grandparentクラスを持つ要素が見つかりませんでした');
}

エラーは悪者ではありません。むしろ、私たちにコードの問題点を教えてくれる良き友人だと思います。

エラーと向き合い、原因を探ることで、JavaScriptの理解がより深まっていくでしょう。

●closestメソッドの応用例

ここまでclosestメソッドの基本的な使い方やエラー処理について見てきましたが、実際の開発現場では、もっと応用的な使い方が求められることがあります。

ここからは、closestメソッドをさらに活用するためのテクニックを見ていきましょう。

私たちの開発スキルをレベルアップするチャンスです！

○サンプルコード6：イベントデリゲーションでclosestメソッドを活用する

まずは、イベントデリゲーションでclosestメソッドを活用する方法を見てみましょう。

イベントデリゲーションとは、親要素にイベントリスナーを設定し、子要素で発生したイベントを親要素で受け取る手法のことです。

<ul id="list">
  <li><a href="#">リンク1</a></li>
  <li><a href="#">リンク2</a></li>
  <li><a href="#">リンク3</a></li>
</ul>

ここで、各リンクをクリックした時に、そのリンクが属するli要素に特定の処理を行いたいとします。

その場合、以下のようなコードを書くことができます。

const list = document.getElementById('list');
list.addEventListener('click', function(event) {
  const target = event.target;
  const listItem = target.closest('li');
  if (listItem) {
    console.log(listItem.textContent);
  }
});

リスト全体に対してクリックイベントのリスナーを設定しています。

クリックされた要素（target）に対して、closestメソッドを使ってli要素を取得しています。

これにより、クリックされた要素が直接li要素でなくても、最も近いli要素を取得することができます。

イベントデリゲーションとclosestメソッドの組み合わせは、効率的なイベント処理を実現するための強力な手法です。

○サンプルコード7：動的に生成された要素にclosestメソッドを適用する

次に、動的に生成された要素にclosestメソッドを適用する方法を見てみましょう。

JavaScriptを使ってDOMを操作していると、動的に要素を追加することがよくあります。

そんな時も、closestメソッドは活躍してくれます。

<div id="container">
  <div class="child">子要素1</div>
  <div class="child">子要素2</div>
</div>

const container = document.getElementById('container');
const newChild = document.createElement('div');
newChild.textContent = '子要素3';
newChild.classList.add('child');
container.appendChild(newChild);

const child = newChild.closest('.child');
console.log(child.textContent); // '子要素3'

動的に新しいdiv要素を生成し、それをcontainer要素の子要素として追加しています。

追加された子要素に対して、closestメソッドを使って’.child’セレクターに一致する要素を取得しています。

このように、動的に生成された要素に対しても、closestメソッドを使うことができます。

○closestメソッドを使ったカスタムデータ属性の取得

続いて、closestメソッドを使ってカスタムデータ属性を取得する方法を見てみましょう。

カスタムデータ属性とは、data-で始まる属性のことで、要素に独自のデータを付与するために使われます。

<div id="container" data-id="123">
  <div class="child">
    <button>クリック</button>
  </div>
</div>

const container = document.getElementById('container');
container.addEventListener('click', function(event) {
  const target = event.target;
  const parent = target.closest('[data-id]');
  if (parent) {
    console.log(parent.dataset.id); // '123'
  }
});

container要素にdata-id属性を設定し、その値を’123’としています。

container要素内のボタンをクリックした時、closestメソッドを使ってdata-id属性を持つ要素を取得しています。

取得した要素のdatasetプロパティを使うことで、カスタムデータ属性の値を取得することができます。

○closestメソッドとarrowファンクションの組み合わせ

最後に、closestメソッドとarrowファンクションを組み合わせる方法を見てみましょう。

arrowファンクションは、関数を簡潔に記述するための構文で、thisの値を固定できるという特徴があります。

const child = document.querySelector('.child');
child.addEventListener('click', function(event) {
  const parent = this.closest('.parent');
  console.log(parent);
});

このコードでは、child要素をクリックした時、イベントハンドラー内でthisを使ってclosestメソッドを呼び出しています。

ここで、arrowファンクションを使うとこのように書くことができます。

const child = document.querySelector('.child');
child.addEventListener('click', (event) => {
  const parent = event.target.closest('.parent');
  console.log(parent);
});

arrowファンクションを使うことで、thisを使わずにevent.targetを使ってclosestメソッドを呼び出すことができます。

コードがよりシンプルになり、可読性が向上します。