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

ここでは「forEach メソッド」をテーマにして、レベル別（初級・中級・上級）で
👉「問題」→「解答」→「解説」
の順にわかりやすくまとめます。

プログラミング初心者でも、ステップアップしながら自然に理解できる構成です。

初級レベル：基本の使い方をマスターしよう

問題1：配列の中身をすべて表示

次の配列を forEach を使って1つずつ出力してください。

let fruits = ['Apple', 'Banana', 'Grape'];

let fruits = ['Apple', 'Banana', 'Grape'];

出力結果：

Apple
Banana
Grape

✅ 解答

let fruits = ['Apple', 'Banana', 'Grape'];

fruits.forEach(function(item){
  console.log(item);
});

let fruits = ['Apple', 'Banana', 'Grape'];

fruits.forEach(function(item){
  console.log(item);
});

💡 解説

• forEach は「配列の中身を1つずつ取り出して関数の中で処理する」メソッド。
• item には、順に 'Apple' → 'Banana' → 'Grape' が入る。
• アロー関数でもOK： fruits.forEach(item => console.log(item));

問題2：インデックス（順番）も表示

次の配列の要素を「〇番目：〇〇」と出力してください。

let animals = ['Dog', 'Cat', 'Bird'];

let animals = ['Dog', 'Cat', 'Bird'];

出力結果：

0番目：Dog
1番目：Cat
2番目：Bird

✅ 解答

let animals = ['Dog', 'Cat', 'Bird'];

animals.forEach(function(animal, index){
  console.log(index + '番目：' + animal);
});

let animals = ['Dog', 'Cat', 'Bird'];

animals.forEach(function(animal, index){
  console.log(index + '番目：' + animal);
});

💡 解説

• forEach の第2引数で「インデックス番号（0から始まる）」を受け取れる。
• index に 0, 1, 2 が順に入る。
• 第3引数に「配列全体」を受け取ることもできる。

中級レベル：データ処理に使ってみよう

問題3：合計を計算しよう

次の数値配列の合計を forEach を使って求めてください。

let numbers = [5, 10, 15, 20];

let numbers = [5, 10, 15, 20];

出力結果：

合計：50

✅ 解答

let numbers = [5, 10, 15, 20];
let total = 0;

numbers.forEach(function(num){
  total += num;
});

console.log('合計：' + total);

let numbers = [5, 10, 15, 20];
let total = 0;

numbers.forEach(function(num){
  total += num;
});

console.log('合計：' + total);

💡 解説

• forEach の中で total に足し算をしていく。
• 初期値（0）を忘れずに！
• 同じことを reduce でもできるが、今は「処理を順に行う」練習。

問題4：条件つき出力

次の配列の中から「5文字以上の文字列」だけを表示してください。

let words = ['apple', 'kiwi', 'banana', 'pear'];

let words = ['apple', 'kiwi', 'banana', 'pear'];

出力結果：

apple
banana

✅ 解答

let words = ['apple', 'kiwi', 'banana', 'pear'];

words.forEach(function(word){
  if (word.length >= 5) {
    console.log(word);
  }
});

let words = ['apple', 'kiwi', 'banana', 'pear'];

words.forEach(function(word){
  if (word.length >= 5) {
    console.log(word);
  }
});

💡 解説

• forEach は中で if 文を使って条件分岐できる。
• ただし「途中で止める（break）」ことはできない。
• すべての要素を順番に確認していく。

上級レベル：理解を深めよう

問題5：空要素をスキップする動作を確認

次の配列を forEach と for でそれぞれ出力して、違いを確かめてください。

let arr = ['A', , 'C', 'D'];

let arr = ['A', , 'C', 'D'];

出力結果（正しい説明）：

forEach: A, C, D
for: A, undefined, C, D

✅ 解答

let arr = ['A', , 'C', 'D'];

console.log('forEach:');
arr.forEach(x => console.log(x));

console.log('for:');
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

let arr = ['A', , 'C', 'D'];

console.log('forEach:');
arr.forEach(x => console.log(x));

console.log('for:');
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

💡 解説

• forEach は「実際に値がある要素」だけ処理。
• for はインデックス順にすべてアクセスするため、空の要素も undefined として出る。
• 配列に「空の場所（hole）」がある場合、forEach の動作は異なることを覚えておこう。

問題6：配列の中のオブジェクトを処理

次の配列から「price」が1000円以上の商品の名前を出力してください。

let items = [
  { name: 'Pen', price: 200 },
  { name: 'Notebook', price: 1200 },
  { name: 'Bag', price: 2500 }
];

let items = [
  { name: 'Pen', price: 200 },
  { name: 'Notebook', price: 1200 },
  { name: 'Bag', price: 2500 }
];

出力結果：

Notebook
Bag

✅ 解答

let items = [
  { name: 'Pen', price: 200 },
  { name: 'Notebook', price: 1200 },
  { name: 'Bag', price: 2500 }
];

items.forEach(function(item){
  if (item.price >= 1000) {
    console.log(item.name);
  }
});

let items = [
  { name: 'Pen', price: 200 },
  { name: 'Notebook', price: 1200 },
  { name: 'Bag', price: 2500 }
];

items.forEach(function(item){
  if (item.price >= 1000) {
    console.log(item.name);
  }
});

💡 解説

• forEach はオブジェクト配列でも同様に使える。
• item.name や item.price のように「.（ドット）」で中身にアクセスする。
• 条件をつけることでフィルタリングもできる。
• ただし新しい配列を作りたい場合は filter() の方が向いている。

上級チャレンジ問題（応用）

配列中の数値をそれぞれ2倍して、結果を「別の配列」に入れて表示してください。
※ ヒント：forEach は値を返さないので、自分で push() を使おう。

let nums = [2, 4, 6];

let nums = [2, 4, 6];

出力結果：

[4, 8, 12]

✅ 解答

let nums = [2, 4, 6];
let doubled = [];

nums.forEach(function(num){
  doubled.push(num * 2);
});

console.log(doubled);

let nums = [2, 4, 6];
let doubled = [];

nums.forEach(function(num){
  doubled.push(num * 2);
});

console.log(doubled);

💡 解説

• forEach は戻り値を返さないため、map() のように自動で新配列を作らない。
• その代わり、自分で空配列 doubled を用意して push() する。
• この動作が理解できると「forEach は副作用的な処理に使う」と実感できる。

まとめ：forEachを使いこなすポイント