JavaScript alertの基本から応用まで10選！

はじめに
●JavaScript alertとは
- ○alertの基本概念
●JavaScript alertの使い方
●JavaScript alertの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

JavaScript alertは、ウェブページ上で簡単なポップアップメッセージを表示するための機能です。

ウェブ開発を学ぶ際には、必ずと言っていいほど出会う機能です。

この記事では、JavaScript alertの基本から応用まで、10のサンプルコードを用いて詳しく解説していきます。

●JavaScript alertとは

○alertの基本概念

JavaScript alertは、ブラウザにポップアップメッセージを表示するための機能です。

alertは、ウェブページ上でユーザーに対して注意喚起や情報提供を行う際に使用されます。

●JavaScript alertの使い方

○サンプルコード1：基本的なalertの表示

このコードでは、ページが読み込まれると、自動的にalertを表示する方法を紹介しています。

この例では、”こんにちは！”というメッセージを表示しています。

window.onload = function() {
  alert("こんにちは！");
}

○サンプルコード2：ボタンクリック時のalert

このコードでは、ボタンをクリックした際にalertを表示する方法を紹介しています。

この例では、”ボタンがクリックされました！”というメッセージを表示しています。

<button onclick="showAlert()">クリックしてください</button>
<script>
  function showAlert() {
    alert("ボタンがクリックされました！");
  }
</script>

○サンプルコード3：フォーム入力確認のalert

このコードでは、フォームの入力内容を確認し、alertで表示する方法を紹介しています。

この例では、入力された名前をalertで表示しています。

<form onsubmit="return checkForm()">
  <label>名前: <input type="text" id="name"></label>
  <button type="submit">送信</button>
</form>
<script>
  function checkForm() {
    var name = document.getElementById("name").value;
    alert("入力された名前: " + name);
    return false;
  }
</script>

●JavaScript alertの応用例

○サンプルコード4：カスタムalertの作成

このコードでは、独自のデザインを持ったカスタムalertを作成する方法を紹介しています。

この例では、背景色やボタンデザインがカスタマイズされたalertを表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .custom-alert {
      display: none;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: lightblue;
      border-radius: 5px;
      padding: 20px;
      text-align: center;
    }
    .custom-alert button {
      background-color: white;
      border: 1px solid black;
      border-radius: 5px;
      padding: 5px 10px;
    }
  </style>
</head>
<body>
  <button onclick="showCustomAlert()">カスタムalertを表示</button>
  <div id="customAlert" class="custom-alert">
    <p>これはカスタムalertです。</p>
    <button onclick="hideCustomAlert()">閉じる</button>
  </div>
  <script>
    function showCustomAlert() {
      document.getElementById("customAlert").style.display = "block";
    }
    function hideCustomAlert() {
      document.getElementById("customAlert").style.display = "none";
    }
  </script>
</body>
</html>

○サンプルコード5：タイマーでalertを表示

このコードでは、一定時間後にalertを表示する方法を紹介しています。

この例では、3秒後に”時間が経ちました！”というメッセージを表示しています。

setTimeout(function() {
  alert("時間が経ちました！");
}, 3000);

○サンプルコード6：条件付きでalertを表示

このコードでは、条件を満たす場合にのみalertを表示する方法を紹介しています。

この例では、ユーザーが入力した数字が偶数の場合に、”偶数です！”というメッセージを表示しています。

<input type="number" id="number" placeholder="数字を入力">
<button onclick="checkNumber()">チェック</button>
<script>
  function checkNumber() {
    var number = document.getElementById("number").value;
    if (number % 2 === 0) {
      alert("偶数です！");
    }
  }
</script>

○サンプルコード7：alertのデザイン変更

このコードでは、alertのデザインを変更する方法を紹介しています。

この例では、SweetAlert2という外部ライブラリを使用して、デザインが変更されたalertを表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
  <button onclick="showStyledAlert()">デザイン変更したalertを表示</button>
  <script>
    function showStyledAlert() {
      Swal.fire("これはデザイン変更したalertです！");
    }
  </script>
</body>
</html>

○サンプルコード8：複数のalert表示

このコードでは、連続して複数のalertを表示する方法を紹介しています。

この例では、ボタンをクリックすると、3つのalertが順番に表示されます。

<button onclick="showMultipleAlerts()">複数のalertを表示</button>
<script>
  function showMultipleAlerts() {
    alert("1つ目のalert");
    alert("2つ目のalert");
    alert("3つ目のalert");
  }
</script>

○サンプルコード9：alertでの選択肢提示

このコードでは、alertを使ってユーザーに選択肢を提示する方法を紹介しています。

この例では、confirm関数を使用し、ユーザーが「はい」か「いいえ」を選択できるようにしています。

if (confirm("このページを離れますか？")) {
  alert("はいが選択されました。");
} else {
  alert("いいえが選択されました。");
}

○サンプルコード10：alertと関数連携

このコードでは、alertと他の関数と連携させる方法を紹介しています。

この例では、alertでユーザーからの入力を受け取り、その入力内容に応じて関数が実行されるようにしています。

<input type="text" id="userName" placeholder="名前を入力">
<button onclick="greetUser()">あいさつ</button>
<script>
  function greetUser() {
    var userName = document.getElementById("userName").value;
    var greeting = "こんにちは、" + userName + "さん！";
    alert(greeting);
    showGreetingInConsole(greeting);
  }

  function showGreetingInConsole(greeting) {
    console.log(greeting);
  }
</script>