【JavaScript】ダイアログボックスの使い方を解説｜Webの基礎

記事内には広告が含まれます

2026年8月13日

JavaScriptのダイアログボックス（alert・confirm・prompt）の使い方を解説｜Webの基礎

はじめに

前回の記事では、window.open()を使ったウィンドウの開閉・移動・リサイズについて解説しました。

今回は、ブラウザが標準で用意しているダイアログボックス（alert・confirm・prompt）の使い方を解説します。「保存しました」といった通知や、「本当に削除しますか？」という確認、簡単な文字入力の受け取りなど、windowオブジェクトのメソッドとして手軽に使える機能です。それぞれの違いと、実務で使う際の注意点までまとめて紹介します。

alert() で警告メッセージを表示する

alert()は、メッセージと「OK」ボタンだけのシンプルなダイアログを表示します。ユーザーへの通知や、簡易的なデバッグ確認によく使われます。

alert("保存が完了しました");

window.alert()のwindow.は省略可能です。前回・前々回の記事で解説した通り、windowオブジェクトのメソッドはグローバルスコープから直接呼び出せます。

alert()に戻り値はありません（undefinedが返ります）。「OK」を押すとダイアログが閉じ、次の処理に進みます。

alert()が表示されている間、それ以降のJavaScriptの処理は止まります（同期処理）。ユーザーが「OK」を押すまで、後続のコードは実行されません。

confirm() で「OK/キャンセル」を確認する

confirm()は、「OK」と「キャンセル」の2つのボタンを持つダイアログを表示し、押されたボタンに応じてtrueまたはfalseを返します。

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

if (result) {
    console.log("削除処理を実行");
} else {
    console.log("キャンセルされました");
}

押されたボタン	戻り値
OK	`true`
キャンセル（または×で閉じる）	`false`

削除・送信・上書き保存など、取り消しの効かない操作の直前に確認を挟む用途でよく使われます。

prompt() で文字入力を受け取る

prompt()は、入力欄付きのダイアログを表示し、ユーザーが入力した文字列を返します。

prompt(message, default);

引数	内容
`message`	入力欄の上に表示する案内メッセージ
`default`	入力欄にあらかじめ表示しておく初期値（省略可）

const name = prompt("お名前を入力してください", "ゲスト");

if (name !== null) {
    alert(`こんにちは、${name}さん！`);
}

prompt()の戻り値は、ボタンによって次のように変わります。

押されたボタン	戻り値
OK（何も入力せず）	空文字列 `""`
OK（文字を入力）	入力した文字列
キャンセル	`null`

「何も入力していない」と「キャンセルされた」はどちらも一見似ていますが、戻り値は空文字列とnullで異なります。判定条件にname !== nullを使うことで、キャンセル時だけを正しく除外できます。

3つのダイアログに共通する注意点

alert・confirm・promptはいずれもブラウザが用意しているネイティブな機能のため、共通していくつかの制約があります。

処理をブロックする：ダイアログが表示されている間、ページ上の他の操作やJavaScriptの実行は止まります。多用するとユーザー体験を損ねやすい機能です。
見た目をカスタマイズできない：ボタンの色や文言、レイアウトはブラウザ側の仕様に固定されており、CSSなどで変更できません。デザインを整えたい場合は、divとCSSで作る独自のモーダルウィンドウを使う必要があります。
短時間に連続して呼び出すとブロックされることがある：同じページから繰り返しダイアログを表示すると、多くのブラウザは「このページでこれ以上ダイアログを表示しない」というチェックボックスを表示し、ユーザーが有効にすると以降呼び出しても何も表示されなくなります。

実務サンプル（削除確認＋理由の入力）

削除ボタンを押すとconfirm()で確認し、OKが押された場合のみprompt()で削除理由を尋ねるサンプルです。

HTML

<button id="deleteBtn">削除する</button>

JavaScript（main.js）

const deleteBtn = document.getElementById("deleteBtn");

deleteBtn.addEventListener("click", () => {
    if (!confirm("このデータを削除します。よろしいですか？")) {
        return;
    }

    const reason = prompt("削除理由を入力してください（任意）", "");

    if (reason === null) {
        console.log("削除理由の入力はキャンセルされましたが、削除は続行します。");
    } else {
        console.log(`削除理由: ${reason}`);
    }

    console.log("削除処理を実行しました");
});

confirm()でキャンセルされた場合はreturnで処理を打ち切り、prompt()のキャンセル（null）は「理由の入力だけを省略」として扱うことで、確認と入力補助を組み合わせています。