(Sample)
今回は、Webフォームにおける「二重送信防止」の実装について解説していきます。
「送信ボタンを連打してしまって、データが2回送られてしまった！」というトラブル、実は結構あります。特に新人エンジニアにとっては見落としがちな落とし穴なんですよ。
このコードでは、その防止策としてJavaScriptで送信ボタンを一時的に無効化する方法を使っています。
どうして二重送信は防がないといけないの？
まずは問題の本質から考えてみましょう。
たとえば……
- ユーザーが送信ボタンを2回クリックしてしまう
- 通信が遅くて「送られたかわからない」から連打してしまう
- 結果、同じ申込みやデータが二重に登録されてしまう
こうなると、管理者も困りますし、ユーザー自身も混乱してしまいますよね。
今回のコードで使われている技術
| 技術 | 内容 |
|---|---|
| JavaScript | フォーム送信の一時停止と再開を制御 |
| Font Awesome | アイコンの表示（送信中のぐるぐるなど） |
| Bootstrap | UIの整形（ボタンやフォームのスタイル） |
では、それぞれの動きを丁寧に見ていきましょう。
JavaScriptでの送信制御の流れ
スクリプト部分の全体像
document.addEventListener("DOMContentLoaded", function () {
const form = document.querySelector("form");
form.addEventListener("submit", function (event) {
event.preventDefault();
const submitButton = form.querySelector('button[type="submit"]');
submitButton.disabled = true;
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 送信中...';
setTimeout(function () {
form.submit();
}, 1500);
});
});
処理のステップごとに分解
| ステップ | 処理内容 |
|---|---|
| 1 | DOMContentLoaded でページが完全に読み込まれてから実行 |
| 2 | フォームの submit イベントにリスナーを追加 |
| 3 | event.preventDefault() で送信を一旦止める |
| 4 | 送信ボタンを disabled にして再クリック不可に |
| 5 | ボタンの中身をスピナーアイコン付きに変更 |
| 6 | setTimeout()で1.5秒後に改めてform.submit()で送信を再実行 |
どうして1.5秒待つの？
これはユーザーが「クリックした！」というフィードバックを得るためです。
- サーバーの応答が速すぎると「本当に送信されたの？」と不安になります
- 少し待つことで「処理中ですよ〜」という視覚的な安心感を与えることができます
実際の送信時の動き
ボタンを押すと、こうなります：
- 送信中のアイコンとテキストに変わる
- ボタンが押せなくなる
- 1.5秒後に送信が完了
ユーザーからすれば「あ、今動いてるな」と実感できるのが大切なんですね。
応用・改善のアイデア
| 機能 | 説明 |
|---|---|
| サーバーからの応答を待ってリセット | 送信完了後にボタンを元に戻す（サーバーがエラー返す場合にも対応） |
| 複数のボタンがある場合の制御 | フォーム全体の状態管理が必要になります |
| バリデーション失敗時にボタンを戻す | JS側で入力チェックしてエラーがあれば送信を中止しボタンも復活させる |
よくある質問
Q1. event.preventDefault() をしないとどうなる？
→ フォームがそのまま送信されてしまうため、JavaScriptの後続処理（ボタンを無効化するなど）が間に合わない可能性があります。
Q2. form.submit()とbutton.click()の違いは？
→ form.submit()はJavaScriptから直接送信を実行しますが、button.click()は再びsubmitイベントを発火してしまいます。再発火を避けるためにも、form.submit()を使うのが正解です。
今後の学習ステップ
今回のコードをベースにして、さらにレベルアップするなら次のようなテーマがオススメです。
| テーマ | 内容 |
|---|---|
| バリデーション | 入力チェックとエラーメッセージ表示 |
| フォームの状態管理 | ローディング中・成功・失敗などの状態管理を明確に |
| サーバー側の二重送信防止 | トークンやセッションで再送信の識別と拒否 |
まとめ
このコードは、一見地味ですがUX向上とトラブル防止に非常に効果的です。
- ユーザーは何が起きているかがわかる
- サーバーには不要な負荷をかけない
- 管理画面側もデータが整って扱いやすい
「送信した？送れてない？もう一回押そう！」というユーザーの不安を先回りして防ぐ、とても実践的なスキルです。
こうした細かいところに気を配れるエンジニアを目指していきましょう！