JavaScriptのpromptダイアログを表示する方法

Webサイトでユーザーから情報を入力してもらう場合、promptダイアログは最も簡単な実装方法の1つです。この記事では、JavaScriptのpromptの基本から応用まで、初心者の方にもわかりやすく解説していきます。

promptとは

promptは、ブラウザ上でポップアップダイアログを表示し、ユーザーからテキスト入力を受け付けるJavaScriptの組み込み関数です。ダイアログには以下の要素が含まれます：

メッセージ表示エリア
テキスト入力フィールド
OKボタン
キャンセルボタン

基本的な使い方

基本構文

let 変数名 = prompt("表示したいメッセージ");

シンプルな例

let userName = prompt("お名前を入力してください");
console.log(userName);  // 入力された名前が表示されます

初期値の設定

promptには第2引数を指定することで、入力フィールドに初期値を設定できます：

let userName = prompt("お名前を入力してください", "山田太郎");

入力値の処理

基本的な入力チェック

let userInput = prompt("年齢を入力してください");

if (userInput === null) {
    console.log("キャンセルされました");
} else if (userInput === "") {
    console.log("何も入力されませんでした");
} else {
    console.log("入力された年齢: " + userInput);
}

数値入力の処理

let age = prompt("年齢を入力してください");
age = parseInt(age);  // 文字列を数値に変換

if (isNaN(age)) {
    console.log("有効な数値を入力してください");
} else {
    console.log("あなたは" + age + "歳です");
}

入力値の検証と活用

数値入力の処理

// 数値入力の例
let age = prompt("年齢を入力してください");

// 数値に変換して検証
let numAge = Number(age);
if (isNaN(numAge)) {
    alert("数値を入力してください");
} else if (numAge < 0 || numAge > 150) {
    alert("正しい年齢を入力してください");
} else {
    alert(`あなたは${numAge}歳ですね`);
}

入力キャンセルの処理

// 入力のキャンセル処理
let userInput = prompt("ユーザー名を入力してください");

if (userInput === null) {
    alert("キャンセルされました");
} else if (userInput.trim() === "") {
    alert("名前を入力してください");
} else {
    alert(`ようこそ、${userInput}さん`);
}

実践的な使用例

ログイン処理の例

function login() {
    let username = prompt("ユーザー名を入力してください");
    if (!username) return false;

    let password = prompt("パスワードを入力してください");
    if (!password) return false;

    // ここで認証処理を行う
    if (username === "admin" && password === "1234") {
        alert("ログイン成功！");
        return true;
    } else {
        alert("ログイン失敗");
        return false;
    }
}

計算機の例

function calculator() {
    let num1 = prompt("1つ目の数字を入力してください");
    let num2 = prompt("2つ目の数字を入力してください");
    let operator = prompt("演算子を入力してください（+, -, *, /）");

    num1 = Number(num1);
    num2 = Number(num2);

    if (isNaN(num1) || isNaN(num2)) {
        alert("有効な数字を入力してください");
        return;
    }

    let result;
    switch(operator) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            if (num2 === 0) {
                alert("0で割ることはできません");
                return;
            }
            result = num1 / num2;
            break;
        default:
            alert("無効な演算子です");
            return;
    }

    alert(`計算結果: ${result}`);
}

promptの応用とベストプラクティス

入力値のバリデーション（検証）パターン

function validateEmail() {
    let email = prompt("メールアドレスを入力してください");

    // メールアドレスの基本的な形式チェック
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!email) {
        alert("メールアドレスを入力してください");
        return false;
    }

    if (!emailPattern.test(email)) {
        alert("正しいメールアドレスの形式で入力してください");
        return false;
    }

    alert("有効なメールアドレスです");
    return true;
}

複数の入力を連続して受け取る

function getUserInfo() {
    const userInfo = {
        name: null,
        age: null,
        email: null
    };

    // 名前の入力
    userInfo.name = prompt("お名前を入力してください");
    if (!userInfo.name) return null;

    // 年齢の入力
    let age = prompt("年齢を入力してください");
    age = parseInt(age);
    if (isNaN(age) || age < 0 || age > 150) {
        alert("正しい年齢を入力してください");
        return null;
    }
    userInfo.age = age;

    // メールアドレスの入力
    userInfo.email = prompt("メールアドレスを入力してください");
    if (!userInfo.email) return null;

    return userInfo;
}

promptの制限事項と代替手段

promptの制限事項

スタイルのカスタマイズができない
モバイルデバイスでの表示が最適化されていない
一部のブラウザでブロックされる可能性がある
パスワード入力時にテキストが平文で表示される

モダンな代替手段

カスタムモーダルダイアログの例

// HTML
`
<div id="customPrompt" style="display: none;">
    <div class="modal-content">
        <h2>入力してください</h2>
        <input type="text" id="userInput">
        <button onclick="submitInput()">OK</button>
        <button onclick="cancelInput()">キャンセル</button>
    </div>
</div>
`

// JavaScript
function customPrompt(message) {
    return new Promise((resolve, reject) => {
        const modal = document.getElementById('customPrompt');
        modal.style.display = 'block';

        window.submitInput = () => {
            const input = document.getElementById('userInput').value;
            modal.style.display = 'none';
            resolve(input);
        };

        window.cancelInput = () => {
            modal.style.display = 'none';
            resolve(null);
        };
    });
}

セキュリティの考慮事項

入力値のサニタイズ

function sanitizeInput(input) {
    // 特殊文字をエスケープ
    return input
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

// 使用例
let userInput = prompt("メッセージを入力してください");
if (userInput) {
    let safeInput = sanitizeInput(userInput);
    document.getElementById('output').innerHTML = safeInput;
}