2日目のゴールと今日やること
2日目のテーマは
「フォーム送信シミュレーターを“実用的なフォーム”に近づける」
ことです。
1日目では、
- submit を JavaScript で制御する
- preventDefault で本当の送信を止める
- 入力 → 確認画面 → 完了画面 の流れを作る
ここまでできました。
2日目はここに、
- 入力チェック（バリデーション）
- 戻るボタンで入力画面に戻る
- 複数項目の確認画面
- 擬似送信完了の演出
という“実際のフォームに近い機能”を追加していきます。
入力チェック（バリデーション）を追加する
なぜバリデーションが必要なのか？
フォームアプリで最も重要なのは
「間違った入力を送らせない」
ことです。
例えば、
- 名前が空欄
- メールアドレスの形式が違う
- 数字を入れるべき場所に文字が入っている
こうした入力をそのまま確認画面に進めてしまうと、
ユーザーは混乱します。
そこで、
submit の前に入力チェックを行う
という仕組みが必要になります。
バリデーションの基本：空欄チェック
例：名前が空欄ならエラーを出す
HTML にエラー表示用の場所を作ります。
<p id="errorMessage" style="color:red;"></p>
JavaScript でチェックします。
const errorMessage = document.getElementById("errorMessage");
form.addEventListener("submit", (e) => {
e.preventDefault();
const nameValue = document.getElementById("nameInput").value;
if (nameValue.trim() === "") {
errorMessage.textContent = "名前を入力してください。";
return;
}
errorMessage.textContent = "";
// 確認画面へ進む処理へ
});
深掘り：trim() の重要性
trim() は文字列の前後の空白を削除します。
" "→""" 山田 "→"山田"
空白だけの入力を「空欄」として扱えるので、
バリデーションでは必須のテクニックです。
戻るボタンで入力画面に戻る
確認画面に戻るボタンを追加する
HTML に戻るボタンを追加します。
<button id="backButton">戻る</button>
JavaScript で画面を切り替えます。
document.getElementById("backButton").addEventListener("click", () => {
confirmScreen.style.display = "none";
form.style.display = "block";
});
深掘り：戻るボタンは「入力内容を保持」する
戻るボタンで入力画面に戻るとき、
フォームの内容はそのまま残っています。
これは、
- ページ遷移をしていない
- display の切り替えだけ
だからです。
SPA（単一ページアプリ）の基本的な動きですね。
複数項目を確認画面に表示する
入力項目を増やす
HTML にメール欄を追加します。
<label>メール：<input type="email" id="emailInput"></label>
確認画面にも追加します。
<p id="confirmEmail"></p>
JavaScript で複数項目を反映
const nameValue = document.getElementById("nameInput").value;
const emailValue = document.getElementById("emailInput").value;
document.getElementById("confirmName").textContent = `名前：${nameValue}`;
document.getElementById("confirmEmail").textContent = `メール：${emailValue}`;
深掘り：確認画面は「テンプレート化」できる
複数項目が増えるほど、
確認画面は「入力内容をそのまま表示する画面」になります。
実際のフォームアプリでも、
この仕組みがそのまま使われています。
擬似送信完了の演出を追加する
完了画面にメッセージを追加
<div id="completeScreen" style="display:none;">
<p>送信が完了しました！</p>
<p>ご入力ありがとうございました。</p>
</div>
送信ボタンで完了画面へ
document.getElementById("sendButton").addEventListener("click", () => {
confirmScreen.style.display = "none";
completeScreen.style.display = "block";
});
深掘り：擬似送信は「本番の Ajax 送信」の練習
本番のフォーム送信では、
- サーバーへデータを送る
- 成功したら完了画面へ
- 失敗したらエラー表示
という流れになります。
今回の「擬似送信完了」は、
その流れを理解するための練習です。
2日目の完成コード（バリデーション＋戻る機能付き）
JavaScript
const form = document.getElementById("inputForm");
const confirmScreen = document.getElementById("confirmScreen");
const completeScreen = document.getElementById("completeScreen");
const errorMessage = document.getElementById("errorMessage");
form.addEventListener("submit", (e) => {
e.preventDefault();
const nameValue = document.getElementById("nameInput").value;
const emailValue = document.getElementById("emailInput").value;
if (nameValue.trim() === "") {
errorMessage.textContent = "名前を入力してください。";
return;
}
if (emailValue.trim() === "") {
errorMessage.textContent = "メールを入力してください。";
return;
}
errorMessage.textContent = "";
document.getElementById("confirmName").textContent = `名前：${nameValue}`;
document.getElementById("confirmEmail").textContent = `メール：${emailValue}`;
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";
completeScreen.style.display = "block";
});
今日いちばん深く理解してほしいこと
preventDefault は「フォームの流れを自分で作るための鍵」
フォームアプリは、
ブラウザの自動送信を止めて、自分で流れを作る
という考え方が重要です。
そのために必要なのが preventDefault。
これを理解すると、
- 入力チェック
- 確認画面
- 戻る機能
- 擬似送信
- Ajax 送信
すべての基礎が身につきます。
画面切り替えは「表示を変えるだけ」
ページ遷移をせずに
アプリのように画面が切り替わるのは、
- display: none
- display: block
を切り替えているだけです。
この仕組みを理解すると、
タブ切り替え・モーダル・ステップフォームなど
UI の幅が一気に広がります。
3日目へのつなぎ
3日目からは、
- 入力チェックをもっと強化（メール形式チェックなど）
- 確認画面をテンプレート化
- 入力内容をオブジェクトで管理
- 擬似送信を「読み込み中アニメーション」で演出
という、“本格的なフォームアプリ”に進化させていきます。
今日の内容を理解できたあなたなら、
もうフォームアプリの基礎を完全に掴んでいます。
