2024.03.26

JavaScript confirm() メソッド：ユーザーに確認ダイアログを表示する方法

JavaScriptの confirm() メソッドは、ユーザーに確認ダイアログを表示し、ユーザーの意思を確認する際に使用されます。ダイアログにはメッセージと「OK」ボタン、「キャンセル」ボタンが表示され、ユーザーはどちらかを選択することができます。

本記事では初心者でもわかるサンプルコードも記載して説明していますので、ぜひ参考にしてください。

この記事でわかること

JavaScript confirm() メソッドの概要
JavaScript confirm() メソッドのサンプルコード

1 confirm() メソッドの基本的な使い方
- 1.1 confirm() メソッドの戻り値
- 1.2 注意点
2 サンプルコード
- 2.1 条件分岐による処理の分岐（削除処理）
3 まとめ
4 投稿者

confirm() メソッドの基本的な使い方

JavaScript confirm() メソッドは、以下の形式で使用します。

※「メッセージ」には、ユーザーに表示するメッセージを入れます。

window.confirm(メッセージ);

confirm() メソッドの戻り値

confirm() メソッドは、ユーザーが選択したボタンに応じて、以下のいずれかの値を返します。

true: ユーザーが「OK」ボタンを選択した場合
false: ユーザーが「キャンセル」ボタンを選択した場合

注意点

ユーザーはダイアログを無視したり、ブラウザの設定でダイアログ表示を抑制したりすることが可能です。
confirm() メソッドは、ユーザーの意思を確認する目的でのみ使用し、重要な処理の制御に使用することは避けてください。

サンプルコード

以下のコードは、confirm() メソッドの動作を確認するためのサンプルです。

[HTML]

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>confirm() メソッドのサンプル</title>
</head>
<body>
 <script>
  // 確認ダイアログを表示
  const result = window.confirm("このページを削除しますか？");

  // 戻り値に基づいて処理を分岐
  if (result) {
   // OKボタンが押された場合
   alert("ページを削除しました。");
  } else {
   // キャンセルボタンが押された場合
   alert("削除をキャンセルしました。");
  }
 </script>
</body>
</html>

このコードを実行すると、以下のダイアログが表示されます。

confirm() メソッドのサンプル: [無効な URL を削除しました]

ユーザーが「OK」ボタンをクリックすると、”ページを削除しました。” というメッセージが表示されます。

「キャンセル」ボタンをクリックすると、”削除をキャンセルしました。” というメッセージが表示されます。

条件分岐による処理の分岐（削除処理）

confirm() メソッドの戻り値を利用して、その後の処理を分岐させることができます。

[JavaScript]

function deleteFile(fileName) {
    // 削除確認ダイアログを表示
    const result = window.confirm(`ファイル "${fileName}" を削除しますか？`);

    // 戻り値に基づいて処理を分岐
    if (result) {
        // OKボタンが押された場合
        // 実際の削除処理を実行
        alert(`ファイル "${fileName}" を削除しました。`);
    } else {
        // キャンセルボタンが押された場合
        alert("削除をキャンセルしました。");
    }
}

このコードは、deleteFile() という関数にファイル名を渡すと、そのファイルの削除確認ダイアログを表示します。

ユーザーが「OK」ボタンをクリックすると、実際の削除処理を実行します。「キャンセル」ボタンをクリックすると、削除処理は実行されません。