JavaScript alertとは？できることや使い方も紹介

「JavaScript alertってどうやって使えばいいの？」
「JavaScript alertができることってなに？」
「JavaScript alertの注意点を知りたい！」

この記事に訪れたあなたはこのような悩みを持っていませんか？

JavaScript alertは画面上にOKボタンのあるメッセージボックスを表示させます。しかし、メッセージボックスの表示は一体何に使うのかわからないですよね。

ただ表示するだけなので、「できることって表示だけしかないのかな…」と思う方もいるでしょう。

しかし、alertにはJavaScriptを学習するあなたにとって、便利な役割を果たしてくれる機能があるんですよ。

そこで今回は、JavaScript alertの使い方や注意点について紹介！どうやって使うのか、できることは何かをサンプルコードと合わせて解説します。

具体的な内容は以下の通りです。

JavaScript alertとは？
JavaScript alertでできること
JavaScript alertに似た機能
JavaScript alertの使い方
JavaScript alertの注意点
JavaScript alertを学習する方法

この記事を読めば、alertの使い方や便利性についてわかるようになりますよ。

JavaScript alertとは？

JavaScript alertは、ユーザーに警告や確認を促したり、どこかでエラーが起きていないかを確認したりするときに使われるものです。

インターネットを使っていると、以下の画像のようなものをよく目にしませんか？

上記のような画像はalert関数で簡単に作れてしまいます。以下のコードでどのように使われるか見てみましょう。

alert("アラート");

alert関数を記述し、中に表示させる文章を書けば終わりです。実行すると先ほどの画像の通りに表示されました。とても簡単ですね。

alertはこのような使い方しかできませんが、デバッグ作業(コード内のエラーチェック)ではとても役に立ちます。

通常JavaScriptはconsole.logというものを使って変数の中身を調べ、表示がおかしくなっていないか、エラーが起きていないか確認しますよね。

一方alertならエラーが起きてしまっていても、途中のalertまではしっかりと実行してくれるんです。

つまりサイトが上手く表示されない場合には、alertを使ってどこにエラーがあるのかを探せるんですね。

はじめてサイトを作る初心者は、alertを使うとデバッグ作業が効率よく進みますよ。

JavaScript alertでできること

JavaScript alertは画面にアラート文として、指定した文字を表示できました。では細かく見るとどのようなことができるのでしょうか？

alertは文を指定して表示する以外にも、以下のようなことができます。

変数を入れて表示できる
改行して表示できる
配列にある要素を表示できる

それぞれサンプルコードを見ながら、どのように動いているのか見ていきましょう。

変数を入れて表示できる

alertは文を変数に入れて表示できます。以下のコードを見てみましょう。変数textに「こんにちは」を入れて、alertで変数textを表示させています。

let text = "こんにちは";
alert(text);

実行画面を見ると、しっかりと変数textに入れてある文が表示されていますね。

表示させる文は文字列や数列が混ざっていても問題ありません。「10時20分」のような文字と数字が含まれる文を表示させたいときは、結合することで作れます。

let hour = 10;
let minutes = 20;
alert(hour+"時"+minutes+"分");

変数を入れて表示する方法は、デバッグ作業で良く使われます。エラーチェックが手早く進むように使い慣れておくといいでしょう。

改行して表示できる

文が長くなると、「複数行にして見やすくしたいな…」と思いませんか？複数行で表示するためには改行が必要ですが、\nを文の中に入れると改行してくれます。

let text = "おはようございます\n今日はいい天気ですね。";
alert(text);

実行画面では、改行コード\nを書いた場所で改行してくれていますね。

\nというのはエスケープシーケンスというもので、エスケープ文字「¥」を使って改行などの特殊文字を記述できます。

以下のサイトで様々な種類のエスケープシーケンスが紹介してありますので、ぜひ参考にしてみてください。

参考文字列にエスケープ文字を埋め込むには？［C#／VB／WPF］atmarkit

配列にある要素を表示できる

変数を入れて表示できるなら、配列にある要素も表示できそうですね。以下のコードを見てみましょう。

リストにある要素を1つずつ出力するためにfor文を使って、順番に表示させます。

let list = ["リンゴ","オレンジ","モモ","ブドウ","バナナ"];
for(let i=0; i<5; i++){
alert(list[i]);
}

実行画面を見ると、最初にリンゴという文字がアラート文として表示されました。そしてＯＫというボタンを押してみると、オレンジ、モモ、…というように、リストの要素が順番に表示されていますね。

配列にある要素を順番に出力する方法は、デバッグ作業にとても有効です。例えば繰り返し処理の途中でエラーが起きていないかを確認したいとき、for文にalertして変数を出力してみます。

すると正常に動いている部分まではalertが実行されますよね。しかしエラーが起きてしまう部分では、alertが実行されなくなります。

つまりエラーが起きる部分がわかるので、わかりづらい繰り返しのエラーもすぐに見つけられるんですね。

JavaScript alertに似た機能

alertはデバッグ作業などに使えることがわかりましたね。しかしalertを使っているとユーザー側が操作するような表示も欲しくなりますよね。

「yesかnoを選択するような表示が欲しい！」
「文字を入力してもらうような表示が欲しい！」

これらの悩みを持つ人もいませんか？実は、これらの悩みはalertでは解決することはできないんですね。しかし似たような機能があり、上記の悩みを解決してくれますよ。

alert以外の似た機能には以下の2つがあります。

confirm
prompt

それぞれサンプルコードを載せてどのように動いているのか見ていきましょう。

confirm

confirmはalertと同じように画面上に出てくる表示形式のものですが、alertと違ってOKとキャンセルの二つのボタンがあります。

つまりyesとnoの二択を選択できる機能が付けられるわけなんですね。

let text = "confirmのサンプル画像";
window.confirm(text);

実行画面を見ると、OKボタンともう一つ新しくキャンセルボタンが追加されているのがわかりましたね。

次にOKボタンを押したときの処理と、キャンセルボタンを押したときの処理をしてみましょう。

confirmはOK ボタンを押すとtrueが、キャンセルボタンを押すとfalseが戻り値として返ってきます。これを利用して、それぞれのボタンを押したときの処理をしてみましょう。

let text = "confirmのサンプル画像";
let flag = window.confirm(text);

if(flag){
　alert("OKされました。");
}else{
　alert("キャンセルされました。");
}

上記のコードのポイントはconfirmjの結果を変数に代入しています。trueかfalseが変数に代入されるので、そのあとの条件でどちらかを押したときの処理ができるんです。

実行すると先ほどと同じように「confirmのサンプル画像」という表示が出ました。そしてOKボタンを押すと、「OKされました。」という表示が出ましたね。

逆にキャンセルボタンを押すと、「キャンセルされました。」という表示が出ます。

confirmはユーザーに警告を促す時に良く使われますね。特定の操作に対してもう一度確認させたい場合にはconfirmが有効になるでしょう。

prompt

promptはconfirmのOKボタンとキャンセルボタンの他に文字を入力する欄があるのが特徴です。

「文字を入力してもらいたいな…」という場面にはpromptを使いましょう。

let text = "promptのサンプル画像";
prompt(text);

promptも結果を変数に代入して、それに沿った処理ができます。confirmと違うのは、trueかfalseで返ってきません。

代わりに文字を入力してOKボタンを押した場合は、その文字が結果として返ってきます。また何も入力しなかったりキャンセルボタンを押したりするとヌル文字が返ってくるんですね。

promptも条件分岐してあげることで、特定の文字を入力したときに処理してくれるようなコードが書けますよ。

let text = "ユーザー名を登録してください。";
let result = prompt(text);

if(result){
　alert(result+"さんこんにちは");
}else{
alert("ユーザー名が登録されませんでした。");
}

実行すると、「ユーザー名を登録してください。」という文が表示されます。テキストボックスに文字を入力してOKボタンを押すと、入力したユーザー名が表示されましたね。

一方キャンセルボタンを押すと「ユーザー名が登録されませんでした。」と表示されました。

このようにpromptはユーザー名などを登録する場合に良く用いられます。confirmもpromptもサイトを作るうえで必要になってきますから覚えておくといいですね。

JavaScript alertの使い方

ここまでalertや他の機能について使い方を解説してきました。次はalertを使いこなせるように実戦で使って行きましょう。

「どうやってコードを書けばいいのかわからない…」という人は、サンプルコードを見てどのように動いているのかじっくり考えてみてくださいね。

使用例1：簡単な計算をさせる

alertは変数を使わなくても、計算式を計算して表示できます。まずは長方形の面積を求めて、以下のような画像を表示してみましょう。

長方形の面積は縦の長さと横の長さを掛けると求められましたね。また文字列の部分は結合してつなげておきましょう。

これらを踏まえて作成したコードが以下になります。

alert("横4cm、縦5cmの長方形の面積は"+ 4*5 +"㎠");

上記のコードのように「4*5」と記述することで、長方形の面積を求められるんですね。

計算した結果の変数が今後使うことが無い場合は、このように記述してコードをすっきりさせる方がいいでしょう。

使用例2：「”」を表示させる

次は以下のような画像を表示してみます。

「”」を表示させたいと思ったとき、あなたは「alert(“この問題の解き方はとても”シンプル”です”)」のようなコードを思い浮かべたのではないでしょうか？

しかし実際に実行してみると、何も表示されませんでした。文字列を表示させるためには「”」で括る必要がありますが、文字列にも「”」を入れてしまうと、エラーになってしまうんですね。

ではどのようにすればいいのでしょうか？以下のコードを見ていきましょう。

alert('この問題の解き方はとても"シンプル"です');

文字列を「’」で括ってしまえば、途中で「”」を入れてもしっかりと表示されるんですね。このように使う文字によって、文字列を括る文字を変えるといいでしょう。

またエスケープシーケンスによって表示する方法もありますよ。

alert("この問題の解き方はとても\"シンプル\"です");

\”を入れると文字列として表示してくれます。文字列に「’」と「”」を使いたいときにこの方法が使えそうですね。

使用例3：正しい文をクリックすると「正解！」を表示させる

次は以下のような画像を表示させていきましょう。問題となる文と選択肢とボタンを用意して、正しい文を選んでボタンを押したときに「正解！」というアラート文を表示させます。

選択肢の内容によって正解を表示させるので、条件分岐をしてあげればよさそうですね。

またアラート文が表示されるのはボタンを押したときなので、ボタンを押したときの処理に書けばいいでしょう。

これらを踏まえて作成したのが以下のコードになります。

<p>朝の挨拶はどれ?</p>
<select name=’quiz' id="quiz">
 <option value='1' selected>こんにちは</option>
 <option value='2'>おはよう</option>
 <option value='3'>こんばんは</option>
 <option value='4'>おやすみなさい</option>
</select>
<input type="button" value="answer" onclick="OnButtonClick();"/>
<script>
 function OnButtonClick() {
  let ans = document.getElementById("quiz");
  if(ans.value == 2){
alert("正解！");
}else{
alert("不正解…");
　}
 }
</script>

まずはｐタグで問題文を記述して、selectタグとinputタグで選択肢とボタンを表示させていますね。

JavaScriptの部分を見ると、OnButtonClickという関数があります。OnButtonClick関数はボタンをクリックしたときに処理される関数で、選択肢の内容を受け取って正解を判断しているんですね。

選択肢の内容はselectタグ内のoptionタグで設定しているvalueで、どの選択肢なのかを判別しています。valueはOnButtonClick関数でGetElementByIdによって取得されているんです。

そのため関数内で正しい文かどうかを判別できるわけなんですね。