classList.add とは何か
classList.add は、要素に「CSS クラス」を安全に追加するためのメソッドです。すでに同じクラスが付いていても重複せず、必要なクラス名を1つ以上まとめて追加できます。ここが重要です：文字列操作の className と違い、スペースや部分一致のミスが起こらず、追加専用の“安全な道具”として使えます。
基本の使い方（最短でクラスを付ける）
1つのクラスを追加する
<div id="box" class="card"></div>
<script>
const box = document.getElementById("box");
box.classList.add("highlight"); // → class="card highlight"
</script>
ここが重要です：既存のクラスは保ったまま、追加分だけが増えます。className のような“全置換”にはなりません。
複数のクラスを一度に追加する
<div id="btn" class="button"></div>
<script>
const btn = document.getElementById("btn");
btn.classList.add("is-active", "theme-dark"); // 複数まとめて追加
</script>
ここが重要です：複数引数でまとめて追加すると、描画の無駄が減り、コードも短く読みやすくなります。
className と比べた利点（安全・確実・読みやすい）
文字列連結の罠を避けられる
// className の危険な例
box.className += "highlight"; // 前にスペースがないと "cardhighlight" になる
box.className += " hidden"; // これは正しいが、毎回気をつける必要がある
ここが重要です：classList.add は単語（クラス）単位で扱うため、スペースを気にする必要がありません。重複も自動で防ぎます。
部分一致の誤判定がない
className.includes(“light”) のような判定は “highlight” にも反応しますが、classList はクラス名の「完全一致」だけを扱います。ここが重要です：状態のオン/オフが明確になり、バグの芽を減らせます。
状態切り替えの設計（add と remove / toggle の併用）
単純なオン操作は add、オフは remove
<button id="toggle" class="btn">選択</button>
<script>
const btn = document.getElementById("toggle");
function select() { btn.classList.add("is-selected"); }
function unselect() { btn.classList.remove("is-selected"); }
</script>
ここが重要です：オンとオフを明確に分けると、後から読んでも挙動がはっきりします。
条件付きで一括付与（add と toggle の組み合わせ）
<div id="card" class="card"></div>
<script>
const card = document.getElementById("card");
const isError = true;
card.classList.add("ready");
card.classList.toggle("is-error", isError); // 条件次第で付け外し
</script>
ここが重要です：常につけるクラスは add、条件で変わるクラスは toggle(, 条件)。役割を分けると、読みやすさと安全性が上がります。
命名のコツ（クラスは“意味のラベル”にする）
状態プレフィックスを使う
is-active、is-loading、is-error のように“状態”が分かる名前にすると、JS 側での操作対象が明確になります。
<button class="btn is-active">保存</button>
ここが重要です：見た目のテーマ（theme-dark など）と、動作状態（is-）を分けると、JS は is- だけを触ればよくなります。
コンポーネント接頭辞で衝突回避
card-, modal-, menu-* のように範囲を示すと、ページ全体でもクラス名がぶつかりにくくなります。ここが重要です：命名規則が整っていると、classList.add の操作対象が迷子になりません。
実践例（開閉 UI、バリデーション、通知）
ドロワーの開閉で表示を切り替える
<button id="toggle">開く</button>
<aside id="drawer" class="drawer is-hidden">内容</aside>
<script>
const toggle = document.getElementById("toggle");
const drawer = document.getElementById("drawer");
toggle.addEventListener("click", () => {
const hidden = drawer.classList.toggle("is-hidden");
toggle.textContent = hidden ? "開く" : "閉じる";
drawer.classList.add("ready"); // 初期化済み印（重複しない）
});
</script>
ここが重要です：初期化フラグのように“必ず付けたい”クラスは add、一方で表示状態の切り替えは toggle に任せると整理されます。
フォーム入力の妥当性に応じてマークする
<input id="email" type="email" class="field">
<script>
const email = document.getElementById("email");
email.addEventListener("input", () => {
if (email.validity.valid) {
email.classList.remove("is-error");
email.classList.add("is-valid");
} else {
email.classList.remove("is-valid");
email.classList.add("is-error");
}
});
</script>
ここが重要です：エラーと成功は排他的。remove と add をセットで使うと、状態が混ざる事故を防げます。
一括適用（複数クラスを同時に付ける）
<div id="notice" class="message"></div>
<script>
const box = document.getElementById("notice");
box.classList.add("is-show", "type-info"); // 同時付与
</script>
ここが重要です：複数引数でまとめて追加すれば、逐次 add を呼ぶより簡潔で、意図も明確です。
よくある落とし穴と回避策（存在しない要素・タイミング・依存）
要素の存在を確認してから操作する
const el = document.querySelector("#target");
if (!el) return; // null ガード
el.classList.add("ready");
ここが重要です：DOM 構築前に触ると null。defer や DOMContentLoaded 後に実行し、常に null ガードを癖にします。
条件分岐の重複を避ける
function setActive(el, on) {
el.classList.toggle("is-active", !!on); // add/remove を条件で一本化
}
ここが重要です：同じクラスを add/remove する分岐を何度も書かない。ヘルパー関数で一元化するとミスが減ります。
CSS 依存を明確にする
classList.add は見た目を変える“合図”に過ぎません。クラスに対応する CSS（.is-active など）が用意されているか常に確認しましょう。ここが重要です：JS と CSS の契約（クラス名）を揃えるのが保守の鍵です。
まとめ
classList.add は、要素に CSS クラスを重複なく、安全に追加するための基本メソッドです。className のような文字列操作の罠を避け、複数クラスも一括追加できます。状態は is-* の命名で整理し、常に null ガードと実行タイミングを意識。オン/オフは add/remove、条件付きは toggle を併用して、JS は“意味（状態のクラス）だけを触る”。この型を身につければ、初心者でも読みやすく壊れにくい UI 制御が書けます。