Day19：条件 + DOMの練習問題
入力チェックは「ユーザーの入力をそのまま信用しない」ための重要な技術です。
ここでは、Day19 の内容を確実に身につけるために、段階的な練習問題と丁寧な解答・解説をまとめます。
基本問題：空文字チェック
問題1：名前が空の場合は「名前を入力してください」と表示してください
次の HTML を前提とします。
<input id="nameInput" type="text" placeholder="名前">
<button id="submitButton">送信</button>
<p id="message"></p>
解答と解説
const nameInput = document.getElementById("nameInput");
const submitButton = document.getElementById("submitButton");
const message = document.getElementById("message");
submitButton.addEventListener("click", () => {
const name = nameInput.value;
if (name === "") {
message.textContent = "名前を入力してください。";
return;
}
message.textContent = `こんにちは、${name} さん`;
});
入力チェックの最も基本は「空文字かどうか」。
空ならエラーを表示し、正常処理に進まないよう return で止めます。
基本問題：trim を使った実質空チェック
問題2：スペースだけの入力も空として扱ってください
次の HTML を前提とします。
<input id="nameInput" type="text">
<button id="submitButton">送信</button>
<p id="message"></p>
解答と解説
submitButton.addEventListener("click", () => {
const name = nameInput.value.trim();
if (name === "") {
message.textContent = "名前を入力してください。";
return;
}
message.textContent = `こんにちは、${name} さん`;
});
trim() によって前後の空白が取り除かれ、
「スペースだけ」の入力も正しく弾けます。
応用問題：文字数チェック
問題3：名前が20文字を超える場合はエラーにしてください
次の HTML を前提とします。
<input id="nameInput" type="text">
<button id="submitButton">送信</button>
<p id="message"></p>
解答と解説
submitButton.addEventListener("click", () => {
const name = nameInput.value.trim();
if (name === "") {
message.textContent = "名前を入力してください。";
return;
}
if (name.length > 20) {
message.textContent = "名前は20文字以内で入力してください。";
return;
}
message.textContent = `こんにちは、${name} さん`;
});
name.length で文字数を取得できます。
条件を複数書くときは「NG 条件を上から順にチェックして return」が読みやすいです。
応用問題：数字チェック（年齢）
問題4：年齢が数字でない場合はエラーにしてください
次の HTML を前提とします。
<input id="ageInput" type="text" placeholder="年齢">
<button id="submitButton">送信</button>
<p id="message"></p>
解答と解説
const ageInput = document.getElementById("ageInput");
submitButton.addEventListener("click", () => {
const ageText = ageInput.value.trim();
if (ageText === "") {
message.textContent = "年齢を入力してください。";
return;
}
const age = Number(ageText);
if (Number.isNaN(age)) {
message.textContent = "年齢は数字で入力してください。";
return;
}
message.textContent = `あなたは ${age} 歳ですね。`;
});
Number() で数値に変換し、
Number.isNaN() で「数字として解釈できるか」を判定します。
発展問題：複数のエラーをまとめて表示する
問題5：名前と年齢の両方にエラーがある場合、まとめて表示してください
次の HTML を前提とします。
<input id="nameInput" type="text" placeholder="名前">
<input id="ageInput" type="text" placeholder="年齢">
<button id="submitButton">送信</button>
<p id="message"></p>
解答と解説
submitButton.addEventListener("click", () => {
const name = nameInput.value.trim();
const ageText = ageInput.value.trim();
const errors = [];
if (name === "") {
errors.push("名前を入力してください。");
}
if (ageText === "") {
errors.push("年齢を入力してください。");
} else {
const age = Number(ageText);
if (Number.isNaN(age)) {
errors.push("年齢は数字で入力してください。");
} else if (age <= 0) {
errors.push("年齢は1以上の数で入力してください。");
}
}
if (errors.length > 0) {
message.textContent = errors.join(" ");
return;
}
message.textContent = `${name} さんは ${ageText} 歳ですね。`;
});
エラーを配列にためて、最後にまとめて表示する方法です。
複数のエラーを一度に伝えられるため、実務でもよく使われます。
発展問題：エラーのある input を赤くする
問題6：エラーのある入力欄に error クラスを付けて赤くしてください
次の HTML を前提とします。
<style>
.error {
border: 2px solid red;
background-color: #ffecec;
}
</style>
<input id="nameInput" type="text" placeholder="名前">
<input id="ageInput" type="text" placeholder="年齢">
<button id="submitButton">送信</button>
<p id="message"></p>
解答と解説
submitButton.addEventListener("click", () => {
const name = nameInput.value.trim();
const ageText = ageInput.value.trim();
nameInput.classList.remove("error");
ageInput.classList.remove("error");
const errors = [];
if (name === "") {
errors.push("名前を入力してください。");
nameInput.classList.add("error");
}
if (ageText === "") {
errors.push("年齢を入力してください。");
ageInput.classList.add("error");
} else {
const age = Number(ageText);
if (Number.isNaN(age)) {
errors.push("年齢は数字で入力してください。");
ageInput.classList.add("error");
} else if (age <= 0) {
errors.push("年齢は1以上の数で入力してください。");
ageInput.classList.add("error");
}
}
if (errors.length > 0) {
message.textContent = errors.join(" ");
return;
}
message.textContent = `${name} さんは ${ageText} 歳ですね。`;
});
classList.add / remove を使うことで、
「どの項目がエラーなのか」を視覚的に伝えられます。
セキュリティ問題：ユーザー入力を innerHTML に入れない
問題7：innerHTML を使うと危険な理由を説明してください
（文章で答える問題）
解答と解説
innerHTML は文字列を「HTML として解釈」するため、
ユーザーが <script>...</script> のような文字列を入力した場合、
それが実行されてしまう可能性があります（XSS）。
安全に表示するには textContent を使います。
textContent は「すべてをただの文字として扱う」ため、
どんな入力でも安全に画面へ表示できます。
Day19 練習問題まとめ
今回の練習問題で、
空文字チェック
trim による実質空チェック
文字数チェック
数値チェック（Number / isNaN）
複数エラーのまとめ表示
エラー項目の視覚的強調（classList）
textContent による安全な表示
といった入力チェックの基礎〜応用がしっかり身につきました。