JavaScript Tips | 文字列ユーティリティ：検証 － 数字のみ判定

JavaScript JavaScript
スポンサーリンク

「数字のみ判定」で本当に知りたいことは何か

まずゴールをはっきりさせます。
ここでやりたいのは、「この文字列は“数字だけ”でできているか？」を判定するユーティリティを作ることです。

例えば、こんな要件が典型的です。

ユーザーIDの一部は数字だけ
数量・個数・年齢などは数字だけ
「半角数字だけに制限したい」入力欄がある

ここで大事なのは、「数値として解釈できるか」ではなく、
「文字列として見たときに、構成要素が数字だけかどうか」を見たい、という点です。

"123" は OK
"00123" も OK（先頭ゼロも数字なので）
"12.3" は NG（. が混ざっている）
"-10" は NG（- が混ざっている）

この感覚をまず押さえておきましょう。

一番基本の「半角数字のみ」判定

正規表現の基本形

「文字列全体が数字だけかどうか」を判定する正規表現は、こう書けます。

/^\d+$/
JavaScript

意味を噛み砕くとこうです。

^ … 文字列の先頭
\d+ … 数字が1文字以上
$ … 文字列の末尾

つまり、「先頭から末尾まで、全部が数字だけでできている」ものだけを許可します。

実務でそのまま使えるユーティリティ関数

これを使って、業務用の関数にします。

function isDigits(value) {
  if (value == null) return false;

  const s = String(value);

  if (s === "") return false;

  return /^\d+$/.test(s);
}
JavaScript

ポイントを噛み砕きます。

null / undefined が来たら false
数値が来ても判定できるように String(value) で文字列化
空文字は「数字だけ」とはみなさず false
正規表現で「全体が数字だけか」をチェック

動きのイメージ

isDigits("123");     // true
isDigits("00123");   // true
isDigits("12.3");    // false（. が入っている）
isDigits("-10");     // false（- が入っている）
isDigits("1 2 3");   // false（スペースが入っている）
isDigits("");        // false
isDigits(12345);     // true（"12345" として判定）
JavaScript

「数字だけで構成されているか？」という要件には、まずこれで十分応えられます。

「数値として解釈できるか」との違いをはっきりさせる

Number や parseInt との違い

初心者がよくやるのが、こういう書き方です。

function isNumeric(value) {
  return !isNaN(Number(value));
}
JavaScript

一見よさそうですが、これには落とし穴があります。

isNumeric("123");    // true
isNumeric("12.3");   // true（小数も true）
isNumeric("-10");    // true（マイナスも true）
isNumeric("  123 "); // true（前後の空白も許容）
isNumeric("");       // true（空文字が 0 と解釈される）
JavaScript

「数値として解釈できるか」を見たい場面ではこれもアリですが、
「数字だけで構成されているか」を見たいときには不適切です。

だからこそ、「数字のみ判定」は
正規表現で「構成文字」を見るほうが安全で分かりやすい、というわけです。

全角数字も許可したい場合の考え方

日本語環境では「全角問題」を無視できない

日本語入力だと、全角数字が普通に混ざります。

"１２３４５"

これを ^\d+$ で判定すると、false になります（\d は半角数字だけを見ることが多い）。
「全角も数字として許可したい」なら、判定の前に全角→半角の正規化を挟むのがシンプルです。

全角→半角の正規化ユーティリティ

function toHalfWidth(str) {
  if (str == null) return "";
  return String(str)
    .replace(/[！-～]/g, (ch) =>
      String.fromCharCode(ch.charCodeAt(0) - 0xFEE0)
    )
    .replace(/　/g, " ");
}
JavaScript

これで、全角英数字・記号・全角スペースを半角に寄せられます。

全角も含めて「数字のみ」を判定する

function isDigitsWithZenkaku(value) {
  if (value == null) return false;

  const s = toHalfWidth(value).trim();

  if (s === "") return false;

  return /^\d+$/.test(s);
}
JavaScript

動きはこうです。

isDigitsWithZenkaku("１２３４５");   // true（半角に寄せてから判定）
isDigitsWithZenkaku("  １２３  "); // true（trim してから判定）
isDigitsWithZenkaku("１２３a");    // false（a が混ざっている）
JavaScript

「ユーザーの入力の揺れをどこまで吸収するか」を、
この正規化レイヤーでコントロールするイメージです。

「桁数」や「範囲」と組み合わせた実務ユーティリティ

例1：年齢（2桁までの数字）を判定したい

「年齢は 0〜120 くらいまで」「数字のみ」という要件なら、
数字のみ判定と数値範囲チェックを組み合わせます。

function isValidAge(value) {
  if (!isDigits(value)) return false;

  const num = Number(value);

  return num >= 0 && num <= 120;
}
JavaScript

これで、

"20" → true
"200" → false（範囲外）
"20歳" → false（数字のみ判定で落ちる）

のように判定できます。

例2：数量（1〜4桁の数字）を判定したい

「数量は 1〜9999 の整数」「数字のみ」という要件なら、
桁数と数値の両方を見るのもアリです。

function isValidQuantity(value) {
  if (!isDigits(value)) return false;

  const s = String(value);
  if (s.length > 4) return false;

  const num = Number(s);
  return num >= 1 && num <= 9999;
}
JavaScript

ここでのポイントは、
「構成文字のチェック（数字のみ）」と「意味としてのチェック（範囲）」を分けて考えることです。

業務での具体的な使いどころ

ID・コード類の検証

社員番号、顧客番号、注文番号など、
「数字だけで構成された ID」は業務システムに山ほど出てきます。

保存前や検索前に isDigits を通しておくと、

「123A みたいな変な値が紛れ込む」
「全角数字で検索がヒットしない」

といった事故をかなり防げます。

フロントエンドの入力チェック

フォームの入力欄で、

「ここは数字だけにしたい」
「全角数字も許可したい／したくない」

といった要件があるとき、
isDigits / isDigitsWithZenkaku を使い分けるだけで、
ロジックがかなりスッキリします。

設計として意識してほしいこと

「構成文字のチェック」と「意味のチェック」を分ける

数字のみ判定は、あくまで「構成文字」の話です。

数字だけで構成されているか（isDigits / isDigitsWithZenkaku）
その数字列が、意味として妥当か（年齢・数量・ID の範囲など）

これを一つの関数にごちゃっと詰め込むと、
「この関数、何をどこまでチェックしているんだっけ？」と分かりづらくなります。

なので、

構成文字チェック用のユーティリティ（isDigits 系）
意味チェック用のユーティリティ（isValidAge / isValidQuantity など）

を分けておくと、テストもしやすいし、仕様変更にも強くなります。

「全角をどう扱うか」を最初に決める

日本語環境では、全角数字をどう扱うかで挙動が大きく変わります。

全角は全部 NG にする（厳しめ）
全角も半角に寄せて許可する（ユーザーに優しい）

どちらが正解というわけではなく、
プロダクトの性質やユーザー層によって変わります。

だからこそ、

isDigits … 半角数字だけ
isDigitsWithZenkaku … 全角も半角に寄せて判定

のように関数を分けておき、
「どちらを使うか」を画面や機能ごとに明示的に選ぶのが、
設計としてきれいなやり方です。

ちょっとだけ手を動かしてみる

コンソールで、次のあたりを試してみてください。

isDigits("123");
isDigits("12.3");
isDigits("-10");
isDigitsWithZenkaku("１２３４５");
isDigitsWithZenkaku("１２３a");
JavaScript

「どこからが true で、どこからが false になるか」を体で感じてみてください。

そのうえで、自分のプロジェクトに

export function isDigits(value) { ... }
export function isDigitsWithZenkaku(value) { ... }
JavaScript

のようなユーティリティを一つ置いて、
「数字だけかどうかを見たいときは、必ずここを通す」
というルールにしてみてください。

それができた瞬間、あなたの検証処理は
「その場しのぎの Number と isNaN」から
「意図を持って設計された数字判定ユーティリティ」に、一段レベルアップします。

スポンサーリンク
タイトルとURLをコピーしました