今まで、突然注意書き画面が飛び出してくるようなWebページをみたことはありませんか?
このようにユーザーからの注意を引くために表示の仕方にフォーカスして使われているのがダイアログボックス(ポップアップのウィンドウ)です。

JavaScriptにはダイアログを表示させるための既存の機能が用意されています。
実際にはモダンなWebページ(アプリ)では、動きやデザインのカスタマイズができない既存の機能を使用することはあまりありません。
しかし、凡庸性の高いプログラムを書いていくためには、JavaScriptの基本の知識としてダイアログ機能について知っておくことは重要です。

この記事では、ダイアログボックスを表示させるための「alert」「prompt」「confirm」について紹介します。

ダイアログとは

ダイアログ(ダイアログボックス)とは、ユーザーが見ている既存のページから追加のコンテンツを見せるための方法の一つです。
古くから使われている手法でもありますが、TwitterやFacebookでも採用しているなど、Webページ(アプリ)には幅広く使われています。

では実際にJavaScriptではどのようなダイアログの種類があるのかみていきましょう。すべてブラウザ環境で実装することができるため、今回はDeveloper Toolで検証してきます。

alert

alertの後ろに文字列や数値などを使って、表示させたい値を記述します。

alert(表示させたい値);

サンプルコード

alert('alertポップアップウィンドウを表示しています');

javascript popup

記述した文字列がポップアップで表示されます。
alertは、ユーザーに「確認」や「同意」を求めるためにOKボタンが用意されているのが特徴です。

prompt

promptの後ろに文字列や数値などを使って、表示させたい値を記述します。第二引数に初期値を設定することができます。

prompt(表示させたい値, 初期値);

サンプルコード

prompt('promptポップアップウィンドウを表示しています', '入力してください');

javascript popup

alertとは少し変わり、テキストを記入できる入力欄が表示されます。ここでは第二引数として用意している「入力してください」という文字列が入力欄の初期値として表示されます。
尚、初期値の設定は必須ではありません。

それでは、入力欄にテキストを打ち、OKボタンを押すとどうなるかみてみましょう。

javascript popup

「入力しました」と打ち込みます。

javascript popup

「入力しました」という値が返ってくるのがわかります。

promptの特徴はユーザーにテキストを入力させ、入力値を返す機能があることです。返ってきた値を利用して条件分岐などの処理に活用することができます。

confirm

上記2つと同様、confirmの後ろに文字列や数値などを使って、表示させたい値を記述します。

confirm(表示させたい値);

サンプルコード

confirm('confirmポップアップウィンドウを表示しています');

javascript popup

confirmはユーザーからの「確認」を表示させるために使われますが、alertとの違いはOKボタンのほかにキャンセルボタンが用意されていることです。

それぞれのボタンを押すと以下のような出力結果になります。

javascript popup

OKボタンを押すと「true」が返り、キャンセルボタンを押すと「false」が返ります。
このようにtrueかfalse(論理値)を返し、ユーザーがクリックしたものを判断するため、論理値の結果を利用して、if文などの条件分岐に活用することができます。

まとめ

「alert」「prompt」「confirm」は、JavaScriptにあらかじめ用意されているダイアログで、短いコードで実装できるため、簡単な動作確認をする上では便利です。

ユーザーに確認してほしい内容や入力してほしい内容など、目的に応じてダイアログ機能を使い分けましょう。