JavaScriptのalertメソッドの引数について現役エンジニアが解説【初心者向け】

JavaScriptのalertメソッドの引数について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• alertメソッドとは
• alertメソッドの使い方
• alertメソッドの引数について
• alertメソッドを利用してダイアログを表示してみよう
• まとめ

 

alertメソッドとは

OKボタンを持つ警告ダイアログを表示するメソッドです。

alertによってダイアログが表示されると、ユーザーはこれを閉じるまで他の操作ができなくなります。

ダイアログの見た目はブラウザによって多少の差があります。

こちらはChromeのダイアログです。ダイアログのメッセージの上に、サイト名やwindow名が表示されています。

こちらはFire foxのダイアログです。

このように基本的には、alertメソッドで指定したメッセージとOKボタンで構成されます。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

alertメソッドの使い方

記述の省略が可能なwindowオブジェクトからalertメソッドが使えます。

最小の記述だと下記のようになります。

alert();

もちろん省略せずに下記のように記述しても、結果は省略した場合と同じになります。

window.alert();

 

alertメソッドの引数について

alertメソッドの引数はオプショナル（省略可能）です。

引数を渡さない場合は、メッセージが空のダイアログになります。引数に文字列を渡すと、渡した文字列がダイアログのメッセージになります。
 

alertメソッドを利用してダイアログを表示してみよう

alertメソッドの引数に、ダイアログに表示するメッセージを渡します。

今回は、「ダイアログに表示するメッセージです」とダイアログに表示します。

alert('ダイアログに表示するメッセージです');

メッセージを複数行に分けて表示したい場合は、改行のエスケープ表記である \n を使います。

alert('1行目\n2行目');

これでエスケープ表記した\nが改行とみなされ2行のメッセージが表示されました。

下記が実行結果です。

改行のように特殊な文字を記述するにはエスケープ表記が必要になります。

その他のエスケープ表記は下記のサイトで確認できます。
MDNのエスケープ表記の一覧
 

まとめ

alertメソッドの引数と使い方を紹介しました。

ユーザーの操作を制限するので多用するのは好ましくありません。その一方で、重要な確認事項を伝える場合などに重宝します。

少ない記述で簡単に使用できるalertメソッドですが、ダイアログはブラウザが用意している部品なのでカスタマイズができません。もし、ダイアログの見た目やボタンを増やすような変更を加えたい場合は、ダイアログのライブラリを探すが、dialog要素を使って自作することになります。
 

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。