Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

三つの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 を使えば、どんなに項目が多くても漏れなくすべて処理できるため、柔軟じゅうなんなプログラムが作れます。

戻る