JavaScriptのAlert, Confirm, Prompt
はじめに
Java Scriptでは三つのポップアップボックスがあります。
それぞれの使い方や違いを調べてみましょう！
1. Alert Popup Box
See the Pen Untitled by SeitaShimizu (@SeitaShimizu) on CodePen.
説明
alert は、ユーザーに情報を通知するために使用します。
メッセージを表示し、ユーザーが「OK」ボタンを押すと次の動作が進みます。
- 入力値: なし（ユーザーに通知するためのメッセージのみ）
- 戻り値: なし（「OK」をクリックした時点で関数は終了）
- 使用例: 警告メッセージや簡単な通知を表示する際に使用します。
例: エラーメッセージの表示など。
2. Confirm Popup Box
See the Pen Untitled by SeitaShimizu (@SeitaShimizu) on CodePen.
説明
confirmはユーザーに操作の確認を求める際に使用します。
「OK」と「キャンセル」の二択を提供します。
- 入力値: なし（確認メッセージのみ表示します）
- 戻り値: ユーザーが「OK」を押すと true が返され、「キャンセル」を押すと false が返されます。
- 使用例: 重要な操作（例: ファイルの削除）
前にユーザーに確認を求める際に使用します。
3. Prompt Popup Box
See the Pen Untitled by SeitaShimizu (@SeitaShimizu) on CodePen.
説明
promptはユーザーにテキスト入力を求め、その結果を返します。
デフォルト値を設定することも可能です。(今のデフォルトは「有村架純」さん)
- 入力値: プロンプトメッセージと（オプションで）デフォルト値。
- 戻り値: 入力されたテキストが返され、キャンセルが押された場合は null が返されます。
- 使用例: ユーザーからの情報入力を受ける際に使用します。
例: ユーザーの名前やメールアドレスの入力を促す場合など。
4. Alert, Confirm, Promptの違い
| 関数名 | 説明 | ユーザー入力 | 戻り値 | 使用例 |
|---|---|---|---|---|
alert |
簡単なメッセージを表示し、「OK」ボタンのみを提供 | なし | なし | 警告メッセージ、簡単な通知 |
confirm |
「OK」ボタンと「キャンセル」ボタンで確認を求める | なし |
true (OK)、false (キャンセル) |
重要な操作の確認（例: データ削除） |
prompt |
ユーザーにテキスト入力を求める | テキスト入力可能 | 入力された文字列または null
|
ユーザーから情報を収集（例: 名前入力） |
5. まとめ
JavaScriptでこの三つの関数は良く使われる関数です。
各関数がどのタイミングで使用するのが良いのか理解しておくとよいと思います。
6. 参考資料
Alert, Confirm, Prompt概念
①https://www.josefzacek.cz/blog/whats-the-difference-between-alert-confirm-and-prompt/#:~:text=alert%20is%20for%20displaying%20information,user%20interactions%20in%20web%20applications.
②https://www.tutorialsteacher.com/javascript/display-popup-message-in-javascript
③https://www.w3schools.com/js/js_popup.asp
※window.alert()とalertの違い
①https://stackoverflow.com/questions/13459907/what-is-the-difference-between-alert-and-window-alert
②https://www.sololearn.com/en/Discuss/932749/whats-the-difference-between-windowalert-function-and-the-alert-function-in-javascript