【jQuery】CSSクラスの操作（addClass・removeClass・toggleClass）

JavaScript
2026.05.26

こんにちは、かつコーチです。

「ボタンを押したら色を変えたい」「メニューの開閉状態を切り替えたい」。

こうした見た目の変化を実装するとき、多くの場合はCSSクラスの付け外しで実現します。

この記事では、addClass・removeClass・toggleClass・hasClassという4つのメソッドの使い分けについて、初心者向けに解説します。

読み終わる頃には、クラスの操作でつまずかなくなり、ボタンの状態切り替えなどが自力で書けるようになります。

クラス操作の基本メソッド

addClass()でクラスを追加する

addClass()は、要素にCSSクラスを追加するメソッドです。

<button id="btn">送信</button>

.active {
  background-color: green;
  color: white;
}

$('#btn').addClass('active');

<button id="btn" class="active">送信</button>

すでに他のクラスが付いている場合でも、既存のクラスは消えず、指定したクラスが追加されます。

複数のクラスを一度に追加したい場合は、半角スペース区切りで指定できます。

$('#btn').addClass('active large');

removeClass()でクラスを削除する

removeClass()は、指定したクラスを取り除くメソッドです。

$('#btn').removeClass('active');

引数を指定せずにremoveClass()を呼び出すと、その要素に付いているクラスをすべて削除できます。

$('#btn').removeClass();
// class属性そのものが空になる

toggleClass()でクラスを切り替える

toggleClass()は、クラスが付いていれば外し、付いていなければ付ける、という切り替えを行うメソッドです。

$('#btn').on('click', function() {
  $(this).toggleClass('active');
});

このコードでは、ボタンをクリックするたびにactiveクラスが付いたり外れたりします。

if文で「付いているか判定してから付け外しする」処理を、1行で書けるのが便利な点です。

第2引数に真偽値を渡すと、条件に応じて付け外しを制御することもできます。

const isValid = checkForm();

$('#btn').toggleClass('active', isValid);
// isValidがtrueなら追加、falseなら削除

hasClass()でクラスの有無を確認する

hasClass()は、指定したクラスが付いているかどうかをtrue/falseで返すメソッドです。

if ($('#btn').hasClass('active')) {
  console.log('activeクラスが付いています');
} else {
  console.log('activeクラスは付いていません');
}

クラスの状態に応じて別の処理を分岐させたいときに使います。

よくあるつまずきポイント・エラー対処

toggleClass()の対象がずれてすべての要素が切り替わる

複数の要素に同じ処理を仕込むとき、セレクタの範囲を誤ると意図しない挙動になります。

❌ Before（つまずいた書き方）

<div class="accordion">
  <button class="toggle">見出し1</button>
  <div class="content">本文1</div>
</div>
<div class="accordion">
  <button class="toggle">見出し2</button>
  <div class="content">本文2</div>
</div>

$('.toggle').on('click', function() {
  $('.content').toggleClass('open');
  // クリックしたボタンに関係なく、全部のcontentが切り替わる
});

1つ目のボタンをクリックしただけなのに、2つ目の本文まで一緒に開いてしまい、「片方だけ閉じてほしいのに」と原因を探しました。

原因は、.contentというクラス名でページ全体から要素を探していたため、クリックしたボタンに関係なく全部が対象になっていたことでした。

✅ After（正しい書き方）

$('.toggle').on('click', function() {
  // クリックされたボタンの親要素の中だけを探す
  $(this).closest('.accordion').find('.content').toggleClass('open');
});

closest()（自分から見て一番近い親要素を探すメソッド）とfind()（子要素を探すメソッド）を組み合わせることで、クリックしたボタンと同じグループの中だけを対象にできます。

複数の同じ構造が並ぶUIを作るときは、「今操作している要素の範囲」を意識してセレクタを組み立てることが重要です。

クラス名のタイプミスに気づかない

❌ Before（つまずいた書き方）

$('#btn').addClass('actve');
// activeのタイプミス。エラーは出ない

.active {
  background-color: green;
}

addClass()はCSSに存在しないクラス名を指定してもエラーになりません。

見た目が変わらないだけなので、「JavaScriptは動いているのにCSSが反映されない」と勘違いして、CSS側を延々と見直してしまったことがあります。

✅ After（正しい書き方）

// クラス名が正しいか、ブラウザの開発者ツールで要素を確認する
$('#btn').addClass('active');

このようなタイプミスは、ブラウザの開発者ツールで実際に付与されたクラス名を確認するのが一番の近道です。

要素を右クリックして「検証」を選び、classの値を目視で確認する習慣をつけておくと、原因の切り分けが早くなります。

応用・一歩先の使い方

switchClass的な使い方をtoggleClassの組み合わせで実現する

jQuery本体には「クラスAをクラスBに置き換える」専用メソッドはありませんが、removeClass()とaddClass()を組み合わせれば実現できます。

$('#btn').removeClass('inactive').addClass('active');

メソッドチェーンでつなげて書けるので、状態の切り替えも1行で表現できます。

イベントとの組み合わせでよく使うパターン

クラス操作は、on()によるイベント処理とセットで使われることがほとんどです。

$('.tab-button').on('click', function() {
  // 兄弟要素すべてからactiveを外してから
  $(this).siblings().removeClass('active');
  // クリックした要素だけにactiveを付ける
  $(this).addClass('active');
});

siblings()（同じ階層にある兄弟要素を取得するメソッド）と組み合わせることで、タブ切り替えのように「1つだけをアクティブにする」UIがシンプルに書けます。

このパターンは、タブやアコーディオンなど、多くのUI実装で応用できる基本形です。

まとめ

この記事のポイント

  • addClass()はクラスの追加、removeClass()は削除、toggleClass()は付け外しの切り替え
  • hasClass()でクラスの有無を判定できる
  • 複数の同じ構造がある場合は、closest()やfind()で操作範囲を絞り込む
  • クラス名のタイプミスはエラーにならないため、開発者ツールでの確認が重要

次に読むべき記事

  • CSSプロパティを直接操作する方法（css()メソッド）
  • on()でイベントを設定する方法（bind/liveとの違いも解説）
  • アコーディオン（FAQ）をjQueryで実装する（素のJS版との比較）

タグ: jQuery, 初心者向け, DOM操作

タイトルとURLをコピーしました