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

JavaScript JavaScript
スポンサーリンク

Day16.5 後半のゴール

後半では、classList・style・remove を
「ただ知っている道具」から「UI をコントロールする武器」に変えていきます。
クリックイベントと組み合わせて、
「見た目の切り替え」「表示・非表示」「要素の削除」を、自分で設計できるようになるのがゴールです。

Day16.5 後半でつかみたい感覚

クラスを切り替えることで“状態”を見た目に反映できる

style は「その場だけの微調整」に使うと扱いやすい

remove は「本当に消したいときだけ」使う、強い操作だと理解する

classList で「開く／閉じる」を切り替える

折りたたみエリアを作るイメージ

よくある UI に「詳細を表示」「詳細を隠す」という折りたたみがあります。
これを classList で作ってみます。

HTML はこうします。

<style>
  .hidden {
    display: none;
  }
</style>

<button id="toggleButton">詳細を表示</button>
<div id="detail" class="hidden">
  ここに詳細情報が入ります。
</div>

最初は detail に hidden クラスが付いているので、表示されません。
クリックで hidden を付けたり外したりして、「開く／閉じる」を切り替えます。

JavaScript でクラスをトグルする

const toggleButtonElement = document.getElementById("toggleButton");
const detailElement = document.getElementById("detail");

toggleButtonElement.addEventListener("click", () => {
  const isHidden = detailElement.classList.contains("hidden");

  if (isHidden) {
    detailElement.classList.remove("hidden");
    toggleButtonElement.textContent = "詳細を隠す";
  } else {
    detailElement.classList.add("hidden");
    toggleButtonElement.textContent = "詳細を表示";
  }
});
JavaScript

classList.contains(“hidden”) で「今隠れているか」を判定し、
hidden を付けたり外したりしています。
同時にボタンの文字も変えて、「今どっちの状態か」が分かるようにしています。

ここで大事なのは、
「状態（hidden が付いているかどうか）をクラスで表現している」
という考え方です。
状態をクラスに乗せると、CSS と連携しやすくなります。

style で「その場だけ」見た目を変える

ホバー風の「選択中」表現を作る

次は、クリックした要素だけ背景色を変える例です。
CSS でクラスを用意してもいいですが、
ここでは style を使って「その場だけ変える」パターンを見ます。

HTML はこうします。

<p id="item1">アイテム1</p>
<p id="item2">アイテム2</p>
<p id="item3">アイテム3</p>

JavaScript で、クリックされた要素だけ背景色を変えます。

const item1 = document.getElementById("item1");
const item2 = document.getElementById("item2");
const item3 = document.getElementById("item3");

function select(element) {
  item1.style.backgroundColor = "";
  item2.style.backgroundColor = "";
  item3.style.backgroundColor = "";

  element.style.backgroundColor = "yellow";
}

item1.addEventListener("click", () => {
  select(item1);
});

item2.addEventListener("click", () => {
  select(item2);
});

item3.addEventListener("click", () => {
  select(item3);
});
JavaScript

ここでは、
一度全ての要素の backgroundColor を空文字に戻してから、
選択された要素だけに色を付けています。

style を使うと、
「この1箇所だけちょっと変えたい」というときに素早く書けます。
ただし、複雑になってきたら classList＋CSS に移行したほうが管理しやすいです。

classList と style を組み合わせた「エラー表示」

入力チェックとエラー表示

フォームの入力チェックは、
classList と style の良い練習になります。

HTML はこうします。

<style>
  .error {
    border: 2px solid red;
    background-color: #ffecec;
  }
  .error-message {
    color: red;
    font-size: 12px;
  }
</style>

<input id="nameInput" type="text" placeholder="名前を入力">
<button id="submitButton">送信</button>
<p id="errorText" class="error-message"></p>

JavaScript で「空ならエラー」「入力されていればエラー解除」を実装します。

const nameInputElement = document.getElementById("nameInput");
const submitButtonElement = document.getElementById("submitButton");
const errorTextElement = document.getElementById("errorText");

submitButtonElement.addEventListener("click", () => {
  const value = nameInputElement.value.trim();

  if (value === "") {
    nameInputElement.classList.add("error");
    errorTextElement.textContent = "名前を入力してください。";
  } else {
    nameInputElement.classList.remove("error");
    errorTextElement.textContent = "";
  }
});
JavaScript

ここでは、
「エラー状態」を error クラスで表現し、
見た目のルールは CSS に任せています。

もし「エラーのときだけフォーカスを当てたい」など、
一時的な動きを足したいなら style を併用できます。

nameInputElement.style.outline = "none";
JavaScript

classList で「状態」、style で「細かい調整」という役割分担を意識すると、
コードがきれいにまとまります。

remove で「カードを削除する」UI を作る

1つのカードに「削除ボタン」を付ける

Day16 で作った「カード」を思い出して、
そこに「削除」ボタンを付けてみます。

HTML はコンテナだけ用意します。

<div id="cardContainer"></div>

JavaScript でカード生成関数を作ります。

const cardContainerElement = document.getElementById("cardContainer");

function createCard(text) {
  const card = document.createElement("div");
  card.className = "card";

  const p = document.createElement("p");
  p.textContent = text;

  const removeButton = document.createElement("button");
  removeButton.textContent = "削除";

  removeButton.addEventListener("click", () => {
    card.remove();
  });

  card.appendChild(p);
  card.appendChild(removeButton);

  return card;
}

const card1 = createCard("これは1つ目のカードです。");
cardContainerElement.appendChild(card1);
JavaScript

removeButton の click イベントの中で
card.remove() を呼んでいるのがポイントです。

「自分自身ではなく、親要素（カード全体）を消す」ことで、
「このカードを削除」という UI が実現できます。

深掘り：remove は“戻せない”操作だと意識する

remove() は DOM から完全に取り除くので、
「やっぱり戻したい」と思っても簡単には戻せません。

一時的に隠したいだけなら、
classList で hidden クラスを付けるほうが安全です。

.hidden {
  display: none;
}

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

「本当に消すのか」「一時的に隠すだけか」を
設計の段階で意識できると、
ユーザー体験も安全性もぐっと良くなります。

セキュリティと堅牢性の視点

classList と style にユーザー入力を直接使わない

例えば、ユーザーが入力した文字列を
そのまま class 名や style の値に使うのは危険です。

// こういうのは避ける
element.classList.add(userInput);
element.style[userInputKey] = userInputValue;
JavaScript

悪意のある入力で、
意図しないクラスやスタイルを付けられる可能性があります。

class 名や style のキー・値は、
自分で決めた安全なものだけを使う、
というのが基本方針です。

remove を使う前に「本当に必要か」を考える

ユーザーが誤ってクリックしたときに
取り返しがつかない UI は、
セキュリティというより「安全な UX」の観点で問題になります。

重要な要素を remove する前には、
確認ダイアログを出す、
あるいは「削除フラグ（クラス）」を付けて、
本当に消すのは別の操作にする、
といった工夫もよく行われます。

Day16.5 後半のミニサンプル：全部入り

「表示切り替え＋エラー表示＋削除」をまとめた小さなアプリ

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Day16.5 DOM操作③ 後半</title>
    <style>
      .hidden {
        display: none;
      }
      .card {
        border: 1px solid #ccc;
        padding: 8px;
        margin: 4px 0;
      }
      .error {
        border: 2px solid red;
        background-color: #ffecec;
      }
      .error-message {
        color: red;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <button id="toggleFormButton">フォームを表示</button>

    <div id="formArea" class="hidden">
      <p>
        メモ：<input id="memoInput" type="text">
        <button id="addButton">追加</button>
      </p>
      <p id="errorText" class="error-message"></p>
    </div>

    <div id="cardContainer"></div>

    <script>
      const toggleFormButtonElement = document.getElementById("toggleFormButton");
      const formAreaElement = document.getElementById("formArea");
      const memoInputElement = document.getElementById("memoInput");
      const addButtonElement = document.getElementById("addButton");
      const errorTextElement = document.getElementById("errorText");
      const cardContainerElement = document.getElementById("cardContainer");

      toggleFormButtonElement.addEventListener("click", () => {
        const isHidden = formAreaElement.classList.contains("hidden");

        if (isHidden) {
          formAreaElement.classList.remove("hidden");
          toggleFormButtonElement.textContent = "フォームを隠す";
        } else {
          formAreaElement.classList.add("hidden");
          toggleFormButtonElement.textContent = "フォームを表示";
        }
      });

      function createCard(text) {
        const card = document.createElement("div");
        card.className = "card";

        const p = document.createElement("p");
        p.textContent = text;

        const removeButton = document.createElement("button");
        removeButton.textContent = "削除";

        removeButton.addEventListener("click", () => {
          card.remove();
        });

        card.appendChild(p);
        card.appendChild(removeButton);

        return card;
      }

      addButtonElement.addEventListener("click", () => {
        const value = memoInputElement.value.trim();

        if (value === "") {
          memoInputElement.classList.add("error");
          errorTextElement.textContent = "メモを入力してください。";
          return;
        }

        memoInputElement.classList.remove("error");
        errorTextElement.textContent = "";

        const card = createCard(value);
        cardContainerElement.appendChild(card);

        memoInputElement.value = "";
      });
    </script>
  </body>
</html>

この小さなアプリの中に、

classList で表示・非表示を切り替える
classList でエラー状態を表現する
style は CSS に任せ、JavaScript はクラスの付け外しに集中する
remove でカードを削除する

という Day16.5 の要素がすべて詰まっています。

Day16.5 後半のまとめ

classList は「状態をクラスで表現し、CSS と連携して見た目を変える」ための軸。
style は「その場だけの細かい見た目変更」に向いている。
remove は「本当に DOM から消す」強い操作で、隠すだけならクラス＋CSS を使うほうが安全。

後半では、

表示・非表示の切り替え（hidden クラス）
選択状態の表現（背景色の変更）
エラー表示と入力チェック
カードの削除ボタンと remove の使い方
ユーザー入力を class や style に直接使わないという安全意識

まで踏み込みました。

ここまで来たあなたは、
「DOM を増やす・変える・隠す・消す」を、
自分の意図でコントロールできる段階にいます。
この感覚は、この先のアニメーションやフレームワークにもそのままつながっていきます。

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