前回、ボタンをクリックして「背景色を変える」ことに成功しました。
その時、こんなコードを書きましたね。
element.style.backgroundColor = "red";これでも動きますが、もし「文字色も変えて、枠線もつけて、フォントも大きくしたい」となったらどうでしょう？
JSの中にCSSの命令がズラズラ並んでしまい、読みづらくて仕方がありません。
そこで、プロが使うスマートな方法を紹介します。
「classList（クラスリスト）」を使って、あらかじめ用意したCSSクラスをペタッと貼る方法です。
イメージは「着せ替え人形」
直接 `style` を書き換えるのは、人形の体に直接絵の具を塗るようなものです（後で消すのが大変！）。
対して `classList` は、「赤い服」や「青い服」をあらかじめ用意しておいて、それを着せたり脱がせたりするイメージです。
3つの基本コマンド
使うのは以下の3つだけです。
| コマンド | 意味 | 使い道 |
|---|---|---|
| classList.add(“クラス名”) | クラスをつける | 「正解！」の時に赤くする、など |
| classList.remove(“クラス名”) | クラスを外す | リセットボタンを押した時、など |
| classList.toggle(“クラス名”) | つけ外しする （スイッチ） |
メニューの開閉、ダークモード切替 |
特に toggle（トグル） は最強です。
「ついていれば外す、外れていればつける」を自動で判断してくれるので、IF文を書く必要すらありません。
実践：1秒で作る「ダークモード」スイッチ
では、最近流行りのダークモード切り替えボタンを作ってみましょう。
JSのコードが驚くほど短くなることに注目してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
/* ベースのスタイル（ライトモード） */
body {
background-color: white;
color: black;
transition: 0.5s; /* ふわっと切り替える */
padding: 20px;
}
/* ダークモード用のクラス（着せ替え用の服） */
.dark-theme {
background-color: #333;
color: white;
}
/* ボタンのデザイン */
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>ダークモードのテスト</h1>
<p>ボタンを押すと、画面の色が反転します。</p>
<button id="toggle-btn">モード切り替え</button>
<script>
const btn = document.querySelector("#toggle-btn");
// ボタンが押されたら...
btn.addEventListener("click", function() {
// bodyタグに「dark-theme」クラスをつけ外しする！
document.body.classList.toggle("dark-theme");
});
</script>
</body>
</html>解説：役割分担ができている
このコードの素晴らしい点は、「デザイン（CSS）」と「動き（JS）」が完全に分かれていることです。
- CSSの役割： 「ダークモードになったら黒くする」という見た目を定義。
- JSの役割： 「クリックされたらクラスを付け替える」というスイッチ操作だけ担当。
これなら、後で「ダークモードの色を紺色にしたい」と思っても、CSSだけ書き換えればOKですよね。
これがメンテナンスしやすいコードの秘訣です。
【応用】ハンバーガーメニューも同じ仕組み
Web制作で必ず出てくる「スマホ用のメニューが開く動き」。
実はこれも、toggle を使って作られています。
- CSSで、
.openというクラスがついたら「メニューを画面内にスライドさせる」と書いておく。 - JSで、ハンバーガーボタンが押されたら、メニューに
classList.toggle("open")をする。
たったこれだけです。
「動くサイト」の正体は、実は単純な「クラスの付け替え」だったのです。
まとめ
- スタイルを直接いじらず、クラス操作を使おう。
- つけるなら
add、外すならremove。 - スイッチ機能なら
toggleが最強！
これで「見た目をガラッと変える機能」が作れるようになりました。
次回は、入力フォームに入れた文字を受け取って計算する「フォーム操作」に挑戦しましょう！
📝 今日のミニテスト
クリックで答え合わせ！
Q1. 要素にクラス「active」を追加する正しいコードは？
正解：element.classList.add("active")
クラス名の前のドット（.）は不要です！ add(".active") と書かないように注意しましょう。
Q2. クラスがついているか自動判定して、ON/OFFを切り替えるメソッドは？
正解：toggle（トグル）
これを使えば、「if文でクラスがあるかチェックして…」という処理を書かなくて済みます。
Q3. 実践問題：ID=”box” の要素から、クラス “hidden” を削除するコードを書いてください。
const box = document.querySelector("#box");
box.classList.①( ② );
// 答え
// ① remove
// ② "hidden"