JavaScriptのconfirmメソッドを使ったダイアログの作り方8選

●JavaScriptのconfirmメソッドとは？
- ○confirmメソッドの基本的な使い方
- ○サンプルコード1：シンプルなconfirmダイアログ
●confirmダイアログのボタンをカスタマイズする
●confirmダイアログのタイトルをカスタマイズする
- ○サンプルコード5：タイトルを変更する
●confirmダイアログの戻り値を使った条件分岐
- ○サンプルコード6：OKボタンが押された時の処理を定義する
- ○サンプルコード7：キャンセルボタンが押された時に何もしない
●confirmダイアログをモーダルにする
- ○モーダルダイアログの特徴
- ○サンプルコード8：モーダルなconfirmダイアログを作成する
●よくあるエラーと対処法
●confirmメソッドの応用例
まとめ

●JavaScriptのconfirmメソッドとは？

JavaScriptのconfirmメソッドは、ユーザーに確認を求めるダイアログボックスを表示するための機能です。

このメソッドを使うことで、ユーザーに選択肢を提示し、その選択に応じて処理を分岐させることができます。

confirmメソッドは、ブラウザに標準で備わっているwindowオブジェクトのメソッドの1つで、window.confirmという形で呼び出します。

ダイアログボックスには、確認メッセージと「OK」および「キャンセル」ボタンが表示されます。

ユーザーがOKボタンをクリックすると、confirmメソッドはtrueを返します。

一方、キャンセルボタンをクリックした場合や、ダイアログボックスを閉じた場合は、falseを返します。

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

confirmメソッドの基本的な使い方は、次のようになります。

if (window.confirm("確認メッセージ")) {
  // OKボタンがクリックされた時の処理
} else {
  // キャンセルボタンがクリックされた時の処理
}

ここでは、confirmメソッドに確認メッセージを引数として渡しています。

ユーザーの選択に応じて、if文の中の処理が実行されます。

○サンプルコード1：シンプルなconfirmダイアログ

では早速、シンプルなconfirmダイアログのサンプルコードを見てみましょう。

const result = window.confirm("アンケートにご協力いただけますか？");
if (result) {
  console.log("アンケートにご協力いただきありがとうございます！");
} else {
  console.log("アンケートにご協力いただけず残念です。");
}

実行結果

OKボタンをクリックした場合

アンケートにご協力いただきありがとうございます！

キャンセルボタンをクリックした場合

アンケートにご協力いただけず残念です。

この例では、ユーザーにアンケートへの協力を求めるダイアログを表示しています。

OKボタンがクリックされた場合は、アンケートへの協力に感謝するメッセージをコンソールに出力します。

キャンセルボタンがクリックされた場合は、協力が得られなかったことを示すメッセージを出力します。

confirmメソッドを使ったダイアログは、このように簡単に作成することができます。

ユーザーに選択を求める場面で、confirmメソッドを活用すると、インタラクティブなWebページを作成できるでしょう。

●confirmダイアログのボタンをカスタマイズする

標準のconfirmダイアログには「OK」と「キャンセル」の2つのボタンが用意されていますが、これらのボタン名を変更したり、ボタンの数を増やしたりすることができます。

ユーザーにとってよりわかりやすく、アクションを促すようなボタン名を設定することで、ユーザビリティを向上させることができるでしょう。

○サンプルコード2：ボタン名を変更する

まず、ボタン名を変更する方法を見ていきましょう。

残念ながら、confirmメソッドの引数でボタン名を直接変更することはできません。

しかし、代替案として、カスタムダイアログを作成することで、ボタン名を自由に設定できます。

<div id="confirmDialog" style="display: none;">
  <p>本当に削除しますか？</p>
  <button id="yesBtn">はい</button>
  <button id="noBtn">いいえ</button>
</div>

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

const confirmDialog = document.getElementById("confirmDialog");
const yesBtn = document.getElementById("yesBtn");
const noBtn = document.getElementById("noBtn");
const deleteBtn = document.getElementById("deleteBtn");

deleteBtn.addEventListener("click", function() {
  confirmDialog.style.display = "block";
});

yesBtn.addEventListener("click", function() {
  console.log("削除が実行されました");
  confirmDialog.style.display = "none";
});

noBtn.addEventListener("click", function() {
  console.log("削除がキャンセルされました");
  confirmDialog.style.display = "none";
});

この例では、HTMLでカスタムダイアログを作成し、CSSで初期状態を非表示にしています。

削除ボタンがクリックされると、カスタムダイアログが表示されます。

ダイアログ内の「はい」ボタンと「いいえ」ボタンには、それぞれクリックイベントが設定されており、選択に応じた処理が実行されます。

実行結果

「はい」ボタンをクリックした場合

削除が実行されました

「いいえ」ボタンをクリックした場合

削除がキャンセルされました

○サンプルコード3：ボタンを3つにする

次に、ボタンの数を増やす方法を見てみましょう。

先ほどと同様に、カスタムダイアログを作成することで、ボタンの数を自由に設定できます。

<div id="confirmDialog" style="display: none;">
  <p>アンケートにご協力いただけますか？</p>
  <button id="yesBtn">はい</button>
  <button id="noBtn">いいえ</button>
  <button id="laterBtn">後で</button>
</div>

<button id="surveyBtn">アンケートのお願い</button>

const confirmDialog = document.getElementById("confirmDialog");
const yesBtn = document.getElementById("yesBtn");
const noBtn = document.getElementById("noBtn");
const laterBtn = document.getElementById("laterBtn");
const surveyBtn = document.getElementById("surveyBtn");

surveyBtn.addEventListener("click", function() {
  confirmDialog.style.display = "block";
});

yesBtn.addEventListener("click", function() {
  console.log("アンケートにご協力いただきありがとうございます！");
  confirmDialog.style.display = "none";
});

noBtn.addEventListener("click", function() {
  console.log("アンケートにご協力いただけず残念です。");
  confirmDialog.style.display = "none";
});

laterBtn.addEventListener("click", function() {
  console.log("後でアンケートにご協力ください。");
  confirmDialog.style.display = "none";
});

この例では、「はい」「いいえ」「後で」の3つのボタンを持つカスタムダイアログを作成しています。

アンケートのお願いボタンがクリックされると、カスタムダイアログが表示され、ユーザーは3つの選択肢から1つを選ぶことができます。

実行結果

「はい」ボタンをクリックした場合

アンケートにご協力いただきありがとうございます！

「いいえ」ボタンをクリックした場合

アンケートにご協力いただけず残念です。

「後で」ボタンをクリックした場合

後でアンケートにご協力ください。

○サンプルコード4：デフォルトでキャンセルボタンにフォーカスを当てる

通常、confirmダイアログが表示されると、OKボタンにフォーカスが当たります。

しかし、状況によってはキャンセルボタンにデフォルトでフォーカスを当てたい場合があるでしょう。

これも、カスタムダイアログを使うことで実現できます。

<div id="confirmDialog" style="display: none;">
  <p>本当に削除しますか？</p>
  <button id="yesBtn">はい</button>
  <button id="noBtn" autofocus>いいえ</button>
</div>

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

const confirmDialog = document.getElementById("confirmDialog");
const yesBtn = document.getElementById("yesBtn");
const noBtn = document.getElementById("noBtn");
const deleteBtn = document.getElementById("deleteBtn");

deleteBtn.addEventListener("click", function() {
  confirmDialog.style.display = "block";
});

yesBtn.addEventListener("click", function() {
  console.log("削除が実行されました");
  confirmDialog.style.display = "none";
});

noBtn.addEventListener("click", function() {
  console.log("削除がキャンセルされました");
  confirmDialog.style.display = "none";
});

この例では、「いいえ」ボタンにautofocus属性を追加することで、ダイアログが表示された時にデフォルトでキャンセルボタンにフォーカスが当たるようにしています。

実行結果

ダイアログが表示された状態
「いいえ」ボタンにフォーカスが当たっている

confirmダイアログのボタンをカスタマイズすることで、ユーザーにとってよりわかりやすく、アクションを促すようなダイアログを作成できます。

状況に応じて適切なボタン名や数を設定し、ユーザビリティの向上に役立ててください。

次は、confirmダイアログのタイトルをカスタマイズする方法について見ていきましょう。

●confirmダイアログのタイトルをカスタマイズする

標準のconfirmダイアログには、確認メッセージは表示できますが、ダイアログのタイトルを直接指定することはできません。

しかし、ユーザーに適切な行動を促すためには、ダイアログのタイトルも重要な役割を果たします。

confirmダイアログのタイトルをカスタマイズするには、前述のようにカスタムダイアログを作成する必要があります。

カスタムダイアログを使えば、タイトルを自由に設定し、ユーザーにとってよりわかりやすく、アクションを促すようなダイアログを作成できるでしょう。

○サンプルコード5：タイトルを変更する

それでは実際に、confirmダイアログのタイトルを変更する方法を見ていきましょう。

<div id="confirmDialog" style="display: none;">
  <h2>重要な確認事項</h2>
  <p>本当に削除しますか？この操作は元に戻せません。</p>
  <button id="yesBtn">削除する</button>
  <button id="noBtn">キャンセル</button>
</div>

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

const confirmDialog = document.getElementById("confirmDialog");
const yesBtn = document.getElementById("yesBtn");
const noBtn = document.getElementById("noBtn");
const deleteBtn = document.getElementById("deleteBtn");

deleteBtn.addEventListener("click", function() {
  confirmDialog.style.display = "block";
});

yesBtn.addEventListener("click", function() {
  console.log("削除が実行されました");
  confirmDialog.style.display = "none";
});

noBtn.addEventListener("click", function() {
  console.log("削除がキャンセルされました");
  confirmDialog.style.display = "none";
});

この例では、カスタムダイアログの中に<h2>要素を追加し、タイトルを「重要な確認事項」に設定しています。

また、確認メッセージにも、操作の重大性を強調する文言を追加しました。

実行結果

削除ボタンをクリックした場合
「重要な確認事項」というタイトルのダイアログが表示される
確認メッセージに「この操作は元に戻せません。」と表示される

タイトルをカスタマイズすることで、ユーザーに適切な注意喚起を行い、より慎重な選択を促すことができます。

状況に応じて、タイトルと確認メッセージを適切に設定し、ユーザーエクスペリエンスの向上に役立ててください。

●confirmダイアログの戻り値を使った条件分岐

confirmダイアログは、ユーザーの選択に応じて「OK」または「キャンセル」のいずれかの値を返します。

この戻り値を利用することで、ユーザーの選択に基づいて条件分岐を行い、適切な処理を実行できます。

confirmメソッドの戻り値は、ユーザーが「OK」ボタンをクリックした場合はtrue、「キャンセル」ボタンをクリックした場合はfalseになります。

この戻り値をif文の条件式に使用することで、ユーザーの選択に応じた処理を行うことができるでしょう。

○サンプルコード6：OKボタンが押された時の処理を定義する

それでは実際に、confirmダイアログの戻り値を使って条件分岐を行う方法を見ていきましょう。

まず、「OK」ボタンが押された時の処理を定義する例を見てみましょう。

const result = window.confirm("データを削除しますか？");

if (result) {
  console.log("データが削除されました。");
  // 削除処理を実行するコードをここに記述
} else {
  console.log("削除がキャンセルされました。");
}

実行結果

「OK」ボタンをクリックした場合

データが削除されました。

「キャンセル」ボタンをクリックした場合

削除がキャンセルされました。

この例では、confirmダイアログで「OK」ボタンが押された場合、if文の中で削除処理を実行します。

具体的な削除処理のコードは、アプリケーションの要件に応じて記述します。

一方、「キャンセル」ボタンが押された場合は、elseブロックの処理が実行され、削除がキャンセルされたことを表すメッセージがコンソールに出力されます。

○サンプルコード7：キャンセルボタンが押された時に何もしない

「キャンセル」ボタンが押された時に何もしない場合、elseブロックを省略することができます。

const result = window.confirm("設定を保存しますか？");

if (result) {
  console.log("設定が保存されました。");
  // 設定を保存するコードをここに記述
}

実行結果

「OK」ボタンをクリックした場合

設定が保存されました。

「キャンセル」ボタンをクリックした場合は何も出力されない

この例では、「OK」ボタンが押された場合にのみ、設定を保存する処理が実行されます。

「キャンセル」ボタンが押された場合は、elseブロックがないため、何も処理が行われません。

●confirmダイアログをモーダルにする

confirmダイアログは、ユーザーに選択を求めるために便利な機能ですが、標準のダイアログには一つ問題があります。

それは、ダイアログが表示されている間も、背景のページを操作できてしまうことです。

これでは、ユーザーが誤ってダイアログを閉じたり、ページを遷移してしまったりする可能性があります。

こうした問題を解決するために、confirmダイアログをモーダルにすることを検討してみましょう。

モーダルダイアログとは、ダイアログが表示されている間、背景のページを操作できないようにするダイアログのことです。

○モーダルダイアログの特徴

モーダルダイアログには、特徴があります。

まず、モーダルダイアログが表示されている間は、背景のページが非アクティブになります。

これにより、ユーザーはダイアログに集中して選択を行うことができます。

また、モーダルダイアログは、通常、ページの中央に表示され、背景が暗くなるようにスタイリングされます。

これにより、ダイアログが強調され、ユーザーの注意を引きつけることができるでしょう。

さらに、モーダルダイアログでは、閉じるボタンやキャンセルボタンを明示的に配置することが一般的です。

これにより、ユーザーはダイアログを簡単に閉じることができ、スムーズなユーザーエクスペリエンスを提供できます。

○サンプルコード8：モーダルなconfirmダイアログを作成する

それでは実際に、モーダルなconfirmダイアログを作成してみましょう。

<div id="overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;"></div>

<div id="confirmDialog" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; z-index: 10000;">
  <h2>確認</h2>
  <p>本当に削除しますか？</p>
  <button id="yesBtn">はい</button>
  <button id="noBtn">いいえ</button>
</div>

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

const overlay = document.getElementById("overlay");
const confirmDialog = document.getElementById("confirmDialog");
const yesBtn = document.getElementById("yesBtn");
const noBtn = document.getElementById("noBtn");
const deleteBtn = document.getElementById("deleteBtn");

deleteBtn.addEventListener("click", function() {
  overlay.style.display = "block";
  confirmDialog.style.display = "block";
});

yesBtn.addEventListener("click", function() {
  console.log("削除が実行されました");
  overlay.style.display = "none";
  confirmDialog.style.display = "none";
});

noBtn.addEventListener("click", function() {
  console.log("削除がキャンセルされました");
  overlay.style.display = "none";
  confirmDialog.style.display = "none";
});

overlay.addEventListener("click", function() {
  overlay.style.display = "none";
  confirmDialog.style.display = "none";
});

この例では、HTMLでoverlay要素を追加し、背景を暗くするためのスタイルを適用しています。

confirmダイアログは、position: fixedを使用して画面の中央に配置し、z-indexを使用して前面に表示されるようにしています。

JavaScriptでは、削除ボタンがクリックされたときに、overlayとconfirmダイアログを表示するようにしています。

また、「はい」と「いいえ」のボタンがクリックされたときに、それぞれの処理を実行し、overlayとconfirmダイアログを非表示にしています。

さらに、overlay要素自体にクリックイベントを追加し、overlayがクリックされたときにもダイアログを閉じるようにしています。

これで、ダイアログの外側をクリックしてもダイアログを閉じることができます。

実行結果

削除ボタンをクリックした場合は背景が暗くなり、画面中央にconfirmダイアログが表示される
「はい」ボタンをクリックした場合

削除が実行されました

「いいえ」ボタンをクリックした場合

削除がキャンセルされました

overlay要素をクリックした場合はconfirmダイアログが閉じる

モーダルなconfirmダイアログを使用することで、ユーザーに選択を求める際に、より集中した環境を提供できます。

背景のページが操作できないようにすることで、ユーザーはダイアログに専念でき、誤操作を防ぐことができるでしょう。

状況に応じて、標準のconfirmダイアログとモーダルダイアログを使い分けることをおすすめします。

●よくあるエラーと対処法

JavaScriptのconfirmメソッドを使ってダイアログを作成する際、時にはエラーに遭遇することがあります。

初心者の方にとっては、エラーメッセージを見ても何が問題なのかわからず、困惑してしまうことがあるでしょう。

そこで、ここではconfirmメソッドを使用する際によく発生するエラーとその対処法について解説します。

エラーに直面した時に、冷静に原因を分析し、適切な解決策を見つけられるようになることを目指しましょう。

○confirmダイアログが表示されない場合

confirmダイアログが表示されない場合、まず確認すべきことは、JavaScriptのコードが正しく読み込まれているかどうかです。

HTMLファイルでJavaScriptファイルが正しく参照されていない場合や、JavaScriptコードにシンタックスエラーがある場合、confirmダイアログは表示されません。

HTMLファイルでJavaScriptファイルを読み込む際は、<script>タグのsrc属性に正しいファイルパスを指定しているか確認しましょう。

また、JavaScriptコードをHTMLファイル内に直接記述している場合は、<script>タグ内に正しくコードが記述されているか確認が必要です。

さらに、JavaScriptコードに誤りがないかをチェックしましょう。

シンタックスエラーがある場合、コンソールにエラーメッセージが表示されるので、それを手がかりにデバッグを行います。

コードエディタの構文チェック機能やブラウザの開発者ツールを活用することで、エラーの特定が容易になるでしょう。

○confirmダイアログでページ遷移ができない場合

confirmダイアログでユーザーの選択に応じてページ遷移を行いたい場合、window.locationオブジェクトを使用します。

しかし、confirmダイアログの「OK」ボタンをクリックしてもページ遷移が行われないことがあります。

この問題は、通常、confirmダイアログの結果を適切に処理していないことが原因です。

confirmメソッドの戻り値を変数に格納し、その値に応じて条件分岐を行う必要があります。

const result = window.confirm("ページを遷移しますか？");

if (result) {
  window.location.href = "https://example.com";
}

上記のように、confirmメソッドの戻り値をresult変数に格納し、if文でtrueの場合にのみページ遷移を行うようにします。

これで、ユーザーが「OK」ボタンをクリックした場合にのみページ遷移が行われるようになります。

○confirmダイアログで改行ができない場合

confirmダイアログのメッセージに改行を含めたい場合、単純に改行文字（\n）を使用しても期待通りに表示されないことがあります。

これは、ブラウザによって改行文字の扱いが異なるためです。

この問題を解決するには、メッセージ内の改行文字を<br>タグに置き換える方法があります。

const message = "この操作は元に戻せません。\n本当に削除しますか？";
const formattedMessage = message.replace(/\n/g, "<br>");

window.confirm(formattedMessage);

上記のコードでは、正規表現を使用して改行文字（\n）をグローバルに検索し、<br>タグに置換しています。

これにより、confirmダイアログ内で改行が適切に表示されるようになります。

ただし、この方法はHTMLタグを使用するため、メッセージ内にHTMLタグを含めると意図しない表示になる可能性があることに注意が必要です。

メッセージ内にユーザー入力を含める場合は、適切なエスケープ処理を行うことが重要です。

●confirmメソッドの応用例

ここまで、confirmメソッドの基本的な使い方から、ボタンやタイトルのカスタマイズ、条件分岐、モーダルダイアログの作成など、様々な方法を学んできました。

これらの知識を活かして、confirmメソッドをさらに応用していきましょう。

実際の開発現場では、プロジェクトの要件に合わせてconfirmメソッドを柔軟に活用することが求められます。

ここでは、confirmメソッドの応用例として、アラートのデザインのカスタマイズ、自動でダイアログを閉じる方法、Promiseを使った代替手法、TypeScriptでの使用方法などを紹介します。

これらの応用例を通じて、confirmメソッドの可能性を広げ、より洗練されたユーザーインターフェースを実現するためのヒントを得ることができるでしょう。

○サンプルコード9：アラートのデザインをカスタマイズする

confirmメソッドと同様に、alertメソッドを使ってメッセージを表示することができます。

標準のアラートダイアログのデザインは単純ですが、CSSを使ってカスタマイズすることができます。

<div id="customAlert" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border: 1px solid black; z-index: 9999;">
  <p id="alertMessage"></p>
  <button id="alertButton">OK</button>
</div>

function showCustomAlert(message) {
  const customAlert = document.getElementById("customAlert");
  const alertMessage = document.getElementById("alertMessage");
  const alertButton = document.getElementById("alertButton");

  alertMessage.textContent = message;
  customAlert.style.display = "block";

  alertButton.addEventListener("click", function() {
    customAlert.style.display = "none";
  });
}

showCustomAlert("これはカスタマイズされたアラートです。");

実行結果

showCustomAlert関数を呼び出すと、カスタマイズされたアラートダイアログが表示される
アラートダイアログには、指定したメッセージが表示される
「OK」ボタンをクリックすると、アラートダイアログが閉じる

この例では、HTMLとCSSを使ってカスタムアラートダイアログを作成し、JavaScriptで表示と非表示を制御しています。

showCustomAlert関数に表示したいメッセージを渡すことで、カスタマイズされたアラートを表示できます。

○サンプルコード10：confirmダイアログを自動で閉じる

confirmダイアログを一定時間後に自動的に閉じるようにすることで、ユーザーの選択を促すことができます。

function showTimedConfirm(message, timeout) {
  const result = window.confirm(message);

  setTimeout(function() {
    if (!result) {
      console.log("タイムアウトしました。");
    }
  }, timeout);

  return result;
}

const result = showTimedConfirm("10秒以内に選択してください。", 10000);

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

実行結果

showTimedConfirm関数を呼び出すと、confirmダイアログが表示される
10秒以内にユーザーが選択を行わない場合、”タイムアウトしました。”というメッセージがコンソールに出力される
ユーザーが「OK」を選択した場合、”OKが選択されました。”というメッセージがコンソールに出力される
ユーザーが「キャンセル」を選択した場合、”キャンセルが選択されました。”というメッセージがコンソールに出力される

この例では、setTimeout関数を使って一定時間後にコールバック関数を実行しています。

ユーザーが指定された時間内に選択を行わない場合、result変数がfalseになります。

これを利用して、タイムアウト時の処理を行うことができます。

○サンプルコード11：confirmの代替としてPromiseを使う

Promiseを使うことで、confirmメソッドの代替として、よりモダンで柔軟な確認ダイアログを実装することができます。

function showConfirmPromise(message) {
  return new Promise((resolve) => {
    const result = window.confirm(message);
    resolve(result);
  });
}

showConfirmPromise("処理を続行しますか？")
  .then((result) => {
    if (result) {
      console.log("処理を続行します。");
      // 続行する処理をここに記述
    } else {
      console.log("処理を中止します。");
      // 中止する処理をここに記述
    }
  });

実行結果

showConfirmPromise関数を呼び出すと、Promiseオブジェクトが返される
Promiseのthenメソッドを使って、ユーザーの選択に応じた処理を記述できる
ユーザーが「OK」を選択した場合、”処理を続行します。”というメッセージがコンソールに出力され、続行する処理が実行される
ユーザーが「キャンセル」を選択した場合、”処理を中止します。”というメッセージがコンソールに出力され、中止する処理が実行される

Promiseを使うことで、confirmメソッドの結果を非同期的に処理することができます。

showConfirmPromise関数は、Promiseオブジェクトを返します。thenメソッドを使って、ユーザーの選択に応じた処理を記述します。

これにより、より読みやすく、メンテナンス性の高いコードを書くことができます。

○サンプルコード12：TypeScriptでconfirmを使う

TypeScriptを使うことで、JavaScriptのコードにタイプセーフティを導入し、開発時のエラーを減らすことができます。

confirmメソッドをTypeScriptで使う場合、次のように記述します。

function showConfirm(message: string): boolean {
  return window.confirm(message);
}

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

if (result) {
  console.log("処理を続行します。");
  // 続行する処理をここに記述
} else {
  console.log("処理を中止します。");
  // 中止する処理をここに記述
}

実行結果