JavaScriptのalertとは？alertの基本的な使い方から応用まで紹介！

Javascript
プログラミング言語

公開日時: 2021-05-18 　更新日時: 2022-06-06

JavaScriptのalertとは？alertの基本的な使い方から応用まで紹介！

この記事でわかること

システム エンジニア: alertでポップアップを表示させるときに変数メッセージも表示できますか？

プロジェクト マネージャー: もちろんできますよ。表示の際には法則がありますので、しっかりマスターしていきましょう。

JavaScriptのalertとは？

JavaScirptでHTMLページを作っていると、ユーザに向けて目立つメッセージを表示したり、開発中の変数の状態などをデバッグ表示したい時があるのではないでしょうか。そんな時に手軽に使えるのがalertです。

alertはJavaScriptの標準機能のメソッドです。これを使うとブラウザ上にポップアップでメッセージを表示することができます。この記事はalertの使い方をわかりやすく解説しますので、是非ご覧下さい。

alertの基本的な使い方

alertの使い方は簡単です。以下のように「alert(‘メッセージ’)」と記述するだけです。

alert('表示するメッセージ')

1 2	alert('表示するメッセージ')

これで記述したHTMLページをブラウザで表示すると、メッセージ付きのポップアップウィンドウが表示されます。OKボタンを押せば消えます。

なおalertは本来はJavaScriptのWindowオブジェクトのメソッドです。それを省略せずに以下のように記述しても同じ結果になります。

window.alert('アラートのメッセージ')

1 2	window.alert('アラートのメッセージ')

alertの使い方の応用

JavaScriptのalertは以下のように数字を表示することもできます。

alert(123)

1 2	alert(123)

また以下のように変数の内容も表示できます。開発中のデバッグでも役立つでしょう。

var test = "テストメッセージ";
alert(test);

var test = "テストメッセージ";

alert(test);

このように計算結果の表示もできます。これを実行すると11が表示されます。

var val = 3;
alert(val * 3 + 2);

var val = 3;

alert(val * 3 + 2);

改行の使い方

改行をしたい場合は、以下のように\nで改行できます。
alert(‘あいうえお\nかきくけこ’);

あいうえお
かきくけこ

のように\nの位置で改行して表示されます。

また以下のように`（バッククオート）で文字列を囲めば、\nを使わずに文字列の中で改行した位置でそのまま改行されます。

alert(`あいうえお
かきくけこ`);

alert(`あいうえお

かきくけこ`);

基本的にJavaScirptの文字列で出来ることは、alertで出来ると考えて問題ありません。

配列変数の扱い方

JavaScriptのalertは配列変数を表示することもできます。

var ary = ['太郎', '次郎', '花子'];
alert(ary);

var ary = ['太郎', '次郎', '花子'];

alert(ary);

実行すると、ポップアップに「太郎,次郎,花子」と表示されます。

また以下のようにループ処理で次々に表示することもできます。

var ary = ['太郎', '次郎', '花子'];
ary.forEach(function(str) {
    alert(str);
});

var ary = ['太郎', '次郎', '花子'];

ary.forEach(function(str) {

alert(str);

});

実行すると、太郎・次郎・花子と3回ポップアップが表示されます。

JavaScriptのオブジェクトを使っても同じことが出来ます。

var object = {name1:'太郎', name2:'次郎', name3:'花子'};
for(var property in object) {
    alert(object[property]);
}

var object = {name1:'太郎', name2:'次郎', name3:'花子'};

for(var property in object) {

alert(object[property]);

}

for（変数 in オブジェクト）で変数にプロパティ名、ここではname1・name2・name3が入るので、オブジェクト[プロパティ名]で中身を取得できるというわけです。

alertの具体的な使い方

JavaScriptのalertは実際にどのように使えばいいのでしょうか。以下のような使い方をすることが一般的です。

<button onclick="click_event()">クリック！</button> 
<script>
    function click_event() {
        alert('クリックサンキュー！');
    }
</script>

function click_event() {

alert('クリックサンキュー！');

}

</script>

これをブラウザで実行するとボタンが表示されます。ボタンをクリックするとメッセージが表示されたポップアップが出ます。

alertの現在の主な使い道

JavaScriptのalertの上のような使い方は昔は多かったのですが、最近はあまり見られなくなりました。今はWebのデザインが進化して、alertのポップアップを使用することが無くなってきたのです。

最近ではalertの使い道はJavaScriptのプログラムのデバッグ用が主になってきています。デバッグ用とは、JavaScriptを実行中にどこを通っているか、変数の内容はどうなっているかをチェックするための使い道の事です。

alertは一時停止できる

JavaScriptのデバッグはconsole.logを使用するのが普通だと思う人もいるでしょう。しかしalertにはconsole.logにはないメリットがあります。それはalertのポップアップが出ている間、JavaScriptの動作を一時停止できることです。

例えば以下のようなコードはループの途中で止めることができます。console.logに変数の内容を出力した場合は、最後まで実行されてしまいます。

for(var i = 0; i < 10; i++) {
    var multi = i * i;
    if (multi == 36) {
        alert('multi is ' + multi + '\ni is ' + i);
    }
}

for(var i = 0; i < 10; i++) {

var multi = i * i;

if (multi == 36) {

alert('multi is ' + multi + '\ni is ' + i);

}

console.logの使い方

JavaScriptのconsole.logの使い方も説明しましょう。以下のコードをブラウザで実行してください。

for(var i = 0; i < 10; i++) {
    var multi = i * i;
    if (multi == 36) {
        console.log('multi is ' + multi + '\ni is ' + i);
    }
}

for(var i = 0; i < 10; i++) {

var multi = i * i;

if (multi == 36) {

console.log('multi is ' + multi + '\ni is ' + i);

}

alertと違って何も起きません。ブラウザがGoogle Chromeの場合、右クリックをして「検証」を選択しましょう。DevToolsが起動します。それのConsoleタブを選択します。すると console.logの内容が表示されます。

このように最後まで実行された後に確認するのでよければ、 console.logを使用すれば問題ありません。動作確認中にポップアップが出ると困る場合もあるでしょう。

OKかキャンセルを選べるダイアログ

次はalertに似た機能を解説します。以下を実行すると、OKとキャンセルのボタンがついたダイアログが表示されます。

var result = confirm('OKかキャンセルか？');
if (result) {
    alert('OKです。');
} else {
    alert('キャンセルです。');
}

var result = confirm('OKかキャンセルか？');

if (result) {

alert('OKです。');

} else {

alert('キャンセルです。');

}

confirmメソッドの戻り値をresultという変数にいれています。OKが押されたらtrue、キャンセルが押されたらfalseが戻ります。その結果をalertで表示しています。

文字入力ができるダイアログ

文字を入力できるダイアログもあります。

var str = prompt('名前を入力してください');
if (str != null) {
    alert('あなたの名前は' + str + 'です。');
} else {
    alert('キャンセルしました。');
}

var str = prompt('名前を入力してください');

if (str != null) {

alert('あなたの名前は' + str + 'です。');

} else {

alert('キャンセルしました。');

}

promptメソッドのダイアログは文字入力を要求します。ボタンはOKとキャンセルがありますが、キャンセルが押された場合は入力内容に関わらず、結果はnullになります。OKの場合は入力結果を取得できます。

見栄えの良いポップアップ

ここまで見て来て、alertで出るポップアップがあまり見栄えが良くないと感じる人もいるでしょう。SweetAlertというオシャレなポップアップもあります。まずheadタグ内に以下を記述します。

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>

そしてbodyタグ内のscriptタグ内に以下を記述してください。

Swal.fire('お洒落なアラート','どうですか？','success')

Swal.fire('お洒落なアラート','どうですか？','success')

とても見栄えの良いポップアップが出てきましたね。successの所は他にwarning, error, info,questionを記述できてそれぞれ違ったアイコンが表示されます。是非試してみてください。

システム エンジニア: ポップアップ表示の際にJavaScriptの動きを一時停止することもできるのですね。

プロジェクト マネージャー: 非常に便利なメソッドですが、ダイアログがカスタマイズできません。その部分も理解して積極的に他の言語もマスターしていきましょう。

JavaScriptのalertは手軽に使える

JavaScriptのalertを解説しましたが、ご理解頂けましたでしょうか。

デバッグの時に手軽に使えて便利です。是非活用してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScriptのalertとは？alertの基本的な使い方から応用まで紹介！

JavaScriptのalertとは？

alertの基本的な使い方

alertの使い方の応用

改行の使い方

配列変数の扱い方

alertの具体的な使い方

alertの現在の主な使い道

alertは一時停止できる

console.logの使い方

OKかキャンセルを選べるダイアログ

文字入力ができるダイアログ

見栄えの良いポップアップ

JavaScriptのalertは手軽に使える

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

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

充実した研修制度

資格取得を応援

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

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

新着案件New Job

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

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

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

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

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

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

JavaScriptのalertとは？alertの基本的な使い方から応用まで紹介！

JavaScriptのalertとは？

alertの基本的な使い方

alertの使い方の応用

改行の使い方

配列変数の扱い方

alertの具体的な使い方

alertの現在の主な使い道

alertは一時停止できる

console.logの使い方

OKかキャンセルを選べるダイアログ

文字入力ができるダイアログ

見栄えの良いポップアップ

JavaScriptのalertは手軽に使える

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

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

充実した研修制度

資格取得を応援

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

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

新着案件New Job

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

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

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

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

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

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

関連記事Related Posts

jQueryでのcheckboxのcheckedの扱い方を紹介！checkedを使いこなそう

JavaScriptのスクリプトエラーの種類とその対策｜エラーハンドリング

JavaScriptのifについて初歩から解説！if文の基本的な使い方から応用について紹介

JavaScriptのconsole.logとは？console.logの使い方を基本から解説します！

LaravelでVue.jsを利用する方法を解説｜LaravelにおけるVue.jsのセットアップの仕方や使い方