お問い合わせ
お問い合わせ
ホーム > JavaScript > JavaScriptの配列操作まとめ（map・filter・reduce）｜基本から使い分けまで徹底解説

JavaScriptの配列操作まとめ（map・filter・reduce）｜基本から使い分けまで徹底解説

JavaScript
JavaScriptの配列操作（map・filter・reduce）の流れを抽象的に表現したシンプルなビジュアル
map・filter・reduceによる配列処理の流れと役割の違いをイメージしたアイキャッチ画像

JavaScriptでは、配列を扱う機会が非常に多くあります。その中でも、map・filter・reduceは頻出かつ重要なメソッドです。

これらを正しく理解することで、配列操作を簡潔かつ読みやすく記述できるようになります。本記事では、それぞれの基本から使い分けまでを体系的に解説します。

map・filter・reduceとは？

map・filter・reduceは、いずれも配列をもとに新しい配列や値を生成するためのメソッドです。

  • map：配列の各要素を変換する
  • filter：条件に合う要素を抽出する
  • reduce：配列を1つの値にまとめる

これらは「高階関数」と呼ばれる特徴を持ちます。関数を引数として受け取る仕組みについては、以下の記事で詳しく解説しています。

👉 JavaScriptの高階関数とは？基本から実務での使い方まで徹底解説

map()の基本

map()とは？

map()は、配列の各要素に対して処理を行い、その結果を新しい配列として返します。

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

基本構文

const newArray = array.map(function(element, index, array) {
  return 処理結果;
});

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

// map-basic.js
const numbers = [1, 2, 3, 4, 5];

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

console.log(doubled); // [2, 4, 6, 8, 10]

アロー関数で書く場合

// map-arrow.js
const numbers = [1, 2, 3, 4, 5];

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

console.log(doubled); // [2, 4, 6, 8, 10]

filter()の基本

filter()とは？

filter()は、条件に一致する要素のみを抽出し、新しい配列として返します。

基本構文

const newArray = array.filter(function(element, index, array) {
  return 条件式;
});

使用例：偶数だけ抽出

// filter-basic.js
const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evens); // [2, 4, 6]

アロー関数で書く場合

// filter-arrow.js
const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter((num) => num % 2 === 0);

console.log(evens); // [2, 4, 6]

reduce()の基本

reduce()とは？

reduce()は、配列の要素を順番に処理し、最終的に1つの値にまとめるメソッドです。

基本構文

const result = array.reduce(function(accumulator, currentValue, index, array) {
  return 更新された値;
}, 初期値);

使用例：合計値を求める

// reduce-sum.js
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(total, num) {
  return total + num;
}, 0);

console.log(sum); // 15

アロー関数で書く場合

// reduce-arrow.js
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((total, num) => total + num, 0);

console.log(sum); // 15

map・filter・reduceの違いと使い分け

使い分けの基本

メソッド役割戻り値
map要素を変換新しい配列
filter条件で抽出新しい配列
reduce集約任意の値

判断基準

  • 配列の形を保ったまま変換したい → map
  • 条件に合うものだけ取り出したい → filter
  • 1つの値にまとめたい → reduce

map・filter・reduceの組み合わせ

これらのメソッドは組み合わせて使うことで、より強力になります。

使用例：偶数を2倍して合計する

// combined.js
const numbers = [1, 2, 3, 4, 5, 6];

const result = numbers
  .filter((num) => num % 2 === 0)
  .map((num) => num * 2)
  .reduce((total, num) => total + num, 0);

console.log(result); // 24

処理の流れは以下の通りです。

  1. 偶数のみ抽出（filter）
  2. 各要素を2倍（map）
  3. 合計を算出（reduce）

よくあるミスと注意点

returnを書き忘れる

// NG例
const result = [1, 2, 3].map((num) => {
  num * 2; // returnがない
});

console.log(result); // [undefined, undefined, undefined]
// OK例
const result = [1, 2, 3].map((num) => {
  return num * 2;
});

console.log(result); // [2, 4, 6]

reduceの初期値を省略する

// 注意例
const numbers = [];

const sum = numbers.reduce((total, num) => total + num);
// エラーになる可能性あり

空配列の場合はエラーになるため、初期値を設定するのが安全です。

他の配列メソッドとの違い

配列メソッドには他にも多くの種類があります。例えば以下のようなものがあります。

  • find()：条件に一致する最初の要素を取得
  • includes()：値の存在確認
  • join()：配列を文字列に変換

それぞれの違いについては、以下の記事で詳しく解説しています。

👉 JavaScriptのfind()とは？最初の要素を取得する方法
👉 JavaScriptのincludes()とは？配列・文字列の存在チェックを徹底解説
👉 JavaScriptのjoin()とは？配列を文字列に変換する基本と使い方を徹底解説

まとめ

map・filter・reduceは、JavaScriptの配列操作における基本かつ重要なメソッドです。

  • map：配列の各要素を変換する
  • filter：条件に合う要素だけを抽出する
  • reduce：配列を1つの値にまとめる

それぞれの役割を理解し、適切に使い分けることで、コードの可読性と保守性が向上します。

関連記事