JavaScript lengthプロパティの使い方

  • JavaScript
  • プロパティ
最終更新日:

この記事のポイント

JavaScript初心者の方でも安心してlengthプロパティを理解できるよう、基本から実用例まで丁寧に解説していきます。

  • 文字列や配列の要素数を瞬時に取得可能な便利なプロパティ
  • 条件分岐やループ処理で頻繁に活用される基本的な機能
  • 実際の開発現場で必須となるデータ操作の基礎知識

これらのポイントを押さえることで、JavaScript開発における重要な基礎スキルを身につけることができます。

目次

lengthプロパティとは？

lengthプロパティは、文字列の文字数や配列の要素数を取得するために使用される基本的なプロパティです。このプロパティを使用することで、データの長さを数値として簡単に取得できます。

文字列に対して使用した場合は文字数を、配列に対して使用した場合は要素の個数を返します。lengthプロパティは読み取り専用のプロパティで、自動的に計算されるため、データの追加や削除に応じて動的に値が変更されます。

プログラムでデータの存在確認や繰り返し処理を行う際に、このプロパティは非常に重要な役割を果たします。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

lengthプロパティの基本的な構文は非常にシンプルで、オブジェクトの後にドット記法を使ってlengthと記述するだけです。文字列や配列などのオブジェクトに対して直接適用でき、即座に長さを数値で取得できます。

以下のコード例では、文字列と配列それぞれに対するlengthプロパティの使用方法を示しています。変数に格納された値でも、直接記述された値でも同様に使用可能です。

let text = "ネコ"; console.log(text.length);







出力結果
2

  
let animals = ["イヌ", "ウサギ", "ハムスター"];
console.log(animals.length);

  


  







出力結果
3
実用例
lengthプロパティは実際の開発現場においてさまざまな場面で活用されます。ユーザー入力の検証、データの存在確認、ループ処理の制御など、プログラムの基本的な処理において欠かせない機能です。
以下では、実際のプログラムでよく使用される具体的なコード例を8つ紹介します。これらの例を通じて、lengthプロパティがどのような場面で役立つのか、どのように活用すればより効果的なプログラムが作成できるのかを理解していただけます。各例では動物を使った親しみやすいデータを使用し、実行結果も含めて詳しく解説していきます。
文字列の長さチェック
ユーザーが入力した文字列の長さを確認する基本的な例です。パスワードの文字数制限や、コメントの文字数制限などでよく使用されます。条件分岐と組み合わせることで、適切な入力かどうかを判定できます。

  
let petName = "タマ";
if (petName.length > 0) {
  console.log("ペットの名前: " + petName);
  console.log("文字数: " + petName.length);
}

  


  







出力結果
ペットの名前: タマ
文字数: 2
配列の空チェック
配列にデータが存在するかどうかを確認する例です。データが存在しない場合のエラー回避や、条件分岐での処理制御に使用されます。

  
let pets = ["トラ", "ライオン"];
if (pets.length > 0) {
  console.log("飼っているペット数: " + pets.length + "匹");
  console.log("最初のペット: " + pets[0]);
}

  


  







出力結果
飼っているペット数: 2匹
最初のペット: トラ
配列の最後の要素取得
配列の最後の要素を取得する際によく使用される例です。lengthプロパティから1を引くことで、最後のインデックスを取得できます。

  
let zoo = ["ゾウ", "キリン", "サル", "ペンギン"];
let lastAnimal = zoo[zoo.length - 1];
console.log("動物園の動物数: " + zoo.length);
console.log("最後の動物: " + lastAnimal);

  


  







出力結果
動物園の動物数: 4
最後の動物: ペンギン
ループ処理での要素取得
for文でlengthプロパティを使用することで、配列の全要素を順次処理できます。配列の要素数が変わっても、自動的に適切な回数分ループが実行される例です。

  
let birds = ["ツバメ", "カラス", "ハト"];
for (let i = 0; i < birds.length; i++) {
  console.log((i + 1) + "番目の鳥: " + birds[i]);
}

  


  







出力結果
1番目の鳥: ツバメ
2番目の鳥: カラス
3番目の鳥: ハト
文字列の文字数制限チェック
入力フォームなどで文字数制限を設ける際の検証処理の例です。指定した文字数を超えているかどうかを判定し、適切なメッセージを表示します。

  
let comment = "ウマがとても可愛いです";
let maxLength = 10;
if (comment.length <= maxLength) {
  console.log("コメント投稿完了: " + comment);
} else {
  console.log("文字数オーバー: " + comment.length + "文字");
}

  


  







出力結果
文字数オーバー: 11文字
配列のフィルタリング結果チェック
特定の条件でフィルタリングした後の配列の要素数を確認する例です。処理結果の件数を表示することで、ユーザーに分かりやすい情報を提供できます。

  
let animals = ["イヌ", "ネコ", "ウサギ", "ハムスター"];
let shortNames = animals.filter(animal => animal.length <= 2);
console.log("元の動物数: " + animals.length);
console.log("2文字以下の動物: " + shortNames.length + "匹");

  


  







出力結果
元の動物数: 4
2文字以下の動物: 2匹
多次元配列での長さ取得
配列の中に配列が含まれている多次元配列において、それぞれの階層の長さを取得する例です。データ構造が複雑な場合でも、適切にlengthプロパティを活用できます。

  
let animalGroups = [["イヌ", "ネコ"], ["トリ", "ウサギ", "ハムスター"]];
console.log("グループ数: " + animalGroups.length);
console.log("1グループ目の動物数: " + animalGroups[0].length);
console.log("2グループ目の動物数: " + animalGroups[1].length);

  


  







出力結果
グループ数: 2
1グループ目の動物数: 2
2グループ目の動物数: 3
動的な配列操作でのチェック
配列に要素を追加した後のlengthプロパティの変化を確認する例です。pushメソッドで要素を追加すると、lengthプロパティも自動的に更新されます。

  
let pets = ["ハムスター"];
console.log("追加前: " + pets.length + "匹");
pets.push("モルモット");
pets.push("ウサギ");
console.log("追加後: " + pets.length + "匹");

  


  







出力結果
追加前: 1匹
追加後: 3匹
まとめ
lengthプロパティは、プログラミングにおいて基本的でありながら非常に重要な機能です。文字列や配列の長さを瞬時に取得できるこのプロパティは、さまざまな処理で活用され、効率的なプログラム作成に欠かせません。
lengthプロパティの活躍する場面
    

  • 入力値の検証処理での文字数チェック機能
    • 

  • ループ処理における繰り返し回数の自動制御
    • 

  • 配列操作後のデータ件数確認と結果表示
    • 

重要なポイント
    

  • 文字列と配列両方で使用可能な汎用性
    • 

  • 動的にデータ変更時も自動更新される特性
    • 

これらの特徴を理解し適切に活用することで、より読みやすく保守しやすいJavaScriptコードを書くことができるようになります。lengthプロパティは基礎的な機能ですが、マスターすることでプログラミングスキルの向上に大きく貢献します。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript lengthプロパティの使い方