JavaScriptの配列の長さ（lengthプロパティ）を理解しよう

1. lengthプロパティとは？

1. lengthプロパティとは？

JavaScriptのプログラミングにおいて、配列の中にデータがいくつ入っているかを確認することは非常に重要です。その「要素の数」を自動的に数えて教えてくれる仕組みが length（レングス）プロパティです。

プロパティとは、そのデータが持っている「属性」や「ステータス」のようなものです。例えば、ある「箱（配列）」の中に何個の「荷物（要素）」が入っているかという情報を、常に数字で保持しています。

// 好きな食べ物を3つ入れた配列
let myFavorite = ["寿司", "ラーメン", "カレー"];

// lengthを使って、中身がいくつあるか確認する
console.log(myFavorite.length);

3

このサンプルでは、myFavorite という名前の配列に3つの文字列が入っています。そのため、length を呼び出すと「3」という数値が返ってきます。

プログラミング未経験の方でも、「配列名.length」と書くだけで、中身が1つなら「1」、100個なら「100」という結果がすぐに手に入る、と覚えておけば大丈夫です。データの個数に合わせて自動で計算してくれるため、私たちが手動で数え直す必要はありません。

2. lengthプロパティの使い方

2. lengthプロパティの使い方

JavaScriptで配列の長さを取得する方法は非常にシンプルです。「配列が入っている変数名」の直後に「.length」を書き加えるだけで、その瞬間に配列の中に何個のデータが入っているかを数値として取得できます。

ドット（.）には「〜の」という意味があるため、fruits.length は「fruits（配列）の、length（長さ）」と読み解くとイメージしやすいでしょう。それでは、初心者の方でも分かりやすい具体的なサンプルコードを見てみましょう。

// 果物の名前を格納した配列を作成
let fruits = ["りんご", "バナナ", "みかん"];

// 配列の要素数（長さ）を取得して、変数「count」に代入する
let count = fruits.length;

// コンソールに結果を表示
console.log("配列の要素数は " + count + " です");
console.log(fruits.length);

配列の要素数は 3 です
3

このプログラムでは、fruits という配列の中に「りんご」「バナナ」「みかん」という3つのデータが入っています。そのため、fruits.length を実行するとコンピューターは「3」という数字を返してくれます。

たとえ中身が1,000個、10,000個と膨大な量になったとしても、この length プロパティを使えば一瞬で正確な数を調べることが可能です。手動で数える必要がないため、ヒューマンエラーを防げるのも大きなメリットですね。

3. lengthは常に最新の要素数を教えてくれる

3. lengthは常に最新の要素数を教えてくれる

JavaScriptの length プロパティが非常に便利な理由は、配列の状態に合わせて値が「リアルタイム」で自動更新される点にあります。プログラムの途中でデータを追加したり、逆に削除したりしても、私たちが計算し直す必要はありません。

例えば、お買い物リストを作っている場面をイメージしてみましょう。カゴに商品を入れるたびに、length は「今、カゴに何個入っているか」を常に監視して、正しい合計数を返してくれます。

// 最初は「りんご」と「バナナ」の2つ
let fruits = ["りんご", "バナナ"];
console.log("最初の数:", fruits.length);

// pushを使って、新しく「みかん」を追加
fruits.push("みかん");
console.log("追加した後の数:", fruits.length);

// popを使って、最後の要素（みかん）を取り除く
fruits.pop();
console.log("削除した後の数:", fruits.length);

最初の数: 2
追加した後の数: 3
削除した後の数: 2

このように、push（追加）や pop（削除）といった操作を行うだけで、length の中身は自動的に書き換わります。この特性があるおかげで、「データが増えすぎて管理しきれない」といったミスを防ぎ、常に最新の個数を把握しながらプログラムを動かすことができるのです。

4. lengthを使って繰り返し処理を自動化する

4. lengthを使って繰り返し処理を自動化する

配列の長さを取得できる length プロパティが最も威力を発揮するのは、「繰り返し処理（ループ）」と組み合わせたときです。配列の中にデータが何個あっても、length を使えば「データの数だけ処理を繰り返す」という命令をスマートに記述できます。

例えば、名簿のリスト全員に挨拶を表示したり、商品の在庫一覧をすべて画面に出力したりする場合、手動で「3回繰り返す」「10回繰り返す」と指定する必要はありません。length があれば、データが増減してもプログラムを書き換えずに対応できるのです。

// 買い物リストの配列
let shoppingList = ["牛乳", "卵", "パン", "チーズ"];

// iが「配列の長さ（shoppingList.length）」より小さい間、処理を繰り返す
for (let i = 0; i < shoppingList.length; i++) {
  // shoppingList[0], [1], [2], [3] と順番に表示される
  console.log((i + 1) + "番目のアイテム: " + shoppingList[i]);
}

1番目のアイテム: 牛乳
2番目のアイテム: 卵
3番目のアイテム: パン
4番目のアイテム: チーズ

このコードでは、shoppingList.length の値が「4」なので、コンピューターは自動的に4回ループを実行します。もし後から「ジャム」を追加して配列の長さが「5」になれば、ループも自動的に5回に増えます。

このように、「データの個数に合わせて動くプログラム」を作ることで、修正漏れやミスを減らし、メンテナンスしやすいコードを書くことができるようになります。プログラミングにおいて length と for 文の組み合わせは、セットで覚えるべき王道のパターンです。

5. lengthの注意点：最後の要素は「length - 1」で取得する

5. lengthの注意点：最後の要素は「length - 1」で取得する

JavaScriptの配列を扱う上で、初心者が最もつまずきやすいのが「要素の数」と「添字（インデックス番号）」のズレです。配列の要素は必ず「0」から数え始めるというルールがあるため、lengthが「3」であっても、最後の要素にアクセスするための番号は「2」になります。

この「1つズレる」という感覚を掴むのが、配列マスターへの第一歩です。例えば、100個のデータが入った配列の最後を見たいとき、わざわざ「99」と手入力するのは大変ですよね。そこで、length - 1 という書き方が非常に役立ちます。

// 3つのフルーツが入った配列
let fruits = ["りんご", "バナナ", "みかん"];

// 配列の長さ（length）は 3
let len = fruits.length;

// 最後の要素を取得するには「長さから1を引いた番号」を指定する
// つまり fruits[2] を指定しているのと同じ意味になります
let lastItem = fruits[len - 1];

console.log("配列の長さ: " + len);
console.log("最後の要素: " + lastItem);

配列の長さ: 3
最後の要素: みかん

プログラミングの世界では、データの数がいくつになっても「配列名[配列名.length - 1]」と書けば、必ず一番端っこのデータを取り出すことができます。これは実務でも頻繁に使うテクニックなので、「最後の番号は length マイナス 1」とセットで覚えておきましょう。

6. 配列以外でもlengthは使える？（文字列の長さを取得する）

6. 配列以外でもlengthは使える？（文字列の長さを取得する）

実は、length プロパティは配列専用のものではありません。プログラミングで配列と同じくらい頻繁に登場する「文字列（string）」に対しても使うことができます。文字列で length を使うと、そのテキストが全部で何文字あるのかを瞬時に数えてくれます。

例えば、入力フォームで「パスワードは8文字以上で設定してください」といったチェック機能を付けたいときや、SNSのような「140文字以内」という制限を作りたいときに、この length が大活躍します。使い方は配列のときと全く同じで、変数名の後ろに .length と付けるだけです。

// 文字列を変数に代入
let message = "こんにちは";

// 文字列の長さを取得して表示
console.log(message.length);

// 応用例：ユーザー名が何文字かチェックする
let userName = "JavaScript学習中";
console.log("ユーザー名の文字数: " + userName.length);

5
ユーザー名の文字数: 10

このように、全角文字（日本語）であっても1文字として正確にカウントされます。配列の場合は「要素の数」でしたが、文字列の場合は「文字の数」を返してくれると覚えておきましょう。

初心者の方は、まず「データの集まり（配列）」でも「テキスト（文字列）」でも、そのサイズを知りたいときは length を使う、という共通のルールとして覚えておくと、JavaScriptの学習がぐっとスムーズになりますよ。

7. まとめ

7. まとめ

ここまで、JavaScriptの配列の length プロパティについてわかりやすく解説しました。配列の長さを調べるときに必須の基本知識です。今後の配列操作や繰り返し処理でよく使うのでしっかり覚えておきましょう。

まとめ

まとめ

今回の記事では、JavaScriptにおける非常に重要かつ基礎的な要素である「配列の長さ（lengthプロパティ）」について詳しく解説してきました。プログラミング初心者の方にとって、配列を使いこなすことは、データの集合を自在に操るための第一歩となります。その中でも、配列が今現在どのくらいのデータ（要素）を持っているのかを正確に把握する「length」の存在は、開発の現場でも欠かすことができない必須の知識です。

配列の長さ（length）が重要な理由

なぜ、配列の長さを知る必要があるのでしょうか。それは、Webアプリケーションなどで扱うデータが常に一定ではないからです。例えば、ショッピングサイトのカートの中身や、SNSの投稿一覧、ユーザーが入力したフォームの数など、データはユーザーの操作によって増えたり減ったりします。そうした「動的な変化」に対して、柔軟に対応するために length プロパティが活躍します。

実務で使える応用テクニック

記事の中でも触れましたが、length プロパティは単に数を数えるだけではありません。実務でよく使われるテクニックをいくつか深掘りしてみましょう。

1. 配列を空にする手法

意外と知られていない活用法として、length に値を代入することで配列の内容を操作できる点があります。例えば、配列の長さを「0」に設定すると、その配列の中身をすべて削除することができます。

let taskList = ["メール送信", "会議準備", "資料作成"];
console.log("削除前:", taskList);
console.log("削除前の長さ:", taskList.length);

// lengthを0にすると配列が空になります
taskList.length = 0;

console.log("削除後:", taskList);
console.log("削除後の長さ:", taskList.length);

削除前: ["メール送信", "会議準備", "資料作成"]
削除前の長さ: 3
削除後: []
削除後の長さ: 0

2. 条件分岐での活用（データがあるかどうかのチェック）

「もしデータが存在するなら処理を実行する」といった条件分岐でも、length は頻繁に使われます。配列が空の状態（長さが0）のときに無理やり処理を行おうとすると、エラーの原因や予期せぬ動作につながることがあるため、事前にチェックすることは非常に良い習慣です。

let userData = []; // サーバーから取得したデータが空だったと想定

if (userData.length > 0) {
  console.log("データを表示します。");
} else {
  console.log("表示するデータがありません。");
}

表示するデータがありません。

文字列操作におけるlengthプロパティ

JavaScriptでは、配列だけでなく「文字列」にも length プロパティが存在します。これは、フォーム入力で「10文字以内で入力してください」といったバリデーション（入力チェック）機能を実装する際に非常に役立ちます。日本語の全角文字も1文字としてカウントされるため、直感的に扱うことが可能です。

let username = "JavaScript学習中";
if (username.length > 10) {
  console.log("名前が長すぎます。10文字以内で入力してください。");
} else {
  console.log("登録可能な名前です。");
}

名前が長すぎます。10文字以内で入力してください。

TypeScriptでの型安全なlength利用

最近の開発現場で主流となっている TypeScript を使用する場合、length プロパティは「数値型（number）」として厳密に扱われます。これにより、誤って文字列として計算してしまうようなミスを防ぐことができ、より安全なプログラムを記述することが可能になります。

const colors: string[] = ["Red", "Green", "Blue"];
const count: number = colors.length;

console.log(`色の数は ${count} 個です。`);

色の数は 3 個です。

学習のまとめと次のステップ

JavaScriptを学び始めたばかりの頃は、インデックス（添字）が「0」から始まることと、length が表す「要素の総数」の違いに戸惑うこともあるかもしれません。しかし、今回学んだ「最後の要素は length - 1 番目である」というルールをしっかり意識すれば、配列操作のミスは格段に減るはずです。

次は、この length を利用したループ処理をさらに効率化する forEach メソッドや map メソッド、あるいは配列の要素を検索する find や filter といった高階関数について学習を進めていくと、より高度なプログラミングができるようになります。