JavaScript プロンプト

概要: このチュートリアルでは、JavaScript の prompt() メソッドを使用して、ユーザー入力を求めるメッセージ付きのダイアログを表示する方法を学びます。

JavaScript prompt() メソッドの紹介

prompt() は、window オブジェクトのメソッドです。prompt() メソッドは、Webブラウザーに、テキスト、テキスト入力フィールド、および OK と キャンセル の2つのボタンを含むダイアログを表示するように指示します。

ダイアログは、ユーザーにテキストの入力を促し、ユーザーが送信またはキャンセルするまで待ちます。以下は、prompt() メソッドの構文を示しています。

let result = window.prompt(message, default);
Code language: JavaScript (javascript)

この構文では

• message は表示する文字列です。省略すると、ダイアログには何も表示されません。
• default は、テキスト入力フィールドのデフォルト値を含む文字列です。

結果は、ユーザーが入力したテキストを含む文字列、または null です。

alert() や confirm() と同様に、prompt() はモーダルかつ同期的です。つまり、ダイアログが表示されるとコードの実行が停止し、ダイアログが閉じられた後に再開されます。

JavaScript prompt() の例

prompt() がどのように機能するかをいくつかの例で見てみましょう。

1) プロンプトダイアログを表示する

次の例では、prompt() を使用して、ユーザーにお気に入りのプログラミング言語を尋ねるダイアログを表示します。

let lang = prompt('What is your favorite programming language?');

let feedback = lang.toLowerCase() === 'javascript' ? `It's great!` :
    `It's ${lang}`;

alert(feedback);Code language: JavaScript (javascript)

2) ユーザー入力を数値に変換する

prompt() の結果は文字列です。回答を数値として取得したい場合は、常に文字列を数値にキャストする必要があります。

次の例では、prompt() を使用して、ユーザーに年齢を尋ねるダイアログを表示します。ユーザーが16歳以上の場合、参加資格があります。それ以外の場合は、参加できません。

let ageStr = prompt('How old are you?');
let age = Number(ageStr);

let feedback = age >= 16 ?
    'You're eligible to join.' :
    'You must be at least 16 year old to join.';

alert(feedback);Code language: PHP (php)

まとめ

• prompt() は、window オブジェクトのメソッドです。
• prompt() は、ユーザーにテキストの入力を促すダイアログを表示し、ユーザーがダイアログを送信またはキャンセルするまで待ちます。
• prompt() は、ユーザーが入力した文字列を含む文字列を返すか、ユーザーが何も入力しなかった場合は null を返します。