JavaScriptでのalertの基本的な使い方6つ｜類似のメソッドとは？
- システム
エンジニア - 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タグ内に記述します。
|
1
2
3
|
window.alert(message);
|
|
1
2
3
|
alert(message);
|
2：自動的に計算された結果を表示する方法
JavaScriptのalertでは引数に計算式を入れておくことで、自動的に計算された結果を表示する機能があります。
|
1
2
3
4
|
<script>
alert(2*(3-2+100));
</script>
|
このように、これを使うことでJavaScriptでの計算式を使った場合の結果確認をすることができます。
3：文字列を連結して表示する方法
JavaScriptのalertでは引数に文字列を連結した式を入れておくことで、自動的に文字連結された結果を表示する機能があります。
|
1
2
3
4
|
<script>
alert("今日は" + "いい天気。");
</script>
|
このように、これを使うことでJavaScriptでの文字列結合を使った場合の結果確認をすることができます。
4：複数行を含む文字列を出力する方法
JavaScriptのalertでは引数に改行文字を入れることで複数行にわたって内容を表示する機能があります。
改行文字は「\n」です。
|
1
2
3
4
|
<script>
alert("今日は\nいい天気。");
</script>
|
このように、改行文字\nを使うことでJavaScriptでのalertで複数行にわたる文字列を表示することができます。
5：配列やオブジェクトの値をalertで出力する方法
JavaScriptのalertでは文字列や変数を表示することができるのですが、配列やオブジェクトは特定の構造の中に1つずつデータを格納していることもあるため工夫が必要です。
|
1
2
3
4
5
6
7
|
<script>
var arraylist=['赤', '青', '黄色', '緑'];
for (var i = 0; i < arraylist.length; i++){
alert(arraylist[i]);
}
</script>
|
オブジェクトの場合も同様に
|
1
2
3
4
5
|
<script>
var obj = {name:"田中",place:"Tokyo"};
alert(obj["name"]);
</script>
|
添字にキーを指定することで、JavaScriptのオブジェクトの中の情報を表示することができます。
6：alertを使ったデバッグのやり方
JavaScriptのalertはそれを使ってデバッグを行うこともできます。
|
1
2
3
4
5
6
7
8
9
10
|
<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のコードを記載しています。
|
1
2
3
4
|
<script>
alert("Hello World!"); //ページを開いた時にダイアログを表示
</script>
|
上記の例では、HTMLページを開いたときに「Hello World!」というメッセージがダイアログに表示されます。文字列を表示したい場合は、対象文字列をシングルクォーテーションかダブルクォーテーションで囲むのを忘れないようにしてください。
2：数値をダイアログに表示する方法
alertメソッドのダイアログには、文字列以外にも数値や計算結果など様々な情報を表示することが可能です。例として、1+1の計算結果を表示したい場合は以下のようになります。
|
1
2
3
4
|
<script>
alert(1 + 1);
</script>
|
上記のように記述すると、ダイアログには1+1の計算結果である「2」が表示されます。
3：変数を使ってダイアログに表示する方法
変数に代入した値をダイアログに出力することも可能です。以下の例では、「message」という変数に「Hello」という文字列を代入し、alertメソッドでダイアログに表示させています。
|
1
2
3
4
5
|
<script>
var message = "Hello";
alert(message);
</script>
|
4：現在時刻をダイアログに表示する方法
現在時刻をalertメソッドでダイアログに表示する場合、まず以下のようにして現在の日時を取得する必要があります。
|
1
2
3
4
|
<script>
var currentDate = new Date();
</script>
|
上記で取得した現在の日時から、時、分の情報をそれぞれgetHoursメソッド、getMinutesメソッドにより抜き出してダイアログに表示します。実際に現在時刻が表示できるコードの例は以下のようになります。
|
1
2
3
4
5
|
<script>
var currentDate = new Date();
alert("現在時刻は" + currentDate.getHours() + "時" + currentDate.getMinutes() + "分です。");
</script>
|
5：ボタンクリックでダイアログを表示する方法
ボタンをクリックした際にダイアログを表示するには、buttonタグのonclick属性に指定した関数内で、alertメソッドを実行させます。
|
1
2
3
4
5
6
7
8
|
<button onclick="clicked()">ここをクリック</button>
<script>
function clicked() {
alert("クリックされました");
}
</script>
|
上記の例のように記述すると、「ここをクリック」というボタンをクリックした際にalertメソッドが実行され、「クリックされました」というダイアログを表示することができます。
6：マウスオーバーした時にダイアログを表示する方法
|
1
2
3
4
5
6
7
8
|
<button onmouseover="mouseover()">ここにマウスを乗せる</button>
<script>
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」もしくは「キャンセル」ボタンを選択することができます。
|
1
2
3
4
5
|
<script>
var message = "よろしいですか？";
result = confirm(message);
</script>
|
上記の場合、ユーザーが「OK」と「キャンセル」のどちらを選択したかどうかは、変数resultに格納される真偽値によって判断します。
promptメソッド
JavaScriptのpromptメソッドを使用すると、ユーザーにテキスト入力を促すダイアログを表示できます。promptメソッドで表示されるダイアログには、confirmメソッドの時と同様に、「OK」ボタンと「キャンセル」ボタンが付いています。
promptメソッドの場合、ダイアログに表示するメッセージの他に、必要に応じてテキスト入力フィールドに表示されるデフォルト値も指定することが可能です。
promptメソッドの使用方法
promptメソッドの場合、以下のように、メソッドの引数に表示したいメッセージと入力フィールドのデフォルト値を指定します。ただし、デフォルト値の指定は任意のため、不要な場合は記述しなくても構いません。
|
1
2
3
4
5
6
|
<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。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
JavaScriptで文字列を分割する方法は？splitの使い方を紹介
JavaScriptで文字列を分割するには？ JavaScriptで文字列を分割するにはsplit関数を用います。 split関数では文字列を分割して配列に格納します。 split関数を扱う上では正規表現というものの知識 […]
-
jQueryでのchangeメソッドとは？changeメソッドの使い方について紹介
jQueryでのchangeメソッドの使い方とは？ 今回は、jQueryでのchangeメソッドの使い方について説明します。changeメソッドを利用すれば、値変更時のリアルタイム反映ができます。 ここでは、「textボ […]
-
JavaScriptでのsubstringメソッドを使用した文字列の切り出し方
JavaScriptでのsubstringメソッドの使い方とは？ 今回は、JavaScriptでのsubstringメソッドを使用した文字列の切り出し方について説明します。 文字列から必要な部分のみを切り出すことはよくあ […]
-
JavaScriptの基本的な書き方2つ｜できることや勉強方法についても紹介
JavaScriptでできること7選 はじめに、JavaScriptでできることを7つ紹介します。画像の拡大、Googleマップの組み込み、アクセス分析サービス、送信前の記入漏れチェック、メイン画像の画面スペースで多くの […]
-
JavaScriptでのconfirmメソッドの使い方とは？基本的な使い方からBootstrapと組み合わせた活用方法も紹介！
JavaScriptでのconfirmメソッドの使い方とは？ 今回は、JavaScriptでのconfirmメソッドの使い方について説明します。confirmメソッドを使うと、確認ダイアログボックスが表示されます。ボタン […]
