この記事で分かること
prompt()の基本的な意味- 入力ダイアログの構文と戻り値（OK / キャンセル）
- 名前入力・パスワード入力などの実用例
alert()・confirm()との違い- スマホで表示されない場合の注意点
prompt() は、文字入力欄と OK／キャンセルボタンを持つ標準ダイアログを表示するための関数です。
フォーム入力前の確認や簡易的な入力処理に便利で、初心者でも扱いやすいのが特徴です。
prompt() とは？
prompt() は、ユーザーに文字入力を求めるための JavaScript の組み込み関数です。
- OK → 入力された文字列を返す
- キャンセル or × →
nullを返す - 初期値を設定できる
- 入力が完了するまで次の処理へ進まない（同期処理）
ブラウザ標準のダイアログのため、簡易的な入力処理に向いています。
基本構文（コピペOK）
const result = prompt("メッセージ", "初期値");
使用例：名前を入力してもらう
以下は、名前を入力してもらい、結果をコンソールに表示する例です。
<html>
<head>
<title>JavaScript Sample</title>
<script>
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>
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の違いに注意
→ 初期値を""にすると空文字が返る。キャンセル時のnullと区別が必要。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
prompt()・alert()・confirm()など基本的なダイアログ処理を体系的に理解したい- ユーザー入力やフォーム処理の基礎をしっかり身につけたい
- ネット記事だけだと情報が断片的に感じる
prompt() のような入力ダイアログは、
JavaScript の 基本構文・イベント処理・ブラウザ標準UI の理解が欠かせません。
書籍ではこれらの基礎を順序立てて学べるため、ユーザー入力の仕組みを深く理解できます。
いちばんやさしい JavaScript の教本
図解が多く、JavaScript の基本文法やブラウザの動作を視覚的に理解できる入門書です。
prompt() / alert() / confirm() のような
「標準ダイアログの仕組み」や「入力処理の流れ」を丁寧に学べます。
この本で解決できること：
prompt()の戻り値（文字列 /null）の扱いが理解できる- ユーザー入力を使った基本的な処理が書けるようになる
- 実際に動くサンプルで入力ダイアログの理解が深まる
確かな力が身につく JavaScript「超」入門
入力処理・イベント・UI 操作など、より実践的な JavaScript を学びたい方に最適な入門書です。
prompt() を使った入力確認や、ユーザー操作に応じた処理分岐なども理解できます。
この本で解決できること：
prompt()/alert()/confirm()の使い分けが体系的に学べる- ユーザー入力を扱う実務的なコードが書けるようになる
- 現代的な JavaScript の書き方が身につく
動画で理解を深めたい方へ（Udemy講座）
prompt() のような入力ダイアログは、
実際の動作を画面で見ながら学ぶと理解が一気に深まります。
動画では「OK とキャンセルでどう処理が分岐するか」などがそのまま確認でき、
初心者でも直感的に理解できます。
初心者のためのJavaScript 完全入門
基本文法・イベント処理・ブラウザの動作など、入力ダイアログの理解に必要な基礎を体系的に学べる人気講座です。
この講座で解決できること：
prompt()の戻り値の扱いを視覚的に理解できるalert()・confirm()との違いが明確になる- 初心者がつまずきやすい入力処理の概念を丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
UI 操作・イベント制御・入力処理など、実務で必要なブラウザ操作を深く理解したい方に最適な講座です。
この講座で解決できること：
prompt()を使った実践的な入力処理が身につく- ユーザー操作に応じた分岐処理の考え方を習得できる
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
prompt()・alert()・confirm()の違いが曖昧なままになる- ユーザー入力の扱い方が断片的になりやすい
- 入力値の検証や分岐処理でつまずいても相談できない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
prompt() を含むユーザー入力処理や
JavaScript の基礎を体系的に理解できるようサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 入力ダイアログやイベント処理の理解を深めるアドバイスがもらえる
- 効率的な学習方法をプロが提案
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
prompt() に関するよくある質問（FAQ）
prompt() の戻り値は？
OK なら入力文字列、キャンセルなら null が返ります。
スマホで prompt() が表示されないのはなぜ？
一部ブラウザでは標準ダイアログがブロックされるため、モーダルUIの利用が推奨されます。
空文字と null の違いは？
空文字は入力欄が空のまま OK を押した場合、null はキャンセル時に返されます。
prompt() はどんな用途で使う？
簡易的な入力処理や確認ダイアログとして利用できます。
まとめ
prompt()は文字入力ダイアログを表示する関数- OK → 入力文字列、キャンセル →
nullを返す - 初期値を設定できるため、入力補助にも使える
- 名前入力・パスワード入力などの実用例で活用可能
- スマホではブロックされる場合があるため注意が必要
