リストやデータを一気に処理する「魔法の呪文」

前回の記事で、オブジェクトと配列を使って複雑なデータを整理する方法を学びましたね。Webサイトでは、ニュース記事のリスト、商品のカタログ、ユーザーコメントなど、大量のデータ（配列）を扱うことが日常茶飯事です。

もし、そのデータ一つひとつに対して同じ処理（例：画面に表示する、税込み価格を計算する）をしようとしたら、コードを何百行も書かなければならず、非常に非効率です。

そこで登場するのが、**繰り返し処理（ループ）**です。ループは、「同じ処理を、データの数だけ自動で繰り返す」ための強力な機能です。今回は、配列のデータを画面に表示したり、一つずつ処理したりするために必須の、代表的なループ処理を学びましょう。

1. 最も基本的な繰り返し処理：for文
1. for文の構造と例
2. 配列の要素をすべて処理する
2. 配列専用の便利なループ：forEach
1. forEachの構造と例
2. for文との使い分け
まとめ：繰り返し処理は効率化の鍵

1. 最も基本的な繰り返し処理：for文

for文は、プログラミングにおいて最も一般的で、制御しやすい繰り返し処理の方法です。主に、「決まった回数だけ処理を繰り返したいとき」に使います。

for文は、以下の3つの要素で構成されます。

初期化: ループの開始点となる変数（カウンター）を定義します。（例：let i = 0;）
条件式: ループを続けるための条件です。この条件がtrueの間、ループが繰り返されます。（例：i < 5;）
増減式: ループが一回終わるごとにカウンターをどう変化させるかを指定します。（例：i++）

for文の構造と例

JavaScript

for (let i = 0; i < 5; i++) {
  // iが0から始まり、4になるまで繰り返される
  console.log(i);
}
// 結果: 0, 1, 2, 3, 4

配列の要素をすべて処理する

for文は、配列の要素を最初から最後まで順に処理するのに最適です。配列の要素数は.lengthプロパティで取得できるため、これを条件式に使います。

JavaScript

const fruits = ["りんご", "バナナ", "みかん"];

for (let i = 0; i < fruits.length; i++) {
  // iは 0, 1, 2 と変化する
  console.log("好きな果物は " + fruits[i] + " です。");
}
// 結果: 好きな果物は りんご です。, 好きな果物は バナナ です。, ...

2. 配列専用の便利なループ：forEach

最近のJavaScriptでは、配列専用の繰り返し処理である**forEachメソッド**がよく使われます。これはfor文よりもシンプルに、配列の全要素を処理できます。

forEachは、配列の各要素に対して実行したい処理を**関数（コールバック関数）**として渡します。

forEachの構造と例

JavaScript

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

// itemは配列の各要素を順番に受け取る引数
items.forEach(function(item) {
  console.log("アイテム: " + item);
});
// アロー関数を使うとさらに簡潔に書ける
items.forEach(item => console.log("アイテム: " + item));

for文との使い分け

特徴	`for`文	`forEach`メソッド
用途	決まった回数、または配列の要素をインデックスで細かく制御したいとき。	配列の全要素に対して処理を行いたいとき。最もシンプル。
構文	複雑（初期化、条件、増減が必要）	シンプル（関数を渡すだけ）
停止	`break`キーワードで途中で停止できる。	途中で停止できない。