基礎から学ぶJavaScript入門 90日コース | Webページを操作するDOM － Day 36：フォーム操作

JavaScript 90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク
  1. Day 36：フォーム操作（前半）
  2. フォーム操作の全体像をシンプルに捉える
    1. フォームとは何か
    2. 今回のゴール：名前入力フォームの基本動作
  3. input要素とvalueプロパティ
    1. input要素とは
    2. valueプロパティとは
  4. submitイベントとpreventDefault()
    1. submitイベントとは
    2. preventDefault()とは
  5. 実践：名前入力フォームを作る
    1. まずは完成イメージ
    2. 名前入力フォームの基本コード（コメント付き）
  6. 重要ポイントを深掘りして理解する
    1. フォーム要素とsubmitイベント
    2. preventDefault()の役割
    3. input要素とvalueプロパティ
    4. 入力チェック（バリデーション）の最初の一歩
  7. 少し発展：入力後にフォームをリセットする
  8. セキュリティ・安全性の観点からの補足
  9. Day 36 前半 練習用テンプレート
  10. Day 36 前半のまとめ
  11. Day 36：フォーム操作（後半）
  12. フォームを“設計する目線”で考える
    1. ただ動くフォームと、ちゃんと設計されたフォームの違い
  13. 入力値を“そのまま信じない”という発想
    1. valueで取った値は、そのまま使う前にチェックする
  14. 実践①：空白を取り除いてから判定する
    1. trim()で前後の空白を削る
    2. 改良版：空白を取り除いてからメッセージを出す名前入力フォーム
    3. 深掘りポイント
  15. 実践②：エラーメッセージと成功メッセージを分けて表示する
    1. メッセージの種類を分けるという考え方
    2. コード例：エラーと成功を分けた名前入力フォーム
    3. 深掘りポイント
  16. 実践③：送信後にフォームをリセットする
    1. reset()でフォーム全体を初期状態に戻す
    2. コード例：送信後にフォームをリセットする名前入力フォーム
    3. 深掘りポイント
  17. セキュリティ・安全性の観点からの補足（フォーム版）
  18. Day 36 後半 練習用テンプレート
  19. Day 36 後半のまとめ

Day 36：フォーム操作（前半）

「ユーザーの入力を“受け取って扱う”ための基本を身につける」

Day 36前半では、Webページでとても重要な「フォーム操作」を扱います。 ここから、ページは「ただ見せるもの」から「ユーザーと対話するもの」に変わっていきます。

キーワードは次の4つです。

  • input（入力欄のHTML要素）
  • value（入力された値をJavaScriptで読むためのプロパティ）
  • submit（フォーム送信イベント）
  • preventDefault()（ブラウザの「標準の動き」を止めるためのメソッド）

実践テーマは 「名前入力フォーム」 です。 ユーザーに名前を入力してもらい、その名前を使ってメッセージを表示する流れを、ステップバイステップで解説していきます。

フォーム操作の全体像をシンプルに捉える

フォームとは何か

フォームは、ユーザーから情報を入力してもらうための仕組みです。

  • 名前
  • メールアドレス
  • パスワード
  • コメント
  • 検索キーワード

などを入力してもらい、それをサーバーに送ったり、 JavaScriptで処理したりします。

HTMLでは、フォームは主に次の要素で構成されます。

  • <form> … フォーム全体を囲む要素
  • <input> … 1行の入力欄
  • <button> … 送信ボタンなど

JavaScriptでは、

「フォームのどの入力欄に、どんな値が入っているか」

を読み取り、それに応じて処理を行います。

今回のゴール：名前入力フォームの基本動作

今回の名前入力フォームでは、次のような動きを目指します。

  1. ユーザーがテキストボックスに名前を入力する。
  2. 「送信」ボタンを押す。
  3. ページがリロードされずに、 「こんにちは、〇〇さん！」というメッセージが表示される。

この中で重要になるのが、

  • input 要素
  • value プロパティ
  • submit イベント
  • preventDefault()

です。

input要素とvalueプロパティ

input要素とは

<input> は、ユーザーが文字や数値などを入力するためのHTML要素です。

最も基本的なテキスト入力欄は、次のように書きます。

<input type="text" id="nameInput">
  • type="text" … テキスト入力欄であることを指定します。
  • id="nameInput" … JavaScriptからこの要素を取得するための識別子です。

valueプロパティとは

JavaScriptから input 要素を取得すると、その入力された値は

inputElement.value
JavaScript

で参照できます。

例えば、

const nameInputElement = document.getElementById('nameInput');
const enteredName = nameInputElement.value;
JavaScript

というコードは、

「nameInput というIDの入力欄に、今何が入力されているか」

を enteredName という変数に取り出す、という意味になります。

submitイベントとpreventDefault()

submitイベントとは

フォームには「送信」という動きがあります。 HTMLでは、フォーム全体を <form> 要素で囲みます。

<form id="nameForm">
  <!-- 入力欄やボタンがここに入る -->
</form>

フォームが「送信」されるタイミングで発生するイベントが、 submit イベントです。

  • 送信ボタン（<button type="submit">）がクリックされたとき
  • Enterキーが押されたとき

などに、フォームは「送信」されます。

JavaScriptでは、

formElement.addEventListener('submit', function (event) {
  // ここに送信時の処理を書く
});
JavaScript

という形で、 「フォームが送信される瞬間」に処理を紐づけます。

preventDefault()とは

フォームが送信されると、ブラウザは通常、

  • ページをリロードする
  • サーバーにデータを送る（action 属性が指定されている場合）

といった「標準の動き」を行います。

しかし、JavaScriptでフォームを処理したい場合、

「ページをリロードせずに、その場で入力内容を使って何かしたい」

ことが多いです。

そのときに使うのが event.preventDefault() です。

formElement.addEventListener('submit', function (event) {
  event.preventDefault(); // ブラウザの標準の送信動作を止める
  // ここに独自の処理を書く
});
JavaScript

これにより、

  • ページはリロードされない
  • 入力内容はそのまま残る
  • JavaScriptで自由に処理できる

という状態になります。

実践：名前入力フォームを作る

まずは完成イメージ

  • テキスト入力欄に名前を入力する。
  • 「送信」ボタンを押す。
  • ページがリロードされずに、 「こんにちは、〇〇さん！」というメッセージが表示される。

これを、HTML＋JavaScriptで実装していきます。

名前入力フォームの基本コード（コメント付き）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 36 前半：名前入力フォームの基本</title>
</head>
<body>
  <h1>名前入力フォーム</h1>

  <!-- ▼ フォーム全体 -->
  <form id="nameForm">
    <!-- 名前入力欄 -->
    <label for="nameInput">お名前：</label>
    <input type="text" id="nameInput" placeholder="お名前を入力してください">

    <!-- 送信ボタン -->
    <button type="submit">送信</button>
  </form>

  <!-- ▼ メッセージ表示エリア -->
  <p id="greetingMessage">まだお名前が入力されていません。</p>

  <script>
    // ▼ フォーム要素を取得します
    const nameFormElement = document.getElementById('nameForm');

    // ▼ 名前入力欄の<input>要素を取得します
    const nameInputElement = document.getElementById('nameInput');

    // ▼ メッセージ表示用の<p>要素を取得します
    const greetingMessageElement = document.getElementById('greetingMessage');

    // ▼ フォームが送信されたときの処理を登録します
    nameFormElement.addEventListener('submit', function (event) {
      // ブラウザの標準の送信動作（ページリロードなど）を止めます
      event.preventDefault();

      // 入力欄に現在入っている値を取得します
      const enteredName = nameInputElement.value;

      // 入力された名前が空かどうかをチェックします
      if (enteredName === '') {
        // 何も入力されていない場合のメッセージ
        greetingMessageElement.textContent = 'お名前を入力してください。';
      } else {
        // 名前が入力されている場合のメッセージ
        greetingMessageElement.textContent = `こんにちは、${enteredName}さん！`;
      }

      // コンソールにもログを出しておきます（開発者向けの確認用）
      console.log('フォームが送信されました。入力された名前:', enteredName);
    });
  </script>
</body>
</html>

重要ポイントを深掘りして理解する

フォーム要素とsubmitイベント

const nameFormElement = document.getElementById('nameForm');

nameFormElement.addEventListener('submit', function (event) {
  // ...
});
JavaScript
  • nameFormElement は <form id="nameForm"> を指します。
  • submit イベントは、「フォームが送信された瞬間」に発生します。
  • ボタンのクリックだけでなく、Enterキーでも発生します。

ここで addEventListener('submit', ...) を使うことで、

「フォーム送信」という動きに対して、処理を紐づけている

ことになります。

preventDefault()の役割

event.preventDefault();
JavaScript
  • event は、submit イベントに関する情報を持つオブジェクトです。
  • preventDefault() は、「このイベントに対するブラウザの標準の動き」を止めます。

フォームの場合、

  • ページリロード
  • サーバーへの送信

などが「標準の動き」です。

これを止めることで、

「ページをリロードせずに、JavaScriptだけでフォームを処理する」

ことが可能になります。

input要素とvalueプロパティ

const nameInputElement = document.getElementById('nameInput');
const enteredName = nameInputElement.value;
JavaScript
  • nameInputElement は <input id="nameInput"> を指します。
  • .value は「ユーザーが入力した文字列」を返します。

ここで重要なのは、

「HTMLの入力欄に入っている値は、JavaScriptから .value で取り出す」

というパターンを覚えることです。

入力チェック（バリデーション）の最初の一歩

if (enteredName === '') {
  greetingMessageElement.textContent = 'お名前を入力してください。';
} else {
  greetingMessageElement.textContent = `こんにちは、${enteredName}さん！`;
}
JavaScript
  • 入力が空かどうかをチェックしています。
  • 空なら「入力してください」と表示。
  • 入力があれば「こんにちは、〇〇さん！」と表示。

これは、 バリデーション（入力チェック） の最も基本的な形です。

フォーム操作では、

「入力内容が正しいかどうかをチェックし、必要ならユーザーにメッセージを返す」

ことが非常に重要になります。

少し発展：入力後にフォームをリセットする

名前を入力して送信したあと、 入力欄を空に戻したい場合は、次のように書きます。

// 入力欄を空にします
nameInputElement.value = '';
JavaScript

または、フォーム全体をリセットする方法もあります。

nameFormElement.reset();
JavaScript

これにより、

  • すべての入力欄が初期状態に戻る
  • ユーザーが続けて別の名前を入力しやすくなる

といった効果があります。

セキュリティ・安全性の観点からの補足

フォームは、ユーザーからデータを受け取る入口です。 そのため、セキュリティの観点では非常に重要なポイントになります。

初心者の段階では、次のことを意識しておくと良いです。

  • 入力された値をそのままHTMLに埋め込むときは、 innerHTML ではなく textContent を使う（スクリプトが実行されないようにする）。
  • サーバーに送る場合は、サーバー側でも必ず入力チェックを行う。

今回の例では、

greetingMessageElement.textContent = `こんにちは、${enteredName}さん！`;
JavaScript

と textContent を使っているため、 入力された文字列がそのままHTMLとして解釈されることはなく、 安全な形で表示されます。

Day 36 前半 練習用テンプレート

最後に、名前入力フォームの基本を何度も練習できるテンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 36 前半：フォーム操作 練習テンプレート</title>
</head>
<body>
  <h1>Day 36 前半：フォーム操作 練習</h1>

  <!-- 名前入力フォーム -->
  <section>
    <h2>名前入力フォーム</h2>

    <form id="nameForm">
      <label for="nameInput">お名前：</label>
      <input type="text" id="nameInput" placeholder="お名前を入力してください">
      <button type="submit">送信</button>
    </form>

    <p id="greetingMessage">まだお名前が入力されていません。</p>
  </section>

  <script>
    console.log('--- フォーム操作 練習開始 ---');

    const nameFormElement = document.getElementById('nameForm');
    const nameInputElement = document.getElementById('nameInput');
    const greetingMessageElement = document.getElementById('greetingMessage');

    nameFormElement.addEventListener('submit', function (event) {
      event.preventDefault(); // 標準の送信動作を止めます

      const enteredName = nameInputElement.value;

      if (enteredName === '') {
        greetingMessageElement.textContent = 'お名前を入力してください。';
      } else {
        greetingMessageElement.textContent = `こんにちは、${enteredName}さん！`;
      }

      console.log('フォーム送信。入力された名前:', enteredName);

      // 練習用に、送信後に入力欄を空にしておきます
      nameInputElement.value = '';
    });

    console.log('--- フォーム操作 練習テンプレートの準備が完了しました ---');
  </script>
</body>
</html>

Day 36 前半のまとめ

Day 36前半では、

  • フォームが「ユーザーから情報を受け取るための仕組み」であること。
  • input 要素と value プロパティを使って、 「入力欄に何が入っているか」をJavaScriptから読み取る方法を学んだこと。
  • submit イベントと preventDefault() を使って、 「ページをリロードせずにフォーム送信を処理する」基本パターンを身につけたこと。
  • 名前入力フォームを通して、 入力チェック（バリデーション）の最初の一歩を体験したこと。

を整理しました。

このフォーム操作の基礎は、 ログイン画面、問い合わせフォーム、検索フォーム、商品注文フォームなど、 あらゆるWebアプリケーションの土台になります。

今日のコードを何度か書き直しながら、

「どの入力欄から、どのタイミングで、どんな値を取り出して、どう使うか」

を意識して練習していくことで、 JavaScriptで「ユーザーと対話するページ」を作る力が、着実に育っていきます。

Day 36：フォーム操作（後半）

「“ちゃんと扱えるフォーム”にするための一歩先の設計を身につける」

Day 36後半では、前半で学んだ

  • input
  • value
  • submit
  • preventDefault()

を、もう一歩踏み込んで「実際に使えるフォーム」に近づけていきます。 単に動くだけではなく、

  • 入力が空のときにエラーメッセージを出す
  • 余計な空白を取り除く
  • 入力後にフォームをリセットする

といった「丁寧なフォーム」の作り方を、名前入力フォームを題材に解説していきます。

フォームを“設計する目線”で考える

ただ動くフォームと、ちゃんと設計されたフォームの違い

前半で作ったフォームは、

  • 名前を入力して送信すると、メッセージが表示される

という基本的な動きはできていました。

後半では、そこから一歩進めて、

  • 入力が空のときは送信させず、ユーザーに「入力してください」と伝える
  • 入力値の前後の空白を取り除いてから扱う
  • 送信後に入力欄をリセットして、次の入力がしやすいようにする

といった「ユーザーにとって気持ちよく使えるフォーム」を目指します。

入力値を“そのまま信じない”という発想

valueで取った値は、そのまま使う前にチェックする

input.value で取得した値は、 ユーザーが何を入力したかをそのまま表します。

しかし、実際のアプリケーションでは、

  • 空文字列
  • スペースだけ
  • 意図しない文字列

などが入っている可能性があります。

そこで、フォーム操作では必ず、

「値を使う前に、最低限のチェックをする」

という習慣をつけておくことが大切です。

実践①：空白を取り除いてから判定する

trim()で前後の空白を削る

JavaScriptの文字列には、trim() というメソッドがあります。

const cleaned = enteredName.trim();
JavaScript

これは、

  • 文字列の前後にある半角・全角スペース、改行などを取り除く

という処理を行います。

名前入力フォームでは、

const enteredName = nameInputElement.value;
const trimmedName = enteredName.trim();
JavaScript

としてから、trimmedName を使って判定することで、

  • 「スペースだけ」の入力を「空」とみなす

ことができます。

改良版：空白を取り除いてからメッセージを出す名前入力フォーム

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 36 後半：trimを使った名前入力フォーム</title>
</head>
<body>
  <h1>名前入力フォーム（空白を考慮したバージョン）</h1>

  <!-- ▼ フォーム全体 -->
  <form id="nameForm">
    <label for="nameInput">お名前：</label>
    <input type="text" id="nameInput" placeholder="お名前を入力してください">
    <button type="submit">送信</button>
  </form>

  <!-- ▼ メッセージ表示エリア -->
  <p id="greetingMessage">まだお名前が入力されていません。</p>

  <script>
    // ▼ フォーム要素を取得します
    const nameFormElement = document.getElementById('nameForm');

    // ▼ 名前入力欄の<input>要素を取得します
    const nameInputElement = document.getElementById('nameInput');

    // ▼ メッセージ表示用の<p>要素を取得します
    const greetingMessageElement = document.getElementById('greetingMessage');

    // ▼ フォームが送信されたときの処理
    nameFormElement.addEventListener('submit', function (event) {
      // 標準の送信動作（ページリロードなど）を止めます
      event.preventDefault();

      // 入力欄に現在入っている値を取得します
      const enteredName = nameInputElement.value;

      // 前後の空白を取り除いた文字列を作ります
      const trimmedName = enteredName.trim();

      // 空白を取り除いた結果が空かどうかをチェックします
      if (trimmedName === '') {
        greetingMessageElement.textContent = 'お名前が入力されていません。空白だけでなく、文字を入力してください。';
      } else {
        greetingMessageElement.textContent = `こんにちは、${trimmedName}さん！`;
      }

      console.log('フォーム送信。元の入力値:', enteredName, '／trim後:', trimmedName);
    });
  </script>
</body>
</html>

深掘りポイント

  • enteredName は「ユーザーが入力したそのままの文字列」です。
  • trimmedName は「前後の空白を取り除いた、扱いやすい文字列」です。
  • 判定には trimmedName を使うことで、「スペースだけ」の入力を防げます。

こうした「前処理」を入れることで、 フォームの信頼性がぐっと上がります。

実践②：エラーメッセージと成功メッセージを分けて表示する

メッセージの種類を分けるという考え方

フォームでは、

  • 入力が正しいとき → 成功メッセージ
  • 入力が不正なとき → エラーメッセージ

を分けて表示することが多いです。

ここでは、

  • エラーメッセージ用の <p>
  • 成功メッセージ用の <p>

を用意して、状態に応じて表示を切り替える形を練習します。

コード例：エラーと成功を分けた名前入力フォーム

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 36 後半：エラーと成功メッセージを分けたフォーム</title>
  <style>
    .error {
      color: red;
    }
    .success {
      color: green;
    }
  </style>
</head>
<body>
  <h1>名前入力フォーム（エラーと成功メッセージ付き）</h1>

  <!-- ▼ フォーム全体 -->
  <form id="nameForm">
    <label for="nameInput">お名前：</label>
    <input type="text" id="nameInput" placeholder="お名前を入力してください">
    <button type="submit">送信</button>
  </form>

  <!-- ▼ エラーメッセージ表示エリア -->
  <p id="errorMessage" class="error"></p>

  <!-- ▼ 成功メッセージ表示エリア -->
  <p id="successMessage" class="success"></p>

  <script>
    const nameFormElement = document.getElementById('nameForm');
    const nameInputElement = document.getElementById('nameInput');
    const errorMessageElement = document.getElementById('errorMessage');
    const successMessageElement = document.getElementById('successMessage');

    nameFormElement.addEventListener('submit', function (event) {
      event.preventDefault(); // 標準の送信動作を止めます

      const enteredName = nameInputElement.value;
      const trimmedName = enteredName.trim();

      // まず、前回のメッセージをクリアします
      errorMessageElement.textContent = '';
      successMessageElement.textContent = '';

      if (trimmedName === '') {
        // エラーの場合はエラーメッセージだけを表示します
        errorMessageElement.textContent = 'お名前が空です。スペースだけでなく、文字を入力してください。';
      } else {
        // 成功の場合は成功メッセージだけを表示します
        successMessageElement.textContent = `こんにちは、${trimmedName}さん！`;
      }

      console.log('フォーム送信。入力値（trim後）:', trimmedName);
    });
  </script>
</body>
</html>

深掘りポイント

  • メッセージを「エラー用」と「成功用」に分けることで、 ユーザーにとって分かりやすいフィードバックになります。
  • 毎回の送信時に、前回のメッセージをクリアしてから新しいメッセージを表示することで、 表示が混ざらないようにしています。

こうした「メッセージ設計」は、 フォームを使いやすくするうえで非常に重要です。

実践③：送信後にフォームをリセットする

reset()でフォーム全体を初期状態に戻す

フォームには、reset() というメソッドがあります。

nameFormElement.reset();
JavaScript

これを呼び出すと、

  • すべての入力欄が初期状態に戻る
  • チェックボックスやラジオボタンも初期状態に戻る

といった効果があります。

名前入力フォームでは、 送信後にフォームをリセットすることで、

「次の入力がしやすい状態」

を作ることができます。

コード例：送信後にフォームをリセットする名前入力フォーム

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 36 後半：送信後にフォームをリセットする例</title>
</head>
<body>
  <h1>名前入力フォーム（送信後リセット付き）</h1>

  <form id="nameForm">
    <label for="nameInput">お名前：</label>
    <input type="text" id="nameInput" placeholder="お名前を入力してください">
    <button type="submit">送信</button>
  </form>

  <p id="greetingMessage">まだお名前が入力されていません。</p>

  <script>
    const nameFormElement = document.getElementById('nameForm');
    const nameInputElement = document.getElementById('nameInput');
    const greetingMessageElement = document.getElementById('greetingMessage');

    nameFormElement.addEventListener('submit', function (event) {
      event.preventDefault(); // 標準の送信動作を止めます

      const enteredName = nameInputElement.value;
      const trimmedName = enteredName.trim();

      if (trimmedName === '') {
        greetingMessageElement.textContent = 'お名前が空です。入力してください。';
      } else {
        greetingMessageElement.textContent = `こんにちは、${trimmedName}さん！`;

        // ▼ 成功時のみフォームをリセットします
        nameFormElement.reset();
      }

      console.log('フォーム送信。入力値（trim後）:', trimmedName);
    });
  </script>
</body>
</html>

深掘りポイント

  • 成功時のみ reset() を呼び出すことで、 エラー時には入力内容を残し、ユーザーが修正しやすいようにしています。
  • こうした「いつリセットするか」の設計も、 フォームの使いやすさに直結します。

セキュリティ・安全性の観点からの補足（フォーム版）

フォームは、ユーザーからデータを受け取る入口であり、 セキュリティの観点では非常に重要です。

初心者向けに、次のポイントを意識しておくと良いです。

  • 入力された値を画面に表示するときは、 innerHTML ではなく textContent を使う（スクリプトが実行されないようにする）。
  • サーバーに送る場合は、サーバー側でも必ず入力チェックとエスケープ処理を行う。
  • フロント側のチェック（今回のような空チェック）は、 「ユーザー体験のため」であり、 セキュリティの最終防衛線は必ずサーバー側に置く。

今回の例では、すべて

greetingMessageElement.textContent = `こんにちは、${trimmedName}さん！`;
JavaScript

のように textContent を使っているため、 入力された文字列がそのままHTMLとして解釈されることはなく、 安全な形で表示されます。

Day 36 後半 練習用テンプレート

最後に、今日の内容をまとめて練習できるテンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 36 後半：フォーム操作 総合練習テンプレート</title>
  <style>
    .error {
      color: red;
    }
    .success {
      color: green;
    }
  </style>
</head>
<body>
  <h1>Day 36 後半：フォーム操作 総合練習</h1>

  <section>
    <h2>名前入力フォーム（エラー・成功・リセット付き）</h2>

    <form id="nameForm">
      <label for="nameInput">お名前：</label>
      <input type="text" id="nameInput" placeholder="お名前を入力してください">
      <button type="submit">送信</button>
    </form>

    <p id="errorMessage" class="error"></p>
    <p id="successMessage" class="success"></p>
  </section>

  <script>
    console.log('--- フォーム操作 総合練習開始 ---');

    const nameFormElement = document.getElementById('nameForm');
    const nameInputElement = document.getElementById('nameInput');
    const errorMessageElement = document.getElementById('errorMessage');
    const successMessageElement = document.getElementById('successMessage');

    nameFormElement.addEventListener('submit', function (event) {
      event.preventDefault(); // 標準の送信動作を止めます

      const enteredName = nameInputElement.value;
      const trimmedName = enteredName.trim();

      // 前回のメッセージをクリアします
      errorMessageElement.textContent = '';
      successMessageElement.textContent = '';

      if (trimmedName === '') {
        errorMessageElement.textContent = 'お名前が空です。スペースだけでなく、文字を入力してください。';
      } else {
        successMessageElement.textContent = `こんにちは、${trimmedName}さん！`;

        // 成功時のみフォームをリセットします
        nameFormElement.reset();
      }

      console.log('フォーム送信。入力値（元）:', enteredName, '／trim後:', trimmedName);
    });

    console.log('--- フォーム操作 総合練習テンプレートの準備が完了しました ---');
  </script>
</body>
</html>

Day 36 後半のまとめ

Day 36後半では、

  • value で取得した入力値を、そのまま使うのではなく、 trim() などで前処理してから扱う重要性を学んだこと。
  • エラーメッセージと成功メッセージを分けて表示し、 ユーザーにとって分かりやすいフィードバックを設計したこと。
  • reset() を使って、送信後のフォームの状態をコントロールする方法を体験したこと。
  • フォームが「ユーザーからデータを受け取る入口」であり、 セキュリティとユーザー体験の両方の観点が重要であることを意識したこと。

を整理しました。

この「丁寧なフォーム設計」の感覚は、 ログインフォーム、問い合わせフォーム、検索フォームなど、 あらゆるWebアプリケーションで活きてきます。

今日のコードを何度か書き直しながら、

「入力値をどう扱うか」「どんなメッセージを返すか」「いつフォームをリセットするか」

を自分なりに設計してみることで、 JavaScriptで“気持ちよく使えるフォーム”を作る力が、着実に育っていきます。

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