JavaScriptで配列や文字列を扱うときに、必ず登場するのがlengthプロパティです。しかし、「lengthが取れない」「lengthが0になる」「バイト数と文字数の違いがわからない」など、意外とつまずきやすいポイントもあります。
本記事では、JavaScript lengthの基本的な使い方から応用的なテクニック、注意点やトラブル解決法までを丁寧に解説します。初心者から中級者までを対象にしていますので、実践的な知識をしっかり身につけたい方におすすめです。
目次
1.JavaScriptのlengthプロパティとは？
JavaScriptで文字列や配列、関数の情報を扱う際に欠かせないのがlengthプロパティです。lengthはデータの長さや数を取得するための基本機能であり、コードの中で繰り返し処理や条件分岐を組むときに利用されます。
ここでは、lengthプロパティの役割と、実際に使われる代表的な場面について解説します。
JavaScriptのlengthプロパティの基本的な役割
lengthプロパティの基本的な役割は、データの長さや数を取得することです。主な用途は次の3つです。
文字列の文字数を取得する
配列の要素数を取得する
関数の引数の数を取得する
文字列の文字数を調べる
JavaScriptのlengthプロパティは文字列に含まれる文字数を取得したいときに使われます。入力チェックやバリデーションチェックにも便利です。
const message = "Hello, world!"; console.log(message.length); // 出力: 13 |
配列の要素数を取得する
JavaScriptのlengthプロパティを使うと、配列に含まれる要素の数を確認できます。ループ処理や条件分岐で使うと便利です。
const fruits = ["apple", "banana", "cherry"]; console.log(fruits.length); // 出力: 3 |
関数の引数の数を把握する
lengthプロパティは関数が定義上、何個の引数を受け取るかを調べたいときにも使えます。
function greet(name, age) { return `${name} is ${age} years old.`; } console.log(greet.length); // 出力: 2 |
Array.length と String.length の違い
Array.length（配列）とString.length（文字列）は、いずれも長さを返すプロパティですが、対象となるデータ構造と内部の動作に違いがあります。
配列の場合は「要素数」を返す
配列では、lengthは配列に格納された要素の個数を返します。インデックスが連続していなくても、最後の要素の位置 + 1 がlengthになります。ちなみに要素を追加すると、lengthも自動で更新されます。
文字列の場合は「文字数」を返す
文字列では、lengthはその文字列に含まれる文字の数を表します。半角・全角に関係なく、1文字は1カウントです。日本語のようなマルチバイト文字でも、基本的には1文字としてカウントされます。
配列のlengthは書き換え可能、文字列のlengthは読み取り専用
配列のlengthは手動で変更することができます。値を小さくすると要素が削除され、大きくすると未定義の要素が追加されます。一方、文字列のlengthは読み取り専用のため、書き換えることはできません。
JavaScriptのlengthプロパティが使われる主な場面
JavaScriptのlengthプロパティが持つ基本的な役割を踏まえたうえで、実際のプログラミングにおいてどのような場面で使われるか見てみましょう。
空かどうかのチェックする
lengthプロパティは配列や文字列が空であるかどうかを調べたいときに便利です。値が存在するかの判定にも活かせます。
const input = ""; if (input.length === 0) { console.log("入力が空です"); } |
繰り返し処理の範囲を決める
配列や文字列のすべての要素にアクセスしたい場合、lengthを基準にループ処理を書いてみましょう。
const users = ["Alice", "Bob", "Charlie"]; for (let i = 0; i < users.length; i++) { console.log(users[i]); } |
要素数に応じた条件分岐に使う
データの件数によって処理を切り替える際にも、lengthプロパティは活用されます。たとえば、データが多すぎる場合には警告を表示するといった使い方が可能です。
if (users.length > 10) { console.log("ユーザーが多すぎます"); } |
2.JavaScriptのlengthプロパティで文字列の長さを取得する方法
ここでは、文字列に対してlengthを使う基本から、正確に扱うためのポイントまでをわかりやすく解説します。
JavaScriptでlengthを使った基本的な文字列の取得方法
JavaScript文字列に対して.lengthを使うことで、その文字数を取得できます。これは1文字ごとにカウントされ、スペースや記号、改行なども含まれます。
たとえば「Hello, world!」という文字列に対してlengthプロパティを使うと13を返します。
const greeting = "Hello, world!"; console.log(greeting.length); // 出力: 13 |
半角の英数字だけでなく、日本語も文字単位でカウントされます。
const jpText = "こんにちは"; console.log(jpText.length); // 出力: 5 |
日本語はマルチバイト文字ですが、JavaScriptでは1文字として扱われます。見た目どおりの文字数をそのまま取得できると理解しておくと良いでしょう。
ただし、一部の絵文字や結合文字、サロゲートペアを含む文字列では、見た目の文字数とlengthプロパティの値が一致しない場合があることに注意が必要です。
JavaScriptのlengthで文字数やバイト数を取得する方法
lengthプロパティで取得できるのは文字数であり、バイト数ではありません。マルチバイト文字を含む場合、文字数とバイト数が一致しないため注意してください。
バイト数を確認したい場合の方法
文字列のバイト数を取得したいときは、TextEncoderを利用しましょう。TextEncoderはUTF-8としてエンコードした際のバイト数を返します。
const text = "こんにちは"; const encoder = new TextEncoder(); const bytes = encoder.encode(text).length;
console.log(`バイト数: ${bytes}`); // 出力: 15 |
このコード例では、5文字の日本語がUTF-8として15バイトにエンコードされカウントされます。1文字が3バイトとして扱われている計算です。
バイト数制限がある場合の対応
文字数ではなくバイト数で制限したい場合、次のような関数を使ってバイト長を超えない範囲で文字列を切り出すことが可能です。
function trimBytes(text, maxBytes) { const encoder = new TextEncoder(); let bytes = 0; let result = "";
const len = encoder.encode(char).length; if (bytes + len > maxBytes) break; bytes += len; result += char; }
}
console.log(trimBytes(input, 9)); // 出力: こんに |
このコード例の関数では、1文字ずつバイト長を確認しながら合計が上限を超えないように文字を追加しています。実際のフォーム制限やデータ送信にも応用可能です。
JavaScriptのlengthプロパティを文字列に対して使う時の注意点
lengthプロパティは便利なのですが、Unicodeの特殊なケースや結合文字を含む場合には、意図しない結果になることがありますので注意しましょう。
サロゲートペアに注意
サロゲートペアとは、1つの文字を2つのコードユニット（16ビット）で表現する仕組みです。絵文字や一部の記号など、通常の文字より大きな値を持つUnicode文字が該当します。
JavaScriptでlengthプロパティを使う場合、サロゲートペアには注意してください。
const emoji = "😀"; console.log(emoji.length); // 出力: 2 |
このコード例のように、見た目は1文字でもlengthは2を返します。正確な文字数を取得したい場合は、Array.from()で文字列を分割すると良いでしょう。
const emoji = "😀"; console.log(Array.from(emoji).length); // 出力: 1 |
結合文字の扱い
アルファベットの上にアクセントとよばれる記号を重ねて表示するような、複数の文字が合わさって1つの文字のように見える文字列を結合文字といいます。
たとえば、「e」にアクセント記号（́）を組み合わせると、「é」に見える文字になります。このような結合文字もlengthプロパティでは2文字としてカウントされる可能性がありますので注意してください。
関連記事
【初心者向け】JavaScript入門完全ガイド｜基本構文や勉強方法（入門本や学習サイト）など解説
JavaScript改行処理完全ガイド｜コード内・HTMLへの反映から判定・置換など基本から実践まで解説
3.JavaScriptで配列（array）に対してlengthプロパティを使う方法
JavaScriptで配列を扱う際、要素数の確認は欠かせません。lengthプロパティを使えば、配列に何個の要素が含まれているかを簡単に取得可能です。ここでは、配列のlengthの基本的な使い方、取得できない場合の原因、最後の要素を取り出す方法についてわかりやすく解説します。
JavaScriptの配列に対するlengthの基本的な使い方
配列に対してlengthプロパティを使うと、その配列に含まれている要素数を返します。
ただし、最大のインデックス値+1を返すため、配列に空の要素（未定義の要素）がある場合は実際の値が格納されている要素数と異なる場合があります。
const colors = ["red", "green", "blue"]; console.log(colors.length); // 出力: 3 |
この配列colorsに要素を1つ追加すると次のようになります。
colors.push("yellow"); console.log(colors.length); // 出力: 4 |
lengthプロパティは常に配列の現在の状態による要素数を返すため、ループ処理やバリデーションチェックにおいて信頼して利用できるでしょう。
JavaScriptの配列に対してlengthが取得できない時の対処法
基本的にlengthプロパティは信頼性が高いプロパティですが、まれに取得できない場合があります。ここではlengthが取得できない事例と対処法を紹介します。
配列が未定義の場合
変数がまだ配列として定義されていない状態でlengthを取得しようとすると、エラーになりlengthが取得できません。
let items; console.log(items.length); // TypeError: items is undefined |
対処法としては、lengthを取得する前に変数がundefinedでないことを確認しましょう。
let items;
console.log(items.length); } else { console.log("配列が定義されていません"); } |
配列がnullの場合
配列にnullが代入されている場合にも、lengthを使うとエラーが発生します。
let items = null; console.log(items.length); // TypeError: items is null |
対処法としては、事前にnullではないことをチェックすることをおすすめします。
let items = null;
console.log(items.length); } else { console.log("配列がnullです"); } |
オブジェクトや別のデータ型を配列と誤認している
配列のつもりでオブジェクトに対してlengthを取得すると、undefinedが返ります。
const obj = { a: 1, b: 2 }; console.log(obj.length); // 出力: undefined |
対処法としては、配列かどうかをArray.isArray()で事前に確認してみましょう。
JavaScriptで.length - 1を使って配列の最後の要素を取得する
配列の最後の要素を取得したい場合、length -1をインデックスとして使いましょう。
const fruits = ["apple", "banana", "cherry"]; const last = fruits[fruits.length - 1]; console.log(last); // 出力: cherry |
配列のインデックスは0から始まるため、最後の要素の位置は「length -1」になります。配列のサイズに関係なく常に正しい位置を取得できるため、汎用性の高いテクニックです。
ただし空の配列に注意してください。配列が空の場合「length - 1」はundefinedを返します。
const empty = []; console.log(empty.at(-1)); // 出力: undefined |
undefinedを回避するには、事前に要素数をチェックすると良いでしょう。
関連記事
JavaScript配列完全ガイド｜初期化・追加・操作から配列操作・連想配列まで徹底解説
4.JavaScriptのlengthプロパティに関するトラブルシューティング
JavaScriptのlengthプロパティはシンプルで使いやすいです。その一方で、lengthが取れないとか、値が0になるなどのトラブルも起こります。ここでは、lengthに関する典型的なトラブルとその原因、対処法について解説します。
JavaScriptのlengthが取れない
lengthプロパティをつかっても値が取れないとか、エラーになるという場合、取得対象の値の状態を確認しましょう。
変数が未定義のまま（undefined）
対象が未定義の状態でlengthを使おうとすると、TypeErrorが発生します。対処法としては、事前にundefinedでないことを確認することをおすすめします。
nullが代入されている
JavaScriptではnullも型としてはオブジェクト扱いになりますが、実際には何のプロパティも持っていません。そのため、null.lengthのようにアクセスしようとすると、エラーが発生します。対処法としては、nullチェックが有効です。
対象がオブジェクトや別の型になっている
lengthプロパティは、配列・文字列・関数に対して使えるものです。通常のオブジェクトにはlengthが存在しないため使えません。オブジェクトのプロパティ数を確認したい場合は、Object.keys()を使用してください。
JavaScriptでlengthが0になる
lengthが0になるのはエラーではなく、対象が空であることを意味します。ただし、意図せず0になっている場合は対応が必要です。代表例を紹介します。
空の配列・空の文字列を扱っている
そもそも、空の配列・空の文字列を対象にしている場合、lengthは0です。
const text = ""; console.log(text.length); // 出力: 0 |
const list = []; console.log(list.length); // 出力: 0 |
配列のlengthを意図せず書き換えてしまっている
配列のlengthは書き換え可能なプロパティです。値を0にすると全要素が削除されてしまうので注意しましょう。
const arr = [1, 2, 3]; arr.length = 0; console.log(arr); // 出力:Array [] |
lengthを手動で変更する際は、データの消去が意図通りなのかどうか確認することをおすすめします。
結果が空になる処理をしている
filterやmapなどを使った後、結果が空になることがあります。
const nums = [1, 2, 3]; const result = nums.filter(n => n > 5); console.log(result.length); // 出力: 0 |
対処法としては、 結果が空であることも想定して、処理を分岐するようにしてみてはいかがでしょうか。
const nums = [1, 2, 3]; const result = nums.filter(n => n > 5);
console.log("条件に一致する要素がありません"); } |
関連記事
JavaScript初心者向け【サンプルコード付】基礎から学習するための方法を解説
5.JavaScriptのlengthプロパティを用いた応用例
JavaScriptのlengthプロパティは、単に要素数や文字数を取得するだけでなくデータ操作にも活用できます。配列のサイズ調整、要素の追加・削除、ループ処理の最適化など、実践的な使い方を理解しておくとコードの効率が向上するでしょう。ここでは、lengthを活かした応用例を紹介します。
lengthプロパティを使った配列の初期化とサイズ変更
配列のlengthプロパティには値を直接代入できるため、サイズの変更が可能です。配列を初期化したり、不要な要素を一括で削除したいときに便利です。
配列を初期化する方法
配列を空にしたいときは、length = 0と指定するだけで全要素を削除できます。
let items = [1, 2, 3, 4]; items.length = 0; console.log(items); // 出力: Array [] |
配列を短くする
配列の一部だけを残したい場合、lengthを短くすることで意図した位置でカットし要素を残せます。
let nums = [10, 20, 30, 40, 50]; nums.length = 3; console.log(nums); // 出力:Array(3) [ 10, 20, 30 ] |
配列を長くする
逆にlengthを長くすると、末尾に未定義の空スロットが追加されます。
let arr = [1, 2]; arr.length = 5; console.log(arr); // 出力: Array(5) [ 1, 2, <3 empty slots> ] |
このような空スロットは値が未設定なので、undefinedとは異なる扱いになります。ただし空スロットに対してアクセスすると、undefinedが返されます。
lengthを利用した繰り返し処理と最適化
配列や文字列の要素を1つずつ処理する場合、lengthプロパティを使ってループの上限を制御するのが一般的です。
for文との組み合わせ
繰り返し処理で毎回lengthをチェックすると、長い配列ではパフォーマンスの差が出るおそれがあります。ループの前にキャッシュしておくことも検討してみてください。
const names = ["Taro", "Jiro", "Saburo"]; const len = names.length;
console.log(names[i]); } |
逆順でループする
逆方向に処理を行いたいときも、lengthを活用すると良いでしょう。
for (let i = names.length - 1; i >= 0; i--) { console.log(names[i]); } |
lengthを条件式に使う
lengthを条件式に含めると、要素の存在チェックと処理をひとまとめにできます。
if (names.length) { console.log("配列に値があります"); } |
6.JavaScriptの lengthプロパティと他のプロパティ・メソッドとの違い
JavaScriptにはlength以外にも、配列や文字列のサイズや位置を扱う方法があります。そのうちよく使われるat()メソッドやjQueryのlengthついて解説しますので、ぜひ参考にしてください。
at()について
lengthとat()はどちらも配列や文字列を扱う時に使えるプロパティ・メソッドですが、目的や使い方が異なります。
lengthとat() の比較
lengthは、対象となる配列や文字列の全体の長さ（個数）を返します。データ構造のサイズを確認したり、ループ処理の上限を決めるのに使われます。
一方でat()メソッドは、指定したインデックスの要素を返します。通常のインデックスアクセスである[]と似ていますが、負の数を使って末尾から要素を取得できるのが大きな特徴です。
const data = ["x", "y", "z"]; console.log(data.at(0)); // 出力: "x" console.log(data.at(-1)); // 出力: "z"（最後の要素） |
data.at(-1)はdata[data.length - 1]と同じ意味なのですが、よりシンプルなコードになるため可読性を高めたり、保守性を高める点でおすすめです。
at()もlengthと同様、配列にも文字列にも対応しています。たとえば、末尾の文字を簡単に取得することも可能です。
const text = "JavaScript"; console.log(text.at(-1)); // 出力: "t" |
ブラウザ対応に注意
at()はES2022（ECMAScript 2022）で加わった比較的新しいメソッドなので、古い環境では使えない可能性があります。Node.jsの最新版ではサポートされていますが、使用前に対応できるかどうか確認しておきましょう。
jQuery.lengthについて
jQueryでもlengthプロパティが使われます。ただし、用途や意味はJavaScriptのlengthとは異なる点があるので注意してください。
jQuery.lengthの基本的な使い方
jQueryでのlengthは、セレクタで取得した要素の数を表すプロパティとして使用されます。jQueryでDOM要素を取得したとき、その数を確認したい場合にlengthを使います。
const divCount = $("div").length; console.log(divCount); // 画面上の<div>要素の数を出力 |
たとえば、$(".item")のようなクラスセレクタでも同様に使えます。
if ($(".item").length) { console.log("要素があります"); } |
jQueryのlengthは配列の要素数と同じような感覚で、DOMの存在チェックや処理分岐に利用可能です。
要素が存在しない場合の挙動
マッチする要素がないとき、jQueryのlengthは0になります。
if ($("#not-exist").length === 0) { console.log("該当する要素がありません"); } |
JavaScriptのLengthとの違い
項目 | JavaScriptのlength | jQueryのlength |
|---|---|---|
対象 | 配列、文字列、関数 | セレクタで取得した要素 |
意味 | 要素数や文字数などの「サイズ」 | DOM要素の「数」 |
用途 | 処理の回数、サイズ確認など | 要素の存在判定、繰り返し処理など |
関連記事
JavaScriptとは？初心者にもわかりやすく何ができるかや歴史、基本的な文法を解説
7.まとめ
この記事では、JavaScriptのlengthプロパティの基本から応用、トラブルシューティング、jQueryのlengthなどの他のプロパティやメソッドとの違いなどについて解説しました。lengthを正しく理解し活用すると、コーディング力が向上するはずです。今後は学んだ知識を実際のコードに取り入れながら、より読みやすいコードが書けるように頑張ってください。
本記事が皆様にとって少しでもお役に立てますと幸いです。
「フリーランスボード」は、数多くのフリーランスエージェントが掲載するITフリーランスエンジニア・ITフリーランス向けの案件・求人を一括検索できるサイトです。
開発環境、職種、単価、稼働形態、稼働日数など様々な条件から、あなたに最適なフリーランス案件・求人を簡単に見つけることができます。
単価アップを目指す方や、自分の得意なスキルを活かせる案件に参画したい方は、ぜひ「フリーランスボード」をご利用ください。