JavaScript Tips | 文字列ユーティリティ：検証 － ひらがな判定

JavaScript JavaScript
スポンサーリンク

「ひらがな判定」で何をチェックしたいのか

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

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

業務だと、例えば次のような要件がよく出ます。

ふりがな入力欄は「ひらがなのみ」にしたい。
名前の読みが「ひらがな以外を含んでいたらエラー」にしたい。

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

ひらがなの Unicode 範囲をざっくり理解する

JavaScript の正規表現では、「ひらがな」を Unicode の範囲で表現できます。

ひらがなは \u3040 〜 \u309F にまとまっています。

これを使うと、

/[\u3040-\u309F]/
JavaScript

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

「ひらがなを1文字でも含むか」を判定する

containsHiragana の実装

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

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

  const s = String(value);

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

  const re = /[\u3040-\u309F]/;

  return re.test(s);
}
JavaScript

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

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

動きのイメージ

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

「日本語のふりがなが入っているか？」をざっくり見るには、これで十分です。

「全部ひらがなだけか」を判定する

isHiraganaOnly の実装

ふりがな入力欄などでは、

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

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

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

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

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

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

  return re.test(s);
}
JavaScript

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

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

動きのイメージ

isHiraganaOnly("やまだたろう");   // true
isHiraganaOnly(" やまだたろう "); // true（前後の空白は trim 済み）
isHiraganaOnly("山田たろう");     // false（漢字が混ざっている）
isHiraganaOnly("ﾔﾏﾀﾞﾀﾛｳ");       // false（半角カナ）
isHiraganaOnly("やまだたろう1");  // false（数字が混ざっている）
JavaScript

「ふりがなはひらがなだけにしてください」という要件に、そのまま使えます。

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

「ひらがな＋カタカナもOK」にしたい場合

場合によっては、

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

ということもあります。
その場合は、許可する文字の範囲を広げます。

カタカナは \u30A0-\u30FF です。

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

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

半角カナをどうするか

半角カナ（ﾔﾏﾀﾞ など）は \uFF61-\uFF9F にあります。
もし「半角カナも許可したい」なら、範囲に足します。

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

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

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

フロントエンドのふりがな入力チェック

よくあるパターンは、「氏名」と「ふりがな」がセットになっているフォームです。

const furigana = furiganaInput.value;

if (!isHiraganaOnly(furigana)) {
  showError("ふりがなは、ひらがなのみで入力してください。");
}
JavaScript

これだけで、

漢字混じりのふりがな
カタカナだけのふりがな
英数字混じりのふりがな

を簡単に弾けます。

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

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

function validateFuriganaOrThrow(value) {
  if (!isHiraganaOnly(value)) {
    throw new Error("Invalid furigana (must be hiragana only)");
  }
}
JavaScript

フロントとバックの両方で同じユーティリティを使うと、
ルールのブレも防げます。

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

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

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

ひらがなを1文字でも含んでいるか（containsHiragana）
ひらがなだけで構成されているか（isHiraganaOnly）

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

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

「どこまでを許可するか」をユーティリティに閉じ込める

ひらがなだけか。
ひらがな＋カタカナもOKか。
半角カナも含めるか。

この「許可範囲」を画面ごとにバラバラに書き始めると、
後から仕様変更するときに地獄を見ます。

だからこそ、

containsHiragana
isHiraganaOnly
isKanaOnly

のようにユーティリティを一箇所にまとめておき、
「ひらがな・かな周りのルールはここが真実」と決めておくのが、
業務システムとしてのきれいな設計です。

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

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

containsHiragana("山田たろう");
containsHiragana("Yamada");
isHiraganaOnly("やまだたろう");
isHiraganaOnly("山田たろう");
isHiraganaOnly("ﾔﾏﾀﾞﾀﾛｳ");
JavaScript

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

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

export function containsHiragana(value) { ... }
export function isHiraganaOnly(value) { ... }
JavaScript

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

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

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