JavaScript配列メソッド完全ガイド - map, filter, reduceを使いこなす

配列メソッドの重要性

JavaScriptで配列を操作する際、従来のfor文を使う代わりに配列メソッドを使うことで、より簡潔で読みやすいコードを書くことができます。特にmap、filter、reduceは、モダンなJavaScript開発では必須の知識です。

これらのメソッドを使う主なメリットは以下の通りです：

• 可読性の向上 - 処理の意図が明確になる
• 非破壊的な操作 - 元の配列を変更せず、新しい配列を返す
• 関数型プログラミング - 宣言的なコードスタイルが可能
• メソッドチェーン - 複数の処理を連結して書ける

mapメソッド

map()は、配列の各要素に対して関数を適用し、その結果から新しい配列を作成します。要素の数は変わりません。

基本構文

const newArray = array.map(function(element, index, array) {
  return // 変換後の値
});

例1: 数値を2倍にする

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] (元の配列は変更されない)

例2: オブジェクト配列から特定のプロパティを抽出

const users = [
  { id: 1, name: '田中', age: 25 },
  { id: 2, name: '佐藤', age: 30 },
  { id: 3, name: '鈴木', age: 28 }
];

// 名前だけを抽出
const names = users.map(user => user.name);
console.log(names); // ['田中', '佐藤', '鈴木']

// オブジェクトを変換
const userCards = users.map(user => ({
  displayName: `${user.name}さん (${user.age}歳)`,
  isAdult: user.age >= 20
}));

filterメソッド

filter()は、条件に合う要素だけを抽出して新しい配列を作成します。コールバック関数がtrueを返した要素だけが新しい配列に含まれます。

基本構文

const filteredArray = array.filter(function(element) {
  return // true または false
});

例1: 偶数だけを抽出

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(num => num % 2 === 0);

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

例2: 条件に合うオブジェクトを抽出

const products = [
  { name: 'りんご', price: 150, inStock: true },
  { name: 'バナナ', price: 100, inStock: false },
  { name: 'オレンジ', price: 200, inStock: true },
  { name: 'ぶどう', price: 300, inStock: true }
];

// 在庫があり、200円以下の商品
const affordable = products.filter(product =>
  product.inStock && product.price <= 200
);

console.log(affordable);
// [{ name: 'りんご', price: 150, inStock: true }, { name: 'オレンジ', price: 200, inStock: true }]

例3: 検索機能の実装

const articles = [
  { title: 'JavaScriptの基礎', tags: ['JavaScript', '入門'] },
  { title: 'React入門', tags: ['React', 'JavaScript'] },
  { title: 'Python入門', tags: ['Python', '入門'] }
];

function searchByTag(tag) {
  return articles.filter(article =>
    article.tags.includes(tag)
  );
}

console.log(searchByTag('JavaScript'));
// JavaScriptタグを持つ記事が2件返される

reduceメソッド

reduce()は、配列の要素を1つの値に集約します。合計値の計算、オブジェクトへの変換など、様々な用途に使える強力なメソッドです。

基本構文

const result = array.reduce(function(accumulator, currentValue) {
  return // 次のaccumulatorになる値
}, initialValue);

例1: 配列の合計を計算

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

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

console.log(sum); // 15

処理の流れを見てみましょう：

// 初期値: 0
// 1回目: acc=0, num=1 → 0+1=1
// 2回目: acc=1, num=2 → 1+2=3
// 3回目: acc=3, num=3 → 3+3=6
// 4回目: acc=6, num=4 → 6+4=10
// 5回目: acc=10, num=5 → 10+5=15
// 結果: 15

例2: 配列をオブジェクトに変換

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

const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

console.log(count);
// { りんご: 3, バナナ: 2, オレンジ: 1 }

例3: ショッピングカートの合計金額

const cart = [
  { name: '商品A', price: 1000, quantity: 2 },
  { name: '商品B', price: 500, quantity: 3 },
  { name: '商品C', price: 800, quantity: 1 }
];

const total = cart.reduce((acc, item) => {
  return acc + (item.price * item.quantity);
}, 0);

console.log(total); // 4300

メソッドチェーン

これらのメソッドは新しい配列を返すため、連続して呼び出すことができます（メソッドチェーン）。

例: 成人ユーザーの名前を取得

const users = [
  { name: '田中', age: 17 },
  { name: '佐藤', age: 25 },
  { name: '鈴木', age: 19 },
  { name: '高橋', age: 32 }
];

const adultNames = users
  .filter(user => user.age >= 20)  // 成人のみ抽出
  .map(user => user.name);        // 名前だけ抽出

console.log(adultNames); // ['佐藤', '高橋']

例: 売上データの集計

const sales = [
  { product: 'A', amount: 1000, category: '食品' },
  { product: 'B', amount: 2000, category: '電化製品' },
  { product: 'C', amount: 500, category: '食品' },
  { product: 'D', amount: 3000, category: '電化製品' }
];

// 食品カテゴリの合計売上
const foodTotal = sales
  .filter(sale => sale.category === '食品')
  .reduce((sum, sale) => sum + sale.amount, 0);

console.log(foodTotal); // 1500

実践的な使用例

APIレスポンスの加工

実際の開発では、APIから取得したデータを加工して表示することがよくあります。

// APIから取得したユーザーデータ
const apiResponse = {
  users: [
    { id: 1, firstName: '太郎', lastName: '山田', status: 'active' },
    { id: 2, firstName: '花子', lastName: '田中', status: 'inactive' },
    { id: 3, firstName: '次郎', lastName: '佐藤', status: 'active' }
  ]
};

// アクティブユーザーのフルネームリストを作成
const activeUserNames = apiResponse.users
  .filter(user => user.status === 'active')
  .map(user => `${user.lastName} ${user.firstName}`);

console.log(activeUserNames);
// ['山田 太郎', '佐藤 次郎']

その他の便利な配列メソッド

まとめ

map、filter、reduceを使いこなすことで、JavaScriptのコードは格段に読みやすく、保守しやすくなります。最初は少し難しく感じるかもしれませんが、実際に使っていくうちに自然と身についていきます。