JavaScript | Web API：DOM 拡張 API － classList API

JavaScript JavaScript
スポンサーリンク

classList は「要素に付いているクラス名を出し入れするための専用リモコン」

HTML 要素には class 属性がありますよね。

<div class="box active"></div>

この "box active" みたいなクラス名を、
JavaScript から安全・簡単に操作するための API が classList です。

文字列をゴリゴリ書き換えるのではなく、
「クラスを追加」「クラスを削除」「クラスを切り替え」
といった操作を、メソッドで直感的に扱えます。

className で文字列を直接いじるより、
ミスが少なく、読みやすく、バグりにくい のが最大のメリットです。

classList の基本：DOM 要素から classList にアクセスする

まずは要素を取ってくる

<div id="box" class="box"></div>

const box = document.querySelector("#box");
console.log(box.classList);
JavaScript

box.classList は、
その要素に付いているクラス名の「コレクション（配列っぽいもの）」です。

コンソールで見ると、
DOMTokenList というオブジェクトで、
中に "box" などのクラス名が入っています。

ここからが本番で、
classList にはよく使う便利メソッドが揃っています。

一番よく使うメソッドたち：add / remove / toggle / contains

add：クラスを追加する

box.classList.add("active");
JavaScript

これで、class="box active" という状態になります。

同じクラスを何度 add しても、
重複して増えたりはしません（1 回だけ付く）。

remove：クラスを削除する

box.classList.remove("active");
JavaScript

これで、class="box" に戻ります。

存在しないクラスを remove してもエラーにはならず、
何も起きません。
この「雑に呼んでも安全」な感じが、とても使いやすいです。

toggle：あれば消す、なければ付ける

box.classList.toggle("active");
JavaScript

active が付いていなければ追加し、
付いていれば削除します。

「ON/OFF の切り替え」をしたいときの定番です。

例えば、ボタンで開閉するメニューなど。

button.addEventListener("click", () => {
  menu.classList.toggle("open");
});
JavaScript

CSS 側で

.menu { display: none; }
.menu.open { display: block; }

としておけば、
open クラスの ON/OFF だけで表示・非表示を切り替えられます。

contains：そのクラスを持っているかどうか調べる

if (box.classList.contains("active")) {
  console.log("アクティブ状態です");
}
JavaScript

true / false が返ってきます。

状態に応じて処理を分けたいときに使います。

例題：ボタンで「ON/OFF 状態」を切り替える

HTML

<button id="toggle">トグル</button>
<div id="lamp" class="lamp">OFF</div>

CSS（イメージ）

.lamp {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: gray;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lamp.on {
  background: gold;
  color: black;
}

JavaScript

const toggleBtn = document.querySelector("#toggle");
const lamp = document.querySelector("#lamp");

toggleBtn.addEventListener("click", () => {
  const isOn = lamp.classList.toggle("on");
  lamp.textContent = isOn ? "ON" : "OFF";
});
JavaScript

ここでやっていることは、

lamp.classList.toggle("on") で on クラスを付けたり消したりする
toggle の戻り値（true/false）で今の状態を知る
状態に応じてテキストを "ON" / "OFF" に変える

という流れです。

toggle の戻り値を使うのが、地味に便利なポイントです。

重要ポイント：className との違いと、classList を使うべき理由

className は「文字列を丸ごと扱う」ので壊しやすい

className でもクラスを操作できます。

box.className = "box active";
JavaScript

ただし、文字列を丸ごと扱うので、

既存のクラスをうっかり消してしまう
スペースの入れ方をミスってバグる
クラスの有無を判定するのが面倒

など、細かいトラブルが起きやすいです。

例えば、「active だけ消したい」ときに
replace で文字列をいじるのは、かなり危険です。

classList は「クラスを配列的に扱う」ので安全

classList は、
クラス名を「トークン（単語）」として扱います。

add("active")
remove("active")
toggle("active")

といった操作は、
他のクラスに影響を与えずに済みます。

「クラスを 1 個の文字列として扱う」のではなく、
「クラスの集合を操作する」 という感覚で使えるのが、
classList の一番大事な価値です。

初心者のうちは、
「クラスをいじるときは基本 classList」
と覚えてしまって大丈夫です。

複数クラスの追加・削除と、少しだけ応用

複数クラスを一度に add / remove できる

box.classList.add("a", "b", "c");
box.classList.remove("a", "c");
JavaScript

引数をカンマ区切りで複数渡せます。
地味ですが、スッキリ書けて気持ちいいです。

状態を切り替えるときのパターン：add / remove / toggle の組み合わせ

例えば、「選択状態」を表す selected クラスを管理したいとします。

function select(elem) {
  elem.classList.add("selected");
}

function unselect(elem) {
  elem.classList.remove("selected");
}

function toggleSelect(elem) {
  elem.classList.toggle("selected");
}
JavaScript

こういう小さな関数を用意しておくと、
コードの意図がとても読みやすくなります。

「クラス名そのもの」ではなく、
「状態（選択された・されていない）」を操作している
という感覚で書けるのが理想です。

例題：タブ切り替えを classList で実装するイメージ

HTML（イメージ）:

<div class="tabs">
  <button class="tab active" data-target="#panel1">タブ1</button>
  <button class="tab" data-target="#panel2">タブ2</button>
</div>

<div id="panel1" class="panel active">パネル1</div>
<div id="panel2" class="panel">パネル2</div>

CSS（イメージ）:

.panel { display: none; }
.panel.active { display: block; }

.tab.active { font-weight: bold; }

JavaScript:

const tabs = document.querySelectorAll(".tab");
const panels = document.querySelectorAll(".panel");

tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    // すべてのタブ・パネルから active を外す
    tabs.forEach(t => t.classList.remove("active"));
    panels.forEach(p => p.classList.remove("active"));

    // クリックされたタブに active
    tab.classList.add("active");

    // 対応するパネルに active
    const targetSelector = tab.dataset.target;
    const panel = document.querySelector(targetSelector);
    panel.classList.add("active");
  });
});
JavaScript

ここでのキモは、

「表示・非表示」「選択・非選択」を
すべて active クラスの有無で管理していることです。

JavaScript は「クラスを付けたり外したり」だけを担当し、
見た目の切り替えは CSS に任せる——
この役割分担ができると、一気にプロっぽい書き方になります。

初心者として classList API で本当に掴んでほしいこと

classList は「要素のクラス名を安全・直感的に操作するための API」
add / remove / toggle / contains が基本の 4 本柱
クラスを文字列としていじる className より、バグりにくく読みやすい
「状態（ON/OFF・選択/非選択）」をクラスで表現し、classList で切り替えるのが定番パターン
見た目の変更は CSS、状態の変更は classList——という分業を意識すると一気にレベルが上がる

まずは、

ボタンを押したら要素に active を付けたり消したりする
toggle の戻り値で状態を判定してテキストを変える

といった小さな例を、自分の手で書いてみてください。

「クラスをいじる＝見た目や状態を変える」という感覚が体に入ると、
classList はただの API ではなく、
「UI の状態をコントロールするための、超使いやすいリモコン」 に見えてきます。

スポンサーリンク
タイトルとURLをコピーしました