JavaScript：for文を用いたループ処理を３分で解説

JavaScriptのfor文は繰り返し処理を実行するための基本的な制御構造です。for文は特定の条件が満たされるまでコードブロックを繰り返し実行します。

↓の例では、0から4までの数字をコンソールに表示。iは初期値0から始まり、各イテレーションで1ずつ増加し、iが5になるとループが終了します。

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

// 実行結果
// 0
// 1
// 2
// 3
// 4

このページではJavaScriptの基本となる繰り返し処理の基本・使い方やコツ、注意点を初心者向けにわかりやすく解説します。

Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　【JavaScript入門】基本文法/基礎文法を5分で

JavaScript：for文の基本

for (初期化式; 条件式; 更新式) {
  // 繰り返し実行されるコード
}

• 初期化式：ループの開始前に１度だけ実行される式。通常、ループカウンタの初期値を設定します。
• 条件式：ループの各イテレーションの開始前に評価される式。この条件がtrueの場合、ループ内のコードが実行されます。falseになるとループが終了します。
• 更新式：ループ内のコードが実行された後に実行される式。通常、ループカウンタを更新します。

ループカウンタは、ループが何回実行されたかを追跡するための変数です。通常ループの初期化式で宣言され、ループの更新式で更新されます。ループカウンタの値に基づいて、ループの実行回数を制御することができます。例えば、次のように使用されます。

for (let i = 0; i < 10; i++) {
  // ここで、i はループカウンタ
}

// この例では、iがループカウンタとして機能し、0から始まり
// 1ずつ増加し、9に達した時点でループが終了します。

イテレーションは、ループ内の各繰り返し処理のことを指します。ループが開始されるたびに、イテレーションが１回行われ、ループ内のコードが実行されます。ループの条件式がfalseを返すまで、イテレーションは続きます。上記の例では、ループは合計で10回のイテレーションを行うということになります。

以下の例は、for文を用いて1~9までの数字を繰り返し出力する処理です。初期化式、条件式、更新式の役割を少しだけ深堀してご説明していきます。

See the Pen for① by ビズドットオンライン (@BizOnline) on CodePen.

for文：初期化式

初期化式はfor文開始時の変数の値。以下では変数「count」の初期値を「１」としています。

for文が開始される際に変数「count」の値は１から始まるということを示しています。

// 初期化式　→　count=1;

for(count=1; count < 10; count++){
    document.write(count);　
}

参考　const：変数宣言

既に、変数「count」が何らか別の値を保持していたとしても、for文の開始時に初期値で上書きされる点に注意が必要です。

See the Pen for② by ビズドットオンライン (@BizOnline) on CodePen.

for文：条件式

条件式はwhile文の場合と同様、ループ処理（繰り返し処理）が実行される条件を記述します。

// 条件式　→　count < 10;

for(count=1; count < 10; count++){
    document.write(count);　
}

条件式は、for文が開始された直後１番初めに読み込まるため、もし最初からこの条件式の結果がfalse（条件式が成り立たない）の場合には、ループ処理（繰り返し処理）は一度も実行されません。

for文：更新式

ここには、ループ処理が１回実行された後に、変数 "count" の値がどのように変化するかを記述します。

// 更新始期　→　count++

for(count=1; count < 10; count++){
    document.write(count);　
}

「count++」という記述は、「count = count + 1」と同じ意味。つまり値を１増やすということ。このように記述しておくと、for文の処理が終わるたびに変数「count」の値が１ずつ増えるようになります。

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

See the Pen for① by ビズドットオンライン (@BizOnline) on CodePen.

変数「count」が１から９の間、変数の値が画面に出力されていることが理解いただけるでしょうか。これが、JavaScriptのfor文です。

JavaScript：for文の使い方/Tips

ここからは、for文の様々な使い方を実用的なサンプルコードと共に解説していきます。

サンプルコード１　カウントダウン

5から1までカウントダウンし、各数字を表示します。カウントダウンは、ループカウンタを減少させることで実現します。

for (let i = 5; i >= 1; i--) {
  console.log(i); // 出力: 5, 4, 3, 2, 1
}

サンプルコード２　配列の要素を順番に処理

配列内の各要素を順に処理し表示します。この使い方は、配列やリストのデータを扱う際に非常に頻繁に用いられます。

const fruits = ["りんご", "バナナ", "チェリー"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // 出力: りんご, バナナ, チェリー
}

サンプルコード３　二重ループを使った多次元配列の処理

多次元配列、例えば行列やテーブルのデータを処理する場合に利用します。この例では、3x3の二次元配列を処理しています。

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

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]); // 1行目: 1, 2, 3、2行目: 4, 5, 6、3行目: 7, 8, 9
  }
}

サンプルコード４　ステップ値を変更してカウントアップ

特定のステップ値でカウントアップすることもできます。この例では、2ずつ増加させながらカウントアップしています。

for (let i = 0; i < 10; i += 2) {
  console.log(i); // 出力: 0, 2, 4, 6, 8
}

for文を利用する際の注意点

for文を使用する際にはいくつかの注意点があります。基本的な利用方法と合わせて以下の注意点を理解しておくことでバグの回避や効率的なコードの記述に役立ちます。

注意点１：無限ループの回避

条件式が常にtrueを返すようなコードを記述してはいけません。無限ループはプログラムをフリーズさせたり、想定外の挙動を引き起こす可能性があります。

例えば以下のコードは条件が常に「true」となるため、永遠に処理が続いてしまう → プログラムがフリーズするまで止まりません。

// 注意: このコードは無限ループを引き起こします
for (let i = 0; i >= 0; i++) {
  console.log(i); // このコードは無限に実行されます
}

注意点2：ループカウンタのスコープ

letキーワードを使ってループカウンタを宣言することで、そのスコープをループ内に限定することが重要です。これにより、ループ外でカウンタが予期せずにアクセスされることを防ぎます。

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}
// i はここでは参照できない

注意点3：ループ内での条件式の変更

ループの条件式に関連する変数は、ループ内で意図的に変更する場合を除き、慎重に扱うべき。予期せず条件を変更すると、ループの挙動が不安定になる可能性があります。

let count = 5;
for (let i = 0; i < count; i++) {
  console.log(i); // 0, 1, 2, 3, 4
  // 某条件下でcountを変更する
  if (i === 2) count = 3; // この変更はループに影響しないが、一般には避けた方が良い
}

注意点4：ループ内での非効率な処理

特に配列の長さなど、ループの条件式で評価される値が毎回変わらない場合は、ループの外で一度計算しておくことで効率を向上させることができます。

// 悪い例
const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) { // array.lengthが毎回評価される
  console.log(array[i]);
}

// 良い例
const array = [1, 2, 3, 4, 5];
const length = array.length; // ここで一度計算
for (let i = 0; i < length; i++) { // 計算済みの値を使用
  console.log(array[i]);
}