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

【JavaScript入門】反復メソッド

反復メソッド

　JavaScript には、配列の各要素に対して「同じ処理」を繰り返し行うためのメソッドがいくつか用意されています。特にコールバック関数を受け取り、配列の要素数分だけ順番に関数を呼び出す仕組みを使うと、ループ構文を書く必要がなくなるため、コードを簡潔にまとめられます。本稿では、代表的な .forEach(), .map(), .filter() の使い方を、具体例を通して解説します。

１．配列の全ての要素をコールバック関数で処理するメソッド

メソッド説明
.forEach(f)配列の全要素を繰り返し、各要素に対してコールバック関数 f を呼び出す。戻り値は なし。
.map(f)配列の全要素に対してコールバック関数 f を呼び出し、処理結果を格納した新しい配列を返す。元の配列は変更しない。
.filter(f)配列の全要素に対してコールバック関数 f を呼び出し、結果が true（真）と見なせる要素だけで構成された新たな配列を返す。元の配列は変更しない。

２．サンプルコード（HTML + JavaScript）

　以下の例を「myArrayIterationMethods.html」というファイル名で保存し、ブラウザで開発者ツールのコンソールをチェックしてください。

【myArrayIterationMethods.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myArrayIterationMethods.html</title>
</head>
<body>
  <h1>反復メソッドの例: forEach, map, filter</h1>
  <p>ブラウザの開発者ツール(コンソール)を開いて出力を確認してください。</p>

  <script>
    // 1) .forEach() の例
    console.log('=== forEach() の例 ===');
    {
      const arr = [1, 2, , , , , , 3];  // 途中に空要素がある
      let count = 0;

      arr.forEach((value, index) => {
        console.log(`要素${index}の値は[${value}]`);
        count++;
      });

      console.log(`配列の長さは${arr.length}, 実行回数は${count}`);
    }

    // 2) .map() の例
    console.log('=== map() の例 ===');
    {
      const arr = [1, 2, 3, 4];
      // map で変換して新しい配列を作る
      const arr2 = arr.map(x => `${x}番目`);
      console.log('元の配列:', arr);
      console.log('変換後の配列:', arr2);
    }

    // 3) .filter() の例
    console.log('=== filter() の例 ===');
    {
      const arr = [0, 1, 2, 3, 4, 5];
      // 偶数だけ取り出す
      const evenNumbers = arr.filter(x => x % 2 === 0);
      console.log('元の配列:', arr);
      console.log('偶数のみ:', evenNumbers);
    }

    // 4) 組み合わせて利用する例
    console.log('=== map + filter + forEach の例 ===');
    {
      [11, 22, 33, 44, 55, 66]
        .map((value, i) => ({ index: i, num: value })) // 位置と値のオブジェクトを作成
        .filter(item => item.num % 2 === 0)            // 偶数だけ選別
        .forEach(item => console.log(`${item.index}番目にある偶数:`, item.num));
    }
  </script>
</body>
</html>

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

=== forEach() の例 ===
要素0の値は[1]
要素1の値は[2]
要素7の値は[3]
配列の長さは8, 実行回数は3
=== map() の例 ===
元の配列: (4) [1, 2, 3, 4]
変換後の配列: (4) ['1番目', '2番目', '3番目', '4番目']
=== filter() の例 ===
元の配列: (6) [0, 1, 2, 3, 4, 5]
偶数のみ: (3) [0, 2, 4]
=== map + filter + forEach の例 ===
1番目にある偶数: 22
3番目にある偶数: 44
5番目にある偶数: 66

３．メソッドごとのポイント

  • .forEach()
    配列を単に一周して何らかの副作用（コンソール出力や要素の集計など）を行うのに適しています。戻り値はなく、ループを抜けるための break や continue も使えません。
  • .map()
    各要素に対して何らかの変換を行い、その変換結果を 新たな配列 として受け取りたい場合に使います。元の配列は変化しません。
  • .filter()
    各要素が「条件を満たすかどうか」を判定し、満たした要素のみで構成される配列を返します。こちらも元の配列はそのままです。

まとめ

  • 反復メソッドは 「コールバック関数」 を引数に取り、配列のすべての要素に対して順番にその関数を呼び出す。
  • .forEach() は結果を返さず副作用目的、.map() は変換後の要素を集めた新配列を生成、.filter() は条件を通った要素だけを抽出する。
  • それぞれを組み合わせることで、ループを書く必要なく直感的かつ簡潔に配列の要素を操作できる。

　これらのメソッドを駆使すると、煩雑な for 文によるループを減らし、より宣言的に配列処理を表現できます。