この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
webサービスで、ユーザに確認・注意させる場合に利用する手段としてダイアログの表示が存在します。今回は、javascriptで使える標準のダイアログについてまとめてみました。
OSは、Windows 10。ブラウザは、Firefox Quantum 57.0を使用しました。他のブラウザでは、こちらの記事とは異なる動作になる恐れがあります。
alert
alertは、ユーザに注意を促す場合に使用するダイアログです。OKボタンを押すとダイアログが閉じます。
以下のコードで、上図のダイアログを表示させることができます。第一引数に表示させたい文字列を指定します。第二引数以降に文字列を設定しても第一引数のダイアログのみ表示されます。
alert('メールアドレスを入力してください。');
confirm
confirmは、ダイアログにOKボタンとキャンセルボタンが備わったダイアログです。OKボタンとキャンセルボタンの押し分けで動作を分岐させることができます。
confirm('アンケートが入力されておりません。次の画面に進みますか？');
confirmは、OKボタンを押すとtrueをキャンセルボタンを押すとfalseを返します。以下のコードにすることで、分岐が可能になります。こちらもalertと同様に、第一引数のみダイアログに表示されます。
var result;
if(confirm('ボタンを押してください。')) {
result = 'OKボタンが押されました。';
} else {
result = 'キャンセルボタンが押されました。';
}
alert(result);
prompt
promptは、テキストボックスが備わったダイアログです。promptの返り値は、ダイアログで入力した値です。何も入力しなかった場合は、nullが返ります。
prompt('メールアドレスを入力してください。');
promptに第二引数を指定すると、ダイアログのテキストボックスに入力された状態で表示されます。
var input = prompt('メールアドレスを入力してください。', 'test@example.com');
alert(input + "が入力されました。");
ダイアログの表示を抑止
ダイアログを短い間隔で表示させると、以下のダイアログが表示されます。今まで紹介したダイアログには表示されなかったチェックボックスとこのページによる追加のダイアログ表示を抑止するの文言が追加で表示されます。このチェックボックスを入れた状態でダイアログを閉じると、次からのダイアログが表示されなくなります。この機能が存在する理由は、ダイアログを無限に表示させるブラウザクラッシャー対策です。※promptダイアログで、チェックボックスをいれた状態でキャンセルボタンを押した場合のみ、ダイアログが次も表示されました。
ダイアログが表示されなくなることで、confirmが期待通りの動作が行われない場合があります。ダイアログの表示を抑止された状態だと、confirmは必ずfalseを返します。よって、抑止状態だとOKボタンを押した時の動作を行うことができなくなります。この問題を発生させないには、「ダイアログ表示するときに一定時間の間隔を設ける」や「自作のダイアログを使用する」を行うことで回避できます。
まとめ
javascriptの標準ダイアログの利点
- 簡単に実装することができる
javascriptの標準ダイアログの欠点
- カスタマイズできる項目がダイアログの文言のみ
- ダイアログの表示の抑止した状態を考慮する
