JavaScriptでforEachとmapを完全理解！10選の使い方＆応用例

●JavaScriptのforEachとmapの概要
- ○forEachの基本
- ○mapの基本
●forEachとmapの使い方
- ○サンプルコード1：forEachで配列を処理
- ○サンプルコード2：mapで配列を変換
●応用例
●カスタマイズ方法
- ○サンプルコード6：forEachで特定条件の処理
- ○サンプルコード7：mapで連想配列の操作
まとめ

●JavaScriptのforEachとmapの概要

JavaScriptのforEachとmapメソッドは、配列操作において非常に重要な役割を果たします。

本記事では、このメソッドの使い方を詳しく解説します。

初心者の方でも理解しやすいように、具体的な例を交えながら説明していきますので、ぜひ最後までお読みください。

○forEachの基本

forEachメソッドは、配列の各要素に対して指定した関数を実行するJavaScriptの組み込みメソッドです。

配列の要素を順番に処理するため、ループ処理を簡潔に記述できます。

たとえば、配列の各要素を画面に表示したり、特定の条件に合致する要素だけを処理したりする場合に便利です。

○mapの基本

mapメソッドも配列の各要素に対して関数を適用しますが、forEachとは異なり、処理結果を新しい配列として返します。

元の配列を変更せずに、新しい配列を生成するため、データ変換や加工に適しています。

例えば、数値の配列を2倍にしたり、オブジェクトの配列から特定のプロパティだけを抽出したりする際に活用できます。

●forEachとmapの使い方

それでは、具体的な使用例を見ていきましょう。

○サンプルコード1：forEachで配列を処理

forEachメソッドを使用して、配列の各要素を2倍にして表示する例を見てみましょう。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number * 2);
});

このコードでは、numbers配列の各要素に対して、アロー関数を使って2倍の値をコンソールに出力しています。

実行結果は2, 4, 6, 8, 10となります。

○サンプルコード2：mapで配列を変換

次に、mapメソッドを使用して、配列の各要素を2倍にした新しい配列を生成する例を見てみましょう。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => {
  return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

このコードでは、numbers配列の各要素を2倍にした新しい配列doubledNumbersを生成しています。

元の配列numbersは変更されません。

●応用例

forEachとmapメソッドは、単純な配列操作だけでなく、より複雑な処理にも応用できます。

ここでは、実践的な使用例を通じて、柔軟性と有用性を説明します。

○サンプルコード3：forEachでDOM操作

forEachメソッドを使用してDOM操作を行う例を見てみましょう。

const listItems = document.querySelectorAll('li');
listItems.forEach((item) => {
  item.classList.add('highlight');
});

このコードでは、ページ内のすべてのli要素に’highlight’クラスを追加しています。

querySelectorAllで取得した要素のコレクションに対してforEachを使用することで、簡潔にDOM操作を行えます。

○サンプルコード4：mapでオブジェクトの配列変換

mapメソッドを使用してオブジェクトの配列から特定のプロパティだけを抽出する例を見てみましょう。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carol' },
];

const userIds = users.map((user) => {
  return user.id;
});
console.log(userIds); // [1, 2, 3]

このコードでは、usersオブジェクトの配列からidだけを抽出して新しい配列userIdsを生成しています。

mapメソッドを使用することで、簡単にデータの変換ができます。

○サンプルコード5：forEachとmapの組み合わせ

forEachとmapを組み合わせて使用する例を見てみましょう。

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

numbers.forEach((number) => {
  doubledNumbers.push(number * 2);
});

const squaredNumbers = doubledNumbers.map((number) => {
  return number * number;
});
console.log(squaredNumbers); // [4, 16, 36, 64, 100]

このコードでは、まずforEachを使用してnumbers配列の各要素を2倍にし、doubledNumbers配列に格納しています。

次に、mapメソッドを使用してdoubledNumbers配列の各要素を2乗し、新しい配列squaredNumbersを生成しています。

●カスタマイズ方法

forEachとmapメソッドは、基本的な使い方だけでなく、様々な状況に応じてカスタマイズすることができます。

特定の条件下での処理や、複雑なデータ構造の操作など、これらのメソッドの応用範囲は広範です。

ここでは、より高度な使用例を通じて、forEachとmapのカスタマイズ方法を解説します。

○サンプルコード6：forEachで特定条件の処理

forEachメソッドを使用して、特定の条件に合致する要素だけを処理する例を見てみましょう。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  if (number % 2 === 0) {
    console.log(number);
  }
});

このコードでは、numbers配列の偶数の要素だけをコンソールに出力しています。

forEachメソッド内で条件分岐を使用することで、特定の条件に合致する要素だけを処理できます。

○サンプルコード7：mapで連想配列の操作

mapメソッドを使用して、オブジェクトの配列から特定のプロパティだけを抽出する例を見てみましょう。

const users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Carol', age: 28 },
];

const userNames = users.map((user) => {
  return { id: user.id, name: user.name };
});
console.log(userNames);
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' },
//   { id: 3, name: 'Carol' },
// ]

このコードでは、usersオブジェクトの配列からidとnameプロパティだけを抽出して新しい配列userNamesを生成しています。

mapメソッドを使用することで、オブジェクトの構造を変更したり、必要なプロパティだけを抽出したりすることができます。