JavaScript - alertの使い方を徹底解説！
公開日：2020.12.08
スキルアップ
JavaScriptにおけるalertとは、Webページを表示した時にポップアップするメッセージボックスのことを指します。ユーザーが意図的にJavaScriptをブラウザ側で停止していなければ、基本的にすべてのユーザーにメッセージが届くため、重要なメッセージや注意を促す目的で使用されます。
alertは便利な機能なため、Webページの作成のためにはなくてはならない機能です。今回はalertの使い方について、詳細に解説していきます。
JavaScript の alert とは
alertはテキストとOKボタンをポップアップ表示させるメソッドで、Webページを読み込んだ際にブラウザの上部にこのようなウィンドウがポップアップします。
閲覧者に対して閲覧前に確認するべき内容に関する警告や、フォームの入力ミス、ブラウザバックに対する注意など、さまざまな用途で使用されています。多用すると目障りになるため好まれませんが、見落とすと問題がある内容について強い注意を促すのに適しています。
alertは標準では色の変更などのデザインはできないものの、jQueryのスクリプトであるSweetAlertなどのライブラリを使用することで外観もカスタマイズできます。通常のポップアップと異なる精錬されたデザインを採用できるので、ユーザーにより好印象で注意を促せます。
alertの用途
アラートの用途は閲覧に関する警告文を出すだけでなく、フォーム入力の誤りや不足内容に対する通知など注意を促すメッセージとしても使用します。また、ECサイトで購入決定前に配送料や配達日に関する注意事項などを表示することもあります。
ブラウザ上の目立つ場所に表示され、OKを押さないと消えないため、内容がしっかりと伝わらないと問題が生じる場合に使用されています。
一方で、一読させるためにブラウザの閲覧を阻害するため、アラートのポップアップを嫌がるユーザーも少なくありません。また、オンライン上で一時期流行したウィルス感染の警告とソフト購入を促す迷惑ページで多用されていたため、使用頻度とシーンを吟味しないとUXが低下し、ユーザーの離脱に繋がります。
JavaScript の alert の使い方
アラートは、alert(表示させたい文章)で表示できます。
alert("ここにメッセージ");
これを実行すると、下記のようなポップアップになります。
文字列を変更すれば自由に内容を変更できます。
では、表示する内容について、記述方法を詳細に見ていきましょう。
アラートに数字と文字を同時に表示させるには
アラートに数字と文字を同時に表示させるには、+ 記号を使用します。
// 「2021年にオリンピックが開催される」と表示
alert(2021 + "年にオリンピックが開催される");
数字 + "文字列"で数字と文字列を同時に表示できます。数字が間に挟まる場合は以下のように記述します。
// 「オリンピックは2021年に開催される」と表示
alert("オリンピックは" + 2021 + "年に開催される");
この時注意したい点として、数字同士を+で繋いだ場合、計算式として扱われ、加算した計算結果が表示されてしまいます。数字を文字として表示して並べたい場合はダブルクオーテーション（""）で囲み、文字列としてください。
アラートに変数を表示させる場合はサンプルのような記述をする
フォームなどから受け取った変数をアラートで表示するには、数字と同じく+記号を使用します。
const age = 30;
// 「今年で30歳になります」と表示
alert("今年で" + age + "歳になります");
変数の左右を+で挟むことで、文字列と変数を同時に表示できます。年齢確認が必要な場合や、記入の間違いがあると問題が生じる場合など、ユーザーに入力した内容を再度確認するように促す必要があるシーンなどで使用されます。
アラート内で改行させるには
メッセージが長文になると、一行では読みにくく、せっかくのアラートが正しく伝わらない可能性があります。そのような場合はアラート内で改行をしましょう。
通常のエンターによる改行の入力は反映されないため、アラート内で改行させるには\nを記入します。\nはエスケープシーケンス（特殊文字）の一種で、改行を意味する記述方法です。\nを入力した回数だけ文字列が改行されます。
// 「金
// 銀
// 銅」 と表示される
alert("金\n銀\n銅\n");
¥マークを表示させるには
\（バックスラッシュ）はプログラムのコード上ではエスケープシーケンス（特殊文字）を表示するために使用しますが、通貨単位を表す記号でもあります。そこで、文字として¥を表示したい場合は、\を2つ入力します。
1つ目の\がエスケープ文字として機能し、2つ目の\を文字として表示させます。
半角の?も同様に、JavaScriptのコードに使用されるため、文字として表示する場合はエスケープ文字と組み合わせて使用します。
// 「¥はドルマーク」と表示
alert("\\はドルマーク");
JavaScript のalertに似たメソッド
ポップアップウィンドウの表示はalert以外にもあります。選択肢を表示するconfirmや、文字入力ができるpromptといったメソッドがこれにあたり、どれもalertと同じくポップアップウィンドウを表示できます。
これらはalertと組み合わせることも可能で、選択肢を表示させてから処理を実行していることを告げるアラートを表示したり、文字入力のあとに内容確認のアラートを表示したりするなど、使い方はさまざまです。
OKとキャンセルが選べる confirm
confirm関数を使うことで、OKとキャンセルから選択させることが可能になります。これによって、意図せぬ誤入力の場合は実行をキャンセルするアラートや、そのまま処理を続けていいのか意思確認を促すアラートをポップアップできます。
confirmを実行すると、alertと異なり「OK」と「キャンセル」の2つのボタンがあることがわかります。
alertと組み合わせ、それぞれの選択のあとにalertを表示することができます。
実際のサンプルコードを見てみましょう。
let result = confirm('本当に送信しますか？');
if (result) {
alert("送信しました");
} else {
alert("送信しませんでした");
}
このサンプルでは、confirm関数を使用してポップアップを表示し、選択したボタンでif文を分岐させて、異なるメッセージを表示します。
OKを押した場合はresultにtrueが入るため「送信しました」というアラートを表示し、キャンセルを押した場合はresultがfalseのため「送信しませんでした」というアラートを表示します。
このようにalertの命令文と組み合わせることで、より複雑な選択や注意画面を構築できます。
テキスト記入させるprompt関数
prompt関数を使用すると、ポップアップに文字記入フォームを表示できます。
入力された文字列を使用してWebページの特定の文字列をすべて入れ替えたり、変数を使用して計算結果を表示したりするなど、用途は多岐にわたります。また、alertと組み合わせて入力結果の確認を表示し、入力した内容の確認を促すなど、慎重な入力操作をさせたい場面で使用できます。
次のサンプルは、promptを使用した文字列確認機能です。入力した文字列をresult変数に出力し、12345という文字列と合致していれば「入力した文字列は12345です」を表示、合致していない場合は「入力された文字は12345ではありません」を表示しています。
let result = prompt('文字を入力してください');
if (result=='12345') {
alert("入力した文字列は12345です");
} else {
alert("入力された文字は12345ではありません");
}
なお一見するとパスワード機能などに使えそうなprompt関数ですが、JavaScriptのソースコードは外部から見ることができます。すなわち、ソースコードに記載してある、正しいパスワードを見ることができてしまいますので、パスワード機能などでは使わないように注意してください。
便利なJavaScriptのalertを有効活用しよう！
JavaScriptのalertは、特にデバッグのタイミングなどで便利に使える機能です。またしっかりと閲覧者の注意を引いて確認を促せるため、重要な情報を出力する際に便利な機能といえるでしょう。
記述方法も難しいものではなく、他の命令文などと組み合わせることによって、さまざまな使い方が期待できます。一方で迷惑サイトなどでもよく使われているため、多用しすぎると鬱陶しく悪印象に繋がります。ぜひalertを上手に活用してください。
AKKODiSでは、JavaScriptの知識を活かしてIT系で活躍できる求人を多数取り揃えています。IT系に就職を目指したいという方、エンジニアを目指して勉強中の方は、ぜひお気軽にお問い合わせください。
（2020年12月現在）
