【入門編】 静的メソッド(String.fromCharCode, String.fromCodePoint) – JavaScript実践ガイド

やあ、こんにちは!JavaScriptの世界へようこそ。
フロントエンドの深淵を覗き込んでいると、たまに「文字」という当たり前の存在が、実はとても繊細なルールで動いていることに気づく瞬間があるんだ。

今日は、そんな文字列の「裏側」、つまり数字(文字コード)から文字を生み出す魔法の道具箱について、少しだけ紐解いてみようか。難しく考えなくて大丈夫。一緒に見ていこうね。

—

コンピュータは「数字」で世界を見ている

まず、想像してみてほしい。コンピュータにとって、画面に映る「A」や「あ」や「🎨」という文字は、実はそのままデータとして存在するわけじゃないんだ。裏側ではすべて「数字」で管理されている。

例えば、郵便番号や住所を管理するデータベースを想像してごらん。住所そのものを入れる代わりに、郵便番号という「ID」で場所を特定するよね? コンピュータも同じで、「この数字は、この文字だよ!」という巨大な対応表(文字コード)を持っているんだ。

JavaScriptでこの「数字」から「文字」を呼び出すときに使うのが、`String.fromCharCode` と `String.fromCodePoint` というふたつの静的メソッドだよ。

—

1. 昔ながらの「fromCharCode」:ちょっと古風な道具箱

`String.fromCharCode` は、昔からある伝統的なメソッドだ。「文字コードを渡せば、その文字を返してあげるよ」という、とてもシンプルなやつ。

// 65という数字を渡すと、アルファベットの「A」が返ってくる
const char = String.fromCharCode(65);
console.log(char); // 出力: “A”

// 複数の数字を渡して、ひとつの言葉を作ることもできる
const greeting = String.fromCharCode(72, 101, 108, 108, 111);
console.log(greeting); // 出力: “Hello”

「お、便利じゃん!」と思うよね。でもね、ここには一つだけ、「背の高い文字には対応しきれない」という弱点があるんだ。

—

2. なぜ「fromCodePoint」が推奨されるのか?

さて、ここからが今日の本題。「サロゲートペア」という言葉を聞いたことはあるかな? 難しそうに聞こえるけれど、例え話で説明するね。

身近な例え:大きな荷物と小さなロッカー

昔のコンピュータは、文字を「小さなロッカー」に一つずつ入れる設計だったんだ。でも、絵文字のような「特殊で複雑な文字」は、一つのロッカーには入りきらない。そこで、「二つのロッカーを使って一つの文字を表現する」という裏技が生まれた。これが「サロゲートペア」という仕組みさ。

古い `String.fromCharCode` は、一つのロッカーしか見ることができないから、絵文字のような大きな文字を渡すと「あれ? なんだか変な記号になっちゃった…」とパニックを起こしてしまうんだ。

そこで登場したのが、現代っ子の `String.fromCodePoint`。こいつは「大きな文字? OK、二つのロッカーをまたいでもちゃんと一つに繋ぎ合わせるよ!」と、広い心で処理してくれる。

// 絵文字の「🎨(アートパレット)」を例に見てみよう

// 1. fromCharCodeだと…?
// うまく表示されずに、化けたりエラーになったりすることがあるよ
console.log(String.fromCharCode(0x1F3A8));

// 2. fromCodePointなら…?
// どんな大きな数字(文字コード)でも安心して渡せる!
console.log(String.fromCodePoint(0x1F3A8)); // 出力: “🎨”

—

現場のアーキテクトからのアドバイス

実務の現場では、「文字が化けた!」というトラブルは意外と多いもの。特にユーザーが入力した絵文字を保存したり、表示したりするシステムでは、古い書き方をしていると思わぬバグに足を取られることがあるんだ。

だから、もし君がこれからコードを書くなら、迷わず `String.fromCodePoint` を選んでほしい。

  • なぜ?: 未来の自分が書くコードや、世界中のユーザーが入力する多様な文字に対して、もっとも安全で親切な設計だからだよ。

今日のおさらい

1. 文字列は、裏側では「数字(文字コード)」で管理されている。
2. `String.fromCharCode` は伝統的だけど、大きな文字(絵文字など)には弱い。
3. `String.fromCodePoint` は、最新の文字事情にも対応できる頼れる相棒。

プログラミングをしていると、たまに「なぜこんな面倒な仕組みなんだろう?」と思うこともあるかもしれない。でもね、その「面倒な裏側」を少しずつ理解していくことが、君をただのコーダーから、本物のエンジニアへと変えていく第一歩になるんだ。

大丈夫、焦らなくていい。一つずつ、こうして紐解いていけば必ず見える景色が変わるからね。
またいつでも相談してよ。応援しているからね!

コメント

タイトルとURLをコピーしました