【JavaScript入門】promptで入力値を検証する方法｜空欄チェック・null判定・数値判定を初心者向けに解説

JavaScript の prompt() は手軽に入力ダイアログを作れますが、返り値が「文字列・空欄・null」で分かれるため注意が必要です。
この記事では、これらの違いと正しい判定方法、さらに数値入力のチェックまで分かりやすく解説します。

prompt の入力値は3種類ある

JavaScript の prompt は、ユーザーが入力した値を返すダイアログです。
ただし、返ってくる値は以下の3種類に分かれます。

状況	返り値
文字を入力して OK	文字列（例："hello"）
空欄で OK	""（空文字）
キャンセル	null

この3つを正しく判定できるようになると、
prompt を使った入力処理が安定します。

空欄チェックの方法

空欄かどうかは、以下のように判定できます。

const name = prompt("名前を入力してください");

if (name === "") {
  console.log("空欄です");
}

空欄は ""（空文字）として返るため、
空欄と null は別物 である点に注意しましょう。

キャンセル（null）の判定方法

キャンセルされた場合は null が返ります。

const name = prompt("名前を入力してください");

if (name === null) {
  console.log("キャンセルされました");
}

空欄と null を混同するとバグの原因になるため、
必ず別々に判定する必要があります。

数値入力の判定方法

prompt は入力値を必ず文字列として返すため、
数値として扱うには変換とチェックが必要です。

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

if (age === null) {
  console.log("キャンセルされました");
} else if (age === "") {
  console.log("空欄です");
} else if (isNaN(age)) {
  console.log("数値を入力してください");
} else {
  console.log(`あなたの年齢は ${Number(age)} 歳です`);
}

isNaN() を使うことで、
数値として扱えるかどうかを判定できます。

まとめ

prompt は簡単に入力ダイアログを作れますが、
返り値が「文字列・空欄・null」で分かれるため、
入力チェックが必須 です。

空欄・null・数値判定を正しく行えるようになると、
prompt を使った入力処理が安定し、
より実践的な JavaScript の書き方が身につきます。