はじめに

これまで絵文字のバリデーションについてあまり考えたことがなかったので、絵文字の仕様やバリデーション方法についてまとめます。

絵文字について

絵文字は、テキスト上に絵を表示するための特殊な文字です。

😳

例えば、上記のように顔の絵を表示することができます。ちなみに絵文字は英語でも “emoji” と呼ばれ、日本語由来の言葉として世界で広く知られています。

絵文字は、Unicode で表現することができます。さらに、ZWJ シーケンスを使用して、色々な組み合わせからなる絵文字を作ることができます。

例えば、家族の絵文字 👨‍👩‍👦 は、男性 👨(U+1F468)と ZWJ(U+200D)と 女性 👩(U+1F469)から作られます。

結合子（ZWJ)は Unicode で U+200D と表されます。

バリデーションの方法

絵文字の Unicode を正規表現で取得することにより、絵文字を検知することができます。

絵文字はカテゴリごとにある程度 Unicode 範囲が決まっており、その範囲を正規表現で扱うことが可能です。ただし、絵文字は単純なコードポイントの範囲だけでなく、修飾子や結合子を含む場合もあるため、完全な検出にはそれらを考慮する必要があります。

下記のようにして、正規表現で特定の範囲を指定して検出することができます。

const emojiRegex = /[\u2600-\u26FF\u1F300-\u1F5FF\u1F600-\u1F64F\u1F680-\u1F6FF\u1F1E6-\u1F1FF\u1F900-\u1F9FF]/;

また、Unicode では、絵文字の分類や特性を定義するために「Emoji プロパティ」が提供されています。これらのプロパティは、絵文字やその修飾子を判別し、用途に応じたフィルタリングや操作を可能にします。 \p{Emoji} は、Unicode における「Emoji プロパティ」を持つ文字にマッチします。

// 使用例

const emojiRegex = /[\p{Emoji}]/u;

function containsEmoji(text) {
    return emojiRegex.test(text);
}

console.log(containsEmoji("こんにちは🌟")); // true
console.log(containsEmoji("こんにちは"));   // false

この他にも、絵文字表現を表した Emoji_Presentation や絵文字修飾子の Emoji_Modifier があります。 しかし、Emoji プロパティは、モダンブラウザでしかサポートされていなかったりや特定の絵文字を検知できなかったりします。

絵文字バリデーションライブラリ

Javascript の絵文字バリデーションライブラリには、主に下記があります。

１. emoji-regex

Unicode 絵文字に対応する正規表現を提供。

const emojiRegex = require('emoji-regex');
const regex = emojiRegex();
console.log(regex.test('😀')); // true
console.log(regex.test('A')); // false

２. zod

バリデーションライブラリである zod でも絵文字をバリデーションすることができます。

const emojiSchema = z.string().emoji();
console.log(emojiSchema.parse('😀')); // true
console.log(emojiSchema.parse('A')); // false

最後に

これまで絵文字についてなんとなく使用していましたが、いざ調べてみるととても色々な要素があり unicode の理解も深めることができてとても勉強になりました。