【初心者向け】JavaScriptのclassListプロパティでクラスを切り替える方法

JavaScriptで要素のクラスを切り替える（トグルする）方法は、開発者として身につけておきたい非常に実用的なスキルのひとつです。クラスのトグルは、メニューの表示・非表示、検索フィルターの追加・削除、SNSのボタン（いいね！など）など、さまざまな場面で活用されています。

トグル処理は、状況にもよりますが、わずか数行のコードで実装できます。今回は、クラスのトグルの基本を学びながら、JavaScript全般の学習の入り口としても役立つシンプルな方法を紹介します。

HTMLの構造

JavaScriptで動きを加える前に、まず操作対象となるHTML要素をいくつか準備しましょう。ラッパー（wrapper）、ボタン、ボックスの3つを作成します。

以下のコードをHTMLドキュメントのbodyタグ内に記述してください。

<div class="wrapper">
  <button class="button">Toggle</button>
  <div class="box"></div>
</div>

親要素のdiv（ラッパー）は、CSSで子要素（ボックスとボタン）を中央に配置するためだけに存在します。これは見た目を整えるためのものであり、動作自体には必須ではありません。

補足：CodePenのようなオンラインコードエディタを使用している場合は、このコードをHTMLタブに貼り付けるだけでOKです。bodyタグを含む残りのHTMLは、エディタ側が自動的に補完してくれます。

CSSのスタイル

親要素のdivには.wrapperクラスが設定されており、Flexboxのプロパティによって子要素（ボックスとボタン）が中央揃えで配置されます。Flexboxの仕組みや詳細については別のチュートリアルで解説するため、ここでは割愛します。

ボタンとボックスには、見た目を整えるための基本的なスタイルクラスを適用します。

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
}

.button {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #aa2f18;
}

ここで注目すべきは.bg-redクラスです。このクラスには、CSSのbackground-colorプロパティに「#AA2F18」（赤色）が設定されています。ボタンをクリックしたときに、ボックス要素に対して追加・削除（トグル）したいクラスが、まさにこれです。

JavaScriptによるイベント処理

JavaScriptで要素を操作する前に、まず対象となる2つの要素（ボックスとボタン）への参照を変数に格納しておく必要があります。変数buttonとboxを宣言し、それぞれの要素を代入しましょう。

ボックスとボタンの要素を選択するには、便利なquerySelectorメソッドを使って、要素のクラスを指定して取得します。

let button = document.querySelector(".button");
let box = document.querySelector(".box");

これで各要素への参照が取得できたので、プロパティやメソッドにアクセスしてDOM操作が行えるようになりました。今回は、ボタン要素にイベントリスナーを設定し、クリックイベントを監視します。クリックが検知されたら、ボックス要素の背景色をトグルする関数を実行します。

そのために、addEventListener()メソッドをボタン要素（変数経由）に紐付けます。このイベントリスナーメソッドには2つの引数を渡します。1つ目はイベントの種類を示す'click'、2つ目は実行するfunction()です。この例では、名前のない匿名関数を使用します。

そして、その匿名関数の中で、JavaScriptのclassListプロパティが持つtoggle()メソッドをボックス要素に適用します。toggleメソッドの役割は、.bg-redクラスを追加または削除することです。

button.addEventListener("click", function() {
  box.classList.toggle("bg-red");
});

classListのtoggleメソッドは、次のように動作します。対象の要素に指定したクラスがすでに存在する場合は削除され、存在しない場合は追加されます。

これで完成です！プレーンなJavaScriptだけで、指定した要素のクラスを切り替える方法をマスターできました。このチュートリアルで使用したコード一式は、CodePenに公開しています。

なお、このコードはIE10以降のすべてのモダンブラウザで動作します。