JavaScriptのfor文を完全解説！初心者から上級者まで対応

JavaScriptで繰り返し処理を行う「for文」は、プログラミングにおいて非常に重要な構文です。この記事では、 基本のfor文 から、 for...in や for...of といった応用的なループ処理までを丁寧に解説します。初心者にもわかりやすく、上級者向けのテクニックも盛り込んだ内容となっていますので、ぜひ参考にしてください！

for文とは？

for文は、 特定の回数または条件を満たす間 繰り返し処理を実行するための構文です。プログラムを効率的に書くための基本中の基本です。

構文

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

• 初期化: 繰り返しを始める前に、ループで使う変数を初期化します。
• 条件式: 条件がtrueの間ループを続けます。
• 増減式: ループのたびに変数の値を更新します。

基本的なfor文の例

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

この例では、変数iを0から4までインクリメントしながらconsole.logで出力します。

実行結果:

0
1
2
3
4

配列とfor文

配列を操作するとき、for文は非常に役立ちます。配列の要素を順番に処理したい場合に最適です。

配列をループで操作する

const fruits = ["りんご", "みかん", "ぶどう"];

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

実行結果:

りんご
みかん
ぶどう

ループを制御する方法

ループを途中で終了する（break）

breakを使うと、特定の条件を満たしたときにループを途中で終了します。

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // 条件を満たしたらループ終了
  }
  console.log(i);
}

実行結果:

0
1
2
3
4

ループの一部をスキップする（continue）

continueを使うと、特定の条件を満たしたときに現在の反復をスキップし、次の反復に進みます。

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // 偶数はスキップ
  }
  console.log(i);
}

実行結果:

1
3
5
7
9

for…in文

for…in文とは？

for...in文は、オブジェクトの すべてのキー（プロパティ名） をループ処理するための構文です。

オブジェクトのキーを取得する例

const person = {
  name: "太郎",
  age: 25,
  job: "エンジニア"
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

実行結果:

name: 太郎
age: 25
job: エンジニア

配列にfor…inを使う際の注意点

for...in文は配列にも使えますが、 キー（インデックス）を取得 するため、通常はオブジェクト専用として使うのがおすすめです。

const arr = ["A", "B", "C"];

for (let index in arr) {
  console.log(index, arr[index]);
}

実行結果:

0 A
1 B
2 C

for…of文

for…of文とは？

for...of文は、 配列や文字列などの「反復可能なオブジェクト（Iterable）」 をループ処理するための構文です。for...inと異なり、 値そのもの を直接取得できます。

配列を反復処理する例

const fruits = ["りんご", "みかん", "ぶどう"];

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

実行結果:

りんご
みかん
ぶどう

文字列を反復処理する例

const str = "JavaScript";

for (let char of str) {
  console.log(char);
}

実行結果:

J
a
v
a
S
c
r
i
p
t

for…inとfor…ofの違い

for...inとfor...ofは似ていますが、用途が異なります。以下の表にその違いをまとめました。

上級者向けのテクニック

ネストされたfor文の使用例

多次元配列を操作する場合、ネストされたfor文を活用します。

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

for (let row of matrix) {
  for (let value of row) {
    console.log(value);
  }
}

実行結果:

1
2
3
4
5
6
7
8
9

効率的なループの記述

ループ処理を簡潔に記述するには、Arrayメソッド（map, filter, reduceなど）と組み合わせるのも効果的です。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

まとめ

この記事では、JavaScriptのfor文に関する基本から応用までを解説しました。以下のポイントを押さえておくと、どんなループ処理にも対応できるようになります。

• 基本のfor文: 条件を満たす間、ループを繰り返す。
• for…in文: オブジェクトのプロパティキーを反復処理する。
• for…of文: 配列や文字列などの値を直接取得する。
• breakやcontinue を使った柔軟なループ制御。

これらの知識を組み合わせれば、シンプルで効率的なコードを書けるようになります。ぜひ、今回のサンプルコードを試しながら理解を深めてください！