JavaScript Tips | 文字列ユーティリティ：検証 － カタカナ判定

JavaScript JavaScript
スポンサーリンク

「カタカナ判定」で何をチェックしたいのか

まずゴールをはっきりさせます。
カタカナ判定には、大きく二つのニーズがあります。

「この文字列は“全部カタカナだけ”かを判定したい」
「この文字列に“カタカナが1文字でも含まれているか”を知りたい」

業務だと、例えばこんな要件がよく出ます。

フリガナ（カナ）入力欄は「全角カタカナのみ」にしたい。
会社名カナ・氏名カナなどで、ひらがな・漢字・英数字が混ざっていたらエラーにしたい。

ここでは、この二つをきちんと分けてユーティリティ化していきます。

カタカナの Unicode 範囲をざっくり理解する

JavaScript の正規表現では、「カタカナ」を Unicode の範囲で表現できます。

全角カタカナは \u30A0 〜 \u30FF にまとまっています。

これを使うと、

/[\u30A0-\u30FF]/
JavaScript

で「カタカナ1文字」を表現できます。
この範囲をベースに、「含んでいるか」「だけか」を作り分けます。

「カタカナを1文字でも含むか」を判定する

containsKatakana の実装

まずは、「この文字列にカタカナが1文字でも含まれているか？」を判定する関数です。

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

  const s = String(value);

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

  const re = /[\u30A0-\u30FF]/;

  return re.test(s);
}
JavaScript

ここでやっていることはシンプルです。

null / undefined は即 false。
数値が来ても判定できるように String(value) で文字列化。
空文字は false。
[\u30A0-\u30FF] が1文字でも含まれているかを test でチェック。

動きのイメージ

containsKatakana("ヤマダタロウ"); // true
containsKatakana("山田タロウ");   // true（漢字＋カタカナ）
containsKatakana("Yamada");      // false
containsKatakana("やまだたろう"); // false（ひらがな）
containsKatakana("ﾔﾏﾀﾞﾀﾛｳ");     // false（半角カナのみ）
JavaScript

「カタカナが混ざっているか？」をざっくり見るには、まずこれで十分です。

「全部カタカナだけか」を判定する

isKatakanaOnly の実装

フリガナ入力欄などでは、

「ひらがなや漢字、英数字が混ざっていたらダメ」
「全角カタカナだけにしてほしい」

という要件がよくあります。
その場合は、「カタカナ以外が混ざっていないか」をチェックします。

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

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

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

  const re = /^[\u30A0-\u30FF]+$/;

  return re.test(s);
}
JavaScript

ここが重要ポイントです。

trim() して前後の空白を削る（うっかりスペースを入れても救済したい場合）。
^[\u30A0-\u30FF]+$ は「先頭から末尾まで、カタカナだけが1文字以上」という意味。
つまり、「カタカナ以外が1文字でも混ざっていたら false」。

動きのイメージ

isKatakanaOnly("ヤマダタロウ");     // true
isKatakanaOnly(" ヤマダタロウ ");   // true（前後の空白は trim 済み）
isKatakanaOnly("山田タロウ");       // false（漢字が混ざっている）
isKatakanaOnly("やまだタロウ");     // false（ひらがなが混ざっている）
isKatakanaOnly("ﾔﾏﾀﾞﾀﾛｳ");         // false（半角カナ）
isKatakanaOnly("ヤマダタロウ1");    // false（数字が混ざっている）
JavaScript

「フリガナは全角カタカナで入力してください」という要件に、そのまま使えます。

半角カナをどう扱うかを決める

半角カナを「許可するかどうか」は要件次第

日本語環境だと、半角カナもよく出てきます。

"ﾔﾏﾀﾞﾀﾛｳ"

半角カナは \uFF61-\uFF9F にあります。
これを「カタカナとして許可するかどうか」は、要件次第です。

もし「半角カナも許可したい」なら、範囲に足します。

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

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

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

  const re = /^[\u30A0-\u30FF\uFF61-\uFF9F]+$/;

  return re.test(s);
}
JavaScript

動きはこうなります。

isKatakanaOrHankakuKana("ヤマダタロウ"); // true
isKatakanaOrHankakuKana("ﾔﾏﾀﾞﾀﾛｳ");     // true
isKatakanaOrHankakuKana("山田タロウ");   // false
JavaScript

ただし、半角カナは見た目も崩れやすく、
業務システムでは「禁止」にすることも多いので、
まずは「全角カタカナのみ」から始めて、必要になったら広げるのがおすすめです。

ひらがな＋カタカナを許可したい場合（かな判定）

「かなならOK（ひらがな・カタカナ両方）」という要件

場合によっては、

「ふりがなはひらがな推奨だけど、カタカナも許可したい」
「かな文字ならどちらでもよい」

ということもあります。
その場合は、ひらがなとカタカナの両方を許可します。

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

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

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

  const re = /^[\u3040-\u309F\u30A0-\u30FF]+$/;

  return re.test(s);
}
JavaScript

これで、「ひらがな＋カタカナだけ」を許可できます。

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

フリガナ（カナ）入力チェック

典型的なのは、「氏名カナ」「会社名カナ」などの入力欄です。

const kana = kanaInput.value;

if (!isKatakanaOnly(kana)) {
  showError("フリガナは全角カタカナのみで入力してください。");
}
JavaScript

これだけで、

ひらがな混じり
漢字混じり
英数字混じり
半角カナ

といった「よくある間違い」を簡単に弾けます。

バックエンド側のバリデーション

API でカナを受け取るときにも、
最低限の形式チェックをしておくと、
明らかにおかしいデータが DB に入るのを防げます。

function validateKanaOrThrow(value) {
  if (!isKatakanaOnly(value)) {
    throw new Error("Invalid kana (must be full-width katakana only)");
  }
}
JavaScript

フロントとバックで同じユーティリティを共有できると、
ルールのブレも防げます。

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

「含んでいるか」と「だけか」を関数レベルで分ける

カタカナ判定には、少なくとも二つの用途があります。

カタカナを1文字でも含んでいるか（containsKatakana）
カタカナだけで構成されているか（isKatakanaOnly）

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

なので、目的ごとに関数を分けておくと、
呼び出し側のコードも読みやすくなります。

「半角カナをどう扱うか」を最初に決める

半角カナを許可するかどうかで、ユーザー体験もデータ品質も変わります。

全角カタカナだけ許可（見た目がきれい・厳しめ）
半角カナも許可（ユーザーに優しいが、見た目が崩れやすい）

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

だからこそ、

isKatakanaOnly … 全角カタカナのみ
isKatakanaOrHankakuKana … 全角＋半角カナ

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

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

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

containsKatakana("山田タロウ");
containsKatakana("Yamada");
isKatakanaOnly("ヤマダタロウ");
isKatakanaOnly("山田タロウ");
isKatakanaOnly("ﾔﾏﾀﾞﾀﾛｳ");
JavaScript

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

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

export function containsKatakana(value) { ... }
export function isKatakanaOnly(value) { ... }
JavaScript

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

それだけで、あなたの文字列検証は
場当たり的な if と正規表現から、
意図の通った「カタカナ判定ユーティリティ」に一段レベルアップします。

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