JavaScriptのprompt()メソッドは、ユーザーからの入力を受け付けるためのダイアログを表示する機能です。基本的な使い方から実践的な例まで、詳しく解説します。

prompt()メソッドの基本的な使い方

prompt()メソッドの基本的な構文は以下の通りです：

let 変数 = prompt("メッセージ", "デフォルト値");

引数は2つあり、1つ目は表示するメッセージ、2つ目はテキストボックスに最初から表示される値（省略可能）です。

使用例と戻り値

// 基本的な使用例
let name = prompt("お名前を入力してください");
console.log("こんにちは、" + name + "さん");

// デフォルト値を設定する場合
let age = prompt("年齢を入力してください", "20");

prompt()メソッドの戻り値は以下の2種類です：

  • 入力された文字列
  • キャンセルボタンが押された場合は`null`

入力値の型変換

prompt()メソッドは常に文字列を返すため、数値として使用する場合は型変換が必要です：

// 数値への変換例
let number = prompt("数字を入力してください");
let convertedNumber = Number(number);

// 条件分岐での使用例
if (!isNaN(convertedNumber)) {
    console.log("入力された数値は " + convertedNumber + " です");
} else {
    console.log("有効な数値を入力してください");
}

エラー処理とバリデーション

入力値の検証は重要です。以下は基本的なバリデーションの例です：

let input = prompt("1から10までの数字を入力してください");

if (input === null) {
    console.log("キャンセルされました");
} else if (input === "") {
    console.log("何も入力されていません");
} else if (isNaN(input)) {
    console.log("数値を入力してください");
} else if (input < 1 || input > 10) {
    console.log("1から10の範囲で入力してください");
} else {
    console.log("正しい入力です：" + input);
}

ブラウザ対応状況

prompt()メソッドは主要なWebブラウザで広くサポートされています。ただし、以下の点に注意が必要です：

  • モバイルブラウザでの表示が異なる場合がある
  • モダンなWeb開発では、カスタムダイアログの使用が推奨される

プロの開発者向けTips

1. 入力値のトリム処理：

let input = prompt("メッセージ").trim();

2. デフォルト値の設定：

let input = prompt("メッセージ", "") || "デフォルト値";

3. 数値の範囲チェック：

let number = Number(prompt("数値を入力"));
if (number >= 1 && number <= 100) {
    // 有効な範囲の処理
}

まとめ

prompt()メソッドは簡単に使えるユーザー入力機能ですが、本番環境では以下の点を考慮することをお勧めします：

  • 適切なバリデーション処理の実装
  • ユーザー体験を考慮したカスタムダイアログの検討
  • 入力値の型変換とエラーハンドリング

これらの基本を押さえることで、より堅牢なアプリケーション開発が可能になります。