JavaScriptで確認ダイアログボックスを作成する方法

2024-02-10 00:15 JavaScript 確認ダイアログ コード例

以下に、いくつかの方法とそれぞれのコード例を示します。

  1. JavaScriptのconfirm()関数を使用する方法:
if (confirm("本当に削除しますか？")) {
  // 削除の処理を実行するコード
} else {
  // キャンセルされた場合の処理を実行するコード
}

この方法では、confirm()関数に表示するメッセージを引数として渡します。ユーザーが「OK」を選択した場合はtrueが返され、キャンセルされた場合はfalseが返されます。

  1. SweetAlertというJavaScriptのライブラリを使用する方法:

SweetAlertは、カスタマイズ可能なダイアログボックスを作成するための便利なライブラリです。まず、SweetAlertをダウンロードしてプロジェクトに組み込みます。次に、以下のようにコードを記述します。

Swal.fire({
  title: "本当に削除しますか？",
  icon: "warning",
  showCancelButton: true,
  confirmButtonText: "削除",
  cancelButtonText: "キャンセル"
}).then((result) => {
  if (result.isConfirmed) {
    // 削除の処理を実行するコード
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    // キャンセルされた場合の処理を実行するコード
  }
});

この方法では、SweetAlertのfire()関数を使用してカスタマイズされたダイアログボックスを表示します。ユーザーが「削除」を選択した場合はisConfirmedがtrueとなり、キャンセルされた場合はdismissプロパティがSwal.DismissReason.cancelとなります。

これらはJavaScriptで確認ダイアログボックスを作成するための一般的な方法です。記事には、さまざまな用途や応用例に関する詳細な解説やコード例を追加することもできます。