• 1．JavaScriptのalertメソッドとは？
• 2．alertメソッドの使い道
• 3．alertメソッドの基本的な使い方
• 4．アラートの外観はカスタマイズできない
• 5．alertメソッドを使ってデバッグする方法
• 6．アラートが出ない原因
• 7．alertに似たメソッド

今回は、ブラウザ上にポップアップメッセージを表示するalertメソッドについて紹介していきます。

本記事では、

「alertメソッドの使い道」や「alertメソッドの基本的な使い方」

といった基本的な内容から、

「alertメソッドを使ってデバッグする方法」、「アラートが出ない原因」

といった内容まで、初級者エンジニア向けに詳しく解説していきます。

1.     JavaScriptのalertメソッドとは？

alertはJavaScriptの標準機能のメソッドです。

任意のテキストメッセージとOKボタンをブラウザ上にポップアップで表示します。

ユーザーが意図的にブラウザでJavaScriptを停止しない限り、すべてのユーザーにメッセージを表示できるので、重要な通知や注意を促す目的で使用されます。

2．alertメソッドの使い道

alertメソッドは、フォーム入力のミスや未入力に対する通知など、注意を促すメッセージとして使われていました。

しかし近年では、ブラウザのセキュリティ制限やWebデザインの進化に伴い、あまり使用されなくなっています。

最近では、alertメソッドは主にJavaScriptプログラムのデバッグ作業で使用されています。

デバッグ作業とは、プログラムが仕様通りに動作しているかチェックするために、変数の値はどうなっているか、
プログラムのどこを実行しているかを調査し、プログラムの誤り（バグ）を見つけ修正する作業のことです。

デバッグ作業でのalertメソッドの利用方法については後ほど説明します。

3．alertメソッドの基本的な使い方

ここからは、alertメソッドの基本的な使い方を実際のプログラムコードで確認していきましょう。

①基本構文

alertメソッドの基本構文は次の通りです。

alert(画面に表示するメッセージ);

括弧内の引数には、文字列や数値、計算式などを指定できます。

②文字列のメッセージを出力

まずは文字列のメッセージを出力しポップアップを表示させてみましょう。

alert("ポップアップに表示するメッセージ");

実行結果：

このように、alertメソッドの引数へ値を指定するだけで、ポップアップ表示できます。

③数値のメッセージを出力

数値を表示したい場合は、引数に数値をそのまま指定します。

alert(123456789);

実行結果：

引数をシングルクォーテーション等で囲むと、文字列として認識されてしまうので、数値を出力するときは半角数字のみ指定してください。

④文字列と数値を結合してメッセージを出力

文字列と数値を結合するには、”+”（プラス記号）を使います。

alert("今月は" + 9 + "月です。");

実行結果：

このサンプルコードは、文字列の”今月は”に数値の”9”を結合し、さらに”月です。”を結合しているので、”今月は9月です。”と表示されます。

⑤特殊記号を含むメッセージを出力

文字列の中には、ダブルクォテーションやタブなど文字として認識できないものがあります。

このような特殊な文字を文字列の中で表現する場合、エスケープシーケンスを使いましょう。

alert("文字列にダブルクォーテーション\"を表示します。");

実行結果：

エスケープシーケンスは、特殊文字の前に“\”（バックスラッシュ）を付けることで文字列として表現できます。

⑥変数を使ってメッセージを出力

alertメソッドの引数に変数を指定し、メッセージを出力してみましょう。

let today;
let formatdate;
today = new Date();
formatdate = today.getFullYear() + "/" + (today.getMonth()+1) + "/" + today.getDate();
alert("今日は" + formatdate + "です。");

実行結果：

サンプルコードは、システム日付を取得後”yyyy/mm/dd”形式に整形し、alertメソッドの引数に指定しています。

⑦アラート内で改行させる

アラート内で改行するには、”\n”を入力します。

alert("現在の気温は、35°Cです。\n熱中症に注意しましょう。");

実行結果：

実行結果から、アラート内でメッセージが改行されているのがわかりますね。

4．アラートの外観はカスタマイズできない

これまで見てきたように、alertメソッドの外観は少々味気ないものになっているので、
カスタマイズしたいと考える方もいるのではないでしょうか。

残念ですが、alertメソッドの標準機能ではカスタマイズができません。

理由としてalertメソッドは、特定のメッセージをユーザーに確認する用途に特化しているためです。

それでもカスタマイズしたい場合は、CSS・HTMLを利用し独自に一からダイアログを作成する必要があります。

5．alertメソッドを使ってデバッグする方法

先ほども述べましたが、最近ではalertメソッドは主にデバッグ作業で使われています。

ここではデバッグ作業でどのようにalertメソッドが使われているか、サンプルコードで確認していきましょう。

このサンプルコードは、システム日付から2ヶ月後の日付を”yyyy-mm-dd”形式で取得する仕様です。

/システム日付を取得
let date = new Date();
// yyyy/mm/dd形式で表示
let formatdate1 = date.toLocaleDateString();
alert(formatdate1);

//システム日付から2ヶ月後の日付をセット
date.setMonth(date.getMonth() + 2);
//yyyy-mm-dd形式で表示
let formatdate2 = date.getFullYear() + "-" + (date.getMonth()) + "-" + date.getDate();
alert(formatdate2

実行結果：

サンプルコードは、最初のalertメソッドでシステム日付が正しく取得しているか確認し、その次のalertメソッドで2ヶ月後の日付が正しく取得しているかを確認しています。

システム日付は正しく取得できていますが、2ヶ月後の日付は正しく取得できていませんね。

これはgetMonthメソッドの戻り値が0〜11となり、実際の月よりひと月ずれてしまうのが原因です。

正しいコードに修正し、再度確認してみましょう。

//2ヶ月後を計算
date.setMonth(date.getMonth() + 2);
// yyyy-mm-dd形式で表示
// 月を取得する場合getMonth()+1
let formatdate2 = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
alert(formatdate2);

実行結果：

システム日付から2ヶ月後の日付が、正しく表示されているのがわかりますね。

このように、処理の前後や必要な箇所にalertメソッドを差し込んで使用し、効率よくデバッグ作業をしましょう。

6．アラートが出ない原因

ここでは、アラートダイアログが出ない原因を確認していきましょう。

①スペルミス

アラートダイアログが出ない原因のひとつに、コードのスペルミスがあります。

//システム日付を取得
let date = new Date();

//システム日付の2ヶ月後を計算
date.setMonth(date.getMonth() + 2);

//yyyy-mm-dd形式で表示
let formatdate = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
alert(formatdata);

このサンプルコードを実行しても、アラートダイアログは表示されません。

alertメソッドの引数に、宣言していない変数”formatdata”を指定しているのが理由です。


”formatdate”と正しい変数を指定すると、アラートダイアログが表示されます。

このようなスペルミスは、高機能IDEの入力補完機能で防止できます。

開発効率や品質向上のためにも、積極的にIDEを利用しましょう。

②ブラウザのセキュリティ設定

ブラウザのセキュリティ設定で、ポップアップがブロックされていたり、JavaScriptの実行がブロックされていたりすると、アラートダイアログが表示されません。

プログラムコードを見直しても問題を発見できないときは、ブラウザの設定を確認しましょう。

7．alertに似たメソッド

alertに似たメソッドに、confirmメソッドとpromptメソッドがあります。

それぞれ詳しく解説していきます。

①confirmメソッド：「OK」「キャンセル」で分岐

alertメソッドで表示されるダイアログのボタンは”OK”だけですが、confirmメソッドは”OK”と”キャンセル”の2択があります。

confirmメソッドもalertメソッドと同様に、任意のメッセージを表示できます。

またconfirmメソッドは、”OK”(true)、”キャンセル”(false)のどちらかが選択されたかを示す真偽値の取得が可能です。

サンプルコードで確認してみましょう。

let result = confirm("OKとキャンセル、どちらを選びますか？");

alert(result + "が選ばれました。");

実行結果：

“OK”をクリックした場合の結果：

“キャンセル”をクリックした場合の結果：

サンプルコードでは、confirmメソッドの真偽値を変数resultに格納し、alertメソッドで表示しています。

②promptメソッド：入力ボックスを出す

promptメソッドは、ユーザーにテキスト入力可能なダイアログを表示します。

confirmメソッド同様に”OK”、”キャンセル”の2択が可能です。

また、必要に応じてテキスト入力フィールドにデフォルト値を表示できます。

let msg = "郵便番号を入力してください";

//デフォルト値
let defmsg = "000-0000";

let result = prompt(msg,defmsg);

alert(result);

実行結果：

入力フィールドに”123-4567”を入力し、”OK”ボタンをクリックした結果です。

ユーザーが入力した内容を変数resultで取得できます。

“キャンセル”ボタンをクリックした結果は以下の通りです。

キャンセルボタンをクリックすると、変数resultにはnullが格納されます。

※掲載された社名、製品名は、各社の商標及び登録商標です。