JavaScript

アラートメッセージを表示する

  1. 最終更新日:
  2. 公開日:

ブラウザのアラートメッセージを表示する方法について解説します。

この記事のポイント

  • 伝えたいメッセージを分かりやすく表示する
  • 開発・検証時にスマホ/タブレットなどブラウザのコンソール(開発ツール)が使えないときも変数の値を確認できる

ポップアップでメッセージを表示する

ページにアクセスした人に強めに伝えたいメッセージがあるときはalertメソッドを使うとポップアップ表示することができます。

アラートの表示例
アラートの表示例

alertメソッドは次のようにテキストを渡して表示します。

CSSは次のようになります。

JavaScript コード例

<!DOCTYPE html>
  <html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Test Script</title>
    <script>
      window.addEventListener('load', (event) => {
        alert("現在メンテナンス中です。\nメンテナンスは2020年4月1日 18:00に完了予定を予定しています。");
      });
    </script>
  </head>
  <body>
  <h1>JS Test</h1>
  </body>
</html>

メソッドに渡すテキストにHTMLタグは使用できないため、改行は改行コード(\n)を使います。
リンクや画像表示などもできません。

また、メッセージの表示形式はブラウザによって異なります。

IE11のアラート表示例
IE11のアラート表示例
Safariのアラート表示例
Safariのアラート表示例

スマホやタブレットなど開発用コンソールが表示できない環境では、変数の値を出力するなどデバッグ用途でも使用することがあります。

開発・検証時に変数の値を確認する手段としても使用できる
開発・検証時に変数の値を確認する手段としても使用できる

記事一覧

関連記事