ダイアログを表示する
Updated
2021/8/8 9:40
Author
Jumpei Ikegamiorder
16
JavaScriptを使って、ブラウザのダイアログ機能を呼び出すことができます。
ブラウザのダイアログとは？
ダイアログは、ユーザーに警告を伝えたり、確認や入力を求めたりするためのブラウザの機能です。JavaScriptから簡単に呼び出すことができます。
↑Chromeのconfirmダイアログ
ダイアログには、次の種類があります。
alert: 警告のためのダイアログ
confirm: 確認のためのダイアログ
prompt: 入力のためのダイアログ
ダイアログが表示されると、ユーザーはダイアログを閉じるまでその他の操作ができません。そのためWebサイトの機能としてダイアログを使う場合は、多用しすぎるとユーザーの体験を損ねる恐れがあります。絶対に確認して欲しいメッセージを伝える場合など、真に重要なタイミングだけで使われるべき機能です。
ただし、簡単にブラウザ上でUIを表示できるので、ブックマークレットなど自分だけが使うプログラムの中で利用するには便利なことがあります。実際に、チュートリアルでも、生成したURLをクリップボードにコピーしやすくするために、
1. Amazonの汚いURLを短縮してコピーするためのボタンを作る2021/5/9 3:562021/8/8 7:59promptダイアログを表示しています。なお、ただ文字列を表示したいだけであれば、ダイアログよりもconsole.log()でログに出した方が汎用性が高いのでおすすめです。ちなみに、ダイアログはブラウザ側で実装されている機能です。そのため、Webサイトのコンテンツとは違って、見た目やボタンをカスタマイズすることはできません。表示については次の画像のようにブラウザ間で少しずつ違いがあります。
↑Safariのconfirmダイアログ
↑Firefoxのconfirmダイアログ
警告のためのダイアログを表示する
ユーザーに何かを警告するには、
alert()というメソッドを使います。JavaScript
次の例は、ユーザーからの入力にエラーがあったことを知らせるプログラムです。
JavaScript
実行すると、「OK」ボタンのみ押せるダイアログが表示されます。
↑Chromeのalertダイアログ
確認のためのダイアログを表示する
ユーザーに確認を求めるには、
confirm()というメソッドを使います。JavaScript
次の例は、ユーザーが何かを削除しようとしたときに確認を求めるプログラムです。
JavaScript
実行すると、「キャンセル」ボタンか「OK」ボタンかを選ばせるダイアログが表示されます。
↑Chromeのconfirmダイアログ
ちなみに、プログラム上はユーザーがどちらを押したかによって処理を分岐させることもできます。
JavaScript
入力のためのダイアログを表示する
ユーザーにテキスト入力を求めるには、
prompt()というメソッドを使います。JavaScript
第二引数の
'テキストボックスのデフォルト値'は省略可能です。文字列を渡した場合は、テキストボックスにその文字列が予め入力された状態になります。もちろん、ユーザーは後からそのデフォルト値を変更することができます。次の例は、ユーザーに検索キーワードを入力させるプログラムです。
JavaScript
実行すると、「キャンセル」ボタンと「OK」ボタンに加えてテキストボックスを含むダイアログが表示されます。
↑Chromeのpromptダイアログ
ちなみに、プログラム上でユーザーが入力した値を使うこともできます。次の例は、
promptダイアログで検索キーワードを入力するとGoogleの検索結果画面に遷移するプログラムです。JavaScript