JavaScriptの配列メソッドforEachとmapの使い方完全ガイド！初心者でもわかるコールバック関数入門

1. 配列メソッドforEachの基本

1. 配列メソッドforEachの基本

JavaScriptのforEachメソッドは、配列の全ての要素に対して順番に処理を実行するメソッドです。返り値はなく、単純に処理を繰り返したい場合に便利です。

const fruits = ["りんご", "バナナ", "オレンジ"];

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

りんご
バナナ
オレンジ

上の例では、配列fruitsの要素を1つずつfruitに代入して、consoleに出力しています。

2. forEachでインデックスも使う

2. forEachでインデックスも使う

forEachでは、要素だけでなくインデックス（配列の番号）も取得できます。

const fruits = ["りんご", "バナナ", "オレンジ"];

fruits.forEach(function(fruit, index) {
  console.log(index + "番目は" + fruit + "です");
});

0番目はりんごです
1番目はバナナです
2番目はオレンジです

これにより、配列の位置情報も一緒に扱うことができます。

3. 配列メソッドmapの基本

3. 配列メソッドmapの基本

JavaScriptのmapメソッドは、配列の各要素に対して処理を行い、新しい配列を作成するメソッドです。元の配列は変更されません。

const numbers = [1, 2, 3];

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);

[2, 4, 6]

この例では、元の配列numbersの各要素を2倍して、新しい配列doubledを作っています。

4. mapで文字列を変換する

4. mapで文字列を変換する

mapは数値だけでなく文字列やオブジェクトの変換にも使えます。

const names = ["太郎", "花子", "次郎"];

const greetings = names.map(function(name) {
  return "こんにちは、" + name + "さん";
});

console.log(greetings);

["こんにちは、太郎さん", "こんにちは、花子さん", "こんにちは、次郎さん"]

各要素を文字列として加工して、新しい配列を作成しています。

5. forEachとmapの違い

5. forEachとmapの違い

簡単にまとめると：

• forEach：配列の要素を順番に処理するだけ。返り値はundefined
• map：配列の要素を変換して新しい配列を作る。返り値は変換後の配列

処理の内容によって使い分けることが大切です。

6. コールバック関数をアロー関数で書く

6. コールバック関数をアロー関数で書く

コールバック関数はアロー関数を使うとさらに簡単に書けます。

const numbers = [1, 2, 3];

numbers.forEach(num => console.log(num));

const doubled = numbers.map(num => num * 2);
console.log(doubled);

1
2
3
[2, 4, 6]

アロー関数はfunctionキーワードを省略でき、コードがスッキリします。

7. コールバック関数を使うと何が便利？

7. コールバック関数を使うと何が便利？

配列メソッドにコールバック関数を渡すと、同じ処理を繰り返し書く必要がなくなります。例えば、配列の全ての要素を2倍にしたい場合、for文で書くと長くなりますが、mapなら1行で処理できます。

const numbers = [1, 2, 3, 4, 5];

const squared = numbers.map(num => num * num);
console.log(squared);

[1, 4, 9, 16, 25]

このように処理を簡潔に書けるのがコールバック関数の大きな利点です。

8. 実用例：配列のオブジェクトを変換する

8. 実用例：配列のオブジェクトを変換する

実際には、オブジェクトの配列を変換する場合にもmapが便利です。

const users = [
  {name: "太郎", age: 20},
  {name: "花子", age: 22},
  {name: "次郎", age: 18}
];

const names = users.map(user => user.name);
console.log(names);

["太郎", "花子", "次郎"]

オブジェクトの配列から特定のプロパティだけを抽出する場合にも、mapが非常に便利です。

まとめ

まとめ

ここまでで、JavaScriptの配列メソッドforEachとmapについて詳しく学びました。forEachは配列の各要素に対して順番に処理を行うメソッドで、返り値はなく単純に処理を繰り返す場合に最適です。一方、mapは各要素を変換して新しい配列を作成できるため、データの加工や抽出に非常に便利です。例えば、数値を2倍にしたり、文字列を加工したり、オブジェクト配列から特定のプロパティだけを抽出する場合など、実務でも頻繁に使用されます。

また、コールバック関数を利用することで、処理を関数化し繰り返し使うことが可能になり、コードの可読性や保守性が向上します。さらに、アロー関数を使えばコードが短くなり、より直感的に処理の流れを理解できます。配列のインデックスを取得したい場合もforEachで簡単に扱え、配列の位置情報と要素の両方を効率的に処理することができます。

配列メソッドは単純な処理だけでなく、オブジェクトや文字列の変換、条件による抽出、複雑な計算など幅広く応用可能です。for文で書くよりもシンプルに、そして可読性を保ちながら実装できるため、初心者から上級者まで使いこなす価値があります。今回の学習を通して、配列の処理に対する理解が深まり、JavaScriptでのコーディング効率を大幅に向上させることができます。

ここでまとめたポイントを簡単に整理すると次の通りです：

• forEachは返り値を必要とせず、配列の要素を順に処理する場合に使用
• mapは配列を変換して新しい配列を生成するため、加工や抽出に最適
• コールバック関数を活用することで、処理を関数として再利用可能
• アロー関数を使えばコードを短く、シンプルに書ける
• インデックス情報も扱えるため、配列の順序や位置に依存した処理が簡単
• オブジェクト配列から特定のプロパティだけを抽出するなど、実務での応用範囲が広い

これらを組み合わせることで、配列操作の幅が広がり、より柔軟で効率的なコードが書けるようになります。特に実務では、データの加工や集計、条件に応じた抽出など、多様な場面でforEachやmapは不可欠なスキルです。

const users = [
  {name: "太郎", age: 20},
  {name: "花子", age: 22},
  {name: "次郎", age: 18}
];

const names = users.map(user => user.name);
console.log(names);

["太郎", "花子", "次郎"]