はじめに
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>●注意点と対処法
- alertを多用すると、ユーザーの操作が妨げられることがあります。
必要最低限の使用に留めることが望ましいです。 - モバイルデバイスではalertの表示が異なることがあります。
そのため、デバイスごとの表示確認が重要です。 - alertはブロック型の処理であるため、alertが表示されている間、他の処理が停止します。
非同期処理やカスタムダイアログの使用を検討してください。
●カスタマイズ方法
- CSSやJavaScriptを使用して、alertのデザインをカスタマイズできます。
- SweetAlert2などの外部ライブラリを利用することで、より簡単にデザインや機能をカスタマイズできます。
まとめ
alertは、シンプルで手軽にメッセージを表示できる便利な機能です。
ただし、使いすぎるとユーザー体験が損なわれることがあるため、適切な使い方とカスタマイズが重要です。
この記事で紹介したサンプルコードを参考に、alertを効果的に活用してください。
