JavaScriptのalertの使い方を徹底解説！ポップアップでメッセージを表示しよう

はじめに

JavaScriptを学び始めると、最初に出てくる機能のひとつが
「alert（アラート）」です。

Webページを開いたときにメッセージを表示したり、
ボタンを押したときにお知らせを出したりする機能で、
「動きのあるWebページ」を体験する第一歩でもあります。

この記事では、初心者にも分かりやすく
✅ alertの基本的な使い方
✅ 応用的な使い方（変数や関数と組み合わせる）
✅ よくあるエラー・注意点
を図解つきで丁寧に解説します！

alert() は、Webブラウザ上に小さなポップアップウィンドウを表示する関数です。
ユーザーに何かを伝えるときや、動作確認をするときに使います。

📘 基本構文：

alert("メッセージ");

🖥 表示例：

[OK] メッセージが表示されます

シンプルですが、JavaScriptの動きを理解するうえで非常に重要な関数です！

<script>
  alert("こんにちは、JavaScriptの世界へようこそ！");
</script>

💬 実行結果：
ページを開くと、ポップアップが出て「こんにちは、JavaScriptの世界へようこそ！」と表示されます。

<button onclick="alert('ボタンがクリックされました！')">クリックしてね</button>

💡 解説：

👉 Webページに簡単なインタラクション（動き）をつけることができます！

<script>
  let userName = "Taro";
  alert("こんにちは、" + userName + "さん！");
</script>

🖥 出力例：

こんにちは、Taroさん！

💡 解説：

JavaScriptでは、alert()を関数内で使うこともよくあります。

<script>
  function showMessage() {
    alert("ボタンが押されました！");
  }
</script>

<button onclick="showMessage()">メッセージを表示</button>

💡 このように関数化しておくと、複数箇所で使い回すことができます。
開発の現場では、テスト用の確認メッセージとしてもよく利用されます。

alert("1つ目のメッセージ");
alert("2つ目のメッセージ");
alert("3つ目のメッセージ");

このように連続して使うと、ユーザーは何度も「OK」を押さなければいけません。
実際のWebサイトでは、必要最小限に留めるのがポイントです。

alert() は簡単で便利ですが、
実際のWebアプリや企業サイトではほとんど使われません。

なぜなら、

💡 その代わりに、
modal（モーダルウィンドウ）やtoast（トースト通知）などの
カスタムメッセージUIが使われます。

実は、alert()以外にも似た働きをする関数があります👇

if (confirm("本当に削除しますか？")) {
  alert("削除しました！");
} else {
  alert("キャンセルしました！");
}

🖥 出力結果：

初心者がプログラムの動作確認をするときに
「本当にこの部分が実行されているか」をチェックする方法としても使えます👇

function check() {
  alert("この関数が実行されました！");
}
check();

ただし、より便利な方法としては
👉 console.log() を使うほうが一般的です（開発者ツールで確認可能）。

alert()は、JavaScriptで最もシンプルな出力方法です。
初心者が最初に「コードで動きを出す」感覚をつかむのに最適な機能です。