【完全保存版】JavaScriptのalert完全ガイド：使い方と応用テクニック

こんにちは！この記事では、JavaScriptのalert関数について、基本から応用まで徹底的に解説します。初心者の方から、既にJavaScriptを使い慣れている方まで、alertの使い方や注意点、実践的なテクニックを学ぶことができます。

Table of Contents

9. まとめ

alert関数とは

alert関数は、ユーザーにメッセージを表示するためのJavaScriptの組み込み関数です。ブラウザのダイアログボックスを使用して、簡単に情報を伝えることができます。

alert('Hello World！');

alertの基本的な使い方

alert関数の使い方はとてもシンプルです。表示したいメッセージを文字列として関数に渡すだけです。

alert('こんにちは！これはJavaScriptのアラートです。');

ポイント：

• メッセージはシングルクォート ‘ ‘ かダブルクォート ” ” で囲みます。

• 日本語もそのまま表示可能です。

複数行のメッセージを表示する方法

複数行にわたるメッセージを表示したい場合、**\n（改行文字）**を使用します。

alert('こんにちは！\n今日は良い天気ですね。');

実行結果：

こんにちは！
今日は良い天気ですね。

変数を使ったメッセージ表示

変数を使って動的なメッセージを表示することもできます。

let userName = '太郎';
alert('こんにちは、' + userName + 'さん！');

ポイント：

• + 演算子で文字列と変数を連結します。

• 変数内の値がメッセージに反映されます。

テンプレートリテラルを活用する

テンプレートリテラルを使うと、より直感的に文字列と変数を組み合わせることができます。

let userName = '花子';
alert(`こんにちは、${userName}さん！`);

ポイント：

• バッククォート ` で文字列を囲みます。

• ${} の中に変数や式を入れることができます。

alertの使用上の注意点

• ユーザー体験への影響： alertを使用すると、スクリプトの実行が一時停止し、ユーザーの操作が中断されます。頻繁な使用は避けましょう。

• モバイルデバイスでの表示： モバイルブラウザでは表示が不安定になる場合があります。

• デバッグ用途には不向き： デバッグには console.log() の使用をおすすめします。

alert以外のダイアログ関数との比較

confirm関数

ユーザーに 「OK」 と 「キャンセル」 の選択肢を提供します。

if (confirm('本当に削除しますか？')) {
// OKが押された場合の処理
} else {
  // キャンセルが押された場合の処理
}

prompt関数

ユーザーから入力を受け取ります。

let age = prompt('年齢を入力してください：');
alert(`あなたの年齢は${age}歳です。`);

comfirm関数の実践的な使用例

フォーム送信時の確認

<!DOCTYPE html>
<html>
<head>
  <title>フォーム送信確認</title>
  <script>
    function confirmSubmission() {
      return confirm('フォームを送信してもよろしいですか？');
    }
  </script>
</head>
<body>
  <form onsubmit="return confirmSubmission();">
    <label>お名前：<input type="text" name="name"></label>
    <input type="submit" value="送信">
  </form>
</body>
</html>

実行結果：