【JavaScript入門】繰り返し処理：for文

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

繰り返し処理：for文

　JavaScript には、同じ処理を何度も実行する「繰り返し処理」がいくつか用意されています。その中でも最もよく使うのが for 文 です。for 文は初期化・条件式・変化式を指定し、条件を満たす限り何度もブロック {} の中の処理を繰り返す仕組みです。ここでは、配列の要素を順番に処理する典型的な使い方を始めとして、for in・for of 文の概要についても紹介します。

１．for 文

1.1．構文の基本

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

初期化式：ループが始まる前に1回だけ実行される
条件式：毎回ループのはじめに評価し、true ならループ続行、false なら終了
変化式：ループブロックが終わるたびに実行し、次のループへ向けてインクリメントや調整を行う

1.2．配列の要素を順番に処理する

　よく使うパターンとして、i というインデックスを 0 から開始して、配列の長さ arr.length まで回す方法があります。

２．for in 文

2.1．for in の用途

　for in は、オブジェクトの列挙可能なプロパティ名を繰り返し取得します。名前の通り、配列よりも オブジェクト のキー（プロパティ名）を列挙するときに使われる文法です。

2.2．構文

for (変数 in オブジェクト) {
  // プロパティ名が変数に代入される
}

　配列にも for in を使うことは可能ですが、要素順が保証されないなど、意図しない挙動があるため主にオブジェクトで使われます。

３．for of 文

3.1．for of の用途

　for of は ES6 で導入された構文で、配列や文字列など「反復可能（イテラブル）なオブジェクト」の各要素を順番に取得できます。配列の要素を簡単に取り出す場合に便利です。

3.2．構文

for (変数 of 反復可能オブジェクト) {
  // 変数に要素の値が1つずつ割り当てられる
}

配列、文字列、Map、Set、arguments などが対象となります。

４．サンプルHTMLファイル

　以下のコードを「myForStatementsExample.html」というファイル名で保存し、ブラウザで開き、コンソール出力を確認してください。

【myForStatementsExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myForStatementsExample.html</title>
</head>
<body>
  <h1>繰り返し処理: for文 のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)で出力をチェックしてみてください。</p>

  <script>
    // 1) for文の基本例
    console.log('=== 通常の for 文 ===');
    for (let i = 0; i < 4; i++) {
      console.log('iの値:', i);
    }

    // 2) 配列を使った繰り返し
    console.log('=== 配列と for 文 ===');
    const drinks = ['コーヒー', '紅茶', 'ジュース'];
    for (let i = 0; i < drinks.length; i++) {
      console.log(`index=${i} 要素=${drinks[i]}`);
    }

    // 3) for in 文 (オブジェクトのプロパティ列挙)
    console.log('=== for in (オブジェクト) ===');
    const menu = { name: 'ホットケーキ', price: 700, discount: true };
    for (let propName in menu) {
      console.log(propName, ':', menu[propName]);
    }

    // 4) for of 文 (イテラブルの要素取得)
    console.log('=== for of (配列) ===');
    const sweets = ['ショートケーキ', 'チョコパイ', 'シュークリーム'];
    for (const item of sweets) {
      console.log('スイーツ:', item);
    }
  </script>
</body>
</html>

デバックコンソールの出力

=== 通常の for 文 ===
iの値: 0
iの値: 1
iの値: 2
iの値: 3
=== 配列と for 文 ===
index=0 要素=コーヒー
index=1 要素=紅茶
index=2 要素=ジュース
=== for in (オブジェクト) ===
name : ホットケーキ
price : 700
discount : true
=== for of (配列) ===
スイーツ: ショートケーキ
スイーツ: チョコパイ
スイーツ: シュークリーム

まとめ

for(初期化; 条件; 変化) は、一定回数や配列の長さを利用した繰り返し処理の代表的な構文。
for in 文 は、オブジェクトのプロパティ名を列挙する。配列の要素を扱う目的では通常使わない。
for of 文 は、配列・文字列などの「反復可能なオブジェクト」の各要素を簡単に取り出す場合に最適。
それぞれ得意な場面が異なるので、最も見やすく意図を表現しやすい方法を選ぶと良い。

　これらの繰り返し処理を活用することで、大量のデータやコレクションを効率的に扱えるようになります。