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

2024年8月2日

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つ紹介しました。

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

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