JavaScriptで使えるポップアップダイアログの3種類を解説!alert・confirm・promptの違いと使い方

JavaScriptには、ブラウザ上で手軽にユーザーと対話できる組み込みのポップアップダイアログが3種類用意されています。それぞれ「alert」「confirm」「prompt」というメソッドで、用途に応じて使い分けることができます。

1. alert() — 警告ダイアログ

window.alert() メソッドは、指定したメッセージと「OK」ボタンだけを持つシンプルな警告ダイアログを表示します。ユーザーへの通知や注意喚起など、返答を必要としない一方向のメッセージ表示に適しています。

使用例

<script>
    alert("これはアラートです");
</script>

このスクリプトを実行すると、「これはアラートです」という内容と確認ボタンが表示されたアラートボックスが開きます。

なお、alertダイアログは、ユーザーからの入力や選択といった応答を必要としない、単なるメッセージの通知にのみ使用すべきという点に注意してください。

2. confirm() — 確認ダイアログ

window.confirm() メソッドは、任意のメッセージと「OK」「キャンセル」の2つのボタンを持つモーダルダイアログを表示します。戻り値は真偽値(Boolean)で、ユーザーが押したボタンによって結果が変わります。

使用例

<script>
    let bool = confirm("この操作を確認してください");
    console.log(bool);
</script>

このスクリプトを実行すると、確認ボタンとキャンセルボタンが付いた確認ダイアログが開きます。「OK」をクリックすれば true が返り、「キャンセル」をクリックすれば false が返ります。データ削除などの重要な処理を実行する前に、本当に実行してよいか確認したい場面でよく使われます。

また、confirmを含むこれらのダイアログボックスはモーダルウィンドウであるため、ダイアログを閉じるまでページ上の他の操作が一切できない点にも留意してください。

3. prompt() — 入力ダイアログ

window.prompt() メソッドは、任意のメッセージとテキスト入力欄を備えたダイアログを表示し、ユーザーにテキストの入力を促します。戻り値はユーザーが入力した文字列(String)です。

使用例

<script>
    let name = prompt("お名前を入力してください");
    console.log(name);
</script>

このスクリプトを実行してプロンプトに名前を入力すると、入力された名前がコンソールに出力されます。なお、「キャンセル」が押された場合は null が返るため、実際の開発では戻り値のチェックを行っておくのが安全です。

まとめ

JavaScriptの3種類のポップアップダイアログは、以下のように使い分けられます。

• alert():メッセージを通知するだけのシンプルなダイアログ(戻り値なし)
• confirm():OK/キャンセルの選択結果を真偽値(true / false)として受け取る確認ダイアログ
• prompt():ユーザーのテキスト入力を受け取るダイアログ(文字列またはnullを返す)

いずれもモーダル表示のため、表示中はユーザーの操作を妨げるという特性があります。手軽に使える反面、見た目のカスタマイズはできないため、より洗練されたUIが必要な場合には、HTMLとCSSを使った独自のダイアログやモーダルの実装も検討するとよいでしょう。