JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで確認ダイアログを表示する方法｜confirm()メソッドの使い方を解説

Webアプリケーションを開発していると、「本当に削除しますか？」のような、ユーザーに操作の可否を確認したい場面がよくあります。そんなときに便利なのが、JavaScriptのconfirm()メソッドです。

confirm()メソッドとは？

confirm()は、ブラウザ標準の確認ダイアログを表示するwindowオブジェクトのメソッドです。ダイアログには指定したメッセージとともに「OK」と「キャンセル」の2つのボタンが表示され、ユーザーの選択に応じて以下の値を返します。

  • OKボタンをクリックした場合 → true を返す
  • キャンセルボタンをクリックした場合 → false を返す

この戻り値をif文などで判定することで、ユーザーの同意を得た場合のみ処理を実行する、といった制御が簡単に実装できます。

confirm()の基本的な使い方

以下は、ボタンをクリックすると確認ダイアログを表示し、ユーザーの選択結果によって異なるメッセージを出力するサンプルコードです。

<html>
<head>
  <script>
    function getConfirmation(){
      var retVal = confirm("続行してもよろしいですか？");
      if( retVal == true ){
        document.write("ユーザーは続行を選択しました！");
        return true;
      }
      else{
        document.write("ユーザーは続行をキャンセルしました！");
        return false;
      }
    }
  </script>
</head>
<body>
  <p>次のボタンをクリックして結果を確認してください：</p>
  <form>
    <input type="button" value="クリック" onclick="getConfirmation();" />
  </form>
</body>
</html>

コードの解説

  1. confirm()の呼び出し： confirm("続行してもよろしいですか？") のように、引数に表示したいメッセージを文字列で渡します。
  2. 戻り値の判定： 戻り値を変数 retVal に格納し、if文で true / false を判定します。
  3. 処理の分岐： OKが押された場合は続行の処理を、キャンセルが押された場合は中断の処理を記述します。

実務での活用シーン

confirm()は、以下のような場面でよく使われます。

  • データの削除前に最終確認を行う
  • フォーム送信前に入力内容の確認を求める
  • ページから離脱する際に注意を促す

注意点

confirm()によるダイアログはブラウザが表示をブロックするため、デザインのカスタマイズはできません。より柔軟なUIが必要な場合は、HTMLとCSSで独自のモーダルダイアログを作成するか、jQueryや各種UIライブラリを活用するとよいでしょう。また、近年のブラウザでは同一ページ内での連続表示が制限される場合があるため、乱用は避けることをおすすめします。

  1. JavaScriptでHTMLページをリダイレクトする方法をわかりやすく解説

    ページリダイレクトとは？あるURLをクリックしてページXにアクセスしたはずなのに、実際には別のページYに移動された——そんな経験はありませんか？これは「ページリダイレクト」と呼ばれる仕組みによるものです。Web開発では、サイト移転時や古いURLから新しいURLへの誘導など、さまざまな場面で活用されています。JavaScriptでリダイレクトを実装するJavaScriptを使えば、クライアント側（ブラウザ側）で非常にシンプルにページリダイレクトを実現できます。特別なライブラリやサーバー側の設定は不要で、window.location.assign()メソッドを呼び出すだけでOKです。訪問者を新し

  2. JavaScript関数で名前付き引数を使う方法｜分割代入で簡単に実現するテクニック

    JavaScriptにおける名前付き引数とは？ Pythonなどの言語には「名前付き引数（キーワード引数）」という機能が標準で備わっていますが、JavaScriptにはこの機能が組み込まれていません。しかし、オブジェクトの分割代入（Destructuring）を活用することで、名前付き引数と同じ挙動を簡単に実現できます。 基本的な仕組み 関数の引数としてオブジェクトを1つ受け取り、その中から必要なプロパティを分割代入で取り出します。各プロパティにはデフォルト値も同時に指定できるため、引数が省略された場合でもエラーにならず安全に処理できます。 サンプルコード 以下は、オブジェクトを引数として渡し