JavaScriptでDOMの要素が特定のセレクタにマッチするかどうかを判定する際、`matches()`メソッドは非常に便利な機能です。この記事では、`matches()`メソッドの使い方と実践的な例を詳しく解説します。

matches()メソッドの基本

`matches()`メソッドは、HTML要素が指定されたCSSセレクタにマッチするかどうかを確認できるメソッドです。戻り値は真偽値（true/false）で返されます。

element.matches(selector)

基本的な使用例

const element = document.querySelector('div');

// クラス名での判定
console.log(element.matches('.my-class')); // true/false

// ID名での判定
console.log(element.matches('#my-id')); // true/false

// タグ名での判定
console.log(element.matches('div')); // true/false

複雑なセレクタでの判定

`matches()`メソッドは複雑なセレクタパターンにも対応しています。

const element = document.querySelector('div');

// 複数の条件を組み合わせた判定
console.log(element.matches('div.my-class[data-type="special"]'));

// 子要素を含むセレクタでの判定
console.log(element.matches('.container > .item'));

実践的な使用例

イベントの委譲パターンでよく使用される例を紹介します。

document.addEventListener('click', (e) => {
    if (e.target.matches('.button')) {
        // ボタンがクリックされた時の処理
        console.log('ボタンがクリックされました');
    }
    
    if (e.target.matches('a[data-type="external"]')) {
        // 外部リンクがクリックされた時の処理
        e.preventDefault();
        console.log('外部リンクがクリックされました');
    }
});

ブラウザ互換性

`matches()`メソッドは現代的なブラウザでは広くサポートされていますが、古いブラウザでは代替の実装が必要な場合があります。

// クロスブラウザ対応のポリフィル
if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;
        };
}

パフォーマンスの考慮

`matches()`メソッドは、単一の要素に対するセレクタの判定を行うため、大規模なDOM操作と比較して効率的です。ただし、複雑なセレクタを使用する場合は、パフォーマンスに影響を与える可能性があります。

まとめ

  • `matches()`メソッドは要素がセレクタにマッチするかを簡単に判定できる
  • 複雑なセレクタパターンにも対応している
  • イベント委譲パターンでの使用に適している
  • モダンブラウザで広くサポートされている
  • パフォーマンスを考慮した使用が推奨される

このメソッドを適切に活用することで、より柔軟でメンテナンス性の高いJavaScriptコードを書くことができます。