JavaScript | 配列の要素を順番に取り出す方法（forEachメソッド）

主な内容の要点

1. forEachメソッドとは？

• 配列に入っている要素を 先頭から順番に取り出して処理 できる。
• 書き方：

配列.forEach(function(要素, インデックス, 配列全体) {
  // ここに処理を書く
});

配列.forEach(function(要素, インデックス, 配列全体) {
  // ここに処理を書く
});

• 引数は最大3つ受け取れる：
  • 要素 → 今処理している値
  • インデックス → その位置（0から始まる番号）
  • 配列全体 → 元の配列そのもの
    ※必要なければ省略してOK。

2. 基本的な使い方

let fruits = ['Apple', 'Melon', 'Orange'];

fruits.forEach(function(element) {
  console.log(element);
});
// 出力: Apple, Melon, Orange

let fruits = ['Apple', 'Melon', 'Orange'];

fruits.forEach(function(element) {
  console.log(element);
});
// 出力: Apple, Melon, Orange

• アロー関数でも書ける： fruits.forEach(element => console.log(element));

3. インデックスや配列も使いたい場合

fruits.forEach(function(element, index, array) {
  console.log('Index:', index);
  console.log('Element:', element);
  console.log('Array:', array);
});

fruits.forEach(function(element, index, array) {
  console.log('Index:', index);
  console.log('Element:', element);
  console.log('Array:', array);
});

4. forEach と for文・for…of文の違い

• forEach
  • 配列の「存在する要素」だけを処理する（空要素はスキップされる）。
  • break が使えない → 途中で止められない。
• for文 / for…of文
  • 空要素も処理対象になる（undefinedが出る）。
  • break が使える → 条件で途中終了できる。

5. 使い分けのポイント

• forEach → 配列の全要素を順番に処理したいときに便利。
• for文 / for…of文 → 途中で処理を止めたいときや、空要素も扱いたいときに便利。

まとめ

• 配列を順番に処理するなら forEach がシンプルで書きやすい。
• ただし「途中で止めたい」場合は for や for...of を使う。

初心者向けに練習するなら、まずは forEach で配列を全部出力するところから始めるのがおすすめです。