JavaScriptのprompt()の使い方をわかりやすく解説【コピペOKのサンプル付き】

JavaScriptの prompt() は、文字入力欄とOK／キャンセルボタンを持つ標準ダイアログを表示する関数です。初心者でも簡単に使えるため、フォーム入力前の確認や簡易的な入力処理に便利です。このページでは、基本構文・実用例・コピペで使えるサンプルコード をまとめて解説します。

prompt()とは？

prompt() は、以下のような動作をする JavaScript の組み込み関数です。

OK → 入力された文字列を返す
キャンセル or × → null を返す
初期値を設定できる
入力が完了するまで次の処理へ進まない（同期処理）

ブラウザ標準のダイアログなので、簡易的な入力処理に向いています。

● = ★.prompt(♦, ▲)

● … 入力された文字列
★ … 親Windowオブジェクト（省略可）
♦ … ダイアログに表示する文字列
▲ … 初期入力されている文字列（省略可）

prompt()の基本構文（コピペOK）

const result = prompt("メッセージ", "初期値");

文字入力ダイアログを使ってみよう（基本例）

以下は「名前を入力してもらう」シンプルな例です。

<html>
  <head>
    <title>JavaScript Sample</title>
    <script type="text/javascript">
      function showDialog() {
        // 名前の入力を求める文字入力ダイアログを表示
        // 初期状態では入力欄には何も表示しない
        const name = prompt("あなたの名前は？", "");
        console.log(name);
      }
    </script>
  </head>
  <body>
    <input type="button" value="表示" onclick="showDialog()">
  </body>
</html>

パスワード入力ダイアログの例（初期値あり）

<html>
  <head>
    <title>JavaScript Sample</title>
    <script type="text/javascript">
      function showDialog() {
        // パスワードの入力を求めるダイアログ
        // 初期値として「********」を表示
        const pass = prompt("パスワードを入力してください", "********");
        console.log(pass);
      }
    </script>
  </head>
  <body>
    <input type="button" value="ログイン" onclick="showDialog()">
  </body>
</html>

OK・キャンセルで処理を分ける実用例

const result = prompt("削除してもよろしいですか？", "");

if (result !== null) {
  alert("OKが押されました");
} else {
  alert("キャンセルされました");
}

alert()・confirm()との違い

関数	できること	戻り値
alert()	メッセージ表示のみ	なし
confirm()	OK/キャンセルの選択	true / false
prompt()	文字入力＋OK/キャンセル	入力文字列 / null

よくあるエラーと対処法

スマホで prompt() が表示されない
→ 一部ブラウザではブロックされることがあるため、モーダルUIの利用を推奨。
入力値が空文字になる
→ 初期値を "" にしている場合は空文字が返る。null と区別する必要あり。

まとめ

prompt() は簡易的な入力ダイアログを表示する関数
OK → 入力文字列、キャンセル → null
初期値を設定できる
実用例（名前入力・パスワード入力）を紹介
コピペで使えるコード付き

【JavaScript】prompt()の使い方を初心者向けに解説｜入力ダイアログの基本と実用例