【10選】JavaScriptのconfirmを自由自在にカスタマイズしよう！

●JavaScriptのconfirm関数とは？
- ○confirmの使い方と返り値について
- ○confirmとalertの違い
●confirmのデザインを変更する
- ○サンプルコード1：CSSでconfirmをモーダル風にする
- ○サンプルコード2：jQueryを使ってconfirmをおしゃれにする
●confirmのボタンをカスタマイズする
●confirmの条件分岐と送信キャンセル
- ○サンプルコード7：confirmの結果で条件分岐
- ○サンプルコード8：confirmでキャンセル時に送信中止
●confirmのその他のカスタマイズ
- ○サンプルコード9：confirmのタイトルを変更
- ○サンプルコード10：アイコンをつけてconfirmを装飾
●JavaScriptのconfirmのよくある質問
まとめ

●JavaScriptのconfirm関数とは？

JavaScriptのconfirm関数について、どのくらいご存知でしょうか？

Webサイトを作っていると、ユーザーに確認メッセージを表示したい場面がよくあります。

そんな時に使われるのがconfirm関数です。

confirm関数は、ブラウザ上にダイアログボックスを表示し、ユーザーに「OK」か「キャンセル」を選ばせることができます。

OKを押せば処理を続行し、キャンセルなら中断できる、という具合です。

例えば、フォームの送信前に「本当に送信してよろしいですか？」と確認したり、重要なデータを削除する際に「削除します。よろしいですか？」と念押ししたりと、ユーザーの意思を再確認するのにとても便利な関数なんです。

私も初めてJavaScriptを学んだ時、confirm関数の使い方に少し戸惑いました。で

も使ってみると意外と簡単で、今ではすっかりお気に入りの関数の1つです。

そこで今回は、confirm関数の基本的な使い方から、実践的なカスタマイズ方法までを初心者向けに丁寧に解説していきます。

JavaScriptが苦手だという方も、これを読めばconfirm関数が思いのまま扱えるようになるはずです！

それではまず、confirmの基本的な使い方と返り値について見ていきましょう。

○confirmの使い方と返り値について

confirm関数の使い方は至ってシンプルです。

次のように書くだけで、ダイアログボックスを表示できます。

if (confirm("ダイアログのメッセージ")) {
  // OKを押した時の処理
} else {
  // キャンセルを押した時の処理
}

confirmの引数にダイアログに表示したいメッセージを書きます。

そしてif文の条件式にconfirmを書くことで、返り値によって処理を分岐できるわけです。

ここで押さえておきたいのが、confirmの返り値についてです。

実はconfirm関数は、次のように真偽値を返してくれます。

OKを押した時：true
キャンセルを押した時：false

このように、ユーザーの選択に応じてtrueかfalseが返ってくるんですね。

これを利用してif文で処理を切り分けていくわけです。

例えば、フォームの送信前に確認ダイアログを出すなら、次のように書けます。

function submitForm() {
  if (confirm("フォームを送信します。よろしいですか？")) {
    // OKを押したらフォームを送信
    document.form1.submit();
  } else {
    // キャンセルを押したら何もしない（送信しない）
  }
}

このように、confirmを使えばユーザーの意思を簡単に確認できるんです。

返り値を使って柔軟に処理を分岐できるのが、confirmのいいところだと思います。

以上が、confirmの基本的な使い方です。

returnで真偽値が返ってくることを意識しながら使ってみてくださいね。

○confirmとalertの違い

ところで、confirmと似たような関数にalertがあります。

よく混同されがちですが、これらの違いはしっかり抑えておきたいポイントです。

そもそもalertは、ダイアログにメッセージを表示するだけの関数です。

OKボタンしかなく、返り値もありません。あくまで通知のために使われます。

alert("これはalertのメッセージです");

対してconfirmは、ユーザーに選択を迫るための関数です。

OKとキャンセルの2択が用意されていて、返り値で処理を分岐できるのが特徴でした。

if (confirm("OKかキャンセルを選んでください")) {
  // OKを押した時の処理
} else {
  // キャンセルを押した時の処理
}

このように、alertは単にメッセージを通知するだけ、confirmはユーザーの選択を受け取れる、という違いがあるんです。

用途に応じて使い分けることが大切ですね。

「〇〇が完了しました」のようなシンプルな通知ならalertを使い、「〇〇しますか？」というように意思確認が必要な場合はconfirmを使う、と覚えておくといいでしょう。

●confirmのデザインを変更する

前回までで、confirmの基本的な使い方は分かっていただけたかと思います。

でも正直なところ、あのシンプルなデザインでは少し味気ないですよね。

せっかくならもっとオシャレにカスタマイズしたいと思いませんか？

実はconfirm関数は、そのままではデザインを変更することができません。

でもご安心ください。ちょっとした工夫を加えれば、あなただけのオリジナルなダイアログを作ることも可能なんです。

例えば、confirmをモーダルウィンドウ風にしてみたり、jQueryを使ってアニメーションをつけてみたり…。

そんな風にデザインを凝ることで、Webサイトの雰囲気にマッチした洗練されたダイアログを実現できます。

ここからは、CSSやjQueryを使った実践的なカスタマイズ方法を2つ紹介していきます。

コードを交えながら丁寧に解説するので、確認画面のデザインに悩んでいた方はぜひ参考にしてみてくださいね。

それでは、早速1つ目のサンプルコードを見ていきましょう！

○サンプルコード1：CSSでconfirmをモーダル風にする

まず、confirmをおしゃれなモーダルウィンドウのようにカスタマイズする方法です。

実はこれ、CSSを使えば意外と簡単にできちゃうんですね。

基本的な考え方は、confirmの代わりに独自のHTMLを用意し、それにCSSを適用するという流れです。

こんな感じのHTMLを書いてみましょう。

<div id="confirm">
  <div class="message">confirmのメッセージ</div>
  <div class="buttons">
    <button id="ok">OK</button>
    <button id="cancel">キャンセル</button>
  </div>
</div>

ポイントは次の3つです。

confirmの代わりとなる<div>要素を用意する
メッセージを表示する要素と、OKとキャンセルのボタンを用意する
各要素にidやclassを付けておく

これにCSSを当てていけば、あなた好みのデザインにカスタマイズできる、というわけです。

例えばこんなCSSを書けば、モーダル風の見た目になります。

#confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.message {
  margin-bottom: 20px;
}

#ok {
  background-color: #4CAF50;
  color: white;
}

#cancel {
  background-color: #f44336;
  color: white;
}

CSSのポイントは次の通りですね。

position: fixedで画面の中央に配置
background-colorで背景色を白に
border-radiusで角を丸くする
box-shadowで影をつける
ボタンの色を変更

このように、独自のHTMLとCSSを用意することで、confirmのデザインを自由にカスタマイズできるわけです。

あなたのセンスでオシャレなデザインを考えてみてください。

○サンプルコード2：jQueryを使ってconfirmをおしゃれにする

続いて、jQueryを使ってconfirmにアニメーションを付ける方法を紹介します。

せっかくならカッコよく登場させたいですよね。

そんなときはjQueryの出番です。

といってもコードは難しくありません。

先ほど用意したHTMLに、次のようなjQueryを書き加えるだけです。

$(function() {
  $("#confirm").hide(); // 初期状態では非表示

  // showConfirmで表示
  function showConfirm(message, okCallback, cancelCallback) {
    $(".message").text(message);

    $("#ok").off().on('click', function() {
      $("#confirm").fadeOut(function() {
        okCallback();
      });
    });

    $("#cancel").off().on('click', function() {
      $("#confirm").fadeOut(function() {
        cancelCallback();
      });
    });

    $("#confirm").fadeIn();
  }

  // 使用例
  showConfirm("confirmのメッセージ", function() {
    console.log("OKが押された！");
  }, function() {
    console.log("キャンセルが押された！");
  });

});

jQueryを使うポイントは次の3つです。

hide()で初期状態を非表示にしておく
OKとキャンセルのコールバック関数を受け取る
fadeIn()とfadeOut()でフェードのアニメーションを付ける

これを実行すると、アニメーション付きのダイアログが表示されます。

ポイントは、OKかキャンセルが押された後にfadeOutでダイアログを閉じてから、コールバック関数を呼び出しているところです。

これによって、自然な流れでダイアログが閉じるようになります。

jQueryを使えば、このようにダイナミックな動きのあるUIを簡単に作れるんです。

ぜひあなたのWebサイトにも取り入れてみてください。

●confirmのボタンをカスタマイズする

前回は、confirmのデザインを変更する方法を紹介しました。

CSSやjQueryを使えば、オシャレなダイアログが作れるのが分かっていただけたかと思います。

でもデザインを変えるだけでは、まだまだ物足りないですよね。

せっかくカスタマイズするなら、もっと使い勝手の良いダイアログにしたいと思いませんか？

例えば、OKとキャンセル以外のボタンを追加したり、ボタンの名前を変更したり…。

そういった機能面のカスタマイズができれば、より柔軟にconfirmを使いこなせるようになります。

特にWebアプリを開発している方なら、こうしたカスタマイズのニーズは高いのではないでしょうか。

アプリの仕様に合わせて最適なダイアログを作れば、ユーザビリティの向上につながるはずです。

そこでここからは、ボタンの名前や数、色などをカスタマイズする方法を4つ紹介していきます。

実際のコードを交えながら、具体的な実装方法を見ていきましょう。

confirmのボタンをカスタマイズできるようになれば、あなたのWebデザイナーとしてのスキルは一気に上がるはずです。

ぜひマスターして、オリジナリティあふれるダイアログを実装してくださいね。

それでは、早速1つ目のサンプルコードから解説していきます！

○サンプルコード3：OKとキャンセルの名前を変更

confirmのボタンと言えば、「OK」と「キャンセル」が定番ですよね。

でもこれ、実はカスタマイズできるんです。

状況に応じてボタンの名前を変更できれば、よりユーザーフレンドリーなダイアログが作れるのではないでしょうか。

例えば、データの削除確認なら「削除」と「キャンセル」、フォームの送信確認なら「送信」と「戻る」など、ボタンの名前を最適化することでユーザーの選択をスムーズにできます。

そんなボタンの名前変更、jQueryを使えば簡単に実装できるんですよ。

先ほどのサンプルコード2をベースに、こんな風にカスタマイズしてみましょう。

$(function() {
  $("#confirm").hide();

  function showConfirm(message, okText, cancelText, okCallback, cancelCallback) {
    $(".message").text(message);

    $("#ok").text(okText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        okCallback();
      });
    });

    $("#cancel").text(cancelText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        cancelCallback();
      });
    });

    $("#confirm").fadeIn();
  }

  // 使用例
  showConfirm(
    "データを削除します。よろしいですか？",
    "削除",
    "キャンセル", 
    function() {
      console.log("削除が選択された！");
    },
    function() {
      console.log("キャンセルが選択された！");
    }
  );
});

カスタマイズのポイントは次の2つです。

showConfirm関数の引数に、okTextとcancelTextを追加する
各ボタンの名前を、text()メソッドを使って動的に変更する

こうすることで、ボタンの名前を自由にカスタマイズできるようになります。

実装すると、「OK」「Cancel」の代わりに、「削除」「キャンセル」という名前のボタンが表示されます。

データの削除などの重要な操作で使えば、ユーザーにとってより選択しやすいダイアログになるはずです。

ちなみに、ボタンの名前は使用例のように直接指定してもいいですし、グローバル変数などを使って動的に変更することもできます。

状況に応じて使い分けてみてください。

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

次に紹介するのは、ボタンの数を増やすカスタマイズ方法です。

OKとキャンセルの2択だけでは選択肢が足りない、そんな場面はありませんか？

例えば「保存」「破棄」「キャンセル」の3択で確認したい時や、「送信」「下書き保存」「キャンセル」の3択にしたい時など、ボタンを増やせば選択肢の幅が広がります。

そんな3択のカスタマイズも、jQueryを使えば簡単に実装できるんです。

今度は、こんな風にコードを変更してみましょう。

<div id="confirm">
  <div class="message">confirmのメッセージ</div>
  <div class="buttons">
    <button id="ok">OK</button>
    <button id="other">Other</button>
    <button id="cancel">キャンセル</button>
  </div>
</div>

$(function() {
  $("#confirm").hide();

  function showConfirm(message, okText, otherText, cancelText, okCallback, otherCallback, cancelCallback) {
    $(".message").text(message);

    $("#ok").text(okText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        okCallback();
      });
    });

    $("#other").text(otherText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        otherCallback();
      });
    });

    $("#cancel").text(cancelText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        cancelCallback();
      });
    });

    $("#confirm").fadeIn();
  }

  // 使用例
  showConfirm(
    "データを保存しますか？",
    "保存",
    "破棄",
    "キャンセル", 
    function() {
      console.log("保存が選択された！");
    },
    function() {
      console.log("破棄が選択された！");
    },
    function() {
      console.log("キャンセルが選択された！");
    }
  );
});

カスタマイズのポイントは次の3つですね。

HTMLに新しいボタン要素を追加する
showConfirm関数の引数に、新しいボタンのテキストとコールバックを追加する
クリックイベントを新しいボタンにも適用する

これで、OKとキャンセル以外のボタンを追加できるようになりました。

実装すると、真ん中の「破棄」ボタンが追加されています。

ケースバイケースで、3択以上のボタンを用意することもできます。

このようにボタンの数をカスタマイズできれば、confirmの用途はグッと広がるはずです。

ユーザーの操作性を高めるために、最適な選択肢を提供できるようになりますからね。

○サンプルコード5：OKボタンのみ表示する

先ほどはボタンを増やす方法を紹介しましたが、逆にボタンを減らすこともできます。

中でも「OKボタンのみ表示する」というカスタマイズは、割とよく使われるテクニックなんです。

キャンセルの選択肢を与えず、OKを押すことだけを強制するというわけですね。

重要な確認事項を表示する時など、ユーザーにしっかり読んでもらいたい場合に使えます。

そんなOKボタンのみ表示する方法、実はとても簡単に実装できるんですよ。

こんな感じでコードを書き換えるだけです。

<div id="confirm">
  <div class="message">confirmのメッセージ</div>
  <div class="buttons">
    <button id="ok">OK</button>
  </div>
</div>

$(function() {
  $("#confirm").hide();

  function showConfirm(message, okText, okCallback) {
    $(".message").text(message);

    $("#ok").text(okText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        okCallback();
      });
    });

    $("#confirm").fadeIn();
  }

  // 使用例
  showConfirm(
    "利用規約に同意の上、OKボタンを押してください。",
    "同意する", 
    function() {
      console.log("同意されました！");
    }
  );
});

変更点は次の2つだけです。

HTMLからキャンセルボタンを削除する
showConfirm関数の引数から、キャンセル関連の部分を削除する

これだけでOKボタンのみのダイアログが完成します。

実装すると、キャンセルボタンがなくなり、OKボタンだけが表示されています。

キャンセルできないので、ユーザーは必ずOKを選択することになります。

重要なお知らせを表示したり、ユーザーに確実に同意を求めたりする時に使ってみてください。

OKボタン1つだけでも十分な場面はきっとあるはずです。

○サンプルコード6：ボタンの色を変える

最後は、ボタンの色を変更するカスタマイズ方法の紹介です。

ボタンの色を変えるだけで、confirmの印象はガラリと変わります。

例えば、OKボタンを目立つ色にしてキャンセルボタンを目立たない色にすれば、OKを選択しやすいデザインになります。

逆にキャンセルボタンを目立たせれば、慎重な選択を促せるでしょう。

そんなふうに色をカスタマイズするには、CSSを使うのが一般的です。

こんな感じのCSSを書いてみましょう。

#ok {
  background-color: #4CAF50;
  color: white;
}

#cancel {
  background-color: #cccccc;
  color: black;
}

ボタンの色をカスタマイズするポイントは、次の2つですね。

background-colorプロパティで背景色を指定する
colorプロパティで文字色を指定する

今回の例では、OKボタンを緑色、キャンセルボタンを薄いグレーにしてみました。

実装すると、OKボタンが目立つ配色になり、ユーザーを誘導しやすいデザインになりました。

色の組み合わせを工夫すれば、より効果的なダイアログが作れるはずです。

ちなみに色の指定は、カラーコードを直接書く以外にも、rgba()やhsl()を使う方法もあります。

透明度を調整したり、色合いを細かく指定したりできるので、覚えておくと便利ですよ。

●confirmの条件分岐と送信キャンセル

前回までのセクションで、confirmのデザインやボタンをカスタマイズする方法を解説しました。

でもそれだけではまだ物足りないと感じている方もいるのではないでしょうか。

実際の開発では、ダイアログの見た目を整えるだけでなく、confirmの選択結果に応じて処理を切り分けたいというニーズがよくあります。

例えば、「OKボタンが押されたらフォームを送信し、キャンセルならページに留まる」といった具合です。

あるいは、「confirmでキャンセルされた時は、そもそもサーバーにリクエストを送らないようにしたい」なんてケースもあるでしょう。

そんな風に、confirmの返り値を使って条件分岐を行うロジックが組めれば、より実践的なダイアログが実装できるはずです。

Webアプリの要件に合わせて柔軟にカスタマイズできるようになり、ユーザビリティの向上にもつながります。

JavaScriptが苦手だと感じている方にとっては、少し難しく感じるかもしれません。
でも大丈夫です。

シンプルなサンプルコードと一緒に、分かりやすく解説していきますから。

ここからは、confirmの使いどころをさらに広げる2つのテクニックを見ていきましょう。

実践的なコード例を参考に、あなたのアプリにぜひ取り入れてみてくださいね。

○サンプルコード7：confirmの結果で条件分岐

まずは、confirmの選択結果に応じて処理を切り替える方法から解説します。

これまでのサンプルコードでは、OKボタンとキャンセルボタンを押した時のコールバック関数を個別に定義していましたね。

function showConfirm(message, okText, cancelText, okCallback, cancelCallback) {
  $("#ok").text(okText).off().on('click', function() {
    $("#confirm").fadeOut(function() {
      okCallback();
    });
  });

  $("#cancel").text(cancelText).off().on('click', function() {
    $("#confirm").fadeOut(function() {
      cancelCallback();
    });
  });

  $("#confirm").fadeIn();
}

これを応用すれば、confirmの結果で処理を分岐するのは簡単です。

こんな感じでコードを書き換えてみましょう。

function showConfirm(message, okText, cancelText, callback) {
  $("#ok").text(okText).off().on('click', function() {
    $("#confirm").fadeOut(function() {
      callback(true);
    });
  });

  $("#cancel").text(cancelText).off().on('click', function() {
    $("#confirm").fadeOut(function() {
      callback(false);
    });
  });

  $("#confirm").fadeIn();
}

// 使用例
showConfirm(
  "データを保存しますか？",
  "保存する",
  "保存しない",
  function(result) {
    if (result) {
      console.log("OKが選択されました。データを保存します。");
      saveData();
    } else {
      console.log("キャンセルが選択されました。保存せずに戻ります。");
    }
  }  
);

コードのポイントは次の2つです。

okCallbackとcancelCallbackを1つのcallback関数に統合する
callback関数の引数に、OKかキャンセルかを表すbool値を渡す

こうすることで、callback関数内でif文を使った条件分岐が可能になります。

今回の例だと、OKが選択されればデータを保存し、キャンセルならそのまま処理を終えるようにしています。

実行結果は、次のようになりますね。

"OKが選択されました。データを保存します。"

または

"キャンセルが選択されました。保存せずに戻ります。"

このように、confirmの返り値に応じて柔軟に処理を切り替えられるのが、このテクニックの強みです。

フォームのバリデーションやデータの削除確認など、様々な場面で活用できるでしょう。

ちなみに、条件分岐のロジックはcallback関数内に直接書いても良いですし、別の関数に切り出してコードを整理するのもおすすめです。

状況に応じて使い分けてみてください。

○サンプルコード8：confirmでキャンセル時に送信中止

confirmの条件分岐、少しイメージが湧いてきましたか？

では次は、もう一歩踏み込んだテクニックとして、「confirmでキャンセルされた時に、フォームの送信そのものを中止する」方法を見ていきましょう。

こんなコードを書いてみました。

<form id="myForm" action="/">
  <label>名前：<input type="text" name="name"></label>
  <button type="submit">送信</button>
</form>

<div id="confirm">
  <div class="message">フォームを送信しますか？</div>
  <div class="buttons">
    <button id="ok">送信する</button>
    <button id="cancel">キャンセル</button>
  </div>
</div>

$(function() {
  $("#confirm").hide();

  $("#myForm").on("submit", function(e) {
    e.preventDefault();

    showConfirm(
      "フォームを送信しますか？",
      "送信する",
      "キャンセル",
      function(result) {
        if (result) {
          console.log("送信が確定されました。");
          $("#myForm").off("submit").submit();
        } else {
          console.log("送信がキャンセルされました。");
        }
      }
    );
  });

  function showConfirm(message, okText, cancelText, callback) {
    $("#ok").text(okText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        callback(true);
      });
    });

    $("#cancel").text(cancelText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        callback(false);
      });
    });

    $("#confirm").fadeIn();
  }
});

コードが少し長くなりましたが、ポイントは次の3つです。

formタグにidを付けて、submitイベントを監視する
e.preventDefault()で、フォームのデフォルトの送信動作をキャンセルする
送信確定時のみ、submit()を呼び出して改めて送信処理を行う

これで、confirmダイアログでOKが選択された時だけフォームが送信され、キャンセル時は送信がキャンセルされるようになります。

実行結果を見てみましょう。OKを選択すると、次のようなログが出力されます。

"送信が確定されました。"

一方、キャンセルを選択した場合は次の通りです。

"送信がキャンセルされました。"

そしてキャンセル時は、フォームがサーバーに送信されません。

このように、confirmの選択如何でフォームの送信をコントロールできるのが、このテクニックの肝となります。

入力内容に不備がある場合の再確認や、重要なデータを送信する前の最終確認など、様々な場面で使えるテクニックだと思います。

ユーザーの意思を再度確かめることで、より安全で確実な操作が実現できるでしょう。

●confirmのその他のカスタマイズ

ここまでconfirmのカスタマイズ方法を色々と見てきましたが、まだまだ紹介しきれていないテクニックがたくさんあります。

デザインや機能面だけでなく、confirmならではの設定をカスタマイズすることで、さらに使い勝手の良いダイアログが作れるんです。

例えばダイアログのタイトルを変更したり、アイコンを追加したり…。

そういった見た目の部分も、状況に応じて柔軟にアレンジできたら便利ですよね。

でも「タイトルを変更するって、そもそもどうやるの？」と疑問に思った方もいるのではないでしょうか。

確かにデフォルトのconfirmにはタイトルを設定する引数がないので、ちょっとしたコツが必要になります。

そこでこのセクションでは、confirmのタイトルやアイコンをカスタマイズする方法を2つ紹介します。

ネイティブのconfirmにはない設定も、jQueryを使えば意外と簡単に実装できるんです。

実はこれらのテクニック、Webデザイナーの方にこそ身につけておいてほしいと思っています。

なぜなら、タイトルやアイコンは視覚的なインパクトが大きいので、confirmの印象を大きく変える要素だからです。

ページの雰囲気に合わせてダイアログをデザインできれば、よりユーザーフレンドリーなUIが作れるはずです。

「こういうデザインのダイアログが欲しい」というクライアントの要望にも、スムーズに応えられるようになるでしょう。

初心者の方にとっては少し難易度が高いかもしれません。でもご安心ください。

これまでのサンプルコードをベースに、分かりやすく解説していきますから。

実際のコードを見ながら一緒に考えていけば、確実に理解は深まるはずです。

JavaScript苦手意識のある方も、これを機に少しずつ克服していきましょう。

それでは、最後の2つのサンプルコードを見ていきましょう！

○サンプルコード9：confirmのタイトルを変更

まずはconfirmのタイトルを自由に変更する方法から解説します。

通常のconfirmにはタイトルを指定する引数がないので、これまでのサンプルコードを少し工夫する必要があります。

こんな感じでjQueryのコードを書いてみましょう。

<div id="confirm">
  <div class="title">タイトル</div>
  <div class="message">メッセージ</div>
  <div class="buttons">
    <button id="ok">OK</button>
    <button id="cancel">キャンセル</button>
  </div>
</div>

$(function() {
  $("#confirm").hide();

  function showConfirm(title, message, okText, cancelText, callback) {
    $(".title").text(title);
    $(".message").text(message);

    $("#ok").text(okText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        callback(true);
      });
    });

    $("#cancel").text(cancelText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        callback(false);
      });
    });

    $("#confirm").fadeIn();
  }

  // 使用例
  showConfirm(
    "確認",
    "データを保存しますか？",
    "保存する",
    "保存しない",
    function(result) {
      if (result) {
        console.log("OKが選択されました。データを保存します。");
        saveData();
      } else {
        console.log("キャンセルが選択されました。保存せずに戻ります。");
      }
    }  
  );
});

コードのポイントは次の3つです。

ダイアログのHTMLに、タイトル表示用の要素を追加する
showConfirm関数の引数に、title引数を追加する
$(“.title”).text(title)で、タイトル文言を動的に設定する

こうすることで、confirmを呼び出す際に任意のタイトルを指定できるようになります。

使用例を見ると分かるように、第1引数にタイトル文言を渡すだけでOKです。

「確認」というタイトルが表示されていますね。

もちろんこの文言は自由に変更できます。
例えば「ご確認ください」「警告」など、状況に応じて最適なタイトルを設定しましょう。

ちなみにCSSを使えば、タイトル部分のデザインも自由にカスタマイズ可能です。

フォントサイズや色を変更して、より視認性の高いダイアログを目指すのもおすすめですよ。

○サンプルコード10：アイコンをつけてconfirmを装飾

最後に紹介するのは、confirmにアイコンを追加して視覚的なインパクトを高める方法です。

Webサイトやアプリでよく見かける、アイコン付きのダイアログを自作してみましょう。

<div id="confirm">
  <div class="icon">
    <img src="confirm-icon.png">
  </div>
  <div class="message">メッセージ</div>
  <div class="buttons">
    <button id="ok">OK</button>
    <button id="cancel">キャンセル</button>
  </div>
</div>

.icon {
  text-align: center;
  margin-bottom: 20px;
}

.icon img {
  width: 50px;
  height: 50px;
}

$(function() {
  $("#confirm").hide();

  function showConfirm(iconSrc, message, okText, cancelText, callback) {
    $(".icon img").attr('src', iconSrc);
    $(".message").text(message);

    $("#ok").text(okText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        callback(true);
      });
    });

    $("#cancel").text(cancelText).off().on('click', function() {
      $("#confirm").fadeOut(function() {
        callback(false);
      });
    });

    $("#confirm").fadeIn();
  }

  // 使用例
  showConfirm(
    "warning-icon.png",
    "この操作は取り消せません。本当に実行しますか？",
    "実行する",
    "キャンセル",
    function(result) {
      if (result) {
        console.log("実行されました！");
      } else {
        console.log("キャンセルされました！");
      }
    }  
  );
});

今回は、HTMLとCSSとJavaScriptを組み合わせてアイコン表示を実装しています。

重要なポイントは次の3つです。

ダイアログのHTMLに、アイコン表示用のimg要素を追加する
CSSで、アイコン画像のサイズや位置を調整する
JavaScript側で、$(“.icon img”).attr(‘src’, iconSrc)を使ってアイコンのパスを動的に切り替える

この例では、warning-icon.pngという警告アイコンの画像を使っていますが、ファイルパスは自由に変更できます。

状況に合わせて最適なアイコンを用意し、視覚的な意味合いを明確に伝えるようにしましょう。

実装すると、ダイアログにアイコンが表示され、よりインパクトのあるデザインになりました。

OKやキャンセルの選択を慎重に促したい時など、このテクニックは特に効果的だと思います。

アイコンの追加は、confirmに限らず他のダイアログでも応用できるテクニックです。

ぜひ色々なパターンを試して、使いやすく見栄えの良いダイアログ作りを目指してみてください。

●JavaScriptのconfirmのよくある質問

ここまでconfirmのカスタマイズ方法を色々と見てきましたが、実際に使っていると色々な疑問が湧いてくるものです。

特に初心者の方なら、つまずきやすいポイントがいくつかあるのではないでしょうか。

例えば、「キャンセルボタンを押してもページ遷移してしまう」とか、「メッセージが長すぎて画面からはみ出る」など…。

せっかくカスタマイズしたconfirmも、こういった問題があるとスムーズに使えませんよね。

でも大丈夫です。

実はよくある質問の多くは、ちょっとしたコードの調整で解決できるんです。

つまり、初心者の方でも十分に対処可能な内容だということですね。

そこでここでは、confirmを使っていて遭遇しやすい3つの問題を取り上げます。

それぞれの問題について、原因と解決策を詳しく解説していきますので、ぜひ参考にしてみてください。

「JavaScriptが苦手だから、エラーが出たら終わり…」なんて思わないでくださいね。

エラーメッセージをヒントに、調べながらコツコツと解決策を探っていくのが、プログラミング学習の醍醐味でもあるんです。

ここで紹介する解決策を知っておけば、よりスムーズにconfirmを使いこなせるはずです。

実際のコードを交えながら一緒に考えていきましょう。

○confirmでキャンセルしてもページ遷移する問題

confirmダイアログでキャンセルボタンを押したのに、ページが遷移してしまう…。

こんな経験をしたことはありませんか？

よくある原因は、confirmをaタグのクリックイベントなどに直接書いてしまうことです。

こんなコードを見たことがあるのではないでしょうか。

<a href="next-page.html" onclick="return confirm('次のページに進みます。よろしいですか？')">次へ</a>

一見問題なさそうに見えますが、実はこの書き方だとキャンセルを選択した時の制御ができていないんです。

confirmがfalseを返しても、hrefで指定したリンク先にページ遷移が行われてしまうわけですね。

この問題を解決するには、次のようにJavaScriptでクリックイベントを管理するのが一般的です。

<a href="next-page.html" id="nextLink">次へ</a>

document.getElementById('nextLink').addEventListener('click', function(e) {
  e.preventDefault(); 

  if (!confirm('次のページに進みます。よろしいですか？')) {
    return false;
  }

  location.href = this.href;
});

コードのポイントは次の3つです。

aタグのonclick属性を削除し、idでそのaタグを特定できるようにする
addEventListener()を使って、クリックイベントを別途JavaScriptで定義する
キャンセル時はreturn falseでそこで処理を止める

このように書くことで、confirmでキャンセルされた時はクリックイベントの処理を中断できます。

遷移先のURLもJavaScript側で動的に設定しているので、柔軟な制御が可能になりますね。

ちなみにここではvanilla JSで書きましたが、jQueryを使った書き方も可能です。

皆さんのコードスタイルに合わせて、読みやすく管理しやすい方を選んでみてください。

○confirmを自動で閉じる方法

次によくある質問が、「一定時間経過後にconfirmを自動で閉じるようにしたい」というものです。

確かに、ユーザーの選択を待ち続けるよりも、無応答の場合は自動でダイアログを閉じる方が親切ですよね。

そんな自動クローズの機能、JavaScriptのsetTimeout()を使えば簡単に実装できます。

こんな感じのコードを書いてみましょう。

$(function() {

  function showConfirm(message, okText, cancelText, callback) {
    // 省略（前述のshowConfirm関数と同様）

    // 10秒後に自動でダイアログを閉じる
    setTimeout(function() {
      $("#confirm").fadeOut(function() {
        callback(false);
      });
    }, 10000);
  }

  // 使用例
  showConfirm(
    "10秒以内にボタンを選択してください",
    "選択する",
    "キャンセル",
    function(result) {
      if (result) {
        console.log("OKが選択されました");
      } else {
        console.log("キャンセルされました");
      }
    }  
  );

});

setTimeout()を使うポイントは、次の2つです。

showConfirm関数の最後で、setTimeout()を呼び出す
第1引数には自動クローズの処理を、第2引数にはミリ秒単位の遅延時間を指定する

この例では10000ミリ秒（=10秒）後に、ダイアログをフェードアウトさせています。

また、callback関数にはfalseを渡すことで、自動クローズをキャンセル扱いにしていますね。

実行結果は次のようになります。

"キャンセルされました"

もし10秒以内にOKやキャンセルのボタンが押されれば、自動クローズ処理は実行されません。

ダイアログを開いたまま放置されることを防ぎつつ、ユーザーの選択も尊重する…そんな処理が簡単に書けるわけです。

自動クローズのタイミングは、用途に応じて秒数を調整してみてください。

confirmダイアログだけでなく、アラートやお知らせの自動非表示など、色々なシーンで応用できるテクニックだと思います。

○confirmのメッセージが長くて切れる問題

最後は、confirmに表示するメッセージが長すぎて切れてしまう問題についてです。

ダイアログの横幅が固定されているため、一定以上の長さになるとどうしてもメッセージが画面からはみ出してしまうんですよね。

この問題を解決する方法としては、CSSを使ってメッセージ部分の幅や高さを調整するのが有効です。

具体的には、こんなCSSを書いてみましょう。

#confirm {
  width: 500px;
}

#confirm .message {
  max-height: 200px;
  overflow-y: auto;
}

ポイントは次の2つです。

ダイアログ全体の横幅を、width プロパティで指定する
メッセージ部分の高さを制限し、はみ出た部分はスクロールバーで表示する

max-heightプロパティでメッセージの最大の高さを決め、overflow-yプロパティでスクロールバーを表示しています。

こうすることで、メッセージが長くなっても縦にスクロールできるようになるわけです。

widthやmax-heightの値は、実際のメッセージ量に合わせて調整してみてください。

状況によっては、max-heightではなくheightを使って高さを固定した方がいい場合もあるでしょう。

ちなみに、単に改行を入れるだけでも見やすくなる場合があります。

メッセージに「\n」を挟むことで、適度に改行することもできますよ。

長いメッセージを表示する際は、このようにCSSとメッセージ内容の両面からアプローチしてみてください。

状況に応じた最適な見せ方を工夫することが大切だと思います。

まとめ

この記事では、JavaScriptのconfirm関数をカスタマイズする10の方法を解説しました。

デザインやボタンのアレンジ、条件分岐や送信キャンセルなど、実践的なテクニックを数多く紹介してきました。

初心者にとって難しい部分もあったかもしれませんが、サンプルコードを参考に実際に手を動かすことで、理解が深まったのではないでしょうか。

Webデザイナーにとって、confirmのカスタマイズスキルは必須だと思います。

ユーザーに寄り添った使いやすいダイアログを提供できれば、Webサイトやアプリの印象もグッと良くなるはずです。

クライアントの要望に柔軟に対応できるようになり、仕事の幅も広がっていくでしょう。