JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript：Webページを操作できるようになる － Day16.5：DOM操作③

JavaScript JavaScript
スポンサーリンク

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);
JavaScript

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");
});
JavaScript

これで、クリックした瞬間に
<p id=”message” class=”error”> という状態になり、
CSS の .error が効いて赤太字になります。

深掘り：className との違い

class を操作する方法として、
className を直接書き換える方法もあります。

messageElement.className = "error";
JavaScript

ただし、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");
});
JavaScript

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");
});
JavaScript

クリックするたびに、
.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";
});
JavaScript

これで、クリックした瞬間に
<p id=”message” style=”color: blue;”> という状態になり、
文字色が青になります。

CSS のプロパティ名との違いに注意

CSS ではこう書きます。

font-size: 24px;
background-color: yellow;

JavaScript の style では、
ハイフンを消して「キャメルケース」にします。

element.style.fontSize = "24px";
element.style.backgroundColor = "yellow";
JavaScript

font-size → fontSize
background-color → backgroundColor

この変換ルールはよく出てくるので、
「ハイフンを消して、次の単語の頭を大文字にする」と覚えておくと楽です。

classList と style の使い分け

原則：見た目のルールは CSS、切り替えは classList

例えば、
「エラーのときは赤太字にしたい」という要件があるとき、
次の2つの書き方が考えられます。

style で直接書くパターン：

messageElement.style.color = "red";
messageElement.style.fontWeight = "bold";
JavaScript

classList でクラスを付けるパターン：

.error {
  color: red;
  font-weight: bold;
}

messageElement.classList.add("error");
JavaScript

基本的には、
「見た目のルール」は 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();
});
JavaScript

クリックした瞬間、
<p id=”message”>…</p> 自体が DOM から消え、
画面からも完全に消えます。

深掘り：display: none との違い

CSS でこう書くと、見た目からは消えます。

.hidden {
  display: none;
}

messageElement.classList.add("hidden");
JavaScript

この場合、
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 操作を組み立てていきます。

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