JavaScriptでクラス切替！classList.toggle()メソッド入門

JavaScriptでクラスの切り替えを行う際に便利な`classList.toggle()`メソッドについて、基本的な使い方から実践的な例まで解説します。

classList.toggle()とは

`classList.toggle()`は、HTML要素のクラスを追加・削除するためのJavaScriptメソッドです。指定したクラスが存在しない場合は追加し、存在する場合は削除します。

基本的な使い方

element.classList.toggle('クラス名');

例えば、以下のようなHTML要素があるとします：

<div id="target">Hello World</div>

JavaScriptで以下のように記述することで、クラスの切り替えが可能です：

const element = document.getElementById('target');
element.classList.toggle('active');

実践的な使用例

ハンバーガーメニューの実装

<button id="menuButton">Menu</button>
<nav id="navigation" class="nav">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

const menuButton = document.getElementById('menuButton');
const navigation = document.getElementById('navigation');

menuButton.addEventListener('click', () => {
  navigation.classList.toggle('nav-open');
});

ダークモード切り替え

<button id="themeToggle">テーマ切り替え</button>
<div id="content">コンテンツ</div>

const themeToggle = document.getElementById('themeToggle');
const content = document.getElementById('content');

themeToggle.addEventListener('click', () => {
  content.classList.toggle('dark-mode');
});

第2引数の活用

`classList.toggle()`には第2引数としてブール値を指定することができます：

element.classList.toggle('クラス名', 条件);

条件がtrueの場合はクラスを追加し、falseの場合は削除します。

// ウィンドウの幅が768px以上の場合にのみクラスを追加
element.classList.toggle('wide-screen', window.innerWidth >= 768);

まとめ

• `classList.toggle()`は要素のクラスを簡単に切り替えることができる

• 単一の引数で使用すると、クラスの有無を自動的に判断して追加・削除を行う

• 第2引数にブール値を指定することで、条件付きでクラスの追加・削除が可能

• ハンバーガーメニューやダークモードなど、様々なUI実装に活用できる

このメソッドを使いこなすことで、よりインタラクティブなWebサイトの実装が可能になります。

関連情報

• MDN Web Docs: [Element.classList](https://developer.mozilla.org/ja/docs/Web/API/Element/classList)

• 互換性: IE10以降のモダンブラウザで使用可能

• パフォーマンス: DOMの直接操作となるため、頻繁な呼び出しは避けることを推奨