【入門編】 String.prototype.charAt() – JavaScript実践ガイド

こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私です。

JavaScriptの勉強を始めて間もない頃って、次から次へと出てくるメソッド（命令）の名前を覚えるだけで、お腹いっぱいになっちゃいますよね。「これ、本当に実務で使うの？」なんて不安になることもあるかもしれません。

でも、大丈夫ですよ。一つひとつの道具の使い道が分かれば、JavaScriptでの文字列いじりはまるでパズルのように楽しくなってきます。

今回は、数ある文字列操作のメソッドの中から、`String.prototype.charAt()`（チャット・アット）という、ちょっとレトロだけど愛嬌のある子を取り上げます。さらに、現代のJavaScriptではライバルとも言える「ブラケット記法（大カッコでの指定）」との違いについても、一緒にゆっくり紐解いていきましょう。

—

1. `charAt()` ってどんなことができるの？

まずはイメージから入りましょう。
ここに「JavaScript」という文字の箱がひとつあるとします。この箱は、1文字ずつ綺麗に引き出しに分かれてしまわれています。

0番目の引き出し： `J`
1番目の引き出し： `a`
2番目の引き出し： `v`

……（以下略）

※ちなみに、プログラムの世界では「1番目」ではなく「0番目」から数え始めるのがお約束。ここ、初学者が最初に引っかかりやすいポイントですが、「プログラミングの世界では、入り口のカウンターが『0』なんだな」と気楽に捉えておいてくださいね。

この「何番目の引き出しに入っている文字が欲しい！」と指定して、中身を取り出してくれるのが `charAt()` メソッドです。

実際にコードを見てみましょう。

// 「JavaScript」という文字列の箱を用意します
const myText = ‘JavaScript’;

// 0番目の引き出しを開けてみる
const firstLetter = myText.charAt(0);
console.log(firstLetter); // 出力結果: “J”

// 4番目の引き出しを開けてみる（J-a-v-a-S… なので ‘S’ ですね）
const fifthLetter = myText.charAt(4);
console.log(fifthLetter); // 出力結果: “S”

どうでしょう？直感的で分かりやすいですよね。「指定した番号の文字を『ちょうだい！』とお願いするメソッド」、それが `charAt()` です。

—

2. ライバル登場！「ブラケット記法」との違いって？

さて、ここからが少しディープなお話。
実は、現代のJavaScriptでは、わざわざ `charAt()` を使わなくても、もっとスッキリ書ける書き方が好まれています。それが「ブラケット記法（角括弧：`[]` を使う方法）」です。

先ほどのコードを、ブラケット記法で書き換えてみますね。

const myText = ‘JavaScript’;

// ブラケット記法で0番目の文字を取得
console.log(myText[0]); // 出力結果: “J”

// ブラケット記法で4番目の文字を取得
console.log(myText[4]); // 出力結果: “S”

ね？ `charAt(0)` と書いていたものが、`myText[0]` と非常に短くなりました。コードを書く側としても、タイトルの打ち込みが減るし見た目もスマートなので、実務の現場ではこちらのブラケット記法が使われることのほうが圧倒的に多いです。

「じゃあ、`charAt()` なんてもう古いし使わなくていいの？」と思われるかもしれませんが、ちょっと待ってください。ここには少しだけ性格の違いがあるんです。

「ない番号」を指定したときの優しさの度合い

もし、存在しない引き出しの番号（例えば、100文字しかないのに「1000番目の文字ちょうだい！」）を指定したとき、この2人はどういう反応をするでしょうか？

ブラケット記法 `[]` の場合
返ってくるのは `undefined`（「そんなものはありません！」という無機質な不在通知）です。
`charAt()` の場合
返ってくるのは 空文字 `””`（中身がからっぽの文字列）です。

const text = ‘Hi’;

// 存在しない99番目を指定
console.log(text[99]); // 出力結果: undefined
console.log(text.charAt(99)); // 出力結果: “” （空文字）

実務でコードを書いているとき、存在しない文字にアクセスしてしまって `undefined` が返ってくると、その後の処理で「TypeError: Cannot read properties of undefined…」といった、いわゆる「赤字エラー（爆弾）」を踏んでプログラムが止まってしまうことがあります。

その点、`charAt()` は空文字を返してくれるので、エラーで画面を真っ赤にさせずに「まあ、何もないんだな」と穏便にスルーできる……という、ちょっとした優しさ（安全性）を持っています。もっとも、現代ではオプショナルチェイニングや事前の文字数チェックを行うのが主流ですが、こうした「違いの背景」を知っておくのは、エンジニアとしての引き出しを増やす意味でもすごく面白いところです。

—

3. 実務ではどう使い分けているの？

現場のリアルな感覚をお伝えすると、基本的にはスッキリ書けて読みやすいブラケット記法 (`[]`) を使うのが主流です。

ただ、古いブラウザ（Internet Explorerなど……もう絶滅しつつありますが！）をどうしてもサポートしなければならないレガシーな案件や、絶対にエラーを出したくない特殊な文字列パース処理などでは、今でも `charAt()` がシブく活躍していたりします。

初学者のうちは、まずは「文字を取り出す方法には、カッコを使う書き方(`[]`)と、メソッドを使う書き方(`charAt()`)の2種類があるんだな」ということが頭の片隅にあれば100点満点です！

—

まとめ

`charAt(index)` は、指定した番号の文字を優しく取り出してくれる定番メソッド。
番号は「0」から数え始める（ゼロオリジン）のがお約束。
現代のJavaScriptでは、よりスッキリ書ける ブラケット記法 (`[index]`) がよく使われる。
でも、存在しない番号を指定したときの返り値（`undefined` か空文字 `””` か）にちょっとした違いがある。

最初は覚えることが多くて大変かもしれません。でも、今日知った引き出しの概念やちょっとした違いは、今後のJavaScriptライフできっとあなたを助けてくれるはずです。

焦らず、一歩一歩、自分のペースでコードとお友達になっていきましょう。あなたのエンジニアライフを、心から応援しています！