こんにちは！フロントエンドの現場を長年駆けずり回っているチーフアーキテクトの私です。
JavaScriptのコードを書いていて、「文字」を扱う場面って本当によくありますよね。フォームに入力されたお名前のチェックだったり、チャットアプリでのメッセージ処理だったり。そんな文字操作の引き出しを増やす中で、今回はちょっと通好みでありながら、知っておくと「おっ」と視野が広がるメソッド `charCodeAt()`（チャットコード・アット） についてお話しします。
「なんだか名前が難しそう……」「文字コードとかUTF-16とか、頭が痛くなりそう……」なんて思った方、どうぞご安心ください。難しい理論は一旦置いておいて、身近な例えを交えながら、温かく、そして徹底的に分かりやすく紐解いていきますね。
—
1. `charCodeAt()` って、いったいどんな道具？
いきなりですが、皆さんが普段お買い物で使う「レシートのバーコード」を想像してみてください。あのシマシマのバーコードを「ピッ」とレジに通すと、コンピュータはそれが「牛乳」なのか「チョコレート」なのかを瞬時に数字で理解しますよね。
JavaScriptの `charCodeAt()` も、まさにこれと全く同じことをやっています。
人間が見て「あ、これは『A』という文字だな」と分かるものを、コンピュータが理解できる「数字（コード番号）」に翻訳して教えてくれる便利な道具、それが `charCodeAt()` なんです。
書き方の基本ルール
使い方はとってもシンプル。調べたい文字が入っている「文字列」の後ろに `.charCodeAt(インデックス番号)` とつなげるだけです。
const text = “A”;
const code = text.charCodeAt(0); // 0番目の文字のコードを調べる
console.log(code); // 出力結果：65
「おや、`65` という数字が出てきましたね！」
そう、コンピュータの世界では、大文字の「A」は「65」という背番号で管理されているんです。
—
2. つまづきやすいポイント：インデックスってなに？
ここで、JavaScriptを学び始めたばかりの方がよく引っかかってしまうポイントをそっとフォローしておきますね。
プログラミングの世界では、数え始めは「1」ではなく「0」から始まります。お弁当箱の仕切りに「0番目、1番目、2番目……」と番号を振っていくイメージです。
例えば、`”Hello”` という単語があったとします。
- 0番目：`H`
- 1番目：`e`
- 2番目：`l`
- 3番目：`l`
- 4番目：`o`
もし 2番目の文字 (`l`) の番号を知りたいときは、以下のように書きます。
const greeting = “Hello”;
console.log(greeting.charCodeAt(2)); // 2番目の「l」の番号（108）が取れます
「あれ、1番目を指定したつもりが違う文字の番号が出ちゃった！」というときは、大体この「0から数え始めていること」を忘れているのが原因です。もしそうなっても「あ、いけない、0からだったっけ」と思い出してもらえれば大丈夫ですよ！
—
3. 実務ではどんなときに使うの？（実践コード例）
「文字の番号が分かって、一体何の役に立つの？」と思われるかもしれません。
確かに、日々のコーディングで毎日使うような派手なメソッドではありません。しかし、「入力された文字が、特定の文字コードの範囲に収まっているか（例えば、半角英数字だけか、あるいは特定の記号が含まれていないか）を厳密にチェックしたいとき」など、水面下でぶ厚いガードマンのように活躍してくれます。
ここでは、実務の現場をちょっとだけ覗き見する感覚で、簡単なサンプルコードを見てみましょう。
// 入力された文字が「半角の数字（0から9）」かどうかをこっそり判定する例
function isNumberCharacter(str, index) {
// 指定した位置の文字コードを取得
const code = str.charCodeAt(index);
// 半角の ‘0’ はコード番号 48、’9′ は 57 です
// その範囲にすっぽり収まっているかをチェックします
if (code >= 48 && code <= 57) {
return "おっ、これは半角の数字ですね！";
} else {
return "む、数字以外の文字のようですよ。";
}
}
// 試してみましょう
console.log(isNumberCharacter("Pass123", 4)); // 4番目の「2」をチェック
// 出力：おっ、これは半角の数字ですね！
console.log(isNumberCharacter("Pass123", 0)); // 0番目の「P」をチェック
// 出力：む、数字以外の文字のようですよ。
このように、文字を「ただの文字」として見るのではなく、「コンピュータが理解する数字の大きさ」として比較したいときに、`charCodeAt()` は頼もしい相棒になってくれます。
---
4. 最後に：チーフアーキテクトからのメッセージ
ここまでお読みいただきありがとうございます！
`charCodeAt()` という、少し地味だけど奥深いメソッドのイメージは掴めましたでしょうか？
最初は「UTF-16コードユニット」なんて言葉を聞くだけで拒絶反応が出てしまうかもしれませんが、要するに「コンピュータと人間を繋ぐ、文字の背番号調べ機」くらいに気楽に捉えてもらえれば大正解です。
フロントエンドの世界は広く、覚えることもたくさんあって、時には立ち止まりたくなることもあるでしょう。でも、こうした小さなメソッドの引き出しを一つずつ開けていくことが、気づけばあなたを「頼れるエンジニア」へと確実に成長させてくれます。
焦らず、ご自身のペースで一歩ずつ進んでいきましょう。あなたのコーディングライフを、私はいつも応援しています！
コメント