こんにちは。フロントエンドの現場で長年コードと向き合っていると、たまに「えっ、こんなところでバグるの？」という、ちょっと意地悪な問題に遭遇することがあります。
今回は、そんな地味だけど実はめちゃくちゃ大切な、「サロゲートペア」という少し難しいテーマを、日常の例えを交えながら優しく紐解いていこうと思います。
最近のJavaScriptに追加された `isWellFormed()` と `toWellFormed()` というメソッド。名前だけ見ると強そうですが、やっていることはとてもシンプルで温かい仕組みなんですよ。
—
1. まずは「サロゲートペア」という不思議な二人組を知ろう
皆さんは、絵文字やちょっと珍しい漢字をWebページで表示させようとして、なぜか「？（クエスチョンマーク）」や「□（四角）」に化けてしまった経験はありませんか？
実は、コンピュータが扱う文字の中には、「一人で完結する文字」と「二人セットで初めて一つの文字になれる文字」が存在します。この「二人セット」のペアのことを、専門用語でサロゲートペアと呼びます。
お買い物の流れでイメージしてみて
例えば、レジでお会計をするときを想像してください。
- 普通の文字： 一枚の「お札」で支払えます。シンプルですね。
- サロゲートペア： 「1円玉」と「5円玉」を組み合わせて「6円分」にするようなものです。もし片方のコインを落としてしまったら、お会計はエラーになりますよね？
JavaScriptの世界でも同じです。この「二人組」がバラバラになってしまうと、プログラムは「あれ、この文字おかしくない？」と混乱して、結果として文字化けを起こしてしまうのです。
—
2. 仲良し二人組を確認する：`isWellFormed()`
`isWellFormed()` は、いわば「今、文字列の中にバラバラになったペアはいないかな？」とチェックしてくれる番人です。
「Well-Formed（ウェル・フォームド）」は「正しく形作られている」という意味。つまり、「ちゃんと二人組が揃っているかな？」という確認ですね。
// 正常な場合
const normalText = “こんにちは”;
console.log(normalText.isWellFormed()); // true（問題なし！）
// 悪い例：サロゲートペアの片割れだけが存在する状態
// ※ここではあえて壊れた文字列を作ります
const brokenText = “\uD83D”; // 笑顔の絵文字の「片方」だけ
console.log(brokenText.isWellFormed()); // false（あちゃー、バラバラですね！）
もし `false` が返ってきたら、「おっと、誰かがペアを壊しているぞ」と気づくことができます。
—
3. バラバラなら直してあげよう：`toWellFormed()`
「せっかく文字列を受け取ったのに、ペアが壊れていてエラーになっちゃう……」
そんなとき、いちいち手動で直すのは大変ですよね。そこで登場するのが `toWellFormed()` です。
これは、「バラバラになったペアを見つけたら、とりあえず『？』マークに置き換えて、全体を正しい形にしてあげるよ」という優しい救済メソッドです。
const brokenText = “笑顔の半分\uD83D”;
// toWellFormedを使うと、バラバラな部分は「？」に置き換わります
const fixedText = brokenText.toWellFormed();
console.log(fixedText); // “笑顔の半分?” （これならエラーにならずに済みます！）
「直す」といっても、失われた情報を無理やり復元する魔法ではありません。「壊れている場所を安全な記号に変えることで、システム全体をクラッシュから守る」という、現場を守るための防波堤のような役割ですね。
—
なぜこのメソッドが現場で嬉しいのか
昔のJavaScriptでは、壊れた文字が含まれているだけで処理が止まったり、予期せぬ挙動をすることがありました。特に外部から送られてくるデータ（APIのレスポンスなど）は、時に「壊れたペア」が含まれていることがあります。
そんなとき、いちいち「もし壊れていたら……」と複雑な条件分岐を書くのは大変でしたよね。`toWellFormed()` を使えば、「とりあえずこれを通しておけば、最悪の事態（画面の真っ白など）は避けられる」という安心感を手に入れることができます。
—
最後に：つまずいても大丈夫
プログラミングを始めたばかりの頃は、「サロゲートペア？ 何それおいしいの？」となるのが当たり前です。僕も最初は、なぜか文字化けして悩んでいた経験が山ほどあります。
今回紹介した二つのメソッドは、そんな「文字化け問題」というモヤモヤを、一行のコードでスッキリさせてくれる心強い味方です。
もしコードを書いていて「あれ、何か文字がおかしいな？」と思ったら、この「二人組（サロゲートペア）」のことを思い出して、`isWellFormed()` で確認してみてくださいね。
焦らず、一歩ずつ。あなたのコードがもっと美しく、そして安全になることを応援しています！
コメント