Excel(エクセル)PowerPoint(パワーポイント)ゲームプランニングSpriteStudioマスターデータ入力/作成Unityキャラクターデザインゲームシナリオレベルデザインゲーム分析3DCGイラスト制作CG/アニメーションホームWeb開発HTML/CSS/JavaScriptjavascriptでダイアログを表示する2017-12-18カテゴリ:HTML/CSS/JavaScriptタグ:alertconfirmpromptダイアログjavascriptjavascriptでダイアログを表示するこの記事は公開から1年以上が経過しています。情報が古い可能性がありますのでご注意ください。webサービスで、ユーザに確認・注意させる場合に利用する手段としてダイアログの表示が存在します。今回は、javascriptで使える標準のダイアログについてまとめてみました。57.0を使用しました。他のブラウザでは、こちらの記事とは異なる動作になる恐れがあります。alertalertは、ユーザに注意を促す場合に使用するダイアログです。OKボタンを押すとダイアログが閉じます。以下のコードで、上図のダイアログを表示させることができます。引数に表示させたい文字列を指定します。第二引数以降に文字列を設定しても第一引数のダイアログのみ表示されます。alert('メールアドレスを入力してください。');confirmconfirmは、ダイアログにOKボタンとキャンセルボタンが備わったダイアログです。OKボタンとキャンセルボタンの押し分けで動作を分岐させることができます。confirm('アンケートが入力されておりません。次の画面に進みますか?');confirmは、OKボタンを押すとtrueをキャンセルボタンを押すとfalseを返します。以下のコードにすることで、分岐が可能になります。こちらもalertと同様に、第一引数のみダイアログに表示されます。result;if(confirm('ボタンを押してください。'OKボタンが押されました。'キャンセルボタンが押されました。';}alert(result);promptpromptは、テキストボックスが備わったダイアログです。promptの返り値は、ダイアログで入力した値です。何も入力しなかった場合は、nullが返ります。prompt('メールアドレスを入力してください。');promptに第二引数を指定すると、ダイアログのテキストボックスに入力された状態で表示されます。prompt('メールアドレスを入力してください。");ダイアログの表示を抑止ダイアログを短い間隔で表示させると、以下のダイアログが表示されます。今まで紹介したダイアログには表示されなかったチェックボックスとこのページによる追加のダイアログ表示を抑止するの文言が追加で表示されます。このチェックボックスを入れた状態でダイアログを閉じると、次からのダイアログが表示されなくなります。この機能が存在する理由は、ダイアログを無限に表示させるブラウザクラッシャー対策です。※promptダイアログで、チェックボックスをいれた状態でキャンセルボタンを押した場合のみ、ダイアログが次も表示されました。ダイアログが表示されなくなることで、confirmが期待通りの動作が行われない場合があります。ダイアログの表示を抑止された状態だと、confirmは必ずfalseを返します。よって、抑止状態だとOKボタンを押した時の動作を行うことができなくなります。この問題を発生させないには、「ダイアログ表示するときに一定時間の間隔を設ける」や「自作のダイアログを使用する」を行うことで回避できます。viewsTweetこの記事を書いた人kodama「いいね!」するとDoRubyの最新記事を受け取ることができます。