【入門編】 String.fromCharCode() と String.fromCodePoint() – JavaScript実践ガイド

こんにちは。フロントエンドの現場で長年コードを書き続けていると、たまに「文字」という存在の深淵に触れる瞬間があります。

普段何気なく入力している「あ」や「A」、あるいは「絵文字」。これらって、コンピュータの中ではどうなっていると思いますか？実は、コンピュータは文字を直接扱っているわけではなく、裏側では「数字」として管理しているんです。

今日は、そんな文字の裏側を覗き見する魔法のツール、`String.fromCharCode()` と `String.fromCodePoint()` についてお話しします。難しそうに聞こえるかもしれませんが、大丈夫。お買い物と「名札」の例えで、一緒に紐解いていきましょう。

—

コンピュータの世界では、すべての文字に「背番号」のような数字が割り振られています。これをUnicode（ユニコード）と呼びます。

例えば、アルファベットの「A」には「65」という背番号がついています。この背番号から「A」という文字を復元する仕組み、それが今回紹介するメソッドたちです。

まず、`String.fromCharCode()` です。これは古くからあるメソッドで、いわば「16ビットという限られたスペースに収まる文字」専用の道具です。

昔のコンピュータは、名札（文字を入れる箱）のサイズが「16ビット」までと決まっていました。
「A」や「あ」といった一般的な文字ならこの名札に収まるのですが、最近の豪華な絵文字などは、この名札には入りきらない「特大サイズ」なんです。

// 65は「A」、66は「B」
const text = String.fromCharCode(65, 66, 67);
console.log(text); // 結果は “ABC”

// でも、絵文字のような大きな数字を入れると…？
// 128512は「😀」のコードですが、fromCharCodeだと上手く変換できません
console.log(String.fromCharCode(128512)); // 別の変な文字になってしまう！

「あれ、絵文字が出ない！」と焦る必要はありません。昔のルールで作られたメソッドなので、今の時代の「特大文字」にはちょっと力不足なだけなんです。

そこで登場するのが、ES6（現代のJavaScript）で追加された `String.fromCodePoint()` です。

こちらは、どんなに大きな番号の文字でも、どっしりと受け止めてくれます。絵文字だろうが、古文書に出てくるような珍しい漢字だろうが、これ一つあれば安心です。

// fromCodePointなら、大きな数字（コードポイント）もへっちゃらです
const emoji = String.fromCodePoint(128512);
console.log(emoji); // ちゃんと「😀」が表示されます！

// 複数並べることも可能です
const message = String.fromCodePoint(128512, 65, 66);
console.log(message); // “😀AB” と表示されます

—

ここまで読んで、「じゃあ全部 `fromCodePoint` を使えばいいの？」と思った方、大正解です。その直感、素晴らしいですよ。

今はもう、16ビットの制限を気にする必要がない時代です。最初から「余裕のある道具」を使うのが、トラブルを避ける一番の近道です。

例外のケース： 非常に古いシステムとの連携や、特定の環境で「あえて16ビットのデータとして扱いたい」という特殊な状況に遭遇したときだけ、`fromCharCode()` を思い出してあげてください。

—

プログラミングを始めたばかりの頃は、「なんで同じような機能が2つもあるの？」と混乱すること、ありますよね。でも、それはJavaScriptという言語が長い年月をかけて進化してきた「歴史の跡地」なんです。

`fromCharCode` があったからこそ、今の `fromCodePoint` の便利さが際立ちます。もしコードを書いていて「あれ、上手くいかないな？」と思ったら、それはコンピュータが「その方法じゃ、ちょっと窮屈だよ！」と教えてくれているサイン。

そうした小さなつまずきを一つひとつ乗り越えていくことで、皆さんは確実に「本物のエンジニア」に近づいています。自信を持って、どんどんコードを書いてみてくださいね！

もしまた何か迷うことがあれば、いつでも聞きに来てください。現場の知恵をギュッと詰め込んで、また解説しますから。