JavaScriptのalertの使い方を初心者向けに詳しく解説!メッセージの表示方法から活用例まで

当サイトでは一部リンクに広告が含まれています
アイキャッチ

Webサイトを閲覧中に、突然現れるポップアップメッセージ。JavaScriptのalertメソッドを使うと、こうしたメッセージボックスを簡単に表示できます。

しかし、alertを使うのは慣れないと難しいもの。どんな風に書けばいいの?どんなことができるの?と疑問に思う方も多いはず。

実はalertメソッドは、初心者でも簡単に使えるとても便利な機能なんです。今回の記事では、次のような内容でalertの使い方を初心者向けに詳しく解説していきます。

  • alertとは何か?
  • alertの基本的な使い方
  • alertで表示できる内容
  • 確認ダイアログのconfirm
  • 入力を受け付けるprompt
  • alertを使ったデバッグ方法

記事を読めば、alertの使い方が身につき、さまざまな場面で活用できるようになります。ぜひ最後まで読んで、JavaScriptのalertをマスターしましょう!

目次

alertとは?

alertとは、ブラウザ上にメッセージボックスを表示するための機能です。

ユーザーに対して何か伝えたいことがある時や、注意を促したい時などに使われます。
例えば、以下のようなメッセージボックスを見たことがある人も多いのではないでしょうか。

alertで表示されるメッセージボックスは、以下のような特徴があります。

  • メッセージとOKボタンが表示される
  • OKボタンを押すまで処理が止まる
  • カスタマイズはできない(ライブラリを使えば可能)

こうした特徴から、alertは重要なメッセージを目立たせて伝えたい時などに適しています。

ただし、alertの乱用は避けましょう。
alertが表示されている間は他の操作ができなくなるため、ユーザーを不快にさせてしまう恐れがあります。適切なタイミングで使うことが大切です。

alertの使い方

それでは、alertの具体的な使い方を見ていきましょう。まずは書き方の基本から解説します。

alert()の書き方

alertメソッドは次のように書きます。

alert(表示したい文字列や数値など);

alert()()の中に、表示したい内容を書きます。これだけでメッセージボックスを表示できます。

文字列を表示する

文字列を表示するには、'' (シングルクォーテーション)か""(ダブルクォーテーション)で文字列を囲みます。

alert('こんにちは!');
alert("Hello!");

数値を表示する

数値の場合は、''""は不要です。そのまま数値を書きます。

alert(123);

計算結果を表示する

計算式を書くと、計算結果を表示してくれます。

alert(10 + 5);  //15と表示される

文字列を連結して表示する

文字列や数値を+で連結すると、つなげて表示できます。

alert('今日は' + 5 + '月' + 10 + '日です。');
//今日は5月10日です。と表示される

変数の内容を表示する

変数に入っている値も表示できます。変数名をそのまま書くだけです。

let name = '侍太郎';
alert(name);  //侍太郎と表示される

改行する

改行したい場所に\nを入れると、そこで改行されます。

alert('それでは次の問題です。\n問題文をよく読んでください。');

特殊文字を入力する

\(バックスラッシュ)の後に特定の文字を入れると、特殊な文字として扱われます。

\n:改行
\':シングルクォーテーション
\":ダブルクォーテーション
\\:バックスラッシュ

こんな感じで、alertの中身はいろいろカスタマイズできます。状況に応じて使い分けましょう。

alertの注意点

alertは便利な機能ですが、いくつか注意点もあります。

  • メッセージボックスのデザインは変更できない
  • OKボタンを押さないと先に進めない
  • 頻繁に使うとユーザーの操作を阻害してしまう

alertはあくまでメッセージを目立たせるための機能なので、使いすぎには注意が必要です。本当に必要な時だけ使うようにしましょう。

confirmとprompt

alertによく似た機能に confirm()prompt()があります。それぞれの特徴を見ていきましょう。

confirm

confirm()は、alertのようにメッセージを表示するのに加えて、ユーザーに選択肢を提示します。

let result = confirm('本当に削除しますか?');

OKを選ぶとtrue、キャンセルを選ぶとfalseが返ってきます。これを使って条件分岐ができます。

if (result) {
  alert('削除しました');
} else {
  alert('キャンセルしました');
}

prompt

prompt()は、ユーザーにテキストを入力してもらうことができます。

let name = prompt('あなたの名前は?');

入力された内容は文字列として受け取れるので、アラートで表示したりできます。

alert('こんにちは、' + name + 'さん');

ただしprompt()でパスワードなどを入力させるのは避けましょう。JavaScriptのコードは誰でも見られるので安全ではありません。

alertを使ったデバッグ

alertの便利な使い方に、デバッグがあります。

プログラムがうまく動かない時、alertを使って途中の値を表示してみると、どこで想定と違う動きをしているかがわかります。

let x = 10;
alert('xの値は' + x);  //xの値は10
x = x + 5;
alert('xの値は' + x);  //xの値は15
x = x * 3;
alert('xの値は' + x);  //xの値は45

このように変数の値がどう変化しているか追っていくことで、バグの原因を特定しやすくなります。

本格的なデバッグには開発者ツールのデバッガーを使いますが、手軽にできる方法としてalertは覚えておくと便利ですよ。

まとめ

JavaScriptのalertメソッドについて解説してきました。ポイントをおさらいしておきましょう。

●alertは、メッセージボックスを表示する機能
●文字列、数値、計算式、変数など様々な値を表示できる
●改行や特殊文字の入力も可能
●デザインのカスタマイズはできない
●過剰な使用は控える
●confirmで選択肢、promptでテキスト入力ができる
●デバッグにも使える

alertは、JavaScriptを始めたばかりの初心者でも気軽に使える機能です。

ぜひいろいろ試してみて、使い方を体験してみてくださいね。

JavaScriptを効率的に身につける勉強法は?

JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

  • JavaScript を身に付けてエンジニアになるには何をすればいい?
  • 何から勉強すればいいんだろう?
  • 効率よく勉強するには?

JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか?

目次