JavaScriptでのalertの基本的な使い方6つ｜類似のメソッドとは？

Javascript
プログラミング言語

公開日時: 2021-03-11 　更新日時: 2022-06-07

この記事でわかること

システム エンジニア: JavaScriptのalertとはそのようなものなのでしょうか。

プロジェクト マネージャー: JavaScriptのalertとは、「OK」ボタン付きのダイアログを表示するためのメソッドです。

JavaScriptのalertとは？

JavaScriptのalertとは、「OK」ボタン付きのダイアログを表示するためのメソッドです。alertメソッドを使用すると、Webブラウザ上で、ユーザーに対するメッセージを表示することができます。

alertのメリット

手軽に利用できることです。
JavaScriptというフロントエンドの言語なので、phpやc#に関係なく記述することができます。

JavaScriptはブラウザ標準で装備されているものなので、スマホ（ios、android）にも対応しています。
そのため、アラートを使っての簡易な内容検証の確認や、画面サンプルとしてメッセージの内容を確認させたいときに使うとよいでしょう。

また、最近は見た目もjQueryのSweetAlertというjQueryプラグインがあるので、それを使って外見をカスタマイズすることができます。

JavaScriptにおけるalertの基本的な使い方6つ

JavaScriptのalertメソッドを使ってダイアログを出すには、以下のように記述します。

alert(ここに表示したいメッセージを入れる);

このように記述すれば、JavaScriptが実行されたタイミングで、表示したいメッセージのダイアログを出すことができます。

1：アラートを表示させる方法

JavaScriptのalertを表示させる場合の方法は以下をscriptタグ内に記述します。


  window.alert(message);

window.alert(message);

正確には上記のように[window.alert]なのですが、JavaScriptでのwindowは省略可能ですので、


  alert(message);

alert(message);

こちらでも同様に動作します。

2：自動的に計算された結果を表示する方法

JavaScriptのalertでは引数に計算式を入れておくことで、自動的に計算された結果を表示する機能があります。

<script>
  alert(2*(3-2+100));
</script>

alert(2*(3-2+100));

</script>

このように、これを使うことでJavaScriptでの計算式を使った場合の結果確認をすることができます。

3：文字列を連結して表示する方法

JavaScriptのalertでは引数に文字列を連結した式を入れておくことで、自動的に文字連結された結果を表示する機能があります。

<script>
  alert("今日は" + "いい天気。");
</script>

alert("今日は" + "いい天気。");

</script>

このように、これを使うことでJavaScriptでの文字列結合を使った場合の結果確認をすることができます。

4：複数行を含む文字列を出力する方法

JavaScriptのalertでは引数に改行文字を入れることで複数行にわたって内容を表示する機能があります。
改行文字は「\n」です。

<script>
  alert("今日は\nいい天気。");
</script>

alert("今日は\nいい天気。");

</script>

このように、改行文字\nを使うことでJavaScriptでのalertで複数行にわたる文字列を表示することができます。

5：配列やオブジェクトの値をalertで出力する方法

JavaScriptのalertでは文字列や変数を表示することができるのですが、配列やオブジェクトは特定の構造の中に1つずつデータを格納していることもあるため工夫が必要です。

<script>
  var arraylist=['赤', '青', '黄色', '緑'];
  for (var i = 0;  i < arraylist.length; i++){
    alert(arraylist[i]);
  }
</script>

var arraylist=['赤', '青', '黄色', '緑'];

for (var i = 0; i < arraylist.length; i++){

alert(arraylist[i]);

}

</script>

このように、配列の添字（0から開始するので注意！）で箇所を指定することで、JavaScriptの配列の中の情報を表示することができます。

オブジェクトの場合も同様に

<script>
  var obj = {name:"田中",place:"Tokyo"};
  alert(obj["name"]);
</script>

var obj = {name:"田中",place:"Tokyo"};

alert(obj["name"]);

</script>

添字にキーを指定することで、JavaScriptのオブジェクトの中の情報を表示することができます。

6：alertを使ったデバッグのやり方

JavaScriptのalertはそれを使ってデバッグを行うこともできます。

<script>
  var a = 1;
  var b = 2;
  function ab(aa,bb){
    alert(aa);
    return aa + bb;
  }
  ab(a,b);
</script>

var a = 1;

var b = 2;

function ab(aa,bb){

alert(aa);

return aa + bb;

}

ab(a,b);

</script>

このように、functionのパラメータにどのような値が受け渡されたのかをalertで確認することができます。
他にもJavaScriptのプログラムの途中で想定していない動きになっているときに、alert()を差し込んで想定通りに動いているかどうかの確認をしながらプログラミングをすることが可能です。

alertメソッドを使ってダイアログを出す方法6つ

JavaScriptのalertメソッドを使ってダイアログを出すには、以下のように記述します。

alert(ここに表示したいメッセージを入れる);

このように記述すれば、JavaScriptが実行されたタイミングで、表示したいメッセージのダイアログを出すことができます。

1：文字列をダイアログに表示する方法

例として、「Hello World!」という文字列をダイアログに出力して表示してみます。この例では、HTML上のscriptタグ内にJavaScriptのコードを記載しています。

<script>
  alert("Hello World!"); //ページを開いた時にダイアログを表示
</script>

alert("Hello World!"); //ページを開いた時にダイアログを表示

</script>

上記の例では、HTMLページを開いたときに「Hello World!」というメッセージがダイアログに表示されます。文字列を表示したい場合は、対象文字列をシングルクォーテーションかダブルクォーテーションで囲むのを忘れないようにしてください。

2：数値をダイアログに表示する方法

alertメソッドのダイアログには、文字列以外にも数値や計算結果など様々な情報を表示することが可能です。例として、1+1の計算結果を表示したい場合は以下のようになります。

<script>
  alert(1 + 1);
</script>

alert(1 + 1);

</script>

上記のように記述すると、ダイアログには1+1の計算結果である「2」が表示されます。

3：変数を使ってダイアログに表示する方法

変数に代入した値をダイアログに出力することも可能です。以下の例では、「message」という変数に「Hello」という文字列を代入し、alertメソッドでダイアログに表示させています。

<script>
  var message = "Hello";
  alert(message);
</script>

var message = "Hello";

alert(message);

</script>

4：現在時刻をダイアログに表示する方法

現在時刻をalertメソッドでダイアログに表示する場合、まず以下のようにして現在の日時を取得する必要があります。

<script>
  var currentDate = new Date();
</script>

var currentDate = new Date();

</script>

上記で取得した現在の日時から、時、分の情報をそれぞれgetHoursメソッド、getMinutesメソッドにより抜き出してダイアログに表示します。実際に現在時刻が表示できるコードの例は以下のようになります。

<script>
  var currentDate = new Date();
  alert("現在時刻は" + currentDate.getHours() + "時" + currentDate.getMinutes() + "分です。");
</script>

var currentDate = new Date();

alert("現在時刻は" + currentDate.getHours() + "時" + currentDate.getMinutes() + "分です。");

</script>

5：ボタンクリックでダイアログを表示する方法

ボタンをクリックした際にダイアログを表示するには、buttonタグのonclick属性に指定した関数内で、alertメソッドを実行させます。


<button onclick="clicked()">ここをクリック</button>
<script>
  function clicked() {
    alert("クリックされました");
  }
</script>

<button onclick="clicked()">ここをクリック</button>

function clicked() {

alert("クリックされました");

}

</script>

上記の例のように記述すると、「ここをクリック」というボタンをクリックした際にalertメソッドが実行され、「クリックされました」というダイアログを表示することができます。

6：マウスオーバーした時にダイアログを表示する方法


<button onmouseover="mouseover()">ここにマウスを乗せる</button>
<script>
  function mouseover() {
    alert("マウスオーバーされました");
  }
</script>

<button onmouseover="mouseover()">ここにマウスを乗せる</button>

function mouseover() {

alert("マウスオーバーされました");

}

</script>

alertメソッド使用時の注意点

ダイアログを表示することができるJavaScriptのalertメソッドですが、このメソッドを使用する際には注意すべき点もあります。alertメソッドを正しく動作させるために、以下に記載の注意点についても理解しておく必要があります。

選択肢は「OK」の1つのみ

alertメソッドを使用して表示されるダイアログ上で、ユーザーが選択できるのは「OK」というボタンのみです。そのため、ユーザー側での応答に「OK」「キャンセル」のような選択肢が必要な場合や、ユーザーによる文字入力を促したい場合は、alertメソッドを使うことはできません。

そういった場合には、alertの代わりにconfirmやpromptを使用します。各メソッドの詳細については後述します。

ダイアログを消すまで他の操作ができなくなる

alertメソッドで表示されるダイアログは、モーダルウィンドウです。つまり、ユーザーはダイアログ上での操作を完了するまで、Webサイトの他の部分を操作することができなくなります。

ユーザーに対して優先的に通知したい内容を、alertメソッドによってダイアログに表示することは効果的な手段です。しかしながら、ユーザーの操作を制限することにもなるため、ダイアログ表示を多用するべきではありません。

alertメソッドと似たメソッド

alertメソッドで表示できるダイアログにおいて、ユーザーが選択できるのは「OK」のみでした。ここでは、「OK」と「キャンセル」の2択をユーザーに選ばせたり、ユーザーがテキストを入力できたりする、alertに類似するメソッドを紹介します。

confirmメソッド

ユーザーの応答として、「OK」と「キャンセル」の2択があるダイアログを出すには、JavaScriptのconfirmメソッドを使用します。confirmの場合も、alertの時と同様に任意のメッセージを表示することができます。

また、confirmを使用した場合は、応答として「OK」(true)と「キャンセル」(false)のどちらが選択されたかを示す真偽値を取得することが可能です。

confirmメソッドの使用方法

confirmメソッドも、基本的な使い方はalertメソッドと同じです。以下のように記述すると、「よろしいですか？」というメッセージ付きのダイアログが表示され、ユーザーは「OK」もしくは「キャンセル」ボタンを選択することができます。

<script>
  var message = "よろしいですか？";
  result = confirm(message);
</script>

var message = "よろしいですか？";

result = confirm(message);

</script>

上記の場合、ユーザーが「OK」と「キャンセル」のどちらを選択したかどうかは、変数resultに格納される真偽値によって判断します。

promptメソッド

JavaScriptのpromptメソッドを使用すると、ユーザーにテキスト入力を促すダイアログを表示できます。promptメソッドで表示されるダイアログには、confirmメソッドの時と同様に、「OK」ボタンと「キャンセル」ボタンが付いています。

promptメソッドの場合、ダイアログに表示するメッセージの他に、必要に応じてテキスト入力フィールドに表示されるデフォルト値も指定することが可能です。

promptメソッドの使用方法

promptメソッドの場合、以下のように、メソッドの引数に表示したいメッセージと入力フィールドのデフォルト値を指定します。ただし、デフォルト値の指定は任意のため、不要な場合は記述しなくても構いません。

<script>
  var message = "テキストを入力してください。";
  var value = "あいうえお";
  result = prompt(message, value);
</script>

var message = "テキストを入力してください。";

var value = "あいうえお";

result = prompt(message, value);

</script>

上記のように記述すると、ユーザーが入力した文字列をresult変数で取得することができます。ユーザーがキャンセルボタンをクリックした場合は、結果としてnullが返却されます。

システム エンジニア: JavaScriptのalertメソッドについてよく理解できました。

プロジェクト マネージャー: alertの類似メソッドであるconfirmやpromptとの使い分けに注意して実践してみましょう。

JavaScriptのalertの使い方を覚えよう

以上、JavaScriptのalertを紹介しました。

特にデバッグのときや、簡易なメッセージ表示などに役立ちます。ただし説明したとおりモーダルウィンドウであるがゆえに、利用者の操作感を損なう可能性もありますので、そのことを念頭に入れて使う箇所を考えながら設計をしたり、プログラミングしていきましょう。

注意することはありますが、手軽にJavaScriptで情報を表示したりすることができる方法ですので、どんどんalertを使っていき有効活用しましょう。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでのalertの基本的な使い方6つ｜類似のメソッドとは？

JavaScriptのalertとは？

alertのメリット

JavaScriptにおけるalertの基本的な使い方6つ

1：アラートを表示させる方法

2：自動的に計算された結果を表示する方法

3：文字列を連結して表示する方法

4：複数行を含む文字列を出力する方法

5：配列やオブジェクトの値をalertで出力する方法

6：alertを使ったデバッグのやり方

alertメソッドを使ってダイアログを出す方法6つ

1：文字列をダイアログに表示する方法

2：数値をダイアログに表示する方法

3：変数を使ってダイアログに表示する方法

4：現在時刻をダイアログに表示する方法

5：ボタンクリックでダイアログを表示する方法

6：マウスオーバーした時にダイアログを表示する方法

alertメソッド使用時の注意点

選択肢は「OK」の1つのみ

ダイアログを消すまで他の操作ができなくなる

alertメソッドと似たメソッド

confirmメソッド

confirmメソッドの使用方法

promptメソッド

promptメソッドの使用方法

JavaScriptのalertの使い方を覚えよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScriptでのalertの基本的な使い方6つ｜類似のメソッドとは？

JavaScriptのalertとは？

alertのメリット

JavaScriptにおけるalertの基本的な使い方6つ

1：アラートを表示させる方法

2：自動的に計算された結果を表示する方法

3：文字列を連結して表示する方法

4：複数行を含む文字列を出力する方法

5：配列やオブジェクトの値をalertで出力する方法

6：alertを使ったデバッグのやり方

alertメソッドを使ってダイアログを出す方法6つ

1：文字列をダイアログに表示する方法

2：数値をダイアログに表示する方法

3：変数を使ってダイアログに表示する方法

4：現在時刻をダイアログに表示する方法

5：ボタンクリックでダイアログを表示する方法

6：マウスオーバーした時にダイアログを表示する方法

alertメソッド使用時の注意点

選択肢は「OK」の1つのみ

ダイアログを消すまで他の操作ができなくなる

alertメソッドと似たメソッド

confirmメソッド

confirmメソッドの使用方法

promptメソッド

promptメソッドの使用方法

JavaScriptのalertの使い方を覚えよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptで文字列を分割する方法は？splitの使い方を紹介

jQueryでのchangeメソッドとは？changeメソッドの使い方について紹介

JavaScriptでのsubstringメソッドを使用した文字列の切り出し方

JavaScriptの基本的な書き方2つ｜できることや勉強方法についても紹介

JavaScriptでのconfirmメソッドの使い方とは？基本的な使い方からBootstrapと組み合わせた活用方法も紹介！