JavaScriptでポップアップメッセージを出す方法3つ紹介！

JavaScriptは、単純なメッセージを表示したり、メッセージを表示してユーザーの確認をとったり、ポップアップを表示してユーザーの入力値をとったりと、さまざまな目的でユーザーにメッセージを表示するための組み込みグローバル関数を提供しています。

アラートボックス：alert( )

alert()関数を使用すると、ユーザーに注意を促すメッセージを表示することができます。このアラートボックスには、アラートボックスを閉じるためのOKボタンがあります。

alert("This is an alert message box.");  // display string message

alert('This is a numer: ' + 100); // display result of a concatenation

alert(100); // display number

alert(Date()); // display current date

alert() 関数は、文字列、数値、ブール値など、任意の型のパラメータを受け取ります。そのため、文字列でない型を文字列に変換する必要はありません。

確認ボックス：confirm( )

ある時には、ユーザーの確認を取りながら進める必要があります。例えば、更新されたデータを保存したり、既存のデータを削除したりする前に、ユーザーの確認を取りたい場合です。このような場合は、組み込み関数の confirm() を使用します。

confirm()関数は、ユーザーにポップアップメッセージを表示し、OK と Cancel の 2 つのボタンを表示します。confirm()関数は、ユーザーがOKボタンをクリックした場合はtrueを返し、キャンセルボタンをクリックした場合はfalseを返します。この戻り値を使って、さらに処理を進めることができます。

次の例は、確認ボックスを表示し、ユーザーがどのボタンをクリックしたかを確認する方法を示しています。

var userPreference;

if (confirm("Do you want to save changes?") == true) {
    userPreference = "Data saved successfully!";
} else {
    userPreference = "Save Cancelled!";
}

プロンプトボックス：prompt( )

ある時には、さらなるアクションを実行するために、ユーザーの入力を必要とすることがあります。例えば、ユーザーが希望するローンの期間に基づいて EMI を計算したい場合です。このような場合は、組み込み関数の prompt() を使用します。

基本的な書き方は以下の通りです。

prompt([string message], [string defaultValue]);

prompt()関数は、2つの文字列パラメータを受け取ります。最初のパラメータは表示するメッセージ、2番目のパラメータはメッセージが表示されたときに入力テキストに入るデフォルト値です。

var tenure = prompt("Please enter preferred tenure in years", "15");
    
if (tenure != null) {
    alert("You have entered " + tenure + " years" );
}

上記の例では、第1パラメータにメッセージ、第2パラメータに “15 “を指定し、デフォルトでユーザーに表示されるようにしています。prompt() 関数は、ユーザーが入力した値を返します。もしユーザーが何も入力していない場合は、null を返します。そのため、先に進む前にnullを確認することをお勧めします。