alert, confirm, promptって何？これらの便利な関数(メソッド)について解説します！【JavaScript】

2024年10月13日 2024年10月13日

慶西川

Webアプリケーションではユーザーにメッセージを表示したり、確認を求めたりする場面がよくあります。
最もシンプルなものとして`window.alert()`、`window.confirm()`、`window.prompt()`という関数を使う方法があります。
これらはたったの1行で実装が可能なため、JavaScriptの勉強を始めたばかりの方でもわりとすぐに使えると思います。

今回はそれら３つの関数(メソッド)についてや、使い方、さらには実務における位置付けについて触れていきます。
補足として、alertメソッドと呼ばれる場合もありますが、解釈や厳密さの違いにより呼び方が異なるだけなので、初心者のうちは関数と呼んでも、メソッドと呼んでも問題ないです。

目次：

この記事のポイント

3つの関数の動作や使い方が分かる
3つの関数の違いが分かる
3つの関数の使用場面が分かる

windowの部分は省略可能!

windowは記述を省略できます。省略しても同様に動くため問題ありません。
これはwindowオブジェクトがグローバルオブジェクトであるためです。
よって、 window を明示的に書かなくてもメソッドやプロパティにアクセスできます。

グローバルオブジェクトやwindowオブジェクトについては別記事で解説していますので、ご覧ください。

参考：windowオブジェクトやDOMとは何？JavaScriptで画面を操作する方法についても解説します！

window.alert()とは

window.alert() 関数によりシンプルなメッセージをポップアップ表示することができます。
例を挙げてみましょう。

window.alert('Hello, World!');

このコードを実行すると、ブラウザに次のようなアラートが表示されます。
試しに、ブラウザのデベロッパーツールを開いて、コンソールで実行してみてください。

「OK」ボタンが表示され、ユーザーがボタンをクリックするまで他の操作ができない状態になるという、シンプルな機能を実装することができます。
()内にアラート表示させたい文字列を指定するだけでよく、難しい設定やレイアウトの調整等は必要ありません。
用途としては次のようなものがあります。

1. エラーが発生した際に通知する
2. 特定のアクションが成功したことを知らせる
3. ページを離れようとした際に警告する

ユーザーに確実に情報を伝えたい時に有効な機能であり、みなさんも一度は目にしたことがあるのではないでしょうか？
いたってシンプルで手軽に取り入れられる一方、次のような短所もあります。

window.confirm()とは

confirm は、ユーザーに「OK」または「キャンセル」のどちらかを選択させるメソッドです。
ユーザーが選択した結果（true または false）を返すので、それに基づいて処理を分岐させることができます。

let result = confirm('本当にこの操作を実行しますか？');
if (result) {
    alert('操作が実行されました。');
} else {
    alert('操作がキャンセルされました。');
}

このコードでは、ユーザーが「OK」をクリックするとtrueが返され、処理が続行されます。
一方で「キャンセル」をクリックするとfalseが返され、操作がキャンセルされる形になります。

window.prompt()とは

prompt は、ユーザーに入力を求めるメソッドです。
ポップアップウィンドウにテキストボックスが表示され、そこにユーザーが任意の文字列を入力できます。
入力結果は文字列として返されるので、それを利用して様々な処理が可能です。

let name = prompt('お名前を入力してください:');
if (name) {
    alert('こんにちは、' + name + 'さん！');
} else {
    alert('名前が入力されませんでした。');
}

このコードでは、ユーザーが入力した名前を取得し、その名前を使って挨拶を表示します。
promptはユーザーから情報を直接収集したい場合に便利です。

alert()、confirm()、prompt()の短所

すべてのユーザー操作を一時停止させるため、繰り返し使用するとユーザビリティを損ねることになりかねない。
特に、prompt()は入力を完了するまで画面全体がブロックされ。ユーザーにとって非常に煩わしい体験となる。
複数のアラートが連続して表示されると、ユーザは「OK」を押すだけとなり、メッセージ自体を読み飛ばしてしまう可能性がある。(prompt()以外)
アラート表示のデザインをカスタマイズすることができない。実際のWebアプリケーションではデザインやユーザーフレンドリーなインタラクションが重要視されるため、カスタマイズができないことは制約となる。
prompt() は入力欄が非常にシンプルで、入力に対するフィードバックやバリデーションが行われないため、間違った入力がそのまま送信されるリスクがある。
入力内容の確認やエラーメッセージの表示ができない点は、開発者目線での使い勝手において大きな欠点です。

このように3つの関数は、シンプルな確認や通知を行う場面で役立つので、ちょっとした実装の確認機能として手軽かつ頼もしいものであることは間違いありません。
とはいえ実際のWebアプリケーションにおいてはあまり実用的でないことも事実です。要するに、使い所を見極めることが大切なのです。

まとめ

JavaScriptの window.alert() や window.confirm() は基本的なツールであり、シンプルかつ強力です。簡単にメッセージを表示したり、ユーザーのアクションの確認を取る手段としても有効です。ただし、「ユーザー体験を損ねない」ということはアプリ開発における重要なファクターであるため、実務においては使い所として適切かどうかをよく考えて、柔軟に使い分けることが大切です。
必要に応じて、カスタマイズ可能なモーダルやトースト通知といったツールに切り替えることで、ユーザーエクスペリエンス（UX）がよりスムーズで心地よいものになるように配慮することも大切です。
モーダルやトースト通知もJavaScriptで実装されますので、別の機会に紹介したいと思います。

今回はalert, confirm, prompt を紹介しました。
JavaScriptにはさまざまな関数が用意されていますので、特徴を理解して効率的にWeb開発が進められるとよいですね！