1日目のゴールと今日やること
1日目のテーマは
「フォーム送信の仕組みを“JavaScript で自由にコントロールできるようになる”」
ことです。
フォーム送信シミュレーターは、
「入力 → 確認画面 → 擬似送信完了」
という流れを JavaScript で再現するアプリです。
今日の学習ポイントは次の5つです。
- submit イベントを JavaScript で制御する
- preventDefault で“本当の送信”を止める
- 入力内容を確認画面に表示する
- 擬似的に「送信完了」を作る
- フォームの流れを JavaScript で管理する
初心者がつまずきやすい「フォーム送信の仕組み」を、
1日目でしっかり理解できるように丁寧に解説します。
フォーム送信の仕組みを理解する
HTML のフォームは“自動で送信される”
HTML の form タグは、
本来こういう動きをします。
- ボタンを押す
- ブラウザが自動で送信する
- ページがリロードされる
しかし、アプリを作るときは
「送信を止めて、自分で処理したい」
という場面がほとんどです。
例えば、
- 入力内容を確認画面に表示したい
- バリデーション（入力チェック）をしたい
- 擬似的に送信完了画面を作りたい
こういうときに必要なのが preventDefault です。
preventDefault を深掘りする
preventDefault は「ブラウザの自動動作を止めるスイッチ」
フォーム送信イベントはこう書きます。
form.addEventListener("submit", (e) => {
e.preventDefault();
});
ここでの e.preventDefault() が重要です。
これがないとどうなるか？
- フォームが送信されてページがリロードされる
- JavaScript の処理が途中で止まる
- 確認画面を作る前に画面が切り替わってしまう
つまり、
フォームアプリを作るなら preventDefault は必須
ということです。
入力 → 確認画面 の流れを作る
HTML の構造をシンプルにする
まずは、入力画面と確認画面を用意します。
<form id="inputForm">
<label>名前：<input type="text" id="nameInput"></label>
<button type="submit">確認へ</button>
</form>
<div id="confirmScreen" style="display:none;">
<p>入力内容の確認</p>
<p id="confirmName"></p>
<button id="sendButton">送信する</button>
</div>
<div id="completeScreen" style="display:none;">
<p>送信が完了しました！</p>
</div>
JavaScript で「確認画面へ切り替える」
const form = document.getElementById("inputForm");
const confirmScreen = document.getElementById("confirmScreen");
const completeScreen = document.getElementById("completeScreen");
form.addEventListener("submit", (e) => {
e.preventDefault(); // 本当の送信を止める
const nameValue = document.getElementById("nameInput").value;
document.getElementById("confirmName").textContent = `名前：${nameValue}`;
form.style.display = "none";
confirmScreen.style.display = "block";
});
深掘り：なぜ display を切り替えるのか？
- ページ遷移をしない
- SPA（単一ページアプリ）のように動く
- アプリっぽい操作感になる
フォーム送信シミュレーターは、
「画面を切り替える」ことでアプリらしさを作る
という練習にもなります。
擬似送信完了画面を作る
「送信する」ボタンを押したら完了画面へ
document.getElementById("sendButton").addEventListener("click", () => {
confirmScreen.style.display = "none";
completeScreen.style.display = "block";
});
これで、
入力 → 確認 → 完了
という流れが完成します。
1日目の完成コード（シンプル版）
HTML
<form id="inputForm">
<label>名前：<input type="text" id="nameInput"></label>
<button type="submit">確認へ</button>
</form>
<div id="confirmScreen" style="display:none;">
<p>入力内容の確認</p>
<p id="confirmName"></p>
<button id="sendButton">送信する</button>
</div>
<div id="completeScreen" style="display:none;">
<p>送信が完了しました！</p>
</div>
JavaScript
const form = document.getElementById("inputForm");
const confirmScreen = document.getElementById("confirmScreen");
const completeScreen = document.getElementById("completeScreen");
form.addEventListener("submit", (e) => {
e.preventDefault();
const nameValue = document.getElementById("nameInput").value;
document.getElementById("confirmName").textContent = `名前：${nameValue}`;
form.style.display = "none";
confirmScreen.style.display = "block";
});
document.getElementById("sendButton").addEventListener("click", () => {
confirmScreen.style.display = "none";
completeScreen.style.display = "block";
});
今日いちばん深く理解してほしいこと
preventDefault はフォームアプリの“心臓”
フォーム送信アプリは、
「本当の送信を止めて、自分で流れを作る」
という考え方が重要です。
そのために必要なのが preventDefault。
これを理解すると、
- 入力チェック
- 確認画面
- 擬似送信
- バリデーション
- Ajax 送信
など、フォームアプリの基礎がすべて作れるようになります。
画面切り替えは「表示を変えるだけ」
ページ遷移をせずに
アプリのように画面が切り替わるのは、
- display: none
- display: block
を切り替えているだけです。
この仕組みを理解すると、
タブ切り替え・モーダル・ステップフォームなど
UI の幅が一気に広がります。
2日目へのつなぎ
2日目からは、
- 入力チェック（バリデーション）を追加する
- 戻るボタンで入力画面に戻れるようにする
- 複数項目（メール・住所など）を扱う
- 確認画面をテンプレート化する
という、“実用的なフォームアプリ”に進化させていきます。
今日の内容を理解できたあなたなら、
もうフォームアプリの基礎を完全に掴んでいます。
