「ある文字列に日本語が含まれるか」をJavaScriptの正規表現で判定してみよう

## 参考リンク集

### \p{…}
- Unicode 文字クラスエスケープ: \p{…}, \P{…} property | mdn：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape
- escape: \p{…}, \P{…} | Can I use：https://caniuse.com/mdn-javascript_regular_expressions_unicode_character_class_escape

### uフラグ
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode#%E8%A7%A3%E8%AA%AC

### Unicode
- Unicode Utilities: UnicodeSet：https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp
- Unicode 16.0 Character Code Charts：https://www.unicode.org/charts/
- Unicode® Statistics：https://www.unicode.org/versions/stats/

Transcript

1. 「ある文字列に日本語が含まれるか」を JavaScriptの正規表現で判定してみよう tsuji @ 株式会社Gaji-Labo 2025/03/28 Sendai Frontend Meetup #16
2. 自己紹介 株式会社Gaji-Labo フロントエンドエンジニア 最近はReact Router（Remix）を触ったりしてます。 つじ ＠tsuji-108
3. 会社紹介 スタートアップや事業会社の「プロダクト成 長支援」をチームワークで実現 Gaji-Laboは、スタートアップのプロダクト開発や新 規事業チームの成長支援の会社です。 フロントエンド開発やUIデザインなどの専門技術の 提供を軸に、成長支援のためのチームワークの提 供を一番大切にしています。 フロントエンド開発 UIデザイン / 情報設計 チーム / プロセス支援
4. かつては「一-龥ぁ-んァ-ヶ」なる呪文を唱えていましたが、現代ではより簡単 に判定できるようになりました。 現代のJavaScriptの正規表現による日本語判定
5. const hasJapanese = (target) => { // ひらがな if (/\p{Script=Hiragana}/u.test(target)) return true; // カタカナ if (/\p{Script=Katakana}/u.test(target)) return true; // 漢字 if (/\p{Script=Han}/u.test(target)) return true; // 約物・記号など if (/\p{Script=Common}/u.test(target)) return true; return false; }; 現代のJavaScriptの正規表現による日本語判定
6. /\p{Script=XXX}/uとは？ • \p ◦ \pでUnicodeプロパティを指定したマッチが可能になります。 ▪ > 「あ」のプロパティ ◦ 2025.03時点のJavaScriptにおいて、\pで指定可能なプロパティは、 General_Category(gc)・Script(sc)・Script_Extensions(scx)の3種類です。 • Script ◦ 文字体系のことで「同種の表記に使われるひとまとまりの文字の体系」を意味しま す。 （Wikipediaより引用。詳しくは文字体系と表記体系 | Wikipediaをご覧ください。） • u ◦ uは正規表現でサロゲートペアを扱うために付与します。
7. まとめると… 「\pでUnicodeプロパティを検索対象とし、そのうちの Script（文字体系） がXXXに該当する文字にマッチさせる」 正規表現です。 例：/\p{Script=Hiragana}/uは「UnicodeプロパティのScriptがHiraganaに該 当する文字にマッチさせる」正規表現。 /\p{Script=XXX}/uとは？
8. • 現代の各種ブラウザ・ Node.js・Denoでサポートされています！ ◦ > Unicode 文字クラスエスケープ: \p{…}, \P{…} ブラウザーの互換性| mdn ◦ > escape: \p{…}, \P{…} | Can I use • ひらがな・カタカナ・漢字以外の文字体系も指定できます！ ◦ > mdnの解説ページ ◦ /\p{Script=Latin}/uでラテン文字に。/\p{Script=Grek}/uでギリシャ文字に…。 • /\p{Script=Han}/uは、サロゲートペアを使用する漢字たちも判定対象に含まれま す！ ◦ 「𩸽（ほっけ）」（符号：U+29E3D = 10 | 10011110 | 00111101）のような2バイトよ り大きい符号をもつ漢字も判定対象です。 /\p{Script=XXX}/uのすごいところ
9. /\p{Script=XXX}/uでマッチする範囲はUnicode Utilities: UnicodeSetで確 認できます。 https://util.unicode.org/UnicodeJsps/list-unicodeset.jspにアクセスして、 Input欄に「\p{Script=XXX}」と入力すると、マッチする範囲がページ下部に 展開されます。 （※「/\p{Script=XXX}/u」と入力すると「/」と「u」が含まれてしまうので、ご注 意を。） /\p{Script=XXX}/uでマッチする範囲を調べたいとき
10. ▪/\p{Script=XXX}/uを使っても「マッチさせる範囲はどこまでか」は、あらか じめ取り決める必要があります。 例えば、約物・記号は注意です。 /\p{Script=Common}/uは、「㎏」「㎝」「〶」「〠」「۝ （符号：U+06DD。アラビ ア語の記号）」「😀」ともマッチします。 Script=Commonは特定の文字体系に限定されず、広く利用される文字（数 字、句読点、記号、制御文字…）をまとめたモノであるため。 /\p{Script=XXX}/uの注意点 その1
11. /\p{Script=XXX}/uの注意点 その1 そもそもの要望が 「日本語に関わる約物（句読点など）にはマッチさせたい。」 「他言語や絵文字とはマッチさせたくない」のであれば…、 \p{Script=Common}でマッチする範囲のうち、「CJK Symbols And Punctuation」で検索して、必要になるUnicodeの符号のみを狙い撃ちする …などの代替案を採用した方が適切でしょう。
12. /\p{Script=XXX}/uの注意点 その1 const hasJapanese = (target) => { // ひらがな if (/\p{Script=Hiragana}/u.test(target)) return true; // …略… // Script=Commonを使わずに、CJK symbols and punctuation（https://www.unicode.org/charts/PDF/U3000.pdf）の約物・記号を狙い撃 ちするパターン // CJK symbols and punctuation if (/[\u3000-\u3006]/.test(target)) return true; // CJK angle brackets if (/[\u3008-\u300B]/.test(target)) return true; // CJK corner brackets if (/[\u300C-\u300F]/.test(target)) return true; // …略… return false; };
13. ▪Unicodeは改定され続けている 。 （注意点として挙げますが、そこまで気にせずで良いかと。） 例えば、漢字は変化が著しく、2023年にも622字の新たな漢字が追加され ています。 > Unicode® Statistics > Unicode® Version 15.1 Character Counts /\p{Script=XXX}/uの注意点 その2
14. 今後、考えられるケースとして「㋿」に次ぐ新しい元号の記号が登場したとき に、最新の端末ではhasJapanese関数で新しい元号の記号を判定できるも のの、古い端末では判定できない。 …なんて事が起こりえるかもしれません。 …とはいえ、 Unicodeの改定はアプリケーション開発者側で対応できる範囲を超えていま すし、「Unicodeは改定され続けているんだな」と記憶の片隅に留めておくレ ベルで良いでしょう。 /\p{Script=XXX}/uの注意点 その2 娒
15. • 現代のJavaScriptの正規表現による日本語判定。 ◦ ひらがなにマッチさせるなら、/\p{Script=Hiragana}/u.test(str) ◦ カタカナにマッチさせるなら、/\p{Script=Katakana}/u.test(str) ◦ 漢字にマッチさせるなら、/\p{Script=Han}/u.test(str) ◦ 約物・記号などにマッチさせるなら、/\p{Script=Common}/u.test(str) • /\p{Script=XXX}/uは、各種ブラウザ・Node.js・Denoでサポートされている。 • /\p{Script=Han}/uは、サロゲートペアを使用する漢字たちも判定対象に含まれる。 • /\p{Script=XXX}/uを利用するときも、あらかじめ「どの範囲までマッチさせるか」の取 り決めはとても重要です。 まとめ
16. 参考リンク集 • \p{…} ◦ Unicode 文字クラスエスケープ: \p{…}, \P{…} property | mdn：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Regular_expressions/Unic ode_character_class_escape ◦ escape: \p{…}, \P{…} | Can I use：https://caniuse.com/mdn-javascript_regular_expressions_unicode_character_class_escape • uフラグ ◦ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicod e#%E8%A7%A3%E8%AA%AC • Unicode ◦ Unicode Utilities: UnicodeSet：https://util.unicode.org/UnicodeJsps/list-unicodeset.jsp ◦ Unicode 16.0 Character Code Charts：https://www.unicode.org/charts/ ◦ Unicode® Statistics：https://www.unicode.org/versions/stats/