配列操作メソッドまとめ：map, filter, reduce の実践活用例

map：配列の各要素を変換する

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

基本構文

const newArray = array.map((item, index, array) => {
  // item を変換して return
});

使用例：数値を2倍にする

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

使用例：オブジェクトのプロパティを抽出

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

filter：条件に合う要素を抽出する

filterは、配列の中から条件を満たす要素だけを取り出して新しい配列を作ります。

基本構文

const filteredArray = array.filter((item, index, array) => {
  return 条件式;
});

使用例：偶数だけを抽出

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

使用例：特定の条件のオブジェクトを抽出

const users = [
  { name: 'Alice', active: true },
  { name: 'Bob', active: false }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers); // [{ name: 'Alice', active: true }]

reduce：配列を1つの値に集約する

reduceは、配列の各要素を処理して、最終的に1つの値にまとめるときに使います。合計や平均、オブジェクトの生成などに活用されます。

基本構文

const result = array.reduce((accumulator, currentValue, index, array) => {
  return 新しいaccumulator;
}, 初期値);

使用例：合計を計算する

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10

使用例：配列をオブジェクトに変換

const entries = [
  ['name', 'Alice'],
  ['age', 25]
];
const obj = entries.reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});
console.log(obj); // { name: 'Alice', age: 25 }

まとめ：配列操作をマスターしよう

map, filter, reduceは、それぞれ役割が異なりますが、組み合わせて使うことで非常に強力な処理が可能です。処理内容が明確になるため、可読性や保守性の高いコードを書くことができます。配列操作をより直感的に、かつ効率的に行うために、これらのメソッドをぜひ積極的に活用してみましょう。