三つのfor
I. 古典的なfor
for (let i = 0; i < 3; i++) {
console.log(i + "番目:こんにちは!");
}
II. 配列の応用とforEach
大量のデータを効率よく処理するために、JavaScriptには forEach(フォーイーチ)という便利な道具があります。
1. forEachとコールバック関数
以前、関数は「自動販売機」のようなものだと学びましたね。ボタンを押すと、中に入れた処理が実行されて結果が出てきます。
forEach を使うときは、この関数をさらに便利に使います。
- 例え話: forEach は「店員さん」、渡す関数は「店員さんに渡すチェックメモ(コールバック関数)」です。 店員さんは、配列の中身(リンゴなど)をひとつ取るたびに、あなたが渡したメモを読んで「傷がないか確認する」などの作業を行ってくれます。
2. サンプルプログラム: 合計を計算する
このプログラムは、リストの中にある数字を全部足して、最後に答えを出します。
// 1. 数字の「配列(はいれつ)」を作ります。
const numbers = [10, 20, 30, 40];
// 2. 合計を入れる「空(から)の箱」を作ります。最初は 0 です。
let total = 0;
// 3. forEach (上の例(たと)えでは「店員さん」)は、配列(はいれつ)の中身をひとつずつ取って、メモ通りに処理します。
numbers.forEach((num) => {
// ここがコールバック関数(かんすう)です! 店員さんに「この仕事をしてください」と渡すメモです!
total = total + num;
console.log(num + " を足しました。今は " + total + " です。");
});
// 4. 最後に答えを表示(ひょうじ)します
console.log("ぜんぶの合計は " + total + " です!");
3. プログラムの動きを解説
① let total = 0;
これは、計算の結果を入れておくための**「貯金箱」**のようなものです。最初は何も入っていないので 0 にしておきます。
② コールバック関数の仕事
numbers.forEach((num) => { ... }); の中(なか)が、お願いしたメモ(コールバック関数)です。
forEachがリストから10を見つける。- コールバック関数に
10を渡す。 - 関数が 「今の合計(0)に 10 を足してね!」 と実行する。
- 次の
20でも同じことをする。
これを繰り返すことで、貯金箱の中身がどんどん増えていきます。
So What?(なぜ大切なの?)
| 従来の for 文 | forEach メソッド |
|---|---|
| 繰り返しの回数を自分で管理する | 配列が自動的に回数を決めてくれる |
| コードが長くなりやすい | 短く、読みやすくなる |
コードが読みやすくなると、開発のスピードが上がり、ミスも減ります。
III. 繰り返し処理の応用:for-in文
※ オブジェクトの性質を利用した応用的な繰り返し処理です。
配列ではなく「オブジェクト」の中身(プロパティ)をすべて確認したいときは、for-in 文を使います。
| ループの種類 | 対象 | 使いどころ |
|---|---|---|
| for文 | 数値の回数、配列 | 決まった回数繰り返したいとき |
| while文 | 条件 | 条件が満たされるまで続けたいとき |
| for-in文 | オブジェクトのプロパティ | オブジェクトの「キー」を全部調べたいとき |
So What?(なぜ大切なの?) オブジェクトの中にどんなデータがいくつ入っているか、事前にはわからない場合があります。for-in を使えば、どんなに項目が多くても漏れなくすべて処理できるため、柔軟なプログラムが作れます。