【6日でできるJavaScript入門】文字入力とエラー処理

　Webアプリケーションでは、ユーザーがキーボードから入力した「文字」や「数値」を利用して、さまざまな処理を行うことが一般的です。
しかし、ユーザー入力には不正なデータや予期せぬ値が含まれることも多く、エラー処理の工夫が不可欠です。

　ここでは、プロンプトの使い方から始めて、「数値入力時の注意点」「入力値を活用した処理の例」「エラーの防ぎ方」「isNaNによるNaN判定」まで、サンプルプログラムやタグ解説を交えて説明します。

トピック	概要
プロンプトの使い方	入力フォーム以外に直接ダイアログで値を取得する方法
数値入力時の変換	文字列→数値変換のポイントと注意
エラー対策	不正入力時のハンドリング
isNaNによる判定	NaNかどうかの検出

１．プロンプトによる文字入力の基礎

Webブラウザのprompt関数を使うと、簡単にダイアログから文字や数値の入力を受け付けられます。
まずは基本的な使い方を見てみましょう。

用法	解説	例
prompt('メッセージ', '初期値')	ダイアログを表示し、入力値を文字列で返す	let name = prompt('あなたの名前は？', '名無し');

1.1. サンプル：名前の入力を受け取り表示する

ファイル名： lesson18-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📝 ユーザー名の入力サンプル</title>
</head>
<body>
  <h1>📝 ユーザー名の入力サンプル</h1>
  <p>下のボタンをクリックして、お名前を入力してください。</p>
  <button onclick="askName()">名前を入力</button>
  <div id="result">ここに結果が表示されます。</div>

  <script>
    function askName() {
      let userName = prompt('あなたの名前を入力してください', '山田太郎');
      if (userName === null || userName === '') {
        document.getElementById('result').textContent = '入力がキャンセルされました。';
      } else {
        document.getElementById('result').textContent = `${userName} さん、ようこそ！`;
      }
    }
  </script>
</body>
</html>

ブラウザの出力例

山田太郎 さん、ようこそ！

または

入力がキャンセルされました。

1.2. タグ・構文のポイント解説

タグ・構文	解説
<button onclick=...>	ボタンクリック時にaskName()を呼び出すイベント属性
prompt()	入力ダイアログを表示し、入力値を「文字列」で返す。
document.getElementById().textContent	指定要素のテキストを書き換える。

２．数値入力とデータ変換

prompt() は、必ず「文字列」で値を返します。
計算などに使いたい場合は、数値への変換が必要です。

変換関数	説明	例	結果
parseInt()	整数に変換（小数点以下は切り捨て）	parseInt('10.5')	10
parseFloat()	実数（小数）に変換	parseFloat('10.5')	10.5
Number()	文字列を数値型に変換（柔軟に対応）	Number('8')	8

2.1. サンプル：年齢入力と年齢計算

ファイル名： lesson18-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🎂 年齢チェックツール</title>
</head>
<body>
  <h1>🎂 年齢チェックツール</h1>
  <button onclick="askAge()">年齢を入力</button>
  <div id="age-result">ここに結果が表示されます。</div>

  <script>
    function askAge() {
      let input = prompt('あなたの年齢を数字で入力してください', '20');
      let age = parseInt(input);
      if (isNaN(age)) {
        document.getElementById('age-result').textContent = '正しい数字を入力してください。';
        return;
      }
      let future = age + 5;
      document.getElementById('age-result').textContent = `5年後は ${future} 歳になります。`;
    }
  </script>
</body>
</html>

ブラウザの出力例

5年後は 25 歳になります。

または

正しい数字を入力してください。

2.2. タグ・構文のポイント

タグ・構文	解説
parseInt()	文字列を整数へ変換。数字以外はNaNになる
isNaN()	値が「数値でない」場合trueを返す

３．プロンプト活用例：単語数を数える

プロンプトから入力された文の「単語数」をカウントして表示する実用例を紹介します。

ファイル名： lesson18-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔤 単語カウントツール</title>
</head>
<body>
  <h1>🔤 単語カウントツール</h1>
  <button onclick="countWords()">単語数を数える</button>
  <div id="wc-result">ここに単語数が表示されます。</div>

  <script>
    function countWords() {
      let sentence = prompt('文章を入力してください', '今日はとても良い天気です');
      if (sentence === null || sentence.trim() === '') {
        document.getElementById('wc-result').textContent = '文章が入力されませんでした。';
        return;
      }
      // 空白区切りで単語数をカウント
      let words = sentence.trim().split(/\s+/);
      document.getElementById('wc-result').textContent = `単語数は ${words.length} です。`;
    }
  </script>
</body>
</html>

ブラウザの出力例

単語数は 5 です。

または

文章が入力されませんでした。

４．JavaScriptの暴走と安全なエラー処理

大きな繰り返し処理や意図しない入力によって、ブラウザがフリーズする場合もあります。
プロンプトや入力処理では、エラー対策を徹底しましょう。

エラーの原因	例	対策
極端に大きな数値	「1000000回」繰り返し	上限値を設定、警告を表示
不正な入力	文字、空文字、null	isNaNや型チェック、範囲制限
範囲の矛盾	「最小値 > 最大値」	比較してエラー時はreturn

4.1. サンプル：入力チェック付き繰り返し

ファイル名： lesson18-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔁 繰り返しカウンター</title>
</head>
<body>
  <h1>🔁 繰り返しカウンター</h1>
  <button onclick="repeatCount()">カウント開始</button>
  <div id="repeat-result">ここに結果が表示されます。</div>

  <script>
    function repeatCount() {
      let times = parseInt(prompt('何回カウントしますか？（1〜20まで）', '5'));
      if (isNaN(times) || times < 1 || times > 20) {
        document.getElementById('repeat-result').textContent = '1から20の範囲で指定してください。';
        return;
      }
      let text = '';
      for (let i = 1; i <= times; i++) {
        text += i + '回目、';
      }
      document.getElementById('repeat-result').textContent = text;
    }
  </script>
</body>
</html>

ブラウザの出力例

1回目、2回目、3回目、4回目、5回目、

または

1から20の範囲で指定してください。

５．isNaN() を使ったNaNの判定

数値変換後の値が「数値でない」（NaN）かどうかは、isNaN()関数で簡単に判定できます。

構文	例	結果
isNaN(10)	isNaN(10)	false
isNaN('abc')	isNaN('abc')	true
isNaN(NaN)	isNaN(NaN)	true

入力値が数値に変換できない場合、isNaN()がtrueとなり、エラー処理に利用できます。

まとめ

prompt()はユーザー入力を簡単に取得できるが、値は必ず文字列。
数値計算にはparseInt()やparseFloat()で変換が必要。
入力値はisNaN()や範囲チェックで必ずバリデーションすること。
入力エラーや不正値がある場合は、ユーザーへメッセージ表示と処理中断を行う。
複雑な処理や大きな数値の入力時は、繰り返し回数の上限や例外対策を心がける。

　ここでは、Webフロントエンドでの文字・数値入力からエラー処理まで、サンプルプログラムとともに解説しました。正しい入力と安全なバリデーションがユーザー体験とシステムの安定性につながります。