【入門編】文字コード取得（charAt, charCodeAt, codePointAt） – JavaScript実践ガイド

JavaScriptの世界へようこそ！
フロントエンドの最前線でコードを書き続けていると、ふと「当たり前」だと思っていたことが、実は初心者の頃に一番つまずきやすいポイントだったりすることに気づかされます。

今回は、文字列の「中身」を覗き見るためのメソッド、`charAt`、`charCodeAt`、そして現代のJavaScriptには欠かせない `codePointAt` についてお話しします。

難しく聞こえるかもしれませんが、大丈夫。まずは身近なイメージから紐解いていきましょう。

—

JavaScriptの文字列は、一文字ずつ小分けにされたお菓子の詰め合わせ箱だと想像してください。
「この箱の何番目には、どのお菓子が入っているかな？」と調べるのが、今回紹介するメソッドたちの役割です。

「3番目に入っているお菓子は何？」と聞いたとき、そのまま「クッキーだよ」と教えてくれるのが `charAt()` です。

const box = “JavaScript”;

// 0から数えるのがプログラミングのお約束。0番目は ‘J’ です！
console.log(box.charAt(0)); // 結果: “J”
console.log(box.charAt(4)); // 結果: “S”

シンプルですよね。でも、ちょっと気をつけてほしいのは、このメソッドは「その場所にある文字をそのまま見せてくれる」だけだということです。

次に登場するのが `charCodeAt()` です。これは文字そのものではなく、コンピュータが内部で管理している「背番号（文字コード）」を教えてくれます。

例えば、キーボードの「A」には「65」という背番号が振られています。コンピュータは文字を直接見ているわけではなく、この数字で処理をしているんです。

const name = “A”;
console.log(name.charCodeAt(0)); // 結果: 65

「へぇ、そんな数字があるんだ」くらいに思っておけば今は十分です。ただ、ここで一つだけ注意点。昔のコンピュータは、絵文字のような特別な文字をうまく扱えませんでした。これが、次の話につながります。

—

ここが今回のハイライトです。最近はチャットツールなどで絵文字をよく使いますよね？実は、一部の絵文字や特殊な文字は、コンピュータにとって「一文字」ではなく「二つのデータが合体してようやく一文字になる」という特殊な構造をしています。これを専門用語で「サロゲートペア」と呼びます。

もし `charCodeAt()` でサロゲートペア（絵文字など）を覗こうとすると、コンピュータは「前半のパーツ」だけを読み取ってしまい、正しい背番号を返してくれません。まるで、パズルの一部だけを見て「これが何の絵か当てろ」と言われているようなものです。

そこで登場したのが `codePointAt()` です。

これを使えば、たとえ絵文字であっても「あ、これは二つで一組の文字なんだな」と理解して、正しい背番号をスッと教えてくれます。

const emoji = “🍎”; // りんごの絵文字

// 古い書き方だと、中身がバラバラに判定されてしまうことがあります
console.log(emoji.charCodeAt(0)); // 55356 (中途半端な数字！)

// 新しい書き方（codePointAt）なら完璧！
console.log(emoji.codePointAt(0)); // 127822 (これが正しい背番号！)

—

実務の現場では、ユーザーがフォームに入力した文字をチェックする際によくこのメソッドを使います。

「ユーザーが絵文字を入力したせいで、文字数カウントのプログラムがバグった！」というトラブルは、駆け出しの頃の誰もが一度は通る道です。そんな時、`codePointAt` の存在を知っているだけで、解決までのスピードが段違いになります。

これだけ覚えておけば、もう文字列操作で大きく迷うことはありません。

最初は難しい概念に感じるかもしれません。でも、コードを書いて、コンソールで数字が変わる様子を眺めているうちに、だんだんと「コンピュータの気持ち」が分かってくるはずです。

もし途中で分からなくなったら、いつでもこのページに戻ってきてくださいね。あなたの開発ライフが少しでも楽しくなるよう、これからも応援しています！