JavaScriptにおけるlengthプロパティの基本的な使い方8選

●JavaScriptのlengthプロパティとは

lengthプロパティという言葉を聞いたことはありますか？

プログラミング初心者にとって、lengthプロパティは少しわかりにくい概念かもしれません。

これからlengthプロパティについて、一緒に理解を深めていきましょう。

○lengthプロパティの概要

lengthプロパティは、JavaScriptにおける配列やオブジェクト、文字列の長さや要素数を取得するために使われる便利なプロパティです。

配列やオブジェクトの要素数を知りたいとき、文字列の文字数を調べたいときなど、lengthプロパティは大活躍します。

具体的な使い方としては、配列名.lengthとすることで、その配列の要素数を取得できます。

例えば、次のようなコードを見てみましょう。

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 3

この例では、fruitsという配列の要素数を、fruits.lengthで取得しています。

実行結果は3となります。配列fruitsには3つの要素が含まれているからですね。

文字列の場合も同様に、文字列.lengthとすることで、その文字列の文字数を取得できます。

実例を見てみましょう。

const message = 'Hello, World!';
console.log(message.length); // 13

この例では、messageという文字列の文字数を、message.lengthで取得しています。

実行結果は13となります。

スペースも1文字としてカウントされるため、’Hello, World!’は全部で13文字になります。

○lengthプロパティを使うメリット

lengthプロパティを使うメリットは、主に次の3つが挙げられます。

1. 配列やオブジェクトの要素数を簡単に取得できる
2. 文字列の長さをすぐに調べられる
3. 取得した要素数を使って、柔軟な処理が可能になる

1つ目のメリットについて、先ほどの配列の例で見たように、lengthプロパティを使えば、配列やオブジェクトの要素数をワンラインで簡単に取得できます。

わざわざループを回して要素数をカウントする必要がないので、コードがスッキリします。

2つ目のメリットは、文字列の長さチェックがすぐにできることです。

例えば、ユーザーからの入力をバリデーションチェックする際に、lengthプロパティを使って文字数制限を設けることができます。

これにより、不正な入力を防ぐことができるのです。

3つ目のメリットとして、取得した要素数を使って、柔軟な処理を行えることが挙げられます。

例えば、配列の要素数に応じて、動的にHTMLを生成したり、条件分岐を行ったりといったことが可能になります。

lengthプロパティを活用することで、より動的で柔軟性の高いコードを書くことができるのです。

●配列の要素数を取得する

さて、いよいよ配列の要素数を取得する方法について見ていきましょう。

配列は複数のデータをまとめて管理するのに便利なデータ構造です。

でも、配列の中身を把握するには、その要素数を知ることが大切ですよね。

ここではlengthプロパティを使った配列の要素数の取得方法を、具体的なコード例を交えて解説します。

○サンプルコード1：配列.lengthで要素数を取得

配列の要素数を取得する最も基本的な方法が、配列.lengthを使う方法です。

先ほども少し触れましたが、改めてサンプルコードで見てみましょう。

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 5

この例では、numbersという配列を定義し、その要素数をnumbers.lengthで取得しています。

実行結果は5となります。numbersには1から5までの数字が含まれており、その要素数は5だからですね。

lengthプロパティは配列に含まれる要素の数を返してくれます。

インデックス番号ではないので注意が必要ですよ。インデックスは0から始まるのに対し、lengthは1から数えます。

だから、インデックスの最大値はlengthの値から1を引いた値になります。

○サンプルコード2：配列の要素数分だけループ処理

取得した配列の要素数を活用する一般的な例が、ループ処理です。

配列の要素を順番に処理していきたいとき、lengthプロパティを使うと便利です。

const fruits = ['apple', 'banana', 'orange'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// 実行結果
// apple
// banana
// orange

この例では、fruitsという配列をループ処理しています。

ループの条件部分で、iがfruits.lengthより小さい間は処理を続けるように指定しています。

これにより、配列fruitsの要素数分だけループが回り、各要素が順番に出力されます。

配列の要素数を気にせずに、自動的にすべての要素を処理できるのが、lengthプロパティを使うメリットの1つです。

コードがスッキリして読みやすくなりますし、配列の要素数が変わっても柔軟に対応できます。

○サンプルコード3：配列が空かどうかをlengthで判定

lengthプロパティのもう1つの使い道が、配列が空かどうかの判定です。

配列の要素数が0であれば、その配列は空ということになります。

ifとlengthを組み合わせることで、簡単に配列が空かどうかをチェックできますよ。

const emptyArray = [];

if (emptyArray.length === 0) {
  console.log('配列は空です');
} else {
  console.log('配列は空ではありません');
}
// 実行結果
// 配列は空です

この例では、emptyArrayという空の配列を定義しています。

if文の条件部分で、emptyArray.lengthが0と等しいかどうかを判定しています。

空の配列はlengthが0になるので、’配列は空です’と出力されます。

●文字列の長さを取得する

配列に続いて、今度は文字列の話をしましょう。

みなさん、文字列の長さを調べる必要に迫られたことはありませんか？

ユーザーからの入力をチェックしたり、文字数制限を設けたりするときには、文字列の長さを知ることが大切です。

ここでも、lengthプロパティが大活躍します。

一緒に文字列の長さの取得方法を見ていきましょう。

○サンプルコード4：文字列.lengthで文字数を取得

文字列の長さを取得する方法は、文字列の後ろに.lengthをつけるだけです。

とてもシンプルですね。サンプルコードで確認してみましょう。

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

この例では、messageという変数に”Hello, World!”という文字列を格納しています。

そして、message.lengthで文字列の長さを取得し、console.logで出力しています。

実行結果は13となります。

ここで注意が必要なのが、lengthプロパティは文字数を返すということです。

スペースや句読点なども1文字としてカウントされます。

そのため、”Hello, World!”の長さは13になるわけですね。

文字列の長さを正確に把握することは、プログラミングの世界ではとても重要です。

lengthプロパティを使えば、その長さを簡単に取得できるので、ぜひ覚えておきましょう。

○サンプルコード5：文字列の長さを条件に処理を分岐

文字列の長さを取得できると、その長さを条件とした処理の分岐ができるようになります。

例えば、ユーザーからの入力が一定の文字数以内かどうかをチェックしたいときなどに役立ちます。

サンプルコードを見てみましょう。

const inputText = "こんにちは";

if (inputText.length <= 5) {
  console.log("入力OK");
} else {
  console.log("5文字以内で入力してください");
}
// 実行結果
// 入力OK

この例では、inputTextという変数に”こんにちは”という文字列を格納しています。

if文の条件部分で、inputText.lengthが5以下であるかどうかを判定しています。

“こんにちは”は5文字なので、条件を満たし、”入力OK”と出力されます。

逆に、inputTextが”こんにちは、世界！”だった場合は、lengthは8になるので、else部分の処理が実行され、”5文字以内で入力してください”と出力されるはずです。

●オブジェクトのプロパティ数を取得する

みなさん、オブジェクトという言葉を聞いたことがあるでしょうか。

JavaScriptにおけるオブジェクトとは、複数のデータを1つにまとめて扱うことができる便利なデータ構造です。

そんなオブジェクトのプロパティ数を取得する方法について、ここでは詳しく解説していきます。

オブジェクトのプロパティ数を知ることは、オブジェクトを扱う上で欠かせないスキルの1つです。

例えば、あるオブジェクトにどのくらいのプロパティが含まれているのかを把握したいときなどに重要になってきます。

では、どうやってオブジェクトのプロパティ数を取得すればよいのでしょうか。

実はlengthプロパティを直接使うことはできません。オブジェクトにはlengthプロパティが存在しないからです。

でも大丈夫、別の方法があります。

順を追って見ていきましょう。

○サンプルコード6：Object.keys(obj).lengthでプロパティ数を取得

オブジェクトのプロパティ数を取得する一般的な方法が、Object.keys()メソッドとlengthプロパティを組み合わせる方法です。

下記のサンプルコードを見てみましょう。

const person = {
  name: "Alice",
  age: 24,
  city: "Tokyo"
};

console.log(Object.keys(person).length); // 3

この例では、personというオブジェクトを定義しています。

personオブジェクトには、name、age、cityの3つのプロパティが含まれています。

Object.keys(person)と書くことで、personオブジェクトのプロパティ名を配列として取得することができます。

つまり、[“name”, “age”, “city”]という配列が返ってくるわけです。

そして、その配列に対してlengthプロパティを使うことで、プロパティの数を取得できるのです。

この例の場合、personオブジェクトのプロパティ数は3になります。

Object.keys()とlengthの組み合わせは、オブジェクトのプロパティ数を取得する上で非常に有用な方法だと言えます。

ぜひ覚えておいてくださいね。

○サンプルコード7：hasOwnPropertyとlengthの組み合わせ

オブジェクトのプロパティ数を取得する別の方法として、hasOwnProperty()メソッドとforループ、lengthプロパティを組み合わせる方法があります。

サンプルコードを見てみましょう。

const fruit = {
  apple: 3,
  banana: 6,
  orange: 2
};

let count = 0;
for (let key in fruit) {
  if (fruit.hasOwnProperty(key)) {
    count++;
  }
}

console.log(count); // 3

この例では、fruitというオブジェクトを定義しています。

fruitオブジェクトには、apple、banana、orangeの3つのプロパティが含まれています。

hasOwnProperty()は、あるオブジェクトが特定のプロパティを持っているかどうかを判定するメソッドです。

forループを使って、fruitオブジェクトの各プロパティに対してhasOwnProperty()を呼び出しています。

もしfruitオブジェクトが独自のプロパティを持っていれば、countを1つずつインクリメントしていきます。

最終的なcountの値が、fruitオブジェクトのプロパティ数となります。

●よくあるエラーと対処法

JavaScriptのlengthプロパティを使っていると、時々エラーに遭遇することがあります。

エラーメッセージを見ても、どこが間違っているのかわからないことも多いですよね。

でも大丈夫、ここではよくあるエラーとその対処法について詳しく解説していきます。

エラーに立ち向かうためには、まずエラーの内容を理解することが大切です。

エラーメッセージをしっかりと読み込んで、何が問題なのかを把握しましょう。

そして、原因を突き止めて適切な対処を行うことが重要です。

lengthプロパティに関連するエラーは、主に次の3つが挙げられます。

1. lengthプロパティが使えないエラー
2. undefined.length のエラー
3. Uncaught TypeError のエラー

それぞれのエラーについて、具体的なコード例を交えながら見ていきましょう。

○lengthプロパティが使えないエラー

lengthプロパティが使えないエラーは、lengthプロパティを持たないオブジェクトに対してlengthを使おうとしたときに発生します。

次のようなコードを見てみましょう。

const obj = {a: 1, b: 2, c: 3};
console.log(obj.length); // undefined

この例では、objというオブジェクトを定義しています。

objはa、b、cというプロパティを持っていますが、lengthプロパティは持っていません。

そのため、obj.lengthとしてもundefinedが返ってきます。

このエラーを避けるためには、lengthプロパティを使う前に、そのオブジェクトがlengthプロパティを持っているかどうかを確認する必要があります。

例えば、Array.isArray()を使って配列かどうかをチェックするのも1つの方法です。

const obj = {a: 1, b: 2, c: 3};
if (Array.isArray(obj)) {
  console.log(obj.length);
} else {
  console.log("lengthプロパティは使えません");
}
// 実行結果
// lengthプロパティは使えません

この例では、Array.isArray(obj)でobjが配列かどうかを判定しています。

objは配列ではないので、else部分の処理が実行され、”lengthプロパティは使えません”と出力されます。

○undefined.length のエラー

undefined.length のエラーは、undefinedに対してlengthプロパティを使おうとしたときに発生します。

let arr;
console.log(arr.length); // TypeError: Cannot read property 'length' of undefined

この例では、arrという変数を宣言していますが、何も値を代入していません。

そのため、arrはundefinedになります。

そこでarr.lengthとしてlengthプロパティにアクセスしようとすると、TypeErrorが発生します。

このエラーを避けるには、lengthプロパティを使う前に、変数が確実に定義されていることを確認する必要があります。

例えば、if文を使って変数の存在チェックをするのが一般的です。

let arr;
if (arr) {
  console.log(arr.length);
} else {
  console.log("arrは定義されていません");
}
// 実行結果
// arrは定義されていません

この例では、if (arr)でarrが定義されているかどうかを判定しています。

arrはundefinedなので、else部分の処理が実行され、”arrは定義されていません”と出力されます。

○Uncaught TypeError のエラー

Uncaught TypeError のエラーは、lengthプロパティを数値や文字列など、配列でないオブジェクトに使おうとしたときに発生します。

const num = 123;
console.log(num.length); // TypeError: num.length is not a function

この例では、numという数値型の変数を定義しています。

そこでnum.lengthとしてlengthプロパティにアクセスしようとすると、TypeErrorが発生します。

数値型にはlengthプロパティが存在しないからです。

このエラーを避けるには、lengthプロパティを使う前に、そのオブジェクトが配列や文字列であることを確認する必要があります。

Array.isArray()やtypeof演算子を使って、オブジェクトのタイプをチェックしましょう。

const num = 123;
if (Array.isArray(num) || typeof num === "string") {
  console.log(num.length);
} else {
  console.log("lengthプロパティは使えません");
}
// 実行結果
// lengthプロパティは使えません

この例では、Array.isArray(num)でnumが配列かどうかを判定し、typeof num === “string”でnumが文字列かどうかを判定しています。

numは数値型なので、どちらの条件も満たさず、else部分の処理が実行されます。

●lengthプロパティの応用例

さて、ここまでlengthプロパティの基本的な使い方について詳しく見てきました。

配列や文字列の長さを取得したり、オブジェクトのプロパティ数を調べたりと、lengthプロパティの活用法は多岐にわたります。

では、もう一歩踏み込んで、lengthプロパティをより実践的なシーンで活用する方法を見ていきましょう。

lengthプロパティは、単に長さを取得するだけではなく、様々なアルゴリズムの中でも重要な役割を果たします。

例えば、配列の最大値を求めたり、二次元配列の行数と列数を取得したりする際にも、lengthプロパティが大活躍するのです。

ここからは、lengthプロパティを使った応用的なサンプルコードを3つ紹介していきます。

実際のプログラミングでも役立つテクニックばかりなので、ぜひ覚えておいてくださいね。

○サンプルコード8：配列の最大値を求める

配列の中で最大の値を求めるのに、lengthプロパティを使うことができます。

const numbers = [12, 4, 28, 7, 15];
let max = numbers[0];

for (let i = 1; i < numbers.length; i++) {
  if (numbers[i] > max) {
    max = numbers[i];
  }
}

console.log(`最大値は${max}です`);
// 実行結果
// 最大値は28です

この例では、numbersという配列を定義し、その中の最大値を求めています。

まず、maxにnumbers配列の最初の要素を代入します。

そして、for文でnumbers配列の2番目の要素から最後の要素までループ処理を行います。

ループ内では、numbers[i]とmaxを比較し、numbers[i]の方が大きければ、maxにnumbers[i]を代入します。

これを配列の最後まで繰り返すことで、最終的にmaxに配列の最大値が格納されるというわけです。

ポイントは、for文の条件部分でnumbers.lengthを使っていることです。

これにより、配列の長さに応じて自動的にループ回数を調整できます。

配列の要素数が変わっても、コードを修正する必要がないのは大きな利点ですね。

○サンプルコード9：二次元配列の行数・列数を取得する

二次元配列は、配列の中に配列を持つような構造のデータです。

lengthプロパティを使えば、二次元配列の行数と列数を簡単に取得できます。

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

const numRows = matrix.length;
const numCols = matrix[0].length;

console.log(`行数は${numRows}、列数は${numCols}です`);
// 実行結果
// 行数は3、列数は3です

この例では、matrixという二次元配列を定義しています。

行数を取得するには、matrix.lengthとします。

これで、matrixの第一次元の要素数、つまり行数が取得できます。

列数を取得するには、matrix[0].lengthとします。

これは、matrixの最初の要素（つまり最初の行）の長さを取得することを意味します。

二次元配列では、各行の要素数は同じである必要があるため、最初の行の要素数を取得すれば、それがそのまま列数になるわけです。

二次元配列を扱う際は、行数と列数を把握することが重要です。

lengthプロパティを使えば、それが簡単に実現できるのです。

○サンプルコード10：再帰を使った配列の合計値計算

再帰を使うと、配列の合計値を計算することができます。

再帰処理の中でもlengthプロパティが活用されています。

少し難しいかもしれませんが、コードをじっくり読み解いてみましょう。

function sumArray(arr) {
  if (arr.length === 0) {
    return 0;
  } else {
    return arr[0] + sumArray(arr.slice(1));
  }
}

const numbers = [1, 2, 3, 4, 5];
const sum = sumArray(numbers);

console.log(`配列の合計値は${sum}です`);
// 実行結果
// 配列の合計値は15です

この例では、sumArray()という再帰関数を定義しています。

sumArray()は配列を引数に取り、その配列の合計値を返します。

再帰の終了条件は、配列の長さが0になったときです。

そのため、if文でarr.length === 0かどうかをチェックしています。

配列が空になったら、0を返して再帰を終了します。

配列が空でない場合は、配列の最初の要素arr[0]と、arr.slice(1)で得られる配列（最初の要素を除いた配列）をsumArray()に渡した結果を足し合わせます。

これを配列が空になるまで繰り返すことで、配列全体の合計値が計算できるのです。

再帰は少し難しい概念ですが、lengthプロパティを使って配列を分割しながら処理を進めていくのがポイントです。

配列を扱う際の強力なテクニックなので、ぜひ理解を深めておきましょう。

まとめ

JavaScriptのlengthプロパティ、いかがでしたか？

配列や文字列の長さを取得したり、オブジェクトのプロパティ数を調べたりと、lengthプロパティの使い方は実に様々です。

また、よくあるエラーとその対処法や、より実践的な応用例まで幅広く解説してきました。

今回学んだことを生かして、ぜひ実際のコーディングの中でlengthプロパティを活用してみてください。

lengthプロパティを使いこなせるようになれば、JavaScriptの理解もさらに深まるはずです。

最初は戸惑うこともあるかもしれませんが、何事も経験が大切。エラーに立ち向かいながら、自分なりのベストプラクティスを見つけていきましょう。

そうすることで、プログラミングの楽しさや達成感を味わえるはずです。