Day19 前半のゴール
Day19 は「条件分岐（if）＋ DOM ＋ フォーム入力」を組み合わせて、
“ちゃんと入力されているかチェックする” という、超実務的なテーマに入ります。
前半のゴールはこうです。
Day19 前半でつかみたい感覚
入力値を if で判定して、「OK か NG か」を分ける
NG のときは、メッセージや見た目でユーザーに伝える
「入力をそのまま信用しない」という感覚を持つ（セキュリティの第一歩）
入力チェックとは何か
「ユーザーの入力をそのまま通さない」仕組み
入力チェック（バリデーション）は、
ユーザーが入力した内容が「条件を満たしているか」を確認する仕組みです。
何も入力されていない
数字であるべきところに文字が入っている
文字数が長すぎる・短すぎる
こういった「おかしな入力」を、
if 文で判定して、エラーとして扱います。
JavaScript では、
フォーム送信やボタンクリックのタイミングで value を取り出し、
if で条件をチェックし、
NG ならエラーメッセージを表示する、という流れになります。
一番基本の入力チェック：空文字チェック
何も入力されていない場合にエラーを出す
まずは「空かどうか」をチェックする一番シンプルな例から。
<input id="nameInput" type="text" placeholder="名前を入力">
<button id="submitButton">送信</button>
<p id="message"></p>
JavaScript はこう書きます。
const nameInputElement = document.getElementById("nameInput");
const submitButtonElement = document.getElementById("submitButton");
const messageElement = document.getElementById("message");
submitButtonElement.addEventListener("click", () => {
const name = nameInputElement.value;
if (name === "") {
messageElement.textContent = "名前を入力してください。";
return;
}
messageElement.textContent = `こんにちは、${name} さん`;
});
ここで重要なのは if の位置と意味です。
入力値を変数 name に入れる
if (name === “”) で「空かどうか」を判定する
空ならエラーメッセージを表示して return で処理を終わらせる
空でなければ、正常な処理（挨拶メッセージ）に進む
この「NG なら早めに return する」書き方は、
実務でもよく使うパターンです。
trim を使った「実質空」のチェック
スペースだけの入力も弾く
ユーザーが「スペースだけ」入力している場合も、
実質的には空とみなしたいことが多いです。
そのときに使うのが trim です。
submitButtonElement.addEventListener("click", () => {
const name = nameInputElement.value.trim();
if (name === "") {
messageElement.textContent = "名前を入力してください。";
return;
}
messageElement.textContent = `こんにちは、${name} さん`;
});
trim() は、文字列の前後にある空白（スペースや改行）を取り除きます。
これにより、「スペースだけ」「改行だけ」の入力も空として扱えます。
ここでのポイントは、
value をそのまま if に書くのではなく、一度加工してから判定する
という流れです。
条件を増やす：文字数チェック
「短すぎる」「長すぎる」を判定する
次は、名前の長さに条件を付けてみます。
「1文字以上、20文字以下」というルールにしてみましょう。
submitButtonElement.addEventListener("click", () => {
const name = nameInputElement.value.trim();
if (name === "") {
messageElement.textContent = "名前を入力してください。";
return;
}
if (name.length > 20) {
messageElement.textContent = "名前は20文字以内で入力してください。";
return;
}
messageElement.textContent = `こんにちは、${name} さん`;
});
ここで新しく出てきたのが length です。
name.length は「文字数」を表します。
if (name.length > 20) で「20文字を超えているか」を判定しています。
条件が増えたときも、
「NG 条件を上から順にチェックして、当てはまったらメッセージを出して return」
というパターンで書くと、読みやすくなります。
数値入力のチェック：数字かどうか
年齢が「数字として正しいか」を判定する
次は、年齢の入力チェックを考えてみます。
<input id="ageInput" type="text" placeholder="年齢">
<button id="submitButton">送信</button>
<p id="message"></p>
JavaScript で、
「空でない」「数字である」「0より大きい」という条件をチェックしてみます。
const ageInputElement = document.getElementById("ageInput");
const submitButtonElement = document.getElementById("submitButton");
const messageElement = document.getElementById("message");
submitButtonElement.addEventListener("click", () => {
const ageText = ageInputElement.value.trim();
if (ageText === "") {
messageElement.textContent = "年齢を入力してください。";
return;
}
const age = Number(ageText);
if (Number.isNaN(age)) {
messageElement.textContent = "年齢は数字で入力してください。";
return;
}
if (age <= 0) {
messageElement.textContent = "年齢は1以上の数で入力してください。";
return;
}
messageElement.textContent = `あなたは ${age} 歳ですね。`;
});
ここでの重要ポイントは三つです。
ageText は文字列なので、そのままでは「数字かどうか」が判定しづらい
Number(ageText) で数値に変換する
Number.isNaN(age) で「変換に失敗したかどうか」を判定する
「数字として解釈できない文字列」は NaN（Not a Number）になります。
これを if で弾くことで、「abc」や「12a」などの不正な入力を防げます。
条件と DOM を組み合わせる：エラー表示の場所を決める
エラーは「専用の場所」に出す
入力チェックの結果を、
alert ではなく画面上の特定の場所に表示するのが、
今どきの Web アプリの基本です。
さきほどの例では、messageElement.textContent にエラーを表示していました。
messageElement.textContent = "年齢を入力してください。";
この「エラー専用の p 要素」を用意しておくことで、
ユーザーはどこを見ればいいか迷わなくなります。
さらに一歩進めて、
エラーのときだけ赤く表示することもできます。
<p id="message" class="error-message"></p>
.error-message {
color: red;
font-size: 12px;
}
messageElement.textContent = "年齢を入力してください。";
Day16.5 で学んだ classList と組み合わせれば、
「エラーのときだけ枠線を赤くする」なども簡単にできますが、
Day19 前半ではまず「メッセージを出す場所を決める」ことに集中しましょう。
セキュリティの視点：入力チェックは“防波堤”の一つ
「フロントエンドのチェックだけでは不十分」だけど、ないよりはずっと良い
本番のサービスでは、
本当に重要なのはサーバー側のチェックです。
ブラウザ側の JavaScript は、ユーザーが無効化したり書き換えたりできるからです。
ただし、フロントエンドの入力チェックにも大きな意味があります。
ユーザーに「どこが間違っているか」をすぐに伝えられる
明らかにおかしい入力をサーバーに送らないで済む
攻撃ではなく単なるミスを、その場で防げる
Day19 の段階では、
「入力はそのまま信用しない」「条件でちゃんと判定する」
というマインドセットを持つことが一番大事です。
Day19 前半のミニサンプル
名前と年齢の入力チェックをまとめた例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day19 条件 + DOM 前半</title>
</head>
<body>
<h1>プロフィール入力</h1>
<p>
名前：<input id="nameInput" type="text">
</p>
<p>
年齢：<input id="ageInput" type="text">
</p>
<button id="submitButton">送信</button>
<p id="message"></p>
<script>
const nameInputElement = document.getElementById("nameInput");
const ageInputElement = document.getElementById("ageInput");
const submitButtonElement = document.getElementById("submitButton");
const messageElement = document.getElementById("message");
submitButtonElement.addEventListener("click", () => {
const name = nameInputElement.value.trim();
const ageText = ageInputElement.value.trim();
if (name === "") {
messageElement.textContent = "名前を入力してください。";
return;
}
if (ageText === "") {
messageElement.textContent = "年齢を入力してください。";
return;
}
const age = Number(ageText);
if (Number.isNaN(age)) {
messageElement.textContent = "年齢は数字で入力してください。";
return;
}
if (age <= 0) {
messageElement.textContent = "年齢は1以上の数で入力してください。";
return;
}
messageElement.textContent = `${name} さんは ${age} 歳ですね。`;
});
</script>
</body>
</html>
この小さな例の中に、Day19 前半の要素がすべて入っています。
value を取得する
trim で前後の空白を削る
if で条件を順番にチェックする
Number と Number.isNaN で数値として妥当か判定する
NG のときはメッセージを表示して return で処理を止める
Day19 前半のまとめ
Day19 前半では、
「条件分岐（if）＋ DOM ＋ input.value」を組み合わせて、
入力チェックの基本パターンを作りました。
空文字チェック
trim による「実質空」の判定
length による文字数チェック
Number / Number.isNaN による数値チェック
エラーメッセージを DOM に表示する流れ
ここまで理解できていれば、
「入力をそのまま通さない」「条件でちゃんと判定する」という
プロっぽい感覚が、もう芽生え始めています。
後半では、
複数のエラーをまとめて表示したり、
classList と組み合わせて見た目でエラーを伝えたり、
より“フォームらしい”入力チェックに踏み込んでいきます。