【JavaScript入門】これで使いこなせる！ダイアログボックスの種類と表示方法を解説

こんにちは、Jeannieです。

今回もJavaScript初心者向けに「ダイアログボックス」に関する記事を書いていこうと思います。

初心者の方からすると「ダイアログボックスって何？」というところから分からないと思いますので、今回の記事ではダイアログボックスとはどんなものなのか、その使い方などを分かりやすく解説していきます。

この記事を読んで分かること

トピック

そもそもダイアログボックスって何？

ダイアログボックスは、Webページを見ているユーザに対して印象的なメッセージを表示するときに使うものです。

Webページを見ているときに急にポップアップみたいにメッセージが出てきた経験ありますよね？
こんなやつです。

ダイアログボックスを表示することで、Webページを見ているユーザに見てほしいメッセージを印象付けることが出来ます。

ダイアログボックスには以下の種類があって、それぞれ用途が異なります。

それぞれを詳しく見ていきましょう。

アラートダイアログボックスは、ユーザにメッセージを強調したい時に使うダイアログボックスです。

アラートダイアログボックスは、メッセージを伝えることが目的なので、ユーザがそのメッセージを了承するために「OK」ボタンだけが表示されます。

JavaScriptでコードを書く場合は以下のようになります。

alert('今すぐ再起動してください！');

alertメソッドの引数に、表示したい文字列を渡してあげるだけでダイアログが表示されます。簡単ですね。

「このページの内容：」と「OK」ボタンは、JavaScriptによって自動的に作成されて表示されます。
※この部分はカスタマイズできないようになっているので、見た目を変えたい場合はHTMLやCSS、JavaScriptを使って独自にダイアログボックスを作る必要があります。

確認ダイアログボックスは、ユーザに対して確認を取る時に使うダイアログボックスです。

確認ダイアログボックスは、確認を取ることでユーザに行動を選択してもらうのが目的なので、「OK」ボタンと「キャンセル」ボタンが表示されます。

実際のプログラミングでは、「OK」ボタンが押された場合はこういう処理をする、「キャンセル」ボタンが押されたら何もしない、といったように条件分岐させて処理することになります。

JavaScriptでコードを書く場合は以下のようになります。

confirm('編集内容が失われますが、本当に前のページに戻りますか？');

confirmメソッドの引数に、表示したい文字列を渡してあげるだけでダイアログボックスが表示されます。

「OK」ボタン、「キャンセル」ボタンは、JavaScriptによって自動的に作成されて表示されます。

プロンプトダイアログボックスは、ユーザに対して何かしらの入力を促す時に使うダイアログボックスです。

プロンプトダイアログボックスは、ユーザの情報を教えてもらうのが目的なので、入力欄が一つと「OK」ボタン、「キャンセル」ボタンが表示されます。

実際のプログラミングでは、「OK」ボタンが押された場合は入力された文字を使ってこういう処理をする、「キャンセル」ボタンが押されたら何もしない、といった条件分岐に加えて、入力された文字がハンバーガーだったらマクドナルドのサイトに遷移させる、といった条件分岐も行います。

JavaScriptでコードを書く場合は以下のようになります。

prompt('好きな食べ物を教えてください。');

promptメソッドの引数に、表示したい文字列を渡してあげるだけでダイアログが表示されます。

こちらも入力欄や「OK」ボタンなどは、JavaScriptによって自動的に作成されて表示されます。

今回はダイアログボックスとは何か、そしてJavaScriptでの実装方法について解説しました。

ダイアログボックスの表示は簡単に出来るので、簡単なWebページを作ってみて是非使い方をマスターしてください。