【JavaScript入門】ダイアログの表示総まとめ(alert/confirm/prompt)

こんにちは!エンジニアの中沢です。

JavaScriptにはメッセージを表示するためのダイアログがあります。

ダイアログではユーザーの入力を受け付けることもできるので、上手く活用してください。

この記事では、

・ダイアログとは
・alertでダイアログ(メッセージボックス)を表示する方法

という基本的な内容から、

・confirmで「はい」「いいえ」のダイアログを出す方法
・promptでユーザーの入力を受け付ける方法

などの応用的な使い方に関しても解説していきます。

今回はこれらの方法を覚えるために、ダイアログのさまざまな使い方をわかりやすく解説します!

ダイアログとは

ダイアログはユーザーにメッセージを表示したいときに使います。

警告のメッセージを表示するには、alert関数を使います。

「はい」「いいえ」のダイアログを出すには、confirm関数を使います。

ユーザーの入力を受け付けるには、prompt関数を使います。

このように、目的によってダイアログを使い分ける必要があります。

alertでダイアログ(メッセージボックス)を表示する方法

ここでは、alertでダイアログ(メッセージボックス)を表示する方法を解説します。

alertでダイアログを表示するには、alert関数の引数に表示したいメッセージを指定します。

次のプログラムで確認してみましょう。

alert('アラートのメッセージ');

実行結果:
dialog_01

alert関数の使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

【JavaScript入門】alert(アラート)メッセージはこれで完璧。使い方を総まとめ!
更新日 : 2020年5月8日

confirmで「はい」「いいえ」のダイアログを出す方法

ここでは、confirmで「はい」「いいえ」のダイアログを出す方法を解説します。

confirm関数でダイアログを出すには、引数に表示したいメッセージを指定します。

次のプログラムで確認してみましょう。

window.confirm("これが確認ダイアログです。");

実行結果:
dialog_02

confirm関数の使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

【JavaScript入門】confirmで「はい」「いいえ」のダイアログを出す
更新日 : 2019年5月22日

promptでユーザーの入力を受け付ける方法

ここでは、promptでユーザーの入力を受け付ける方法を解説します。

promptはダイアログで表示させたい文字列を引数に指定します。

promptの戻り値は入力された文字列になります。

次のプログラムで確認してみましょう。

var result = prompt("ダイアログに入力してください");
console.log(result);

実行結果:
prompt_01

侍エンジニア塾

prompt関数の使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

【JavaScript入門】promptでユーザーの入力を受け付ける方法
更新日 : 2018年6月4日

まとめ

いかがでしたか?

今回はダイアログを表示する方法を解説しました。

ダイアログは目的に応じて種類を使い分けることができるので、ぜひ活用してくださいね。

もし、ダイアログを表示する方法を忘れてしまったらこの記事を確認してください!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

中沢 丈

中沢 丈

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
[email protected]