【JS】ダイアログボックス表示方法まとめ

【メイン画像】JavaScriptでダイアログボックスを表示する3つの関数

JavaScriptでは、以下のような3つのダイアログボックスを表示する機能が備わっています。
それぞれ alert(), prompt(), confirm() という関数を使用します。

実装例

本記事では、これらの使い方や実装コードを紹介しています。

目次

alert()関数の実装例とコード

alert()関数は、ユーザーにメッセージを表示するだけの、一番シンプルなダイアログボックスです。

実装例
<button>Alert</button>
const btn = document.querySelector('button');

btn.addEventListener('click', () => {
  alert('【Alert】がクリックされました!');
});

表示したいメッセージを、alert()の引数に指定するだけで実装できます。
引数が上記例のように文字列の場合は、「’」または「”」で文字列を囲んでください。(数字や変数の場合は不要です。)

confirm()関数の実装例とコード

confirm()関数は、「OK」または「キャンセル」の選択肢付きメッセージを表示します。

選択した内容に応じて、その後の処理を変えることもできます。

実装例
<button>Confirm</button>
const btn = document.querySelector('button');

btn.addEventListener('click', () => {
  const result = confirm('【Confirm】がクリックされました!');
  if (result) {
    alert('「OK」を選択しました。');
  } else {
    alert('「キャンセル」を選択しました。');
  }
});

OKを選択した場合はtrue、キャンセルを選択した場合はfalseを返します。
本例では、この結果を変数resultに格納し、if文で処理を分岐させています。

prompt()関数の実装例とコード

prompt()関数は、テキストの入力ボックス付きメッセージを表示します。

入力されたテキストを受け取って、その後の処理に引用することもできます。

実装例
<button>Prompt</button>
const btn = document.querySelector('button');

btn.addEventListener('click', () => {
  const result = prompt('【Prompt】がクリックされました!','好きな文章を入力できます!');
  if (result) {
    alert('入力内容:' + result);
  } else {
    alert('何も入力されていません。');
  }
});

入力したテキストが関数の戻り値として返されます。
本例では、入力内容を変数resultに格納し、alert()の引数に指定することで入力内容を再表示しています。

なお、キャンセルを選択した場合やエスケープキー(ESC)を押した場合はnullを返します。

まとめ

以上、JavaScriptで実装できるダイアログボックスの表示方法を3つ紹介しました。

ここで紹介した関数は非常に簡単に使えますが、頻繁に使用するとユーザー体験を阻害する(鬱陶しく感じる)可能性があるため、適切に使用することが重要です。

また、アコーディオンやモーダルウィンドウなど、メッセージを表示する方法は他にも種類があります。
以下記事で実装例・コードを紹介しているので、合わせてご覧ください。


当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次