JavaScript confirmを使いこなす5つの方法

はじめに
●JavaScript confirmとは
- ○confirmの基本
●JavaScript confirmの使い方
- ○サンプルコード1：基本的なconfirmの使い方
- ○サンプルコード2：confirmでユーザーの選択に応じた処理を実行
●JavaScript confirmの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScript confirmを使いこなすことができるようになります。

JavaScript confirmは、ブラウザで表示される確認ダイアログボックスを操作するための関数です。

しかし、初心者には少し難しく感じるかもしれません。

そこで、この記事ではJavaScript confirmの基本から応用まで、初心者にもわかりやすく解説します。

サンプルコードや注意点も交えて説明していくので、ぜひ参考にしてください。

●JavaScript confirmとは

JavaScript confirmは、ブラウザ上に表示される確認ダイアログボックスを扱うための関数です。

ダイアログボックスには、メッセージと「OK」、「キャンセル」の2つのボタンが表示され、ユーザーが選択した結果に応じて処理を分岐させることができます。

○confirmの基本

基本的には、次のような形でconfirm関数を使用します。

const result = confirm("確認メッセージ");

ここで、”確認メッセージ”の部分に表示したいメッセージを記述します。

また、ユーザーが選択した結果は、変数resultに格納されます。

ユーザーが「OK」を選択した場合はtrue、それ以外の場合はfalseが返ります。

●JavaScript confirmの使い方

○サンプルコード1：基本的なconfirmの使い方

このコードでは、基本的なconfirmの使い方を紹介しています。

この例では、確認ダイアログボックスに表示されるメッセージを指定して、ユーザーの選択結果に応じてアラートを表示しています。

const result = confirm("処理を続行しますか？");

if (result) {
  alert("OKが選択されました。");
} else {
  alert("キャンセルが選択されました。");
}

○サンプルコード2：confirmでユーザーの選択に応じた処理を実行

このコードでは、confirmを使ってユーザーの選択に応じた処理を実行する方法を紹介しています。

この例では、ユーザーが「OK」を選択した場合に特定の処理を行い、それ以外の場合は別の処理を行います。

const result = confirm("処理を続行しますか？");

if (result) {
  console.log("処理を実行します。");
  // ここに、実行したい処理を記述
} else {
  console.log("処理をキャンセルします。");
  // ここに、キャンセル時の処理を記述
}

●JavaScript confirmの応用例

○サンプルコード3：フォームの送信前に確認ダイアログを表示

このコードでは、フォームの送信前に確認ダイアログを表示する方法を紹介しています。

この例では、送信ボタンをクリックしたときにconfirmを使って確認ダイアログを表示し、ユーザーが「OK」を選択した場合にのみフォームを送信します。

<form id="myForm">
  <!-- フォームの内容 -->
  <button type="submit">送信</button>
</form>

<script>
  const form = document.getElementById("myForm");

  form.addEventListener("submit", function(event) {
    const result = confirm("フォームを送信しますか？");

    if (!result) {
      event.preventDefault();
    }
  });
</script>

○サンプルコード4：削除前の確認ダイアログを表示

このコードでは、削除操作を実行する前に確認ダイアログを表示する方法を紹介しています。

この例では、削除ボタンをクリックしたときにconfirmを使って確認ダイアログを表示し、ユーザーが「OK」を選択した場合にのみ削除処理を実行します。

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

<script>
  const deleteBtn = document.getElementById("deleteBtn");

  deleteBtn.addEventListener("click", function() {
    const result = confirm("本当に削除しますか？");

    if (result) {
      // ここに、削除処理を記述
    }
  });
</script>

○サンプルコード5：ページ離脱時に確認ダイアログを表示

このコードでは、ページ離脱時に確認ダイアログを表示する方法を紹介しています。

この例では、ユーザーがページを離れようとしたときに、beforeunloadイベントを利用して確認ダイアログを表示し、ユーザーが「OK」を選択した場合にのみページを離れることができます。

window.addEventListener("beforeunload", function(event) {
  const message = "このページを離れてもよろしいですか？";
  event.returnValue = message;
  return message;
});

●注意点と対処法

ブラウザによっては、デフォルトの確認ダイアログのメッセージが表示される場合があります。
これはブラウザのセキュリティポリシーによるもので、変更することはできません。
ユーザーに適切なメッセージを伝えるために、アプリケーション内で説明を提供することが推奨されます。
confirm関数は、ブラウザのポップアップブロッカーによってブロックされることがあります。
この問題を回避するために、カスタムダイアログを使用することを検討してください。