JavaScript 絵文字のデコード、Fitzpatrick Scale による並べ替え

JavaScript で配列を並べ替えることを考えるとき、私たちは通常、文字列、数値、さらにはオブジェクトが昇順または降順に編成されていると想像します。しかし、配列の要素が絵文字の場合はどうなるでしょうか?特に肌のトーンの修飾子が関係する場合、その答えはあなたを驚かせるかもしれません!

このブログでは、JavaScript が絵文字の並べ替えをどのように処理するかを詳しく説明し、この動作に影響を与える フィッツパトリック スケール を調査し、途中でいくつかの風変わりな例を紹介します。

---

例

スクリーンショットのコード スニペットから始めましょう:

["??", "??", "??", "??", "??"].sort();

このコードを実行すると、次の出力が生成されます:

["??", "??", "??", "??", "??"]

一見すると、一体何が起こったのでしょうか? 絵文字は「明るいものから暗いもの」の順に並べられています。なぜこれが起こるのかを理解するには、JavaScript と Unicode の内部を覗いてみる必要があります。

---

実際に何が起こっているのでしょうか?

1. 絵文字の仕組み

すべての絵文字は、一意の Unicode コード ポイント で表されます。例:

• ?は U 1F469 で表されます。
• ? (肌のトーンの修飾子) は U 1F3FF で表されます。

「??」のような絵文字が表示された場合と表示されますが、実際には 2 つの Unicode 文字の組み合わせです:

• 基本の絵文字 (?)。
• 肌のトーンの修飾子 (?)。

2. JavaScript での並べ替え

JavaScript の .sort() メソッドは、配列要素の Unicode 値を比較することによって機能し、デフォルトではそれらを文字列として扱います。これは、絵文字の並べ替え順序が、基になる Unicode 値によって決定されることを意味します。

3. フィッツパトリックスケール

フィッツパトリック スケールは、人間の肌の色調をタイプ I (最も明るい) からタイプ VI (最も暗い) まで分類するシステムです。 Unicode は、絵文字に肌の色の多様性を導入するためにこのスケールを採用しました。修飾子がどのようにフィッツパトリックスケールに対応するかを次に示します:

• ? (タイプI): ライト
• ? (タイプ II): ライト-ミディアム
• ? (タイプⅢ): 中
• ? (タイプ IV): 中暗
• ? (タイプV)：ダーク

これらの修飾子を使用して絵文字を並べ替える場合、JavaScript は基本的に、フィッツパトリック スケールに対応する肌の色修飾子の数値に基づいて絵文字を並べ替えます。

---

実際に動作を見てみましょう

これが実際的なデモンストレーションです:

["??", "??", "??", "??", "??"].sort();

それを壊す

• .sort() メソッドは、各絵文字の Unicode 値を比較します。
• 肌のトーン修飾子 (?、? など) の Unicode 値が増加しています。
• これにより、絵文字が最も明るい (?) から最も暗い (?) の順に並べ替えられます。

---

楽しい実験

いくつかのバリエーションを試して、結果を観察してみましょう。

1.混合絵文字

肌の色調修飾子のないベース絵文字を含めるとどうなりますか?

["??", "??", "??", "??", "??"]

出力:

// Array of emojis with skin-tone modifiers
const emojis = ["??", "??", "??", "??", "??"];

// Sort the array
const sortedEmojis = emojis.sort();

// Log the sorted array
console.log(sortedEmojis); 
// Output: ["??", "??", "??", "??", "??"]

ここで、基本の絵文字 ? Unicode 値が最も小さいため最初に表示され、ソートされた肌の色のバリエーションが続きます。

---

2.他の絵文字グループを並べ替える

他の絵文字グループを手のジェスチャーなどの修飾子で並べ替えたらどうなるでしょうか?

const mixedEmojis = ["??", "??", "?", "??", "??", "??"];
console.log(mixedEmojis.sort());

出力:

["?", "??", "??", "??", "??", "??"]

もう一度言いますが、絵文字はフィッツパトリックスケールに基づいて並べ替えられています。

---

Unicode の舞台裏

並べ替え動作をより深く理解するために、各絵文字の Unicode 値を調べてみましょう:

const handEmojis = ["??", "??", "??", "??", "??"];
console.log(handEmojis.sort());

これにより、ベース絵文字とその修飾子の Unicode 値が記録されます。肌のトーン修飾子の値が段階的に増加していることがわかります。

---

続きを読む

• Unicode 技術標準 #51
• MDN: Array.prototype.sort()

以上がJavaScript 絵文字のデコード、Fitzpatrick Scale による並べ替えの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。