【JavaScript】実用的な「alert( )」系の関数まとめ

JavaScriptで、サイト上で通知などをする際、alert( )という関数を使う方も多いですよね。

実は、alert以外にも、似たような機能を持った便利関数が数多く存在します。今回は、そんなalert系の関数の中から、実用的で便利なものをいくつかご紹介していきます。

※この記事で掲載している実行結果は、全てGoogle Chromeのものです。

1．alert( )

まず初めは、定番関数の一種であるalert( )から。

console.logなどの関数と同様に、動作確認に度々使われますね。

【サンプル】

// alert( 表示するデータ );
alert("これはalertサンプルです。");

コードの動作テスト以外にも、

などの処理を手軽に実装できる関数ですが、ブラウザによってデザインが異なるため、本格的なWEB制作の場面ではあまり使われることはありません。

prompt( )は、ユーザからの入力を受け付けるための関数です。

例えば、ログイン処理やお問い合わせフォームにデータを入力する場合はForm部品を用いますが、HTMLの構造を作成したり、スタイルシートでデザインを当てたりと、そう易々と実装できるものでもありません。

そんなとき、ユーザが入力できる簡易的なポップアップを画面上に表示させられるのがprompt( )です。

【サンプル】

// prompt( 表示するデータ );
//  戻り値＝入力された値
let input = prompt("IDを入力");

// 確認
alert(`ID: ${input}`);

本番環境で採用されるケースは極めて稀ですが、管理画面にログインするためのパスワード入力、試験的な入力値の検証など、開発ではよく登場する関数だと言えます。

confirm( )は、ユーザからYes or Noの入力を受け取るための関数です。

例えば、お問い合わせフォームなどで送信ボタンが押された場合、それはユーザが誤って押してしまっている可能性もありますよね。

ユーザからの誤入力を防ぐためにも、基本的には入力の確認を促すように設計します。その際に役立つのが、confirm( )です。

// confirm( 表示する文字列 );
// 戻り値＝true あるいは false
let boolean = confirm("送信しても良いですか？");

// 確認
alert(boolean);

例に漏れず、confirmも本番環境で使用されるケースは極めて稀ですが、trueかfalseかによって処理を分岐したい場合のテスト動作によく利用されています。

などの関数は、ブラウザによってデザインが異なる問題はあるものの、ユーザとやり取りする仕組みを簡易的に実現できる便利な存在です。上手に活用することで、JavaScriptを用いたWEBサイト開発をより効率的に進められるでしょう。