はじめに

Claude Codeに「保存ボタンを押したらメモを登録する機能を作って」と頼むと、フォームの送信処理がすぐに実装されます。1回押して確認する分には、ちゃんと1件登録され、動作確認も問題なく通ることが多いです。

ただ、通信が少し遅い環境で試したり、焦って早くボタンを押したりすると、同じ内容のメモが2件、3件と登録されてしまうことがあります。これは実装が間違っているわけではなく、「連続で押されたときにどうするか」という条件が、最初の依頼には含まれていなかっただけです。

本記事では、二重送信が起きる仕組みと、AIに実装を頼むときに伝えておくと防げる観点を、コード例つきで紹介します。

なぜ2回押しただけで2件登録されるのか

保存ボタンを押すと、サーバーにデータを送るリクエストが1回発生します。ボタンを2回押せば、リクエストも単純に2回発生します。

async function handleSave() {
  await fetch("/api/memos", {
    method: "POST",
    body: JSON.stringify({ text: memoText }),
  });
}

この処理には、「今リクエストを送信中かどうか」という状態がどこにも記録されていません。ボタンがまだ押せる状態のままなので、1回目のリクエストが終わる前に2回目を押すと、そのまま2回目のリクエストも飛んでいきます。

見た目上は保存が終わって画面が切り替わるので、押した本人は「2回押したこと」に気づきにくいことがあります。気づくのは、後から一覧を見て同じメモが2つ並んでいるのを発見したときです。

送信中はボタンを押せなくする

いちばん基本的な対策は、リクエストが完了するまでボタンを無効化することです。

const [isSaving, setIsSaving] = useState(false);

async function handleSave() {
  if (isSaving) return;
  setIsSaving(true);
  try {
    await fetch("/api/memos", {
      method: "POST",
      body: JSON.stringify({ text: memoText }),
    });
  } finally {
    setIsSaving(false);
  }
}

<button onClick={handleSave} disabled={isSaving}>
  {isSaving ? "保存中..." : "保存"}
</button>

isSaving が true の間はボタンが押せなくなるので、通信中に連打しても2回目以降のクリックは無視されます。ボタンの表示を「保存中...」に変えておくと、押した本人にも「今処理が進んでいる」ことが伝わります。

クライアント側の対策だけでは足りない場合もある

ボタンの無効化はクリック連打には効きますが、通信が不安定でブラウザが同じリクエストを自動的に再送するケースや、複数タブで同じ画面を開いているケースまでは防げません。

より確実にしたい場合は、サーバー側でも「同じ内容の登録が短時間に連続していないか」をチェックする、あるいはリクエストごとに一意なIDを振って、同じIDのリクエストは2回目以降を無視する、という対策を組み合わせます。ただし、未経験のうちはまず「ボタンを無効化する」というクライアント側の対策から押さえておけば、クリック連打による二重送信への対策としては十分です。

AIに実装を頼むときに伝えておくこと

「保存機能をつけて」とだけ頼むのではなく、「保存中はボタンを押せないようにして、連打しても2回登録されないようにしてください」と、二重送信への対応まで含めて伝えておくと、この手の見落としを事前に防げます。

依頼した後であれば、「このボタンは連打されたとき、リクエストが2回飛びませんか？」と一言確認するだけでも、対策が入っているかどうかをその場で教えてもらえます。

まとめ

保存ボタンを2回押すと、単純に2回リクエストが飛んで2件登録される
原因は「送信中かどうか」を管理する状態がないこと
isSaving のような状態でボタンを無効化するだけで、多くの二重送信は防げる
「連打されても大丈夫か」を、依頼の時点かレビューの時点で必ず確認する

未経験者向けの講座を運営しています

未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を、全20セッションで体系化した教材です。Claude Code を学習パートナーにする CLAUDE.md と学習モード（learner / developer）の設計までセットで含みます。

▶ ライブデモ（インストール不要・無料で今すぐ見られます）→ https://trial-web-ayies128s-projects.vercel.app/?ref=qiita
教材完全版＋月5,500円のメンタリング（全20セッション＋チャット質問し放題）→ https://menta.work/plan/20251?ref=qiita
無料体験版（git clone して自分の手元で動かす・最初の数セッション分・⭐ Star もよろしくお願いします）→ https://github.com/ayies128/next-ai-camp-trial
YouTube『AIエンジニア情報局』（AI×開発ニュースを1本5分でキャッチアップできる別運営チャンネル・無料）→ https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/?ref=qiita

※ Qiita読者の方には易しすぎる内容なので、初心者の知り合いへの紹介や社内研修の参考としてどうぞ。