JavaScript | 1 日 120 分 × 7 日アプリ学習：フォームバリデーションアプリ

JavaScript
2026.01.08
スポンサーリンク

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

1日目のテーマは「フォームバリデーションの全体像をつかむこと」です。
いきなり難しい正規表現を覚えるのではなく、

  • どんな画面を作るのか
  • どこでチェックするのか
  • エラーをどう見せるのか

を、ざっくりイメージできるようになるのがゴールです。

今日は次の3つに絞ります。

  • フォームの骨組み（HTML）を作る
  • JavaScript から値を読み取り、簡単なチェックをする
  • エラーメッセージを画面に出す「流れ」を体験する

正規表現は「軽く触る」くらいにして、まずは「バリデーションの流れ」を体に入れます。

フォームバリデーションの全体像をイメージする

何をチェックしたいのかを言葉にする

今回のフォームは、シンプルな「ログインフォーム」を想定します。
入力欄は2つです。

  • メールアドレス
  • パスワード

そして、最低限やりたいチェックはこうです。

  • メールアドレスが空ではない
  • メールアドレスが「それっぽい形」になっている
  • パスワードが空ではない
  • パスワードがある程度の長さになっている

さらに中級らしくするために、

  • エラーがあるときは、その場でメッセージを表示
  • エラーがある間は「送信ボタンを押しても送信されない」

という UX も意識していきます。

「いつチェックするか」を考える

バリデーションにはタイミングがあります。

  • 入力中にリアルタイムでチェックする
  • フォーカスが外れたときにチェックする
  • 送信ボタンを押したときにまとめてチェックする

1日目は「送信ボタンを押したときにまとめてチェックする」パターンから始めます。
ここが理解できれば、2日目以降で「入力中に動的にチェック」に広げるのが楽になります。

HTMLでフォームの骨組みを作る

最小限のフォームを用意する

まずは index.html を用意して、次のように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>フォームバリデーション練習</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .field { margin-bottom: 16px; }
    .error-message { color: red; font-size: 12px; height: 16px; }
    .input-error { border-color: red; }
    button[disabled] { opacity: 0.5; cursor: not-allowed; }
  </style>
</head>
<body>
  <h1>ログインフォーム（バリデーション付き）</h1>

  <form id="login-form" novalidate>
    <div class="field">
      <label for="email">メールアドレス</label><br />
      <input id="email" type="text" />
      <div id="email-error" class="error-message"></div>
    </div>

    <div class="field">
      <label for="password">パスワード</label><br />
      <input id="password" type="password" />
      <div id="password-error" class="error-message"></div>
    </div>

    <button id="submit-button" type="submit">ログイン</button>
    <div id="form-message"></div>
  </form>

  <script src="app.js"></script>
</body>
</html>

ここでのポイントを押さえます。

  • novalidate を form に付けて、ブラウザ標準のバリデーションは一旦オフにしています。
    自分で JavaScript で制御するためです。
  • 各入力欄の下に「エラーメッセージ表示用の div」を用意しています。
    ここに文字を入れたり消したりして、エラーを見せます。
  • .error-message に高さを指定しているのは、「エラーがないときもレイアウトが崩れないようにする」ためです。
    UX 的に地味に大事なポイントです。

JavaScriptからフォームの値を読み取る

DOM要素を取得する

app.js を作り、まずはフォームと入力欄を JavaScript から掴みます。

const formEl = document.getElementById("login-form");
const emailInputEl = document.getElementById("email");
const passwordInputEl = document.getElementById("password");
const emailErrorEl = document.getElementById("email-error");
const passwordErrorEl = document.getElementById("password-error");
const submitButtonEl = document.getElementById("submit-button");
const formMessageEl = document.getElementById("form-message");
JavaScript

これで、JavaScript から

  • 入力された値を読む
  • エラーメッセージを書き込む
  • ボタンの状態を変える

といった操作ができるようになります。

submitイベントを捕まえる

フォームが送信されるタイミングでチェックを行うために、submit イベントを使います。

formEl.addEventListener("submit", (event) => {
  event.preventDefault(); // 本当の送信を止める

  const email = emailInputEl.value;
  const password = passwordInputEl.value;

  console.log("メール:", email);
  console.log("パスワード:", password);
});
JavaScript

ここではまだチェックはしていません。
まずは「送信ボタンを押したときに JavaScript が動く」ことを確認します。

event.preventDefault() が重要です。
これをしないと、ページがリロードされてしまい、エラーメッセージを表示する前に画面が消えてしまいます。

1日目の簡単なバリデーションを実装する

まずは「空チェック」から始める

いきなり正規表現に行かず、まずは「空かどうか」のチェックから始めます。
これだけでも立派なバリデーションです。

formEl.addEventListener("submit", (event) => {
  event.preventDefault();

  const email = emailInputEl.value.trim();
  const password = passwordInputEl.value.trim();

  let emailError = "";
  let passwordError = "";

  if (!email) {
    emailError = "メールアドレスを入力してください。";
  }

  if (!password) {
    passwordError = "パスワードを入力してください。";
  }

  emailErrorEl.textContent = emailError;
  passwordErrorEl.textContent = passwordError;

  if (!emailError && !passwordError) {
    formMessageEl.textContent = "送信できます！（まだ本当には送信していません）";
  } else {
    formMessageEl.textContent = "入力内容を確認してください。";
  }
});
JavaScript

ここでやっていることを整理します。

  • trim() で前後の空白を削除してからチェックしています。
    スペースだけの入力を「空」とみなすためです。
  • エラーがあれば、対応するエラー用 div にメッセージを書き込む。
    なければ空文字にして、表示を消します。
  • 両方エラーがなければ「送信できる状態」と判断し、フォーム全体のメッセージを変えています。

この時点で、「submit 制御」の一番シンプルな形は体験できています。

正規表現の入口としてメールの簡易チェックを入れてみる

正規表現で「それっぽいメールか」を見る

1日目の最後に、軽く正規表現に触れておきます。
完璧なメールチェックは難しいので、「それっぽい形かどうか」だけ見ます。

const emailRegex = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
JavaScript

意味はざっくりこうです。

  • ^ と $ は「文字列の先頭」と「末尾」
  • [^@\s]+ は「@ と空白以外の文字が1文字以上」
  • @ が1つ
  • その後にまた [^@\s]+
  • . が1つ
  • 最後にまた [^@\s]+

つまり「何か@何か.何か」という形をチェックしています。

メールチェックに正規表現を組み込む

さきほどの submit 処理を少しだけ拡張します。

formEl.addEventListener("submit", (event) => {
  event.preventDefault();

  const email = emailInputEl.value.trim();
  const password = passwordInputEl.value.trim();

  let emailError = "";
  let passwordError = "";

  if (!email) {
    emailError = "メールアドレスを入力してください。";
  } else if (!emailRegex.test(email)) {
    emailError = "メールアドレスの形式が正しくありません。";
  }

  if (!password) {
    passwordError = "パスワードを入力してください。";
  } else if (password.length < 8) {
    passwordError = "パスワードは8文字以上にしてください。";
  }

  emailErrorEl.textContent = emailError;
  passwordErrorEl.textContent = passwordError;

  if (!emailError && !passwordError) {
    formMessageEl.textContent = "送信できます！（まだ本当には送信していません）";
  } else {
    formMessageEl.textContent = "入力内容を確認してください。";
  }
});
JavaScript

ここでの重要ポイントは、

  • 「空チェック」と「形式チェック」を分けてメッセージを出していること
  • 正規表現のチェックは emailRegex.test(email) で true/false を返すこと

です。

「正規表現＝難しい呪文」ではなく、「文字列が条件を満たしているかをチェックする道具」として捉えてください。

1日目のまとめと、明日につなげる視点

今日やったことは、フォームバリデーションの「一番シンプルな流れ」です。

  • HTML でフォームとエラー表示用の場所を用意した
  • JavaScript で submit イベントを捕まえた
  • 入力値を読み取り、条件をチェックした
  • エラーメッセージを動的に表示した
  • 条件を満たしているかどうかで「送信できるか」を判断した

ここまでできていれば、もう「フォームバリデーションの入口」は完全に踏み込めています。

2日目以降はここから一歩進めて、

  • 入力中にエラーを動的に表示する（UX を良くする）
  • エラー状態を「state」として管理し、render 関数で画面を更新する
  • 正規表現をもう少しだけ深掘りして、パスワードのルールを設計する

といった方向に広げていきます。

もし余力があれば、1日目のうちに「わざと変なメール」「短すぎるパスワード」などを入れて、
どんなメッセージが出るか、自分で遊んでみてください。
バリデーションは「ユーザーの失敗パターンを想像する力」でもあります。

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