Day16.5 前半のゴール
Day16.5 では、DOM 操作をもう一段レベルアップさせます。
これまで「要素を増やす・文字を変える」はできるようになりました。
ここからは「見た目を変える」「要素を消す」という、実用的な操作に踏み込みます。
前半のゴールは次の3つです。
Day16.5 前半でつかみたい感覚
classList で「見た目のモード」を切り替える
style で「その場だけの見た目変更」ができる
remove で「DOM から要素を消せる」という感覚を持つ（軽く触れる）
後半で本格的に組み合わせていくので、前半では「道具の正体」をしっかり理解していきます。
class と classList の関係を整理する
HTML の class は「見た目のラベル」
まず、HTML の class から整理します。
<p class="error">エラーが発生しました</p>
この class=”error” は、CSS でこう書くための“ラベル”です。
.error {
color: red;
font-weight: bold;
}
つまり class は、
「この要素は error というグループに属しています」
という印のようなものです。
JavaScript からは、この class を動的に付けたり外したりできます。
そのための入り口が classList です。
classList は「class の操作専用インターフェース」
classList は、要素が持っている class を
配列っぽく扱うためのプロパティです。
const p = document.getElementById("message");
console.log(p.classList);
classList は、
add / remove / toggle などのメソッドを持っていて、
「class を増やす・消す・切り替える」ことができます。
classList.add でクラスを追加する
基本の使い方
次の HTML を考えます。
<p id="message">メッセージ</p>
<button id="errorButton">エラー表示</button>
CSS はこうだとします。
.error {
color: red;
font-weight: bold;
}
JavaScript で、ボタンを押したら error クラスを付けてみます。
const messageElement = document.getElementById("message");
const errorButtonElement = document.getElementById("errorButton");
errorButtonElement.addEventListener("click", () => {
messageElement.classList.add("error");
});
これで、クリックした瞬間に
<p id=”message” class=”error”> という状態になり、
CSS の .error が効いて赤太字になります。
深掘り：className との違い
class を操作する方法として、
className を直接書き換える方法もあります。
messageElement.className = "error";
ただし、className を使うと
「元々付いていたクラスを全部上書きしてしまう」
という問題があります。
classList.add は「既存のクラスを保ったまま、1つだけ追加する」ので、
安全で意図が明確です。
classList.remove でクラスを外す
クラスを取り除いて元の見た目に戻す
さきほどの例に「エラー解除」ボタンを追加してみます。
<p id="message">メッセージ</p>
<button id="errorButton">エラー表示</button>
<button id="clearButton">エラー解除</button>
JavaScript はこう書けます。
const messageElement = document.getElementById("message");
const errorButtonElement = document.getElementById("errorButton");
const clearButtonElement = document.getElementById("clearButton");
errorButtonElement.addEventListener("click", () => {
messageElement.classList.add("error");
});
clearButtonElement.addEventListener("click", () => {
messageElement.classList.remove("error");
});
classList.remove(“error”) を呼ぶと、
そのクラスだけが外れます。
結果として、
CSS の .error が効かなくなり、元の見た目に戻ります。
classList.toggle でクラスを切り替える
ON / OFF を1行で書ける便利メソッド
add と remove を組み合わせる代わりに、
toggle を使うと「付いていなければ付ける、付いていれば外す」を
1行で書けます。
<p id="message">メッセージ</p>
<button id="toggleButton">エラー切り替え</button>
const messageElement = document.getElementById("message");
const toggleButtonElement = document.getElementById("toggleButton");
toggleButtonElement.addEventListener("click", () => {
messageElement.classList.toggle("error");
});
クリックするたびに、
.error が付いたり外れたりします。
内部的には、
クラスが付いていなければ add
クラスが付いていれば remove
を自動でやってくれています。
style プロパティで直接見た目を変える
style は「その要素だけに直接 CSS を書く」
classList は「クラスを付け替えて CSS を効かせる」方法でした。
一方、style プロパティは
「その要素の style 属性を直接いじる」方法です。
<p id="message">メッセージ</p>
<button id="colorButton">色を変える</button>
const messageElement = document.getElementById("message");
const colorButtonElement = document.getElementById("colorButton");
colorButtonElement.addEventListener("click", () => {
messageElement.style.color = "blue";
});
これで、クリックした瞬間に
<p id=”message” style=”color: blue;”> という状態になり、
文字色が青になります。
CSS のプロパティ名との違いに注意
CSS ではこう書きます。
font-size: 24px;
background-color: yellow;
JavaScript の style では、
ハイフンを消して「キャメルケース」にします。
element.style.fontSize = "24px";
element.style.backgroundColor = "yellow";
font-size → fontSize
background-color → backgroundColor
この変換ルールはよく出てくるので、
「ハイフンを消して、次の単語の頭を大文字にする」と覚えておくと楽です。
classList と style の使い分け
原則：見た目のルールは CSS、切り替えは classList
例えば、
「エラーのときは赤太字にしたい」という要件があるとき、
次の2つの書き方が考えられます。
style で直接書くパターン：
messageElement.style.color = "red";
messageElement.style.fontWeight = "bold";
classList でクラスを付けるパターン：
.error {
color: red;
font-weight: bold;
}
messageElement.classList.add("error");
基本的には、
「見た目のルール」は CSS に書き、
「どのルールを適用するか」は classList で切り替える、
という設計のほうがきれいです。
style は「一時的にちょっと変えたい」「その場だけの調整をしたい」ときに使う、
というイメージを持っておくとバランスが良くなります。
remove で要素を DOM から消す
remove は「その要素自体を消す」
remove は、
「その要素を DOM ツリーから取り除く」メソッドです。
<p id="message">このメッセージは消されます</p>
<button id="removeButton">削除</button>
const messageElement = document.getElementById("message");
const removeButtonElement = document.getElementById("removeButton");
removeButtonElement.addEventListener("click", () => {
messageElement.remove();
});
クリックした瞬間、
<p id=”message”>…</p> 自体が DOM から消え、
画面からも完全に消えます。
深掘り：display: none との違い
CSS でこう書くと、見た目からは消えます。
.hidden {
display: none;
}
messageElement.classList.add("hidden");
この場合、
DOM には要素が残っていますが、
表示されていないだけです。
一方、remove() は
DOM から完全に取り除くので、
JavaScript からもその要素は扱えなくなります。
「一時的に隠したい」なら classList＋CSS
「本当に消したい」なら remove
という使い分けが大事です。
Day16.5 前半のミニサンプル
エラー表示と削除をまとめた例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day16.5 DOM操作③ 前半</title>
<style>
.error {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p id="message">正常な状態です。</p>
<button id="errorButton">エラー表示</button>
<button id="clearButton">エラー解除</button>
<button id="removeButton">メッセージ削除</button>
<script>
const messageElement = document.getElementById("message");
const errorButtonElement = document.getElementById("errorButton");
const clearButtonElement = document.getElementById("clearButton");
const removeButtonElement = document.getElementById("removeButton");
errorButtonElement.addEventListener("click", () => {
messageElement.classList.add("error");
messageElement.textContent = "エラーが発生しました。";
});
clearButtonElement.addEventListener("click", () => {
messageElement.classList.remove("error");
messageElement.textContent = "正常な状態です。";
});
removeButtonElement.addEventListener("click", () => {
messageElement.remove();
});
</script>
</body>
</html>
この小さな例の中に、
classList.add / remove
style（今回は CSS 側に定義）
remove
の要素がすべて入っています。
Day16.5 前半のまとめ
classList は「クラスを付けたり外したりして、見た目のモードを切り替える」ための道具。
style は「その要素だけに直接 CSS を書き込む」ための道具。
remove は「要素自体を DOM から消す」ための道具。
前半では、
classList.add / remove / toggle の基本
className との違い
style プロパティの書き方（fontSize / backgroundColor など）
classList と style の使い分けの考え方
remove と display: none の違い
までを押さえました。
後半では、
click イベントと組み合わせて
「表示・非表示の切り替え」「カードの削除」「状態に応じた見た目変更」など、
より実践的な UI 操作を組み立てていきます。