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

JavaScript JavaScript
スポンサーリンク

「英数字判定」で何をチェックしたいのかをはっきりさせる

まず最初に決めておきたいのは、あなたがやりたいのは次のどちらかです。

「文字列が“全部”英数字だけかどうかを判定したい」
「文字列の中に“英数字が含まれているか”だけ知りたい」

業務ユーティリティとしてよく使うのは前者、
つまり「この値は英数字だけで構成されているか？」というチェックです。

例えば次のような要件です。

ユーザーIDは英数字のみ
商品コードは英数字のみ
半角英数字だけの入力に制限したい

ここをはっきりさせておくと、正規表現も迷わず書けるようになります。

まずは「英数字とは何か」をざっくり押さえる

英数字と言うとき、基本的には「A〜Z」「a〜z」「0〜9」のことを指します。

A B C ... Z
a b c ... z
0 1 2 ... 9

ここで重要なのは、「半角の英字・数字」だけを対象にするのか、
「全角英数字（ＡＢＣ１２３）」も許可するのか、という設計です。

多くの業務システムでは、

ユーザーIDやコード類 → 半角英数字のみ
表示用の名前など → 全角もOK

という分け方をすることが多いので、
まずは「半角英数字だけ」を対象にした判定から作っていきます。

半角英数字だけで構成されているかを判定する基本ユーティリティ

正規表現の基本形

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

/^[A-Za-z0-9]+$/
JavaScript

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

^ … 文字列の先頭
[A-Za-z0-9]+ … A〜Z、a〜z、0〜9 のいずれかが1文字以上
$ … 文字列の末尾

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

実際のユーティリティ関数

これを使って、業務でそのまま使える関数にします。

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

  const s = String(value);

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

  return /^[A-Za-z0-9]+$/.test(s);
}
JavaScript

ポイントは次の通りです。

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

動きのイメージ

isAlnum("abc");       // true
isAlnum("ABC123");    // true
isAlnum("a1b2c3");    // true
isAlnum("abc_123");   // false（アンダースコアが入っている）
isAlnum("あいう");     // false
isAlnum("");          // false
isAlnum(12345);       // true（"12345" として判定）
JavaScript

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

「英数字＋一部の記号」を許可したい場合

よくある要件：「英数字とアンダースコアだけOK」

ユーザーIDやシステム用のキーでは、

「英数字だけ」ではなく「英数字とアンダースコア（_）だけOK」にしたい

という要件もよく出てきます。

その場合は、正規表現の「許可する文字の集合」を少し広げます。

/^[A-Za-z0-9_]+$/
JavaScript

ユーティリティとしてはこう書けます。

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

  const s = String(value);

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

  return /^[A-Za-z0-9_]+$/.test(s);
}
JavaScript

動きはこんな感じです。

isAlnumUnderscore("user_01"); // true
isAlnumUnderscore("user-01"); // false（ハイフンはNG）
isAlnumUnderscore("user01");  // true
JavaScript

「どの記号まで許可するか」は要件次第ですが、
考え方は「許可したい文字を [] の中に足していく」だけです。

「英数字を含んでいるか」だけを知りたい場合

全部が英数字じゃなくてもよいパターン

ときどき、

「文字列の中に英数字が1文字でも含まれているかどうかを知りたい」

という要件もあります。

例えば、

「パスワードは英字と数字を両方含んでほしい」
「説明文の中に英数字が含まれているかどうかをチェックしたい」

といったケースです。

この場合は、「全体が英数字だけか」ではなく、
「英字が1つ以上あるか」「数字が1つ以上あるか」を別々に見るのが分かりやすいです。

function containsLetter(value) {
  if (value == null) return false;
  return /[A-Za-z]/.test(String(value));
}

function containsDigit(value) {
  if (value == null) return false;
  return /\d/.test(String(value));
}
JavaScript

これを組み合わせて、

function containsLetterAndDigit(value) {
  const s = String(value);
  return /[A-Za-z]/.test(s) && /\d/.test(s);
}
JavaScript

とすれば、

containsLetterAndDigit("abc");    // false（数字がない）
containsLetterAndDigit("123");    // false（英字がない）
containsLetterAndDigit("abc123"); // true（両方ある）
JavaScript

のように、「英字と数字を両方含むか」を判定できます。

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

「半角だけ」か「全角も含めるか」は要件で決める

日本語環境だと、ユーザーが全角英数字を入力することもあります。

ＡＢＣ１２３

これを「英数字として許可するかどうか」は、要件次第です。

もし「全角もOK」にしたいなら、
判定の前に「全角→半角」の正規化を挟むのがシンプルです。

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

これを使って、こう書き換えられます。

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

  const s = toHalfWidth(value);

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

  return /^[A-Za-z0-9]+$/.test(s);
}
JavaScript

動きはこうです。

isAlnumWithZenkaku("ＡＢＣ１２３"); // true（半角に寄せてから判定）
isAlnumWithZenkaku("ABC123");      // true
isAlnumWithZenkaku("ＡＢＣ_１２３"); // false（アンダースコアは許可していない）
JavaScript

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

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

ユーザーID・ログインIDのバリデーション

よくある要件は、

「ユーザーIDは半角英数字のみ」
「長さは 4〜20 文字」

のようなものです。

その場合は、英数字判定と長さチェックを組み合わせます。

function isValidUserId(value) {
  if (!isAlnum(value)) return false;

  const len = String(value).length;
  return len >= 4 && len <= 20;
}
JavaScript

これで、

"ab" → false（短すぎ）
"abc123" → true
"abc_123" → false（英数字以外が含まれている）

のように判定できます。

商品コード・システム用キーの検証

商品コードやシステム内部のキーも、
「英数字のみ」にしておくと扱いやすくなります。

DB の検索条件にそのまま使いやすい
URL の一部に埋め込んでも壊れにくい
他システムとの連携でもトラブルが少ない

こういった理由から、「英数字判定ユーティリティ」は
業務システムではかなり出番が多いです。

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

「何を許可するか」を関数名に埋め込む

英数字判定といっても、バリエーションがあります。

半角英数字だけ
半角英数字＋アンダースコア
全角も含めて英数字扱い

これを全部 isAlnum という一つの関数でやろうとすると、
「この関数、何をどこまで許可しているんだっけ？」と分かりづらくなります。

なので、例えばこう分けるのがおすすめです。

export function isAlnum(value) { ... }                 // 半角英数字のみ
export function isAlnumUnderscore(value) { ... }       // 半角英数字＋_
export function isAlnumWithZenkaku(value) { ... }      // 全角も半角に寄せて判定
JavaScript

関数名を見ただけで「意図」が分かるようにしておくと、
後から読む人にも優しいコードになります。

「判定」と「正規化」を分ける

全角→半角のような「正規化」と、
英数字かどうかの「判定」は、役割が違う処理です。

これを一つの関数にごちゃっと詰め込むと、
テストもしづらいし、仕様変更もしづらくなります。

なので、

正規化用のユーティリティ（toHalfWidth）
判定用のユーティリティ（isAlnum 系）

を分けておくと、
「どこで何をしているか」がとてもクリアになります。

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

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

isAlnum("ABC123");
isAlnum("ABC_123");
isAlnumWithZenkaku("ＡＢＣ１２３");
isAlnumWithZenkaku("ＡＢＣ_１２３");
JavaScript

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

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

export function isAlnum(value) { ... }
export function isAlnumUnderscore(value) { ... }
export function isAlnumWithZenkaku(value) { ... }
JavaScript

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

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

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