JavaScriptで要素のクラスの存在を確認する場合、`classList.contains()`メソッドを使用します。このメソッドは指定したクラスが要素に存在するかどうかを真偽値（true/false）で返してくれる便利な機能です。

classList.contains()の基本的な使い方

要素.classList.contains('クラス名')

実践的な使用例

// HTML要素を取得
const element = document.getElementById('myElement');

// クラスの存在確認
if (element.classList.contains('active')) {
    console.log('activeクラスが存在します');
} else {
    console.log('activeクラスは存在しません');
}

具体的なコード例

<!-- HTML -->
<div id="myBox" class="box active">テスト要素</div>
// JavaScript
const box = document.getElementById('myBox');

// クラスの存在確認
console.log(box.classList.contains('box'));     // true
console.log(box.classList.contains('active'));  // true
console.log(box.classList.contains('hidden'));  // false

条件分岐での活用例

const button = document.getElementById('toggleButton');
const menu = document.getElementById('menu');

button.addEventListener('click', () => {
    if (menu.classList.contains('is-open')) {
        menu.classList.remove('is-open');
    } else {
        menu.classList.add('is-open');
    }
});

ブラウザ対応状況

`classList.contains()`は、モダンブラウザで広くサポートされています：

  • Google Chrome 8以降
  • Firefox 3.6以降
  • Safari 5.1以降
  • Internet Explorer 10以降

注意点

1. 大文字小文字は区別されます

element.classList.contains('Active'); // 'active'とは異なる

2. 複数のクラスを同時に確認する場合は、それぞれ個別に確認する必要があります

if (element.classList.contains('class1') && element.classList.contains('class2')) {
    // 両方のクラスが存在する場合の処理
}

まとめ

`classList.contains()`は要素のクラス存在確認において、シンプルで直感的なメソッドです。条件分岐やクラスの切り替えなど、様々なシーンで活用できる便利な機能です。

また、`classList`には他にも`add()`、`remove()`、`toggle()`などの便利なメソッドが用意されているので、組み合わせて使用することで効率的なDOM操作が可能です。