こんにちは。デザイン部のmoです。

サイトを利用している時に突然、画面にメッセージが表示されるWebページを見たことはありませんか？

このようにユーザーに対して何かのメッセージを伝えたり注意を引くための表示機能をダイアログ（ダイアログボックス）と言います。

今回は「alert」「confirmt」「prompt」３種類のダイアログを紹介していきます。

ダイアログボックスとは？

JavaScriptにおいて、ダイアログボックスはユーザーとのインタラクションを可能にする重要な機能です。これらのダイアログボックスは、ウェブページ上でメッセージを表示し、ユーザーからの入力を受け取ることができます。

1. alert ダイアログ

alert ダイアログは、ウェブページ上に簡単なメッセージを表示するために使用されます。このダイアログはユーザーに何かしらの情報を知らせるために使われ、ユーザーは「OK」ボタンをクリックしてダイアログを閉じます。

※ボタンをクリックするとダイアログが表示されます。

この例では、ボタンをクリックするとalert()メソッドが実行され、ダイアログに「こんにちは！」というメッセージが表示されます。

2. confirm ダイアログ

confirm ダイアログは、ユーザーに対して確認を求める際に使用されます。このダイアログは、ユーザーが「OK」または「キャンセル」のいずれかを選択するまで処理が停止します。

※ボタンをクリックするとダイアログが表示されます。

この例では、ユーザーがボタンをクリックすると、confirm()メソッドによって「本当にこのアクションを実行しますか？」という確認ダイアログが表示されます。ユーザーが「OK」をクリックすると、”アクションが実行されました！”というアラートが表示され、ユーザーが「キャンセル」をクリックすると、”アクションはキャンセルされました。”というアラートが表示されます。

3. prompt ダイアログ

prompt ダイアログは、ユーザーからの入力を受け取るために使用されます。このダイアログは、ユーザーがテキストを入力し、「OK」または「キャンセル」をクリックするまで処理が停止します。

この例では、ボタンのクリックで表示されるpromptダイアログのメッセージが「メッセージを入力してください」となります。ユーザーがメッセージを入力してOKをクリックすると、入力されたメッセージがアラートで表示されます。キャンセルをクリックした場合や何も入力せずにOKをクリックした場合は、「メッセージが入力されませんでした。」というアラートが表示されます。

まとめ

• alert ダイアログは、単純な情報を表示
• confirm ダイアログは、ユーザーに確認を求める
• prompt ダイアログは、ユーザーからの入力を受け取る

これらのダイアログボックスは、JavaScriptを使って動的で対話的なウェブページを作成する上で重要な役割を果たします。

ユーザーに確認してほしい内容や入力してほしい内容など、目的に応じてダイアログ機能を使い分けて使用するといいでしょう。

文：デザイン部 mo