クラス操作の基本 — el.classList.add('a') と el.classList.toggle('b')
CSSの見た目（色、サイズ、表示/非表示など）を切り替える最もシンプルな方法が「クラス操作」です。JavaScriptの classList を使えば、文字列を直接いじらなくても安全・簡単にクラスを追加/削除/切り替えできます。
基本の使い方
<button id="btn">開く</button>
<div id="panel" class="panel">コンテンツ</div>
<style>
.panel { display: none; }
.panel.open { display: block; }
</style>
<script>
const btn = document.getElementById("btn");
const panel = document.getElementById("panel");
// 追加: open クラスを付ける
panel.classList.add("open");
// 削除: open クラスを外す
panel.classList.remove("open");
// 切り替え: あれば外す、なければ付ける
btn.addEventListener("click", () => {
panel.classList.toggle("open");
});
</script>
- classList: クラス名の「集合」を扱うための便利プロパティ。
add/remove/toggle/containsなどが使えます。 - toggle: 「存在すれば削除、なければ追加」するワンアクション。UIのON/OFFに最適。
よく使うテンプレート集
複数クラスをまとめて追加・削除
const box = document.querySelector(".box");
// まとめて追加
box.classList.add("big", "highlight");
// まとめて削除
box.classList.remove("big", "highlight");
- ポイント: 複数指定でコードを簡潔に。空白や重複を気にしなくてOK。
条件付きで追加（真なら付ける）
function setError(el, isError) {
el.classList.toggle("error", isError); // 2引数版toggle
}
setError(document.querySelector("#email"), true); // 付く
setError(document.querySelector("#email"), false); // 外れる
- ポイント:
toggle(name, condition)の2引数版は「条件が真なら追加、偽なら削除」。
状態に応じたボタンのON/OFF
const btn = document.querySelector("#save");
const form = document.querySelector("#profile");
form.addEventListener("input", () => {
const valid = form.checkValidity();
btn.classList.toggle("disabled", !valid);
});
- ポイント: CSS側で
.disabled { opacity: .5; pointer-events: none; }などと組み合わせて制御。
アコーディオンやモーダルの開閉
const modal = document.querySelector(".modal");
document.querySelector("#open").addEventListener("click", () => {
modal.classList.add("show");
});
document.querySelector("#close").addEventListener("click", () => {
modal.classList.remove("show");
});
- ポイント: 「開く=add」「閉じる=remove」で明示的に管理。トグル乱用よりバグが減る。
実務でのコツ
- クラスは“状態名”で付ける: 見た目の説明（red）より、意味の説明（error/active/hidden）のほうが保守しやすい。
- className直書きよりclassList: 文字列連結ミスや重複を避け、存在チェックも簡単に。
- containsで条件分岐:
if (el.classList.contains("open")) { ... }で状態によって処理を変える。 - CSS側の役割分担: ロジックはJS、見た目はCSS。JSでスタイルを直接書くよりクラス切り替えが可読・再利用可能。
ありがちなハマりポイントと対策
- 要素が存在しない（null）:
- 対策: 取得直後に
if (!el) return;や、DOM準備後に実行（deferやDOMContentLoaded）。
- 対策: 取得直後に
- クラス名のタイプミス:
- 対策: 文字列は共通定数にする（
const OPEN = "open"）などで誤記を減らす。
- 対策: 文字列は共通定数にする（
- トグルの使いすぎ:
- 対策: 明示的に「付ける/外す」を使う場面を分ける。初期状態とズレると混乱の元。
- JSとCSSの二重管理:
- 対策: スタイルの意味はCSSに集約。JSは状態切り替えに徹する。
練習問題（手を動かして覚える）
<button id="toggle">切り替え</button>
<div id="panel" class="panel">パネル</div>
<style>
.panel { padding: 12px; border: 1px solid #ccc; }
.panel.hidden { display: none; }
.panel.warn { border-color: orange; background: #fff7e6; }
</style>
<script>
const btn = document.getElementById("toggle");
const panel = document.getElementById("panel");
// 1) ボタンクリックで表示/非表示を切り替え（toggle）
btn.addEventListener("click", () => {
panel.classList.toggle("hidden");
});
// 2) 複数クラスの追加・削除
panel.classList.add("warn", "big");
panel.classList.remove("big");
// 3) 条件付きtoggle（2引数）
const hasWarning = true;
panel.classList.toggle("warn", hasWarning);
// 4) 状態チェック
if (panel.classList.contains("hidden")) {
console.log("今は非表示です");
} else {
console.log("今は表示中です");
}
</script>
直感的な指針
- 見た目はCSS、切り替えはJSのクラス操作。
- 追加は add、削除は remove、ON/OFFは toggle（2引数版が便利）。
- 状態名でクラスを設計して、保守を楽にする。