4日目のゴールと今日のテーマ
4日目のテーマは「入力欄が複数になっても、混乱せずにチェックできる設計を身につけること」です。
昨日までは「入力欄が1つ」でしたが、現実のフォームは複数項目があるのが普通です。
名前
メールアドレス
コメント
などなど。
今日はその第一歩として、
空チェック
文字数制限
条件分岐
エラー表示
これらを “複数項目に対して” 正しく扱う練習をします。
入力欄が増えると何が難しくなるのか
1つの入力欄なら簡単だった
昨日まではこうでした。
入力欄 → validate → エラー表示
しかし入力欄が2つになると、こうなります。
名前欄 → 名前用のチェック
コメント欄 → コメント用のチェック
エラー表示 → 項目ごとに別々に出す必要がある
つまり、
「どの項目のエラーなのか」
「どこに表示するのか」
を整理しないと、コードが一気にぐちゃぐちゃになります。
2つの入力欄を用意してみる
HTML のイメージ
<input id="name-input" type="text" placeholder="名前を入力" />
<div id="name-error"></div>
<input id="comment-input" type="text" placeholder="コメントを入力" />
<div id="comment-error"></div>
<button id="submit-button">送信</button>
名前欄とコメント欄、それぞれにエラー表示場所を用意しています。
validate を「項目ごと」に使える形にする
validate を“汎用化”する
昨日の validate は「1つの入力欄専用」でした。
今日は「どの項目にも使える」形にします。
function validate(text, minLength, maxLength) {
const trimmed = text.trim();
if (trimmed === "") {
return "未入力です。";
}
if (trimmed.length < minLength) {
return minLength + "文字以上で入力してください。";
}
if (trimmed.length > maxLength) {
return maxLength + "文字以内で入力してください。";
}
return "";
}
ここでの重要ポイントは、
チェック条件（minLength / maxLength）を引数で受け取るようにしたこと。
これで、
名前欄 → 2〜20文字
コメント欄 → 5〜100文字
のように、項目ごとにルールを変えられます。
項目ごとにエラー表示を分ける
showError を「どこに表示するか」指定できるようにする
function showError(element, message) {
element.textContent = message;
}
これで、
名前欄のエラー → nameErrorEl
コメント欄のエラー → commentErrorEl
というように、表示先を自由に変えられます。
handleSubmit を“項目ごとにチェックする流れ”にする
全体の流れを整理する
function handleSubmit() {
const nameValue = nameInputEl.value;
const commentValue = commentInputEl.value;
const nameError = validate(nameValue, 2, 20);
const commentError = validate(commentValue, 5, 100);
showError(nameErrorEl, nameError);
showError(commentErrorEl, commentError);
if (nameError !== "" || commentError !== "") {
return;
}
alert("送信完了しました！");
}
ここでの深掘りポイントは3つ。
1. validate を2回呼んでいる
名前用のチェック
コメント用のチェック
同じ関数を使い回しているのがポイント。
2. エラー表示も項目ごと
名前のエラーは nameErrorEl
コメントのエラーは commentErrorEl
「どの項目のエラーか」が明確。
3. 最後に「どちらかがエラーなら送信しない」
複数項目チェックの基本パターンです。
入力中にエラーを消す（UX改善）
名前欄を入力したら名前のエラーだけ消す
nameInputEl.addEventListener("input", () => {
showError(nameErrorEl, "");
});
コメント欄も同様
commentInputEl.addEventListener("input", () => {
showError(commentErrorEl, "");
});
ここでのポイントは、
「入力中にエラーを消すのは、その項目だけ」
ということ。
名前を直しているのに、コメントのエラーまで消えるのは不自然ですよね。
こういう細かいUXの気配りが、アプリの質を上げます。
4日目のミニ発展：エラーがある項目を“強調”する
エラーがあるときに赤枠をつける
CSS を使って、エラー時に赤枠をつけることもできます。
.error {
border: 2px solid red;
}
JavaScript でこう操作します。
if (nameError !== "") {
nameInputEl.classList.add("error");
} else {
nameInputEl.classList.remove("error");
}
これで、
エラー → 赤枠
OK → 赤枠解除
という視覚的なフィードバックができます。
4日目のまとめと、5日目へのつなぎ
今日やったことを整理します。
複数項目（名前・コメント）を扱うために、validate を汎用化した。
showError を「どこに表示するか」指定できる形にした。
handleSubmit を「項目ごとにチェック → 項目ごとにエラー表示 → 全体判定」という流れに整理した。
入力中にその項目のエラーだけ消すことで、UXを改善した。
エラー時に赤枠をつけるなど、視覚的なフィードバックの設計にも触れた。
5日目では、ここからさらに
複数エラーをまとめて表示する
入力欄ごとに「成功メッセージ」も出す
チェックの種類を増やす（数字だけ、ひらがなだけなど）
といった「実用的なフォーム」に近づけていきます。
最後にひとつだけ。
今日の中で、「あ、これフォームっぽくなってきたな」と感じた瞬間はどこでしたか。
validate を使い回せたところか、項目ごとにエラーを出し分けられたところか。
その“気持ちよさ”が、あなたの設計センスの核になります。
