JavaScriptのalert()を使う｜モーダル表示のほうが自由度が高い

この記事にはPRが含まれます

2025年5月9日 2025年5月28日

JavaScriptのalert()は、ユーザーにメッセージを表示するための基本的なダイアログボックスを表示する関数。

その使い方をざざっとまとめてみました。

※記事内で紹介しているHTML・CSS・JavaScript・PHPなどのコードは、作成時点におけるその道のプロではない作成者の最適解です。動作環境やバージョンによって結果が異なる場合があります。コードの使用により生じたいかなる損害やトラブルについても、当サイトは責任を負いかねます。

alert()とは何か

alert()は、ウェブページ上でメッセージを表示するためのJavaScriptの関数。

ポップアップウィンドウが表示され、ユーザーが「OK」ボタンをクリックするまでそのウィンドウが表示され続ける。

主に、情報を伝えたり、注意を促したりするために使われる。

alert()の使い方

alert()を使用してメッセージを表示する基本的な使い方は、()内に伝えたいメッセージを入力する。

alert("こんにちは！JavaScriptの世界へようこそ！");

このコードを実行すると、次のようなダイアログが表示される。

「OK」ボタンをクリックするまでそのウィンドウが表示され続ける。

alert()内メッセージの改行方法

alert()内でテキストを改行するには、\n（バックスラッシュとn）を使用する。

alert("こんにちは！\nJavaScriptの世界へようこそ！");

※コードの「\」は「¥」と同じです

alert()のカスタマイズ

alert()はブラウザが提供する標準のダイアログなので、次のようなカスタマイズはできない。

Yes/Noを求める
入力を求める
自動で閉じる
タイトルの変更（画像で言うとcdpn.ioの埋め込みページの内容）
デザインの変更

alert()以外

カスタマイズしたい場合は、alert()以外のものを使うしかない。

Yes/Noを求めるならconfirm()

confirm()は、ユーザーに「OK」または「キャンセル」の選択を求めるダイアログを表示する。

選択結果は、true（OK）またはfalse（キャンセル）として返される。

if (confirm("本当に削除しますか？")) {
  // ユーザーがOK（=Yes）を押した場合の処理
  alert("削除しました。");
} else {
  // ユーザーがキャンセル（=No）を押した場合の処理
  alert("キャンセルしました。");
}

入力を求めるならprompt()

prompt()は、ユーザーにテキスト入力を求めるダイアログを表示する。

入力された値は文字列として返される。

var name = prompt("お名前を入力してください");
alert(name + "さん、こんにちは！");

カスタマイズしたいなら自作モーダルウィンドウを作る

本格的にカスタマイズしたいなら、自作モーダルウィンドウをHTML＋CSS＋JavaScriptで作るしかない。

こっちのほうが自由度が高くて断然イイので、詳しくは後述の「クリックしたらモーダルウィンドウが表示される」で。

alert・confirm・promptの応用例

クリックしたらalert・confirm・promptが表示される

ボタンをクリックしてalert・confirm・promptを出すことが可能。

下のボタンをクリックすると、それぞれどのように表示されるのかが分かる。

button要素にonclick属性を付与して実行させるのが手っ取り早い。

<body>

<button onclick="buttonClick()">クリック</button>

<scropt>
  function buttonClick() {
    alert('クリックされたよ！');
  }
</script>
</body>

だけど、addEventListenerを使うほうが柔軟で再利用性が高い。

<body>

<button class="button_click">クリック</button>

<script>
  document.querySelector('.button_click').addEventListener("click", function() {
　  alert('クリックされたよ！');
  });
</script>
</body>

どっちも結果は同じ。

JavaScriptのonclickを使う｜addEventListenerメソッドを使ったほうがいいかも

クリックしたらモーダルウィンドウが表示される

alert()表示よりも応用が利くので、自作するほうが断然イイ。デザインに凝りたいのならこちらがおススメ。

ユーザーがクリックしたら、モーダルウィンドウが表示され、クローズボタン又はモーダルウィンドウ外のクリックで閉じる。

下のボタンをクリックしたら、モーダルウィンドウの良さがよく分かる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自作モーダルウィンドウ</title>
  <style>
    body {
      font-family: "Noto Sans JP", sans-serif;
    }
    .modal-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgb(0 0 0 / .5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 999;
    }
    .modal {
      position: relative;
      background: white;
      padding: 20px;
      border-radius: 10px;
      width: 300px;
      box-shadow: 0 4px 10px rgb(0 0 0 / .3);
      text-align: center;
    }
    .close-button {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 50%;
      background: #ccc;
      color: #333;
      font-size: 18px;
      cursor: pointer;
      line-height: 30px;
      text-align: center;
    }
    .open-button {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 8px;
      border: 1px solid #160c28;
    }
  </style>
</head>

<body>
  <!-- モーダルウィンドウ -->
  <div class="modal-overlay" id="modalOverlay">
    <div class="modal" id="modalWindow">
      <button class="close-button" id="closeBtn">&times;</button>
      <h2>お知らせ</h2>
      <p>これが自作モーダルウィンドウです。</p>
    </div>
  </div>

    <!-- モーダルを開くボタン -->
  <button class="open-button" id="openModalBtn">モーダルを開く</button>

  <script>
    const openModalBtn = document.getElementById("openModalBtn");
    const modalOverlay = document.getElementById("modalOverlay");
    const closeBtn = document.getElementById("closeBtn");
    const modalWindow = document.getElementById("modalWindow");

    openModalBtn.addEventListener("click", () => {
      modalOverlay.style.display = "flex";
    });

    closeBtn.addEventListener("click", () => {
      modalOverlay.style.display = "none";
    });

    modalOverlay.addEventListener("click", (e) => {
      // モーダルの外側をクリックしたら閉じる（中身をクリックしても閉じない）
      if (!modalWindow.contains(e.target)) {
        modalOverlay.style.display = "none";
      }
    });
  </script>

</body>
</html>

ユーザーにアクションさせるのではなく、自動でモーダルウィンドウを閉じさせたい場合は、JavaScriptのsetTimeout()を使う。

以下のコードは、3秒後に自動で閉じさせている。この場合はクローズボタンはいらない。

  <script>
    const openModalBtn = document.getElementById("openModalBtn");
    const modalOverlay = document.getElementById("modalOverlay");
    const modalWindow = document.getElementById("modalWindow");

    openModalBtn.addEventListener("click", () => {
      modalOverlay.style.display = "flex";

      // 3秒後に自動で閉じる
      setTimeout(() => {
        modalOverlay.style.display = "none";
      }, 3000); // 3000ミリ秒 = 3秒
    });
  </script>

下のボタンを押すと、モーダルが開き3秒後に閉じる。

デバッグにalert()を使う

一般的にはデバッグでよく使われるのはconsole.log()。

これをalert()に変えてやるとどこでエラーが発生しているのかが分かりやすい。

とくに私みたいに、その道のプロではない人間にとっては。