JavaScriptの世界へようこそ！フロントエンドの現場で日々コードを書いている私ですが、あなたが今まさに踏み出そうとしているその一歩は、最高にエキサイティングな冒険の始まりです。
さて、プログラミングを学び始めると、避けて通れないのが「文字を扱う処理」ですよね。画面に名前を表示したり、入力されたパスワードの長さをチェックしたり……。そんな時、一番最初に仲良くなるのが、今回お話しする `length`（レングス）プロパティ です。
「文字数を数える」という、一見めちゃくちゃシンプルで地味な機能に見えますが、実はここにはJavaScriptのちょっとした「秘密」や、初学者が思わずハマりがちな落とし穴が隠されています。
でも、大丈夫ですよ！今日は私と一緒に、身近な例えを交えながら、この `length` の裏側と付き合い方を優しく紐解いていきましょう。
—
そもそも `length` プロパティってなに？
JavaScriptにおける `length` とは、いわば「文字列の自動メジャー」のようなものです。
例えば、あなたが文房具屋さんで買った「15センチの定規」を思い浮かべてみてください。定規の端から端までをパッと見れば、それが何センチあるか一目でわかりますよね。あれと同じです。
プログラムの世界では、私たちが画面に入力した文字が「いま何文字あるのか」を、コンピュータは目で見て数えることができません。そこで、この `length` という名前のメジャーを文字列のしっぽにピタッと当てて、「いま何文字だよ！」と教えてもらうわけです。
実際のコードを見てみましょう。
// 「Hello」という文字を変数に入れます
const greeting = “Hello”;
// lengthメジャーを使って文字数を測ります
console.log(greeting.length); // 5 と表示されます！
ね、簡単でしょう？
「H」「e」「l」「l」「o」の5文字なので、結果は `5` になります。お買い物のレシートの文字数チェックや、お問い合わせフォームの「200文字以内で入力してください」といった制限には、この仕組みが裏でこっそり使われているんです。
—
スペースや絵文字も「1文字」として数えるの？
ここで、初心者の人が「あれっ？」とつまずきやすいポイントをひとつ。
JavaScriptの `length` メジャーは、人間が目で見る感覚と、ちょっとだけズレることがあります。その代表がスペース（空白）です。
const message = “Hello World”; // 単語の間に半角スペースがあります
console.log(message.length); // 結果はいくつになるでしょうか？
答えは `11` です。
「あれ？『Hello』が5文字で、『World』が5文字だから、合わせて10文字じゃないの？」って思いましたよね？
そう、鋭い気づきです！でも、忘れてはいけないのが「H-e-l-l-o-(スペース)-W-o-r-l-d」の真ん中にあるスペースくん。彼も立派なキーボードのキーを押して入力された文字なので、JavaScriptのメジャーはちゃっかり1文字としてカウントしちゃうんです。
このように、画面に見えていなくても、改行コード（Enterキーを押した痕跡）やスペースもすべて文字として数えられる――これが `length` の基本ルールです。
—
【要注意】絵文字や特殊な文字の「思わぬトラップ」
さて、ここからが少しだけディープで大切な話です。実務の現場でも、ジュニアのエンジニアからベテランまで「うわっ、やられた！」と頭を抱える瞬間があります。それが「サロゲートペア（サロゲートペア文字）」と呼ばれる現象です。
難しそうな名前が出てきましたが、怖がらなくて大丈夫です。身近な例えで説明しますね。
例えば、スーパーのお惣菜コーナーで、普通のおにぎりは「1個」としてスッとカゴに入りますよね。でも、ちょっと豪華な「特大のエビフライが乗ったお弁当」は、パックが2つに分かれていたり、ちょっと特殊なスペースを取ったりしませんか？
これと似たようなことが、文字の世界でも起きるんです。
私たちが普段使っているアルファベットやひらがなは「1文字＝1つのデータ（おにぎり1個）」として扱われます。しかし、ハートの絵文字（❤️）や、ちょっと珍しい漢字、最新の絵文字たちは、コンピュータの裏側では「2つのデータが合体してやっと1文字に見えている（2パックのお弁当）」という状態のものが存在します。
これがサロゲートペアです。
実際にコードで見てみましょう。
// 通常のひらがな
const normalText = “あ”;
console.log(normalText.length); // 1 （うん、普通ですね）
// ちょっと特殊な絵文字
const emojiText = “👍”; // グッドマークの絵文字
console.log(emojiText.length); // え……？ 2 になっちゃった！？
「えっ、目で見たら『 👍 』って1文字しかありませんよね？」
そうなんです。人間の目には1文字に見えているのに、JavaScriptの `length` メジャーで測ると、なぜか `2` という答えが返ってくるのです。
これは、JavaScriptが生まれた時代に、「文字はこれくらいのデータ量があれば足りるだろう」と決めた枠組み（UTF-16という仕組み）よりも、現代の絵文字たちのほうがリッチで大きいため、コンピュータが裏側で2つのパーツに分けて記録せざるを得ないからなんです。
このトラップにどう立ち向かう？
もしあなたが、ユーザーが入力したSNSのプロフィールやツイートの文字数を厳密に数えたい時、この絵文字トラップをそのままにしておくと、「あれ？ 140文字以内って書いたのに、絵文字を入れたら勝手に文字数オーバーで弾かれちゃったんだけど！」というクレームに繋がりかねません。
現代のモダンなJavaScript開発（ES2015以降）では、こうした問題をスマートに解決する方法も用意されています。例えば、文字を「人間が認識する1文字単位」でバラして数えるテクニックなどがありますが、まずは「絵文字や一部の漢字は、`length` が多めにカウントしちゃうことがあるんだな」ということを知っておくだけで、百点満点です！
つまずいたときは、「あ、メジャーの目盛りがちょっとバグる特別な文字なんだな」と優しく受け止めてあげてくださいね。
—
まとめ：`length` と仲良くするための心得
今回は、文字列の長さを取得する `length` プロパティについてお話しました。
- `length` は文字列の「自動メジャー」であること
- 半角スペースや改行も、しっかり1文字としてカウントされること
- 絵文字などの一部の文字は、見た目以上に長めにカウントされてしまう「サロゲートペア」の罠があること
プログラミングをしていると、思い通りにいかないエラーや「なんで！？」という挙動に何度も出会います。でも、それらはすべてコンピュータからのサインであり、知っていけばいくほど愛おしくなってくるものです。
焦らず、一歩ずつ、あなたのペースでコードと友達になっていきましょう。
今日のあなたの学びが、素晴らしいWebアプリを作るための確かな土台になりますように。応援しています！
コメント