JavaScript | 1 日 90 分 × 7 日アプリ学習：フォーム送信シミュレーター（初級編）

4日目のゴールと今日やること

4日目のテーマは
「フォーム送信シミュレーターを“本番のフォームに近い操作感”へ進化させる」
ことです。

1〜3日目であなたは、

• submit の制御
• preventDefault の役割
• 入力 → 確認 → 完了 の基本フロー
• バリデーション（空欄・メール形式）
• テンプレート化された確認画面
• 擬似送信中アニメーション

ここまで理解できています。

4日目はここに、

• ラジオボタン・チェックボックス・セレクトボックスの扱い
• 確認画面を“自動生成”する仕組みの強化
• 入力内容をオブジェクトで一元管理
• 擬似送信完了を「成功・失敗」で分岐

という、“実際のフォームに近い機能”を追加していきます。

複数タイプの入力を扱えるようにする

フォームには「種類の違う入力」が存在する

実際のフォームには、
テキスト以外にもいろいろな入力があります。

• ラジオボタン（1つだけ選ぶ）
• チェックボックス（複数選べる）
• セレクトボックス（プルダウン）

これらを扱えるようになると、
本物のフォームアプリに一気に近づきます。

ラジオボタンの値を取得する

HTML の例

<p>性別：</p>
<label><input type="radio" name="gender" value="男性">男性</label>
<label><input type="radio" name="gender" value="女性">女性</label>

JavaScript で選択された値を取得する

const genderValue = document.querySelector('input[name="gender"]:checked')?.value || "";

const genderValue = document.querySelector('input[name="gender"]:checked')?.value || "";

深掘り：なぜ ?.（オプショナルチェーン）が必要なのか？

選択されていない場合、
document.querySelector('input[name="gender"]:checked') は null になります。

null に対して .value を呼ぶとエラーになるため、
?.value と書いて「存在するなら value を取る」という安全な書き方にします。

チェックボックスの値を取得する

HTML の例

<p>興味のある分野：</p>
<label><input type="checkbox" name="interest" value="プログラミング">プログラミング</label>
<label><input type="checkbox" name="interest" value="デザイン">デザイン</label>
<label><input type="checkbox" name="interest" value="マーケティング">マーケティング</label>

JavaScript で複数の値を取得する

const interestNodes = document.querySelectorAll('input[name="interest"]:checked');
const interestValues = Array.from(interestNodes).map(node => node.value);

const interestNodes = document.querySelectorAll('input[name="interest"]:checked');
const interestValues = Array.from(interestNodes).map(node => node.value);

深掘り：Array.from の役割

querySelectorAll は配列ではなく「NodeList」です。
そのままでは map が使えないため、
Array.from() で配列に変換します。

セレクトボックスの値を取得する

HTML の例

<select id="countrySelect">
  <option value="">選択してください</option>
  <option value="日本">日本</option>
  <option value="アメリカ">アメリカ</option>
  <option value="イギリス">イギリス</option>
</select>

JavaScript

const countryValue = document.getElementById("countrySelect").value;

const countryValue = document.getElementById("countrySelect").value;

深掘り：value が空文字の意味

最初の「選択してください」は value=””
つまり「未選択」を表します。

バリデーションで使えます。

入力内容をオブジェクトで一元管理する

formData を拡張する

const formData = {
  name: "",
  email: "",
  message: "",
  gender: "",
  interests: [],
  country: ""
};

const formData = {
  name: "",
  email: "",
  message: "",
  gender: "",
  interests: [],
  country: ""
};

submit 時にまとめて代入

formData.name = document.getElementById("nameInput").value.trim();
formData.email = document.getElementById("emailInput").value.trim();
formData.message = document.getElementById("messageInput").value.trim();

formData.gender = document.querySelector('input[name="gender"]:checked')?.value || "";

const interestNodes = document.querySelectorAll('input[name="interest"]:checked');
formData.interests = Array.from(interestNodes).map(n => n.value);

formData.country = document.getElementById("countrySelect").value;

formData.name = document.getElementById("nameInput").value.trim();
formData.email = document.getElementById("emailInput").value.trim();
formData.message = document.getElementById("messageInput").value.trim();

formData.gender = document.querySelector('input[name="gender"]:checked')?.value || "";

const interestNodes = document.querySelectorAll('input[name="interest"]:checked');
formData.interests = Array.from(interestNodes).map(n => n.value);

formData.country = document.getElementById("countrySelect").value;

深掘り：オブジェクト管理は“拡張性の塊”

項目が増えても、

• formData に追加
• HTML に追加

これだけで済みます。

確認画面を「自動生成」する（強化版）

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>
  <p>性別：${formData.gender}</p>
  <p>興味のある分野：${formData.interests.join("、")}</p>
  <p>国：${formData.country}</p>
`;

const confirmList = document.getElementById("confirmList");

confirmList.innerHTML = `
  <p>名前：${formData.name}</p>
  <p>メール：${formData.email}</p>
  <p>メッセージ：${formData.message}</p>
  <p>性別：${formData.gender}</p>
  <p>興味のある分野：${formData.interests.join("、")}</p>
  <p>国：${formData.country}</p>
`;

深掘り：join(“、”) の役割

チェックボックスは複数選べるため、
配列を「、」でつないで表示します。

擬似送信完了を「成功・失敗」で分岐させる

送信成功・失敗をランダムで決める

sendButton.addEventListener("click", () => {
  confirmScreen.style.display = "none";
  loadingScreen.style.display = "block";

  setTimeout(() => {
    loadingScreen.style.display = "none";

    const isSuccess = Math.random() > 0.3; // 70%成功

    if (isSuccess) {
      completeScreen.style.display = "block";
    } else {
      alert("送信に失敗しました。もう一度お試しください。");
      form.style.display = "block";
    }
  }, 1500);
});

sendButton.addEventListener("click", () => {
  confirmScreen.style.display = "none";
  loadingScreen.style.display = "block";

  setTimeout(() => {
    loadingScreen.style.display = "none";

    const isSuccess = Math.random() > 0.3; // 70%成功

    if (isSuccess) {
      completeScreen.style.display = "block";
    } else {
      alert("送信に失敗しました。もう一度お試しください。");
      form.style.display = "block";
    }
  }, 1500);
});

深掘り：Math.random() の使いどころ

Math.random() は
0〜1 のランダムな数を返します。

擬似送信の成功・失敗を再現するのに最適です。

今日のまとめ

今日いちばん深く理解してほしいこと

フォームアプリは「入力形式ごとの扱い」が重要

• ラジオ → 1つだけ
• チェックボックス → 複数
• セレクト → 選択肢から1つ

これらを正しく扱えると、
本物のフォームアプリに近づきます。

データ管理は「オブジェクト一元管理」が最強

formData にまとめることで、

• 確認画面
• 送信処理
• バリデーション

すべてが扱いやすくなります。

擬似送信完了は「成功・失敗」を再現するとリアル

実際のフォーム送信は
成功するとは限りません。

その体験をシミュレーションすることで、
アプリとしての完成度が上がります。

5日目へのつなぎ

5日目からは、

• 入力項目をさらに増やす
• 確認画面をループで自動生成する
• formData を動的に作る
• 完了画面をもっとアプリらしく演出する

という、“本格的なフォームアプリの設計”に進みます。

今日の内容を理解できたあなたなら、
もうフォームアプリの中級レベルに片足を踏み入れています。