Day16.5：DOM操作③の練習問題
classList・style・remove は「見た目を変える」「状態を表現する」「要素を消す」という、
Webアプリの UI 制御に欠かせない機能です。
ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解説をまとめます。
classList の練習問題
問題1：id=”text” に error クラスを追加してください
次の HTML を前提とします。
<p id="text">メッセージ</p>
<button id="btn">エラー表示</button>
CSS はこう定義されているとします。
.error {
color: red;
font-weight: bold;
}
ボタンを押したら error クラスを付けてください。
解答と解説
const textElement = document.getElementById("text");
const btnElement = document.getElementById("btn");
btnElement.addEventListener("click", () => {
textElement.classList.add("error");
});
classList.add は「既存のクラスを保ったまま、新しいクラスを追加する」安全な方法です。
className のように上書きしないため、複数クラスを扱うときに必須です。
classList.remove の練習問題
問題2：error クラスを外して元の見た目に戻してください
次の HTML を前提とします。
<p id="text" class="error">エラー中</p>
<button id="btn">解除</button>
解答と解説
const textElement = document.getElementById("text");
const btnElement = document.getElementById("btn");
btnElement.addEventListener("click", () => {
textElement.classList.remove("error");
});
classList.remove は「そのクラスだけを取り除く」ため、
複数クラスが付いていても安全に扱えます。
classList.toggle の練習問題
問題3：ボタンを押すたびに error クラスを付けたり外したりしてください
次の HTML を前提とします。
<p id="text">切り替えテスト</p>
<button id="btn">切り替え</button>
解答と解説
const textElement = document.getElementById("text");
const btnElement = document.getElementById("btn");
btnElement.addEventListener("click", () => {
textElement.classList.toggle("error");
});
toggle は「付いていなければ追加、付いていれば削除」を自動で行う便利なメソッドです。
ON/OFF の切り替え UI に最適です。
style の練習問題
問題4：クリックしたら文字色を青にしてください
次の HTML を前提とします。
<p id="text">色を変えます</p>
<button id="btn">青にする</button>
解答と解説
const textElement = document.getElementById("text");
const btnElement = document.getElementById("btn");
btnElement.addEventListener("click", () => {
textElement.style.color = "blue";
});
style は「その要素だけに直接 CSS を書く」方法です。
CSS の font-size → fontSize のように、ハイフンをキャメルケースに変換する点が重要です。
style 応用問題
問題5：背景色を黄色にし、文字サイズを 24px にしてください
次の HTML を前提とします。
<p id="text">スタイル変更</p>
<button id="btn">変更</button>
解答と解説
const textElement = document.getElementById("text");
const btnElement = document.getElementById("btn");
btnElement.addEventListener("click", () => {
textElement.style.backgroundColor = "yellow";
textElement.style.fontSize = "24px";
});
style は「一時的な変更」や「細かい調整」に向いています。
複雑な見た目は CSS に任せ、JavaScript は切り替えだけ担当するのがベストです。
remove の練習問題
問題6：クリックしたら id=”text” の要素を削除してください
次の HTML を前提とします。
<p id="text">削除されます</p>
<button id="btn">削除</button>
解答と解説
const textElement = document.getElementById("text");
const btnElement = document.getElementById("btn");
btnElement.addEventListener("click", () => {
textElement.remove();
});
remove は「DOM から完全に取り除く」強い操作です。
一時的に隠すだけなら classList＋CSS（display: none）を使うほうが安全です。
remove 応用問題
問題7：複数のメモの中から、クリックしたメモだけ削除してください
次の HTML を前提とします。
<div id="container">
<p class="memo">メモ1</p>
<p class="memo">メモ2</p>
<p class="memo">メモ3</p>
</div>
解答と解説
const memos = document.querySelectorAll(".memo");
memos.forEach((memo) => {
memo.addEventListener("click", () => {
memo.remove();
});
});
クリックされた要素自身に remove を呼ぶことで、
「どのメモを削除したか」を自然に表現できます。
セキュリティ・堅牢性問題
問題8：id=”text” が存在しない場合、エラーを出して処理を中断してください
次の HTML を前提とします。
<button id="btn">実行</button>
解答と解説
const textElement = document.getElementById("text");
const btnElement = document.getElementById("btn");
if (!textElement) {
console.error("id=\"text\" の要素が見つかりません。HTML を確認してください。");
} else {
btnElement.addEventListener("click", () => {
textElement.classList.add("error");
});
}
DOM 操作では「要素が存在しない」ことがよくあります。
null のまま classList や style を触るとエラーになるため、
null チェックは安全なコードの基本です。
Day16.5 練習問題まとめ
今回の練習問題で、
classList（add / remove / toggle）
style（直接スタイル変更）
remove（要素削除）
null チェックによる安全な DOM 操作
といった UI 制御の基礎がしっかり身につきました。