3日目のゴールと今日やること
3日目のテーマは
「フォーム送信シミュレーターを“本物のフォームアプリに近づける”」
ことです。
1日目：フォーム送信の流れを理解
2日目：バリデーション（入力チェック）と戻る機能を追加
そして3日目は、次のステップに進みます。
- 入力内容を「オブジェクト」で管理する
- 確認画面をテンプレート化して自動生成する
- メール形式チェックなどの“実用的なバリデーション”を追加
- 擬似送信完了に「読み込み中アニメーション」を入れる
今日の内容を理解すると、
あなたのフォームアプリは一気に“プロのフォーム”に近づきます。
入力内容を「オブジェクト」で管理する
なぜオブジェクトで管理するのか？
2日目までは、
入力内容を1つずつ変数に入れていました。
const nameValue = document.getElementById("nameInput").value;
const emailValue = document.getElementById("emailInput").value;
項目が3つならまだいいですが、
10項目、20項目になると管理が大変です。
そこで登場するのが オブジェクト です。
入力内容をまとめて管理する
const formData = {
name: "",
email: "",
message: ""
};
フォーム送信時にまとめて代入します。
formData.name = document.getElementById("nameInput").value;
formData.email = document.getElementById("emailInput").value;
formData.message = document.getElementById("messageInput").value;
深掘り：オブジェクト管理のメリット
- 項目が増えてもコードが散らばらない
- 確認画面に表示するときも楽
- 送信処理（擬似送信）に渡しやすい
- 実際の Web アプリでも必ず使う方法
フォームアプリは「データ管理」が重要です。
オブジェクトはその第一歩です。
確認画面を「テンプレート化」する
2日目までは手作業で表示していた
confirmName.textContent = `名前：${formData.name}`;
confirmEmail.textContent = `メール：${formData.email}`;
項目が増えると、
この作業がどんどん増えていきます。
テンプレートを使って自動生成する
HTML に確認画面の枠だけ用意します。
<div id="confirmList"></div>
JavaScript で自動生成します。
const confirmList = document.getElementById("confirmList");
confirmList.innerHTML = `
<p>名前：${formData.name}</p>
<p>メール：${formData.email}</p>
<p>メッセージ：${formData.message}</p>
`;
深掘り：テンプレート化は“実用アプリの必須技術”
テンプレート化すると、
- 項目が増えても HTML を書き換えなくていい
- データと UI の分離が進む
- コードが読みやすくなる
実際のフォームアプリはすべてこの方式です。
メール形式チェックを追加する（実用バリデーション）
メール形式チェックの基本
JavaScript では正規表現を使います。
function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
フォーム送信時にチェックします。
if (!isValidEmail(formData.email)) {
errorMessage.textContent = "メールアドレスの形式が正しくありません。";
return;
}
深掘り：正規表現は“パターンを判定する道具”
メールアドレスのように
「決まった形をしている文字列」を判定するのに最適です。
初心者には難しく見えますが、
「メール形式チェックに使うもの」と覚えておけばOKです。
擬似送信完了に「読み込み中アニメーション」を追加する
完了画面に行く前に“送信中”を挟む
HTML に読み込み画面を追加します。
<div id="loadingScreen" style="display:none;">
<p>送信中です…</p>
</div>
送信ボタンで読み込み → 完了画面へ
sendButton.addEventListener("click", () => {
confirmScreen.style.display = "none";
loadingScreen.style.display = "block";
setTimeout(() => {
loadingScreen.style.display = "none";
completeScreen.style.display = "block";
}, 1500);
});
深掘り：setTimeout の役割
setTimeout は
「指定した時間後に処理を実行する」
という関数です。
擬似送信では、
- 送信中の演出
- サーバー通信の疑似体験
を作るために使います。
3日目の完成コード（テンプレート化＋読み込み演出付き）
JavaScript
const form = document.getElementById("inputForm");
const confirmScreen = document.getElementById("confirmScreen");
const completeScreen = document.getElementById("completeScreen");
const loadingScreen = document.getElementById("loadingScreen");
const errorMessage = document.getElementById("errorMessage");
const formData = {
name: "",
email: "",
message: ""
};
function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
form.addEventListener("submit", (e) => {
e.preventDefault();
formData.name = document.getElementById("nameInput").value.trim();
formData.email = document.getElementById("emailInput").value.trim();
formData.message = document.getElementById("messageInput").value.trim();
if (formData.name === "") {
errorMessage.textContent = "名前を入力してください。";
return;
}
if (!isValidEmail(formData.email)) {
errorMessage.textContent = "メールアドレスの形式が正しくありません。";
return;
}
errorMessage.textContent = "";
const confirmList = document.getElementById("confirmList");
confirmList.innerHTML = `
<p>名前：${formData.name}</p>
<p>メール：${formData.email}</p>
<p>メッセージ：${formData.message}</p>
`;
form.style.display = "none";
confirmScreen.style.display = "block";
});
document.getElementById("backButton").addEventListener("click", () => {
confirmScreen.style.display = "none";
form.style.display = "block";
});
document.getElementById("sendButton").addEventListener("click", () => {
confirmScreen.style.display = "none";
loadingScreen.style.display = "block";
setTimeout(() => {
loadingScreen.style.display = "none";
completeScreen.style.display = "block";
}, 1500);
});
今日いちばん深く理解してほしいこと
フォームアプリは「データ管理 × 画面切り替え」でできている
フォーム送信シミュレーターの本質は、
- 入力内容をデータとして保持する
- 画面を切り替えて流れを作る
この2つです。
これが理解できれば、
- 会員登録フォーム
- 問い合わせフォーム
- ステップ式入力フォーム
- SPA の入力画面
など、実用的なフォームアプリが作れるようになります。
テンプレート化は“アプリ開発の第一歩”
確認画面をテンプレート化したことで、
- 項目が増えてもコードが壊れない
- UI とデータが分離される
- 拡張性が高くなる
これはプロのアプリでも必ず使われる考え方です。
4日目へのつなぎ
4日目からは、
- 入力項目をさらに増やす
- ラジオボタン・チェックボックス・セレクトボックスを扱う
- 確認画面をもっと柔軟にする
- 擬似送信を「成功・失敗」で分岐させる
という、“本格的なフォームアプリ”に進化させていきます。
今日の内容を理解できたあなたなら、
もうフォームアプリの設計者としての一歩を踏み出しています。
