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

Web APP JavaScript
2026.01.17
スポンサーリンク
スポンサーリンク
  1. 2日目のゴールと今日やること
  2. 入力チェック（バリデーション）を追加する
    1. なぜバリデーションが必要なのか？
  3. バリデーションの基本：空欄チェック
    1. 例：名前が空欄ならエラーを出す
    2. 深掘り：trim() の重要性
  4. 戻るボタンで入力画面に戻る
    1. 確認画面に戻るボタンを追加する
    2. 深掘り：戻るボタンは「入力内容を保持」する
  5. 複数項目を確認画面に表示する
    1. 入力項目を増やす
    2. JavaScript で複数項目を反映
    3. 深掘り：確認画面は「テンプレート化」できる
  6. 擬似送信完了の演出を追加する
    1. 完了画面にメッセージを追加
    2. 送信ボタンで完了画面へ
    3. 深掘り：擬似送信は「本番の Ajax 送信」の練習
  7. 2日目の完成コード（バリデーション＋戻る機能付き）
    1. JavaScript
  8. 今日いちばん深く理解してほしいこと
    1. preventDefault は「フォームの流れを自分で作るための鍵」
    2. 画面切り替えは「表示を変えるだけ」
  9. 3日目へのつなぎ
  10. 3日目のゴールと今日やること
  11. 入力内容を「オブジェクト」で管理する
    1. なぜオブジェクトで管理するのか？
    2. 入力内容をまとめて管理する
    3. 深掘り：オブジェクト管理のメリット
  12. 確認画面を「テンプレート化」する
    1. 2日目までは手作業で表示していた
    2. テンプレートを使って自動生成する
    3. 深掘り：テンプレート化は“実用アプリの必須技術”
  13. メール形式チェックを追加する（実用バリデーション）
    1. メール形式チェックの基本
    2. 深掘り：正規表現は“パターンを判定する道具”
  14. 擬似送信完了に「読み込み中アニメーション」を追加する
    1. 完了画面に行く前に“送信中”を挟む
    2. 送信ボタンで読み込み → 完了画面へ
    3. 深掘り：setTimeout の役割
  15. 3日目の完成コード（テンプレート化＋読み込み演出付き）
    1. JavaScript
  16. 今日いちばん深く理解してほしいこと
    1. フォームアプリは「データ管理 × 画面切り替え」でできている
    2. テンプレート化は“アプリ開発の第一歩”
  17. 4日目へのつなぎ
  18. 4日目のゴールと今日やること
  19. 複数タイプの入力を扱えるようにする
    1. フォームには「種類の違う入力」が存在する
  20. ラジオボタンの値を取得する
    1. HTML の例
    2. JavaScript で選択された値を取得する
    3. 深掘り：なぜ ?.（オプショナルチェーン）が必要なのか？
  21. チェックボックスの値を取得する
    1. HTML の例
    2. JavaScript で複数の値を取得する
    3. 深掘り：Array.from の役割
  22. セレクトボックスの値を取得する
    1. HTML の例
    2. JavaScript
    3. 深掘り：value が空文字の意味
  23. 入力内容をオブジェクトで一元管理する
    1. formData を拡張する
    2. submit 時にまとめて代入
    3. 深掘り：オブジェクト管理は“拡張性の塊”
  24. 確認画面を「自動生成」する（強化版）
    1. HTML に枠だけ用意
    2. JavaScript で自動生成
    3. 深掘り：join(“、”) の役割
  25. 擬似送信完了を「成功・失敗」で分岐させる
    1. 送信成功・失敗をランダムで決める
    2. 深掘り：Math.random() の使いどころ
  26. 今日のまとめ
    1. 今日いちばん深く理解してほしいこと
  27. 5日目へのつなぎ
  28. 5日目のゴールと今日やること
  29. 入力項目を「自動で収集する」仕組みを作る
    1. これまでの問題点
    2. 解決策：入力項目を「まとめて取得」する
    3. 深掘り：name 属性が“データのキー”になる
  30. 確認画面を「ループで自動生成」する
    1. これまでの問題点
    2. 解決策：formData をループして自動生成する
    3. 深掘り：ループ生成は「項目が増えても壊れない」
  31. formData を「動的に作る」仕組みを完成させる
    1. formData を空オブジェクトで用意する
    2. 深掘り：動的生成は「拡張性の核」
  32. コードを「関数化」して読みやすくする
    1. 入力収集を関数にする
    2. 確認画面生成も関数にする
    3. 深掘り：関数化は「責務を分ける」こと
  33. 5日目の完成コード（動的収集＋自動生成＋関数化）
    1. JavaScript
  34. 今日いちばん深く理解してほしいこと
    1. フォームアプリは「データ収集 × 自動生成 × 関数化」で強くなる
  35. 6日目へのつなぎ
  36. 6日目のゴールと今日やること
  37. バリデーションを関数化して整理する
    1. submit の中にバリデーションを書くと何が問題か
    2. validateForm 関数を作る
    3. 深掘り：エラーを“オブジェクトで返す”理由
  38. エラーを「項目ごと」に表示する
    1. HTML 側にエラー表示用の枠を用意する
    2. showErrors 関数でまとめて表示する
    3. 深掘り：エラー表示の「リセット」が重要
  39. 完了画面を“ユーザーに寄り添う形”にする
    1. 完了画面に名前を入れる
    2. 深掘り：入力内容を返すと“アプリ感”が一気に上がる
  40. formData を「JSON 的に扱う」感覚を身につける
    1. formData はそのまま JSON にできる
    2. 深掘り：なぜ JSON を意識するべきなのか
  41. 6日目の完成コード（要点まとめ）
    1. JavaScript（重要部分のみ）
  42. 今日いちばん深く理解してほしいこと
    1. 「判定」と「表示」を分けるとコードは一気に読みやすくなる
    2. あなたのフォームアプリはもう“実戦レベル”
  43. 7日目へのつなぎ
  44. 7日目のゴールと今日やること
  45. フォーム送信アプリの「全体構造」を理解する
    1. アプリは 3 つのレイヤーでできている
  46. submit 制御と preventDefault の本質を深掘りする
    1. フォームアプリの心臓は「送信を止めること」
    2. 深掘り：preventDefault は「アプリの自由度」を生む
  47. 入力 → 確認画面 → 擬似送信完了 の流れを整理する
    1. 入力画面でやること
    2. 確認画面でやること
    3. 擬似送信完了でやること
  48. コードにコメントをつけて“他人に渡せるコード”にする
    1. コメントは「未来の自分へのメモ」
    2. 深掘り：コメントは「コードの意図」を伝える
  49. 7日目の完成コード（コメント付き）
    1. JavaScript（重要部分のみ）
  50. 今日いちばん深く理解してほしいこと
    1. フォームアプリは「状態管理 × 画面切り替え」でできている
    2. コードを“説明できる”ことが完成の証
  51. 7日間の学習を終えて

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

2日目のテーマは
「フォーム送信シミュレーターを“実用的なフォーム”に近づける」
ことです。

1日目では、

  • submit を JavaScript で制御する
  • preventDefault で本当の送信を止める
  • 入力 → 確認画面 → 完了画面 の流れを作る

ここまでできました。

2日目はここに、

  • 入力チェック（バリデーション）
  • 戻るボタンで入力画面に戻る
  • 複数項目の確認画面
  • 擬似送信完了の演出

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

前へ
12
スポンサーリンク
タイトルとURLをコピーしました