JavaScriptのclassListは、HTML要素のクラス属性を簡単かつ効率的に操作するためのプロパティです。このプロパティを使用すると、クラスの追加、削除、トグル（切り替え）などが簡単に行えます。今回は、基本的な使い方から注意点までをまとめていきたいと思います。
目次 非表示
classListは、要素のclass属性を操作するためのJavaScriptのプロパティで、以下のような便利なメソッドが使用できます。
add(className)：指定したクラスを追加しますremove(className)：指定したクラスを削除しますtoggle(className, [force])：指定したクラスの有無を切り替えます。オプションでforceを指定可能contains(className)：指定したクラスが存在するかを確認しますreplace(oldClass, newClass)：既存のクラスを新しいクラスで置き換えます
これらを使用することで、classNameを直接操作する方法よりも安全で簡単にクラスを管理できます。
以下にclassListの基本的な使用例です。
See the Pen classList by tones (@tonescodedesign) on CodePen.
JavaScript
const textElement = document.getElementById('text');
const toggleButton = document.getElementById('toggleButton');
toggleButton.addEventListener('click', () => {
textElement.classList.toggle('highlight');
});HTML
<p id="text">このテキストをハイライトします。</p>
<button id="toggleButton">ハイライト切り替え</button>この例では、ボタンをクリックするたびに、<p>要素にhighlightクラスが追加または削除されます。
次は、特定の条件に基づいてクラスを操作する例です。
See the Pen classList by tones (@tonescodedesign) on CodePen.
JavaScript
const messageElement = document.getElementById('message');
const showButton = document.getElementById('showButton');
showButton.addEventListener('click', () => {
if (messageElement.classList.contains('hidden')) {
messageElement.classList.replace('hidden', 'visible');
showButton.textContent = 'メッセージを隠す';
} else {
messageElement.classList.replace('visible', 'hidden');
showButton.textContent = 'メッセージを表示';
}
});HTML
<p id="message" class="hidden">こんにちは！</p>
<button id="showButton">メッセージを表示</button>CSS
.visible {
display: block;
}
.hidden {
display: none;
}このコードでは、ボタンをクリックするたびにメッセージの表示と非表示を切り替えます。
addやremoveは複数のクラスを一度に指定できます。
JavaScript
element.classList.add('class1', 'class2');
element.classList.remove('class1', 'class2');- クラスの変更によって視覚的な変化だけでなく、状態をスクリーンリーダーなどにも伝えるようにしましょう。
- 例: 状態を示すために
aria-live属性やaria-expanded属性を使用する。
HTML
<button aria-expanded="false">メニューを開く</button>クラスの変更に応じて、対応する属性を更新する必要があります。
動的にクラスを操作する場合、不要なクラスが蓄積しないように管理しましょう。コードの整理や適切な命名規則を意識することが重要です。
