6日目のゴールと今日やること
6日目のテーマは
「フォーム送信シミュレーターを“エラーに強く、整理されたアプリ”へ進化させる」
ことです。
ここまでであなたは、
入力 → 確認 → 擬似送信完了 の流れを作り、
バリデーションや画面切り替えも扱えるようになりました。
6日目はここに、
- バリデーション（入力チェック）を関数化して整理する
- エラーを項目ごとに表示する
- 完了画面を“ユーザーに寄り添う形”にする
- formData を JSON 的に扱う感覚を身につける
という、アプリの「質」を上げる作業を行います。
バリデーションを関数化して整理する
submit の中にバリデーションを書くと何が問題か
昨日までのコードでは、
submit の中に直接バリデーションを書いていました。
if (!formData.name) {
errorMessage.textContent = "名前を入力してください。";
return;
}
これでも動きますが、
項目が増えると submit の中がどんどん長くなり、
「どこが何をしているのか」が分かりにくくなります。
validateForm 関数を作る
バリデーションは「判定するだけの関数」に分離します。
function validateForm(data) {
const errors = {};
if (!data.name) {
errors.name = "名前を入力してください。";
}
if (!data.email) {
errors.email = "メールアドレスを入力してください。";
}
return errors;
}
深掘り：エラーを“オブジェクトで返す”理由
フォームでは、
- どの項目が
- どんな理由でエラーなのか
を知る必要があります。
そのため、
エラーをまとめたオブジェクトを返す
という形が最も扱いやすいのです。
エラーを「項目ごと」に表示する
HTML 側にエラー表示用の枠を用意する
<p id="error-name" class="error"></p>
<p id="error-email" class="error"></p>
showErrors 関数でまとめて表示する
function showErrors(errors) {
const errorElements = document.querySelectorAll(".error");
errorElements.forEach(el => (el.textContent = ""));
for (const key in errors) {
const el = document.getElementById(`error-${key}`);
if (el) el.textContent = errors[key];
}
}
深掘り：エラー表示の「リセット」が重要
フォームでは、
前回のエラーが残っているとユーザーが混乱します。
そのため、
- まず全てのエラーを空にする
- 今回のエラーだけ表示する
という流れが必須です。
完了画面を“ユーザーに寄り添う形”にする
完了画面に名前を入れる
<p id="completeMessage"></p>
function showCompleteScreen(data) {
const msg = document.getElementById("completeMessage");
msg.textContent = `${data.name} さん、送信が完了しました。ありがとうございました。`;
completeScreen.style.display = "block";
}
深掘り：入力内容を返すと“アプリ感”が一気に上がる
- 名前を呼ぶ
- 入力内容の一部を表示する
こうした小さな工夫が、
「あなたのためのアプリ」という印象を強くします。
formData を「JSON 的に扱う」感覚を身につける
formData はそのまま JSON にできる
例えば formData がこうなら、
{
name: "山田太郎",
email: "taro@example.com",
interests: ["プログラミング", "デザイン"]
}
これを JSON 文字列に変換できます。
console.log(JSON.stringify(formData));
深掘り：なぜ JSON を意識するべきなのか
実際のフォーム送信（Ajax）では、
- formData を JSON に変換して
- サーバーに送る
という流れが標準です。
今はサーバーに送っていませんが、
「formData は JSON として扱える」
という感覚を持つことが、次のステップにつながります。
6日目の完成コード（要点まとめ）
JavaScript（重要部分のみ）
let formData = {};
function validateForm(data) {
const errors = {};
if (!data.name) errors.name = "名前を入力してください。";
if (!data.email) errors.email = "メールアドレスを入力してください。";
return errors;
}
function showErrors(errors) {
const errorElements = document.querySelectorAll(".error");
errorElements.forEach(el => (el.textContent = ""));
for (const key in errors) {
const el = document.getElementById(`error-${key}`);
if (el) el.textContent = errors[key];
}
}
function showCompleteScreen(data) {
const msg = document.getElementById("completeMessage");
msg.textContent = `${data.name} さん、送信が完了しました。ありがとうございました。`;
completeScreen.style.display = "block";
}
form.addEventListener("submit", (e) => {
e.preventDefault();
formData = collectFormData();
const errors = validateForm(formData);
if (Object.keys(errors).length > 0) {
showErrors(errors);
return;
}
showErrors({});
renderConfirmScreen(formData);
form.style.display = "none";
confirmScreen.style.display = "block";
});
今日いちばん深く理解してほしいこと
「判定」と「表示」を分けるとコードは一気に読みやすくなる
- validateForm → 何がダメかを判断する
- showErrors → それを画面に出す
この分離は、
フォームアプリだけでなく、
あらゆるアプリで役立つ“設計の基本”です。
あなたのフォームアプリはもう“実戦レベル”
6日目までであなたは、
- 入力収集
- バリデーション
- 確認画面生成
- 擬似送信
- 完了画面演出
これらをすべて扱えるようになりました。
これはもう立派な「ミニ Web アプリ」です。
7日目へのつなぎ
7日目は最終日。
- コード全体にコメントをつけて整理する
- 自分なりのデザインや文言にアレンジする
- 「自分は何ができるようになったか」を言語化する
という、“作品として仕上げる時間”に入ります。
ここまで来たあなたなら、
胸を張って「フォームアプリを作れる人」と言えます。
