読み込み中...

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

JavaScript confirmを使ったダイアログボックスの表示 JS
2023.05.02
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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;
});

●注意点と対処法

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

●カスタマイズ方法

confirm関数のデザインは、ブラウザによって異なります。

統一されたデザインや、より高度な機能を実現するためには、カスタムダイアログを作成することが望ましいです。

カスタムダイアログを作成するためには、HTML、CSS、JavaScriptを組み合わせて、オリジナルのダイアログを実装することができます。

まとめ

この記事では、JavaScriptのconfirm関数を使って、様々なシチュエーションで確認ダイアログを表示する方法を学びました。

基本的な使い方から応用例まで、サンプルコードを交えながら解説しました。

また、注意点やカスタマイズ方法についても触れました。

これらの知識を活かして、より良いユーザーエクスペリエンスを提供するアプリケーションを開発してください。