先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで文字列の長さを調べたいときってどうすればいいんですか？」

先生

「とても良い質問ですね！JavaScriptでは、lengthというプロパティを使えば、簡単に文字列の長さ（つまり、文字の数）を取得できますよ。」

生徒

「プロパティってなんですか？メソッドとは違うんですか？」

先生

「良いポイントですね。プロパティとは、データ（値）を直接持つもののことです。メソッドは動作（関数）のことで、()を付けて実行しますが、lengthは値を取得するだけなので()は不要なんです。」

生徒

「なるほど！じゃあ、実際にどうやって使うのか見てみたいです！」

先生

「それでは、基本的な使い方を見ていきましょう！」

1. lengthプロパティとは？

JavaScriptのlengthプロパティは、文字列に含まれる文字の数を返すためのプロパティです。たとえば、「Hello」という文字列であれば、5文字なので結果は5となります。英語や日本語の文字も区別せず、すべて1文字として数えます。

使い方はとてもシンプルで、文字列のあとに.lengthを付けるだけです。


const text = "Hello";
console.log(text.length);

上のコードを実行すると、次のような結果が表示されます。

このように、lengthを使うだけで、簡単に文字列の長さを調べることができます。
なお、ここでの「長さ」は「文字数」を意味します。空白（スペース）も1文字としてカウントされる点に注意しましょう。

2. 空白や記号を含む文字列の長さを調べる

文字列の中に空白や記号が入っている場合でも、lengthプロパティはそれらを含めてカウントします。たとえば次のような場合です。


const message = "Hello World!";
console.log(message.length);

「Hello」と「World」の間のスペースも1文字として数えられるため、結果は12になります。
記号や数字も同じように1文字ずつカウントされます。

3. 日本語や絵文字を含む文字列の長さ

日本語や絵文字なども、基本的には1文字としてカウントされます。たとえば次の例を見てみましょう。


const word = "こんにちは";
console.log(word.length);

「こんにちは」は5文字なので、結果も5になります。ただし注意点として、絵文字の一部や特殊な文字（たとえば「��‍��」など）は、内部的に2文字分として扱われる場合があります。これは、JavaScriptの文字コードの仕組み（UTF-16）によるものです。

もし正確に「人が見て1文字に見える数」を数えたい場合は、少し高度な方法（Array.from()を使うなど）が必要になりますが、初心者のうちはまずlengthを使えば十分です。

4. 文字列の長さを条件分岐に使う

lengthプロパティは、文字数のチェックにも便利です。たとえば、ユーザーの入力が空かどうかを確認したいときなどに使います。


const name = "";

if (name.length === 0) {
  console.log("名前が入力されていません。");
} else {
  console.log("名前が入力されています。");
}


名前が入力されていません。

このように、lengthを使うことで「文字列が空かどうか」を簡単に判断できます。フォーム入力のチェックやエラーメッセージの表示など、実際のWeb開発でもよく使われるテクニックです。

5. 文字列の長さを表示するサンプル

最後に、ユーザーが入力した文字列の長さを画面に表示する簡単なサンプルを紹介します。これは、HTMLとJavaScriptを組み合わせた例です。


<!DOCTYPE html>
<html>
  <body>
    <input type="text" id="textInput" placeholder="文字を入力してください">
    <button onclick="showLength()">文字数を表示</button>
    <p id="result"></p>

    <script>
      function showLength() {
        const text = document.getElementById("textInput").value;
        const length = text.length;
        document.getElementById("result").textContent = "文字数：" + length + "文字";
      }
    </script>
  </body>
</html>

このコードをブラウザで実行すると、テキストボックスに入力した文字数がボタンを押すと表示されます。自分で文字を入力して、どのようにlengthが動くか体験してみましょう。

6. lengthプロパティで文字数を簡単に取得しよう

lengthプロパティは、JavaScriptで文字列の長さを取得する最も基本的で重要なプロパティです。空白や日本語、記号もすべて1文字として数えられるため、文字数の確認や入力チェックにとても便利です。
プログラムの中で文字列を扱うときは、まずこのlengthを思い出しましょう。

まとめ

lengthプロパティで分かった文字列の基本的な考え方

今回の記事では、JavaScriptにおける文字列の長さを取得する方法として、 lengthプロパティの使い方を中心に学びました。 JavaScriptでは、文字列は単なる文章ではなく、一文字一文字が順番に並んだデータとして扱われています。そのため、lengthを使うことで「何文字含まれているか」を簡単に知ることができます。英語、日本語、数字、記号、空白などもすべて文字として数えられる点は、プログラムで文字を扱ううえでとても重要なポイントです。

入力チェックや条件分岐での実用性

lengthプロパティは、単に文字数を表示するだけでなく、入力チェックや条件分岐にも幅広く使われます。たとえば、入力欄が空かどうかを判定したり、一定の文字数を超えていないかを確認したりする場面です。 Webフォームやログイン画面、コメント投稿機能など、実際のWebサービスでは必ずと言っていいほど文字数チェックが行われています。 lengthを使った条件分岐は、その基礎となる考え方です。

日本語や絵文字を扱うときの注意点

記事の中でも触れたように、日本語は基本的に一文字として数えられますが、絵文字や一部の特殊文字は内部的な仕組みにより、 lengthで数えた結果が見た目と一致しない場合があります。これはJavaScriptがUTF-16という文字コード方式を使っているためです。初心者の段階では、まずは「lengthは内部的な文字数を返す」という理解で十分です。正確な表示上の文字数が必要な場面は、もう少し慣れてから対応すれば問題ありません。

まとめとしてのサンプルプログラム

ここで、lengthプロパティを使った基本的な処理をもう一度確認してみましょう。ユーザーが入力した文字数を確認し、一定の文字数を超えた場合にメッセージを出す例です。


const comment = "JavaScriptは楽しい！";

if (comment.length > 10) {
  console.log("文字数が多めです");
} else {
  console.log("文字数は問題ありません");
}

このように、lengthを使えば文字列の状態を数値として扱えるため、 if文などと組み合わせた処理がとても書きやすくなります。文字列を数として判断できるようになると、 JavaScriptの理解が一段階深まったと感じられるはずです。

先生と生徒の振り返り会話

生徒

「lengthって、ただ文字数を出すだけのものだと思っていましたけど、入力チェックや条件分岐にも使えるんですね。」

先生

「そうですね。文字列を数値として扱えるのがポイントです。プログラムでは、数にできると判断がしやすくなります。」

生徒

「空白や日本語も全部カウントされるのが分かって、フォームのチェックで使うイメージができました。」

先生

「その理解で大丈夫です。 lengthはJavaScriptの文字列操作で必ず使う基本なので、今回の内容をしっかり覚えておくと後が楽になりますよ。」

JavaScriptの文字列の長さを取得する（lengthプロパティ）