はじめに

JavaScript で文字列を操作していると、黒いひし形に？のマークの「�」（U+FFFD）が表示された経験が一度はあると思います。（ブラウザによっては黒で縁取られた四角形が表示されるかもしれません。）

これは「置換文字」（Replacement Character）と呼ばれ、不正な文字を置き換えるために使用されます。

この記事では、JavaScript で「�」が表示される原因と、「�」を表示させないための方法について詳しく解説します。前提知識として Unicode と UTF-16 についても説明します。

Unicode と UTF-16

JavaScript は文字コードとして Unicode を採用し、符号化方式として UTF-16 を採用しています。

文字コード

文字コードは、コンピュータ上で文字を扱うために、文字に番号を割り振って定義したものです。ASCII や Unicode、Shift_JIS などの種類があります。近年では Unicode が主流となりつつあり、様々なシステムで広く利用されています。

Unicode は、世界中のあらゆる言語で使用されるすべての文字を、固有の識別番号で管理する国際規格です。この識別番号のことをコードポイントと呼びます。
例えば、a のコードポイントは 16 進数表記で 61 です（10 進数表記: 97）。

JavaScript で文字列を記述する際、通常の文字表現だけでなく、コードポイントを用いて記述する方法があります。\uXXXX のように Unicode のコードポイントを直接記述する方法です。XXXX には、表現したい文字のコードポイントを 16 進数で記述します。
例えば、'a' と記述する代わりに '\u0061' と記述することが可能です。

符号化方式

符号化方式は、コードポイントをビット列に変換する方法です。コンピュータ上では、あらゆるデータが 2 種類の電気信号 ( 0 と 1 に対応）で表現されています。そのため、コンピュータ上で文字を扱う際にはコードポイントをビット列に変換する必要があります。符号化方式には UTF-8 やUTF-16 などの種類があります。

UTF-16 は文字を 16 ビット単位で表現する符号化方式です。

a を UTF-16 で表現

`a` のコードポイントは 10 進数表記で `61` で 2 進数表記で `110 0001` です。

UTF-16 は文字を 16 ビット単位で表現するため、以下のようにメモリに格納されます。
0000 0000 0110 0001

16 ビット（= 2 バイト）では、理論的には 65,536（2 の 16 乗）種類の文字を表すことができます。コードポイントが 0 から FFFF（10 進数表記で 65,535）の範囲は基本多言語面（BMP）と呼ばれます。BMP には、英数字、記号、大部分のヨーロッパ言語、アジア言語の文字などが含まれています。

UTF-16 では BMP 内の文字は 16 ビットで表現しますが、BMP 外の文字はサロゲートペアと呼ばれる 2 つの 16 ビット値の組み合わせ（32 ビット）を用いて表現します。

サロゲートペア

サロゲートペア（surrogate pair）は、BMP 外の文字を表現するために使用されます。これらの文字は 2 つの 16 ビット値（サロゲートペア）を組み合わせて表現されます。

サロゲートペアは、以下の 2 つの値で構成されます。

上位サロゲート: D800 ~ DBFF の範囲のコードポイント
下位サロゲート: DC00 ~ DFFF の範囲のコードポイント

上位サロゲートと下位サロゲートを組み合わせることで、1,048,576（2 の 20 乗）種類の文字を追加で表現することができます。

上位サロゲートと下位サロゲートは、単独で有効な文字として定義されていません。つまり、D842 や DFB7 などの値を単独で使うことはできません。

const surrogatePair = '𠮷'; // BMP 外の文字
console.log(surrogatePair.length); // 2
console.log(surrogatePair.charCodeAt(0)); // 55362 (16進数表記: D842)
console.log(surrogatePair.charCodeAt(1)); // 57271 (16進数表記: DFB7)

置換文字「�」が表示される原因

「�」が表示される主な原因は以下の通りです。

サロゲートペアの不適切な処理
Unicode の不適切なエンコーディングやデコーディング

不適切な処理

JavaScript で文字列を処理する際に、charAt メソッドやインデックスを使う場合がありますが、これらの方法はユニコードのサロゲートペアや結合文字を正しく扱うことができないため、注意が必要です。

let text = 'foo';
console.log(text[0]);        // 'f'
console.log(text.charAt(1)); // 'o'

このコードは単純な BMP 内の文字列を扱っている場合には問題ありません。

しかし、Unicode の絵文字など、サロゲートペアを含む文字列を処理する場合には問題が発生します。

'😊'[0];        // '\uD83D'
'😊'.charAt(1); // '\uDE0A'

// \uD83D も \uDE0A も console.log で表示する場合、� と表示されます。
const str = '😊';
for (let i = 0; i < str.length; i++) {
    console.log(str[i]);
}
// �
// �

// Web ページ上で表示する場合も、� と表示されます。
// （Safari や Firefox では 黒で縁取り四角形が表示されるかもしれません。）
document.getElementById('foo').innerText = "😊".charAt(0);

上記のコードでは、絵文字「😊」はサロゲートペアで表現されています。しかし、charAt メソッドやインデックスを使用して文字を取得しようとすると、サロゲートペアの一部のみを取得してしまい、結果的に不完全な Unicode 文字となり、「�」として表示されます。

サロゲートペアの正しい処理

サロゲートペアは、UTF-16 エンコーディングで BMP 外の文字を表現するための方法です。

サロゲートペアを正しく扱うためには、for...of ループやスプレッド構文（[... ]）、Array.from メソッドを使用します。

const str = 'A😊';

// for...of ループ
for (const char of str) {
    console.log(char); // 正しく 'A' と '😊' が表示される
}

// スプレッド構文
const chars = [...str];
console.log(chars); // 正しく ['A', '😊'] と表示される

// Array.from
const charsFromArray = Array.from(str);
console.log(charsFromArray); // 正しく ['A', '😊'] と表示される

リージョナルインディケータシンボル文字の正しい扱い

リージョナルインディケータシンボル文字（Regional Indicator Symbol Letters）も同様に、正しい方法で処理する必要があります。

リージョナルインディケータシンボル文字は、ユニコードで国旗の絵文字を表現するために使用される特殊な文字です。これらの文字は、1F1E6 から 1F1FF までの範囲に定義されており、A から Z までの英字に対応しています。

以下のように 2 つのリージョナルインディケータシンボル文字を組み合わせて旗を表現します。

🇯🇵（日本）：1F1EF（🇯） + 1F1F5（🇵）
🇺🇸（アメリカ）：1F1FA（🇺） + 1F1F8（🇸）
🇬🇧（イギリス）：1F1EC（🇬） + 1F1E7（🇧）

1F1E6 から 1F1FF までの範囲は BMP 外の文字であり、サロゲートペアを使用して表現します。各サロゲートペアは 2 つの 16 ビット値で構成されており、1 つのリージョナルインディケータシンボル文字は 32 ビット（4バイト）で表現されます。

例えば、🇺🇸 は 1F1FA（🇺）と 1F1F8（🇸）で構成されますが、1F1FA（🇺）は D83C と DDFA、1F1F8（🇸）は D83C と DDF8 のサロゲートペアを用いて表現します。つまり、🇺🇸 は D83C DDFA D83C DDF8 の 32 バイトで表現されます。

const str = '🇺🇸'; // '\uD83C\uDDFA\uD83C\uDDF8'

// 不適切な処理
console.log(str.charAt(0)); // '\uD83C' (不完全な文字)
// �
console.log(str.charAt(1)); // '\uDDFA' (不完全な文字)
// �


// 正しい文字列処理
const chars = [...str];

console.log(chars); 
// ['🇺', '🇸']

// join メソッドで元に戻すことができます
console.log(chars.join(''))
// 🇺🇸

この例では、スプレッド構文を使用して文字列を分割することで、サロゲートペアを正しく処理し、国旗絵文字を 2 つのリージョナルインディケータシンボル文字として正しく扱うことができます。

ゼロ幅結合子（ZWJ）の処理

ゼロ幅接合子（\u200D）を含む文字列も正しく処理する必要があります。

ゼロ幅結合子は、複数の絵文字を結合して 1 つの絵文字として表示するために使用されます。これにより、例えば家族の絵文字や複合絵文字が作成されます。

// 🐻 と ❄ を \u200D で結合すると 🐻‍❄ になります
console.log('🐻\u200D❄') // 🐻‍❄

const str = '👩‍👩‍👧‍👦';

// ZWJ を含む文字列の処理
const chars = [...str];
console.log(chars); // ['👩', '‍', '👩', '‍', '👧', '‍', '👦']

// join メソッドで元に戻すことができます
console.log(chars.join('')) // 👩‍👩‍👧‍👦

不適切なエンコーディングやデコーディング

TextEncoder と TextDecoder を使用できます。以下は、UTF-8 でエンコードされた文字列を ISO-8859-1（latin1）でデコードする例です。このような誤ったエンコーディングによって、文字列が正しく表示されず、置換文字が現れることがあります。

const text = 'こんにちは';
const encoder = new TextEncoder();
// UTF-8 でエンコードされた文字の配列
const utf8Array = encoder.encode(text);

// ISO-8859-1（latin1）でデコードする（不適切な処理）
const decoder = new TextDecoder('iso-8859-1');
const incorrectText = decoder.decode(utf8Array);

// 正しい UTF-8 でのデコード
const correctDecoder = new TextDecoder('utf-8');
const correctText = correctDecoder.decode(utf8Array);

// 結果の表示
console.log('UTF-8エンコード: ', utf8Array); 
// UTF-8エンコード: [227, 129, 147, 227, 130, 147, 227, 129, 171, 227, 129, 161, 227, 129, 175]
console.log('不適切なデコード: ', incorrectText);
// 不適切なデコード: ã�“ã‚“ã�«ã�¡ã�¯
// （ブラウザによっては、`不適切なデコード: ã“ã‚“ã«ã¡ã¯` と表示される場合もあります）
console.log('正しいデコード: ', correctText); 
// 正しいデコード: こんにちは

まとめ

JavaScriptで「�」が表示される問題を回避するためには、Unicode 文字列を正しく処理することが重要です。

for...of ループ、スプレッド構文、Array.from メソッドを使用することで、サロゲートペア、結合文字、ゼロ幅結合子などの特殊な文字を正しく扱うことができます。これにより、Unicode 文字列を含む文字列操作でのバグや表示の問題を回避できます。