【初心者向け】JavaScript for文完全ガイド｜配列ループの基本と使い方

プログラミング

公開日: 2026/01/26

【初心者向け】JavaScript for文完全ガイド｜配列ループの基本と使い方

※この記事にはプロモーションを含みます

はじめに

JavaScriptで繰り返し処理を効率的に行うには、for文の理解が欠かせません。
特に、配列やオブジェクトのデータを扱う場合、for文を使うことで同じ処理を複数回書く必要がなくなり、コードの可読性と保守性が向上します。

本記事では、for文の基本構文から、配列やオブジェクトのループ、条件付きループやネストの応用、実装での活用方法まで、初心者でも理解できるよう丁寧に解説します。

これらを理解して、日常的なプログラミング作業や開発プロジェクトで、効率的かつ安全にループ処理を書けるようになりましょう。

for文の基本文法

for文の構文と書き方

for文は、同じ処理を繰り返し実行するための基本的な構文（ループ文）です。

特に配列や数値の範囲を順番に処理する場合に便利で、JavaScriptのプログラミングでは非常によく使われます。

for文を適切に使うことで、無駄なコードの重複を避け、メンテナンス性の高いプログラムを書くことができます。

基本構文は次のように書きます。

for (初期化; 条件式; 増減処理) {
  繰り返す処理
}

for文を使う際には、初期化・条件式・増減処理の3つの要素を押さえておくことが重要です。

for文の3要素

これらはループ処理の動作を決定する要素であり、正しく設定しないと動作の崩れや無限ループの原因になります。
for文は、特に配列操作や反復処理で活躍する基本的な構文であり、プログラミングの根幹スキルとして非常に重要です。

変数の初期化と条件式

for文では、ループ内で使用する変数の初期化や条件式の設定が非常に重要です。

以下のポイントを押さえましょう。

for文のポイント

これらのポイントを理解することで、配列の要素やオブジェクトのプロパティを正確に処理することができます。

例えば、簡単な数字の繰り返し処理で動作を確認してみましょう。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

出力結果：

let i = 0：ループの開始値を設定（初期化）
i < 5：終了条件を指定
i++：ループごとに変数を増加

変数の初期化を適切に行うことで、無限ループを防ぎ、処理の正確性が確保できます。

条件式も重要で、どのタイミングでループを終了させるかを明確にすることで、後の処理が安定します。

ループ処理の終了条件

ループ処理を正しく終了させるためには、条件式を適切に設定することが重要です。

誤った条件式は無限ループや意図しない処理の原因となります。

誤った例

for (let i = 0; i <= array.length; i++) {
  console.log(array[i]);
}

上記は、配列の値を一つずつコンソールに出力させるコードの間違った例です。

<=を使用しているため、配列の最後のインデックス（配列内の要素の位置を示す番号）を超えてしまい、undefinedが出力される可能性があります。

条件式は常に配列の長さや処理の目的に沿って正確に設定しましょう。

配列のループ方法

通常のforループでの配列処理

JavaScriptでは、配列を扱う場面が非常に多く、for文を使った配列のループ処理は必須です。

データ集計やUI表示の制御など様々な場面で活用できます。

例えば、配列の要素を順番に処理する場合は、次のように書きます。

const fruits = ["リンゴ", "バナナ", "オレンジ", "モモ"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

出力結果

リンゴ
バナナ
オレンジ
モモ

この例では、変数 i を0から始めて配列の長さまで繰り返し、配列の各要素を順番に出力します。

iという変数を使って配列のインデックスを管理し、fruits.lengthに達するまでループを繰り返します。

通常のforループは、配列の特定の範囲だけを処理したり、逆順で処理したい場合にも柔軟に対応できる点が特徴です。

for…ofによる配列操作

for…ofを使うと、配列の各要素を直接取り出せるため、インデックスを意識せずに処理できます。

const fruits = ["リンゴ", "バナナ", "オレンジ"];

for (const fruit of fruits) {
  console.log(fruit);
}

出力結果

リンゴ
バナナ
オレンジ

変数fruitには配列fruitsの要素が順番に代入されます。

コードがシンプルになり可読性が高まるため、初心者にも扱いやすい書き方です。

forEachを使った配列処理

forEachを使うと、各要素をコールバック関数の引数として受け取り、インデックスを自分で管理することなく要素を順番に処理できます。

const fruits = ["リンゴ", "バナナ", "オレンジ"];

fruits.forEach((fruit) => {
  console.log(fruit);
});

出力結果

リンゴ
バナナ
オレンジ

このように、関数形式で書けるため可読性が高く、他の配列メソッドと組み合わせる場合にも便利です。

また、ループ内でreturnでは抜けられない点に注意が必要ですが、基本的な配列処理には非常に適しています。

ネストや条件付きループ

ネストしたfor文の使い方

複雑な処理では、for文をネストしたり、条件付きでループを制御することがあります。

const matrix = [
  [1, 2],
  [3, 4]
];

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

二重でループ処理を使うことで、二次元配列（配列の中にさらに配列が入っている配列）の各要素にアクセスできます。

ただしネストは深くなると可読性が下がるため、処理内容が複雑な場合は関数に切り出すことをおすすめします。

条件付きでループを制御する方法

ループ中に条件に応じて処理を変えることも可能です。

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  if (num % 2 === 0) {
    console.log(num + " は偶数です");
  } else {
    console.log(num + " は奇数です");
  }
}

ループ内で条件分岐を組み合わせることで、より柔軟な処理を実現できます。単純な繰り返しだけでなく、条件付きの処理を整理して書くのにも役立ちます。

breakやcontinueの活用

breakを使うことで、ループの途中で処理を終了したり、continueで特定の条件でのスキップを設定することができます。

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  if (num === 4) break;
  if (num % 2 === 0) continue;
  console.log(num);
}

この例では、下記のような処理を行っています。

偶数の場合は処理を行わずに、ループの次の回へスキップする
numが4になった時点でループを終了

breakやcontinueを適切に使うことで、より複雑なループ文も簡単に作ることができます。

実装での活用例

配列データの一括処理

配列内に複数のオブジェクトがある場合、for文を使うと順番に取り出して処理できます。例えば、注文情報をまとめて出力したい場合は次のように書きます。

const orders = [
  { id: 1, item: "リンゴ", quantity: 2 },
  { id: 2, item: "バナナ", quantity: 5 },
  { id: 3, item: "オレンジ", quantity: 3 }
];

for (let i = 0; i < orders.length; i++) {
  console.log(`注文ID:${orders[i].id} 商品:${orders[i].item} 数量:${orders[i].quantity}`);
}

このコードでは、配列 orders の各オブジェクトを順番に取り出し、注文ID・商品名・数量をコンソールに出力しています。

条件分岐と組み合わせることで、特定条件のデータだけを処理することも可能です。

大量のデータを処理する場合にもfor文を活用することで、効率的かつ正確に処理を行うことができます。

まとめ

本記事では、JavaScriptのfor文の基本から配列ループ、ネストや条件付きループ、実務での活用例まで解説しました。

for文を正しく理解することで、効率的で可読性の高いループ処理が書けるようになります。
特に配列処理やユーザー操作に応じた処理では、for文を活用することで複雑な条件でも整理して書くことが可能です。

こうしたJavaScriptの基礎や活用を学びたい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

初歩から段階的に学び、コーディングスキルを着実に身につけていきましょう。

この記事を
シェアする！