【2026年8月最新】JavaScriptのconfirm()でOK・キャンセルの確認ダイアログを実装する方法｜非エンジニア向け解説

「削除ボタンを押したときに『本当に削除しますか？』と聞きたい」「フォームを送信する前に、入力内容の確認を挟みたい」——Webサイトやシステムを運用していると、こうした「確認してから処理を進める」という仕組みが欲しくなる場面は数多くあります。

JavaScriptには、この「確認してから進める」を数行のコードで実現できるconfirm()というメソッドが標準で用意されています。特別なライブラリを追加する必要もなく、ブラウザに最初から組み込まれている機能なので、正しい書き方さえ覚えればすぐに使えます。

この記事では、confirm()の基本構文・戻り値の使い方・実務での実装例から、「なぜボタンの文言を『はい』『いいえ』に変えられないのか」「モダンな開発現場でconfirm()がどう扱われているのか」まで、非エンジニアの方にも分かるように順を追って解説します。

代表菅澤

confirm()は「JavaScript入門」で必ず出てくる基本機能ですが、実務で使うと「ボタンの文言を変えたい」「もっとデザインをかっこよくしたい」という要望が必ず出てきます。この記事では、基本の使い方だけでなく、その「先」の話まで踏み込みます。

AI鬼管理山崎

弊社では日々、お客様のLPやフォームの細かい挙動をClaude Codeで調整しています。confirm()のような小さなJavaScriptの仕組みを理解しておくと、「何を、誰に、どう頼めばいいか」の解像度が上がるので、経営者・管理職の方にも押さえておいてほしい内容です。

この記事を最後まで読むと、次の6つが明確になります。

01 BASICS confirm()とは何か JavaScriptに標準搭載された「確認ダイアログ」機能の正体

confirm()は、ブラウザに標準で組み込まれているJavaScriptのメソッドで、ユーザーに「OK」か「キャンセル」かを選ばせるポップアップ（ダイアログボックス）を画面に表示します。ライブラリの追加やHTMLの準備は一切不要で、JavaScriptのコードを1行書くだけで動作します。

似た機能に、メッセージを表示するだけのalert()や、テキスト入力を求めるprompt()がありますが、confirm()は「ユーザーの意思確認をしてから処理を分岐させたい」場面に特化した機能です。削除・送信・退会・上書き保存など、「取り消しがきかない操作」の直前に使われることが多いのが特徴です。

confirm()は正式にはwindow.confirm()という書き方が本来の姿です。ブラウザ上でJavaScriptを実行する場合、windowは「今表示しているタブ・ページ」を表すグローバルなオブジェクトで、その配下にあるメソッドはwindow.を省略して呼び出せるルールになっています。そのため、confirm('...')とwindow.confirm('...')は完全に同じ動作をする、まったく同じものです。

1-1. alert() / confirm() / prompt() の違い

この3つはいずれもブラウザ標準のダイアログ機能ですが、役割がはっきり分かれています。表で整理します。

confirm()の最大の特徴は、ユーザーの選択結果がそのままtrue / falseという真偽値で返ってくる点です。この戻り値をif文と組み合わせることで、「OKが押されたときだけ処理を実行する」というシンプルな分岐が数行で書けます。詳しくは3章で解説します。

02 SYNTAX confirm()の書き方・基本構文 実際に手を動かして動作を確認する

confirm()の書き方は非常にシンプルです。カッコの中に、ダイアログに表示したいメッセージ（文字列）を渡すだけです。

confirm('本当に削除しますか？');

このコードが実行されると、画面に「本当に削除しますか？」というメッセージと、「OK」「キャンセル」の2つのボタンを持つポップアップがブラウザ標準のデザインで表示されます。ボタンの見た目や配置はブラウザ（Chrome、Safari、Edgeなど）ごとに微妙に異なりますが、動作の仕組みはすべて共通です。

confirm()は、呼び出された瞬間にその場でJavaScriptの実行を一時停止します。ユーザーがOKまたはキャンセルを押すまで、次の行のコードは実行されません。これは同期的（synchronous）な処理と呼ばれる性質で、非同期処理のようにコールバックやPromiseを使わなくても、「ダイアログが閉じられるまで待つ」という挙動が自然に実現できます。

03 RETURN VALUE 戻り値で処理を分岐する true / false を使った条件分岐の書き方

confirm()の本当の使いどころは、「ダイアログを表示すること」自体ではなく、ユーザーの選択結果に応じて処理を変えることにあります。confirm()の戻り値は次のルールで決まります。

この戻り値を変数に受け取り、if文で判定するのが基本パターンです。

const result = confirm('本当に削除しますか？');

if (result) {
  // OKが押された場合の処理
  console.log('削除を実行しました');
} else {
  // キャンセルされた場合の処理
  console.log('削除をキャンセルしました');
}

変数resultには、OKならtrue、キャンセルならfalseが入ります。if文はtrueのときにブロック内の処理を実行する仕組みなので、if (result)と書くだけで「OKが押されたときだけ処理を進める」という制御が実現できます。

3-1. 変数を使わずに1行で書く方法

実務では、変数に一度受け取らず、confirm()の呼び出し結果を直接if文の条件式に書くパターンもよく使われます。

if (confirm('本当に削除しますか？')) {
  console.log('削除を実行しました');
} else {
  console.log('削除をキャンセルしました');
}

どちらの書き方でも動作は同じです。処理の結果を後で別の場所でも使い回したい場合は変数に入れておく方が扱いやすく、その場限りの判定であれば1行で書いてしまう方がシンプルです。

3-2. 三項演算子でさらに短く書く

分岐する処理が単純な場合は、三項演算子を使ってさらに短く書くこともできます。

const message = confirm('保存しますか？') ? '保存しました' : '保存をキャンセルしました';
console.log(message);

04 PRACTICAL USE フォーム送信前の確認ダイアログを作る 実務で最もよく使われる実装パターン

confirm()が最も実務で活躍するのが、フォームの送信前に「この内容で本当に送信してよいか」を確認する場面です。お問い合わせフォームや申込みフォームなどで、誤送信を防ぐ目的でよく使われます。

const form = document.getElementById('contact-form');

form.addEventListener('submit', function (event) {
  const ok = confirm('この内容で送信します。よろしいですか？');
  if (!ok) {
    // キャンセルされた場合は送信をキャンセルする
    event.preventDefault();
  }
});

ポイントはevent.preventDefault()です。フォームのsubmitイベントは、何もしなければそのまま送信処理（ページ遷移や通信）に進んでしまいます。confirm()の戻り値がfalse（キャンセルされた）のときだけevent.preventDefault()を呼び出すことで、送信そのものを止めることができます。

4-1. 削除ボタンでの確認ダイアログの例

フォーム送信だけでなく、一覧画面の「削除」ボタンにconfirm()を仕込むのも典型的な使い方です。

const deleteButton = document.getElementById('delete-btn');

deleteButton.addEventListener('click', function () {
  if (confirm('このデータを削除します。元に戻せませんが、よろしいですか？')) {
    // ここに実際の削除処理（APIへのリクエストなど）を書く
    console.log('削除処理を実行');
  }
});

AI鬼管理山崎

「削除ボタンを押したら一瞬で消えてしまった」というのは、業務システムにおける典型的な事故パターンです。confirm()を1つ挟むだけで防げる事故は多いので、非エンジニアの方でも「ここにconfirmが欲しい」と気づけるようになると、システム改修の会話がスムーズになります。

05 LIMITATION confirm()の限界とカスタマイズできない理由 なぜ「はい」「いいえ」という文言に変えられないのか

多くの人がconfirm()を使い始めて最初にぶつかる壁が、「OK」「キャンセル」というボタンの文言を変更できないという制約です。「はい」「いいえ」にしたい、「削除する」「やめる」にしたい、という要望はよくありますが、confirm()単体ではこれを実現できません。

この理由は、confirm()が表示するダイアログがブラウザ（あるいはOS）が管理するネイティブな部品であり、Webページ側のHTML・CSSの管理下にないためです。開発者がJavaScriptで渡せるのはメッセージ本文の文字列だけで、ボタンのラベル・色・フォント・配置は一切変更できない設計になっています。

5-1. 改行や装飾もできない

confirm()のメッセージは基本的に1つの文字列として扱われ、HTMLタグは反映されません。改行を入れたい場合は、文字列の中に改行コード（\n）を含めることで対応できます。

confirm('以下の内容で送信します。\n\nお名前：山田太郎\nメール：example@example.com\n\nよろしいですか？');

\nは改行を表す特殊な記号で、多くのブラウザでこの記法による改行はダイアログ内で反映されます。ただし、太字や色付けといった装飾はどのブラウザでも一切反映されません。これも「見た目を自由に変えられない」という制約の一部です。

06 CUSTOM DIALOG カスタムダイアログを自作する方法 デザインを自由にしたいときの実装アプローチ

「ボタンの文言をブランドに合わせたい」「デザインをサイトの雰囲気に統一したい」という要望がある場合、confirm()そのものをカスタマイズすることは諦めて、HTML・CSS・JavaScriptで確認ダイアログを自作するのが現実的な解決策です。アプローチは大きく2種類あります。

6-1. div要素とCSSで自作する（従来の方法）

最もよく使われてきた方法は、非表示にしたdiv要素を用意しておき、必要なタイミングでCSSの表示・非表示を切り替える手法です。

<div id="custom-dialog" class="dialog-overlay" style="display:none;">
  <div class="dialog-box">
    <p>本当に削除しますか？</p>
    <button id="dialog-ok">削除する</button>
    <button id="dialog-cancel">やめる</button>
  </div>
</div>

この方法では、ボタンの文言（「削除する」「やめる」など）もデザインも完全に自由になります。ただし、confirm()と違って「呼び出したその場でtrue/falseが返ってくる」わけではない点に注意が必要です。ボタンのクリックイベントを個別に監視し、それぞれのボタンが押されたときの処理を書く必要があります。

6-2. HTMLの <dialog> 要素を使う（モダンな方法）

近年のモダンブラウザ（Chrome・Edge・Firefox・Safariの最新版）では、確認ダイアログ専用に設計された<dialog>要素が標準で使えるようになっています。div要素を自作するより少ないコードで、モーダル表示・背景の半透明化（バックドロップ）・キーボード操作対応まで得られます。

<dialog id="my-dialog">
  <p>本当に削除しますか？</p>
  <button id="ok-btn">削除する</button>
  <button id="cancel-btn">やめる</button>
</dialog>

<script>
const dialog = document.getElementById('my-dialog');
document.getElementById('open-btn').addEventListener('click', () => {
  dialog.showModal();
});
document.getElementById('ok-btn').addEventListener('click', () => {
  console.log('削除を実行');
  dialog.close();
});
document.getElementById('cancel-btn').addEventListener('click', () => {
  dialog.close();
});
</script>

07 PITFALLS 【独自】confirm()の落とし穴と非推奨の実態 モダンなブラウザ・開発現場でどう扱われているか

ここからは、多くの入門記事があまり触れないconfirm()の「現在地」について解説します。結論から言うと、confirm()はJavaScriptの仕様（HTML Living Standard）上で正式に「非推奨（deprecated）」と明記されているわけではありません。しかし、実際の開発現場やブラウザの実装レベルでは、使用を避ける・制限する方向に動いています。

代表菅澤

「非推奨」という言葉を使うと語弊がありますが、実務では『動くけれど、プロダクトのUIとしては使わない』という扱いになっているのが実態です。この温度感の違いを理解しておくことが大事です。

7-1. なぜ実務で敬遠されるのか

confirm()が実務のプロダクト開発で避けられる理由は、主に3つです。

特に3つ目は見落とされがちですが、実務上は重要な制約です。Chromeなどのモダンブラウザは、短時間のうちに何度もconfirm()やalert()が呼び出されると、「このページでは以後ダイアログを表示しない」という抑制用のチェックボックスをダイアログ内に表示するようになります。ユーザーがこのチェックを入れてしまうと、以降そのページ内でconfirm()を呼び出しても、常にキャンセル扱い（false）として処理されてしまいます。

分かりやすい例がbeforeunloadイベントです。かつては、ページ離脱時にconfirm()やalert()を呼び出し、「編集内容が保存されていません。本当に移動しますか？」といった独自の文言を表示させる実装がよく使われていました。しかし現在のChromeをはじめとする主要ブラウザでは、beforeunloadイベント内で独自メッセージを表示する仕組みは廃止されており、ブラウザが用意した定型の確認メッセージが表示されるだけになっています。これは、悪意のあるサイトが離脱防止のダイアログを乱用してユーザーを足止めする問題への対策として実装された制限です。

7-2. 「使ってはいけない」わけではない

こうした制約がある一方で、confirm()が「使ってはいけない機能」というわけではありません。社内向けの管理画面や、開発中の一時的な確認、あるいはデザインへのこだわりが不要な小規模なツールであれば、実装コストの低さというconfirm()の最大のメリットは今も有効です。div要素や<dialog>要素での自作は、その分だけコードとテストの手間が増えます。

08 FOR NON-ENGINEERS 【独自】非エンジニアがこの知識をどう活かすか confirm()の細部を知ると、UI改修の依頼が変わる

ここまで読んで、「confirm()の書き方は分かったが、自分がコードを書くわけではない」という経営者・管理職の方も多いはずです。それで問題ありません。この章では、非エンジニアがなぜこの知識を持つ意味があるのかという視点で解説します。

自社サイトのフォームやLP（ランディングページ）を運用していると、「送信ボタンを押したときに確認を挟みたい」「削除操作にワンクッション欲しい」といった小さなUI改善の要望は日常的に発生します。こうした要望は、エンジニアに依頼するには小さすぎ、かといって自分で実装するには専門知識が必要——という、宙に浮きやすいタスクです。

代表菅澤

弊社でも、こうした「地味だけど毎回発生する」細かいWeb改修を、Claude CodeのようなAIエージェントに任せるようになってから、依頼から反映までのスピードが大きく変わりました。エンジニアの手を止めずに、その日のうちに直せる範囲が広がった感覚です。

弊社（株式会社GENAI）では、Claude Max 20xプラン（月額$200・約30,000円）を契約し、営業・広告・経理・秘書業務・記事制作に加えて、WordPressやLPの細かいスクリプト修正・書き捨てのコード対応にもClaude Codeを活用しています。confirm()を独自デザインの<dialog>要素に置き換えるような作業は、まさにこの「都度数時間削減」の対象になっている業務のひとつです。

この記事で解説した「confirm()はボタン文言を変えられない」「変えたいなら<dialog>要素やカスタムHTMLで自作する必要がある」という仕組みを理解しているだけで、AIエージェントやエンジニアへの依頼文がぐっと具体的になります。専門用語を正確に使う必要はありませんが、「何が制約で、何が実現可能なのか」の輪郭を知っているだけで、無駄な往復を減らせます。

もちろん、確認ダイアログの文言修正のような軽微な変更であっても、本番環境に反映する前には人間による最終確認を挟むのが原則です。AIエージェントに任せられるのは「コードを書く・調べる・提案する」までの部分であり、「反映してよいと判断する」のは最終的に業務担当者の役割という位置づけは変わりません。

AI鬼管理山崎

confirm()のような小さな仕組みの理解が、実は「AIに何を頼めばいいか」を見極める力に直結します。技術を全部理解する必要はありませんが、『何ができて、何ができないか』の輪郭だけは知っておくと、日々のWeb改修がぐっと楽になります。

09 CONCLUSION まとめ confirm()は「シンプルだが制約も多い」ことを踏まえて使う

この記事では、JavaScriptのconfirm()の基本構文から、戻り値を使った条件分岐、フォーム送信前の確認実装、ボタン文言をカスタマイズできない理由、モダンブラウザでの制限の実態、そして非エンジニアがこの知識をどう活かせるかまでを整理しました。最後にポイントを振り返ります。

confirm()は、JavaScript入門者が最初に触れる機能でありながら、実務レベルで使いこなすには「何ができて、何ができないか」を正確に把握しておく必要がある機能です。単純な確認処理であればそのまま使い、デザインの自由度が必要になった時点で自作ダイアログへの切り替えを検討する——この判断基準を持っておくだけで、実装の手戻りを大きく減らせます。

代表菅澤

弊社では「AI鬼管理」というサービスで、Claude Codeを使った業務自動化やWeb改修の実務伴走を行っています。confirm()のような小さな仕組みの改修依頼も含め、日々の「地味だけど時間がかかる」作業をどう手放していけるか、無料相談で具体的にお答えしています。

LPやフォームの細かい改修、AI鬼管理が実装まで伴走します

確認ダイアログのカスタマイズのような小さな改修から、業務全体の自動化設計まで。
Claude Codeを実務でどう使うか、弊社の運用ノウハウをもとにご相談を承ります。

AI鬼管理山崎

「エンジニアに頼むほどではないが、自分でも直せない」——そんな細かいWeb改修のご相談も歓迎です。まずは無料相談で、現状の依頼フローのどこを効率化できるか一緒に確認しましょう。

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？

AI活用を自社で回せるようになりたい方へ

AI鬼管理

Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。

AI鬼管理を詳しく見る →

業務を丸ごと任せたい方へ

AIBPO by AI鬼管理

請求処理・データ入力・問い合わせ対応などの定型業務を、AI×人の品質管理体制で丸ごと代行。いまのコストの75%目安で、日々は成果物を承認するだけ。

AIBPOを詳しく見る →

よくある質問

Q. confirm()とwindow.confirm()は違うものですか？

A. 違いはありません。ブラウザ上のJavaScriptでは、confirm()は本来window.confirm()という書き方が正式な形ですが、windowオブジェクトのメソッドはwindow.を省略して呼び出せる決まりになっているため、confirm()とwindow.confirm()は完全に同じ動作をする同一のメソッドです。実務のコードでは省略形が使われるのが一般的です。

Q. confirm()のボタンの文言（OK/キャンセル）を「はい」「いいえ」に変更できますか？

A. できません。confirm()が表示するダイアログはブラウザが管理するネイティブな部品で、JavaScriptから渡せるのは本文のメッセージ文字列のみです。ボタンの文言・色・デザインを変更したい場合は、この記事の6章で紹介したように、HTML/CSSで自作するか、<dialog>要素を使ってゼロから実装し直す必要があります。

Q. confirm()の戻り値はどう使えばいいですか？

A. OKが押されるとtrue、キャンセルされるとfalseという真偽値が返ります。この値をif文の条件式に使うことで「OKのときだけ処理を実行する」という分岐が書けます。変数に一度受け取ってから判定する方法と、if文の条件式に直接confirm()を書く方法のどちらでも同じ結果になります。

Q. confirm()を使うとページの動きが止まるのは本当ですか？

A. 本当です。confirm()は同期処理と呼ばれる方式で動作し、呼び出された瞬間にその行でJavaScriptの実行が一時停止します。ユーザーがOKまたはキャンセルを押すまで、そのページ内の他の操作（クリックやスクロールなど）も基本的に受け付けなくなります。止まるのはそのタブ・ページのみで、他のタブや別アプリの動作には影響しません。

Q. confirm()は非推奨（deprecated）なのですか？

A. JavaScriptの仕様書上、正式に非推奨と明記されているわけではありません。ただし、デザインを変更できない・処理をブロックする・連続呼び出しがブラウザに抑制されるといった制約から、実務のプロダクト開発では使用を避け、<dialog>要素などへの置き換えを選ぶケースが増えています。社内ツールや簡易的な確認用途では今でも問題なく使われています。

Q. スマートフォンのブラウザでもconfirm()は同じように動きますか？

A. 基本的な戻り値の仕組み（OKでtrue、キャンセルでfalse）は同じです。ただし、ダイアログの見た目やボタンの配置はモバイルブラウザ（Chrome for AndroidやMobile Safariなど）ごとにデザインが異なり、PC版とは表示が変わります。挙動を確認する際は、対象とするスマートフォン端末やブラウザで実機テストをしておくのが安全です。

Q. confirm()の代わりに何を使えばいいですか？

A. デザインを自由にしたい場合は、6章で紹介したHTMLの<dialog>要素の利用が現実的な選択肢です。ブラウザ標準機能なので外部ライブラリを追加する必要がなく、CSSで自由に装飾でき、ボタンの文言も自由に設定できます。より高度な演出が必要な場合は、SweetAlert2などの外部ライブラリを検討する開発現場もあります。

Q. 非エンジニアがLPの確認ダイアログを直したいとき、何をすればいいですか？

A. まずは「現在どう動いていて、どう変えたいか」を具体的に言葉にすることが重要です。この記事で触れたように、confirm()はボタン文言を変えられない仕組みだと理解していれば、「文言を変えたいなら作り直しが必要」という前提を持って依頼できます。軽微な修正であれば、AIエージェントに対象ページと望む挙動を伝えるだけで、実装から提案までを任せられるケースが増えています。

監修 最終更新日: 2026年8月8日

菅澤 孝平 株式会社GENAI 代表取締役

• AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
• Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
• 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
• 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
• メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
• 明治大学政治経済学部卒

現在は AI鬼管理（Claude Code活用の伴走型パーソナルトレーニング）を主事業とし、経営者と二人三脚で「AIに業務を任せる仕組み」を実装。「実行を強制する環境」を AI で構築する手法を、自社の実運用知見をもとに発信している。

▸ 代表 菅澤孝平 のプロフィール詳細を見る