1. map()メソッド - 配列の変換

map()メソッドは、配列の各要素に対して関数を実行し、その結果を新しい配列として返します。元の配列は変更されません（イミュータブル）。

// 基本的な使い方
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// オブジェクトの配列を変換
const users = [
  { id: 1, name: '田中', age: 25 },
  { id: 2, name: '佐藤', age: 30 },
  { id: 3, name: '鈴木', age: 28 }
];

const userNames = users.map(user => user.name);
console.log(userNames); // ['田中', '佐藤', '鈴木']

使用場面： データの変換、フォーマット変更、APIレスポンスの整形など。

参考リンク： MDN Web Docs - Array.prototype.map()

2. filter()メソッド - 条件に合う要素の抽出

filter()メソッドは、指定した条件に合う要素だけを抽出して新しい配列を返します。

// 偶数のみを抽出
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

// オブジェクトの配列から条件に合うものを抽出
const products = [
  { name: 'ノートPC', price: 80000, inStock: true },
  { name: 'マウス', price: 2000, inStock: false },
  { name: 'キーボード', price: 5000, inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// [{ name: 'ノートPC', price: 80000, inStock: true }, ...]

使用場面： データのフィルタリング、検索機能、条件に合う要素の抽出など。

参考リンク： MDN Web Docs - Array.prototype.filter()

3. forEach()メソッド - 各要素に対する処理

forEach()メソッドは、配列の各要素に対して関数を実行しますが、新しい配列は返しません。副作用を伴う処理に適しています。

// 各要素をログ出力
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach((fruit, index) => {
  console.log(`${index + 1}. ${fruit}`);
});
// 1. apple
// 2. banana
// 3. orange

// DOM要素の操作
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
  button.addEventListener('click', () => {
    console.log('ボタンがクリックされました');
  });
});

注意点： forEach()はbreakやcontinueが使えません。途中で処理を中断したい場合はfor...ofループを使用しましょう。

参考リンク： MDN Web Docs - Array.prototype.forEach()

4. find()とfindIndex()メソッド - 要素の検索

find()メソッドは、条件に合う最初の要素を返します。見つからない場合はundefinedを返します。

// 特定のIDを持つユーザーを検索
const users = [
  { id: 1, name: '田中', role: 'admin' },
  { id: 2, name: '佐藤', role: 'user' },
  { id: 3, name: '鈴木', role: 'user' }
];

const admin = users.find(user => user.role === 'admin');
console.log(admin); // { id: 1, name: '田中', role: 'admin' }

// findIndex()はインデックスを返す
const adminIndex = users.findIndex(user => user.role === 'admin');
console.log(adminIndex); // 0

使用場面： ユーザー検索、設定値の取得、条件に合う最初の要素の取得など。

参考リンク： MDN Web Docs - Array.prototype.find()

5. reduce()メソッド - 配列の集約

reduce()メソッドは、配列を一つの値に集約します。最も柔軟性の高いメソッドの一つです。

// 配列の合計を計算
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 15

// オブジェクトの配列から特定の値を集計
const orders = [
  { product: 'ノートPC', price: 80000, quantity: 1 },
  { product: 'マウス', price: 2000, quantity: 2 },
  { product: 'キーボード', price: 5000, quantity: 1 }
];

const totalAmount = orders.reduce((total, order) => {
  return total + (order.price * order.quantity);
}, 0);
console.log(totalAmount); // 92000

// 配列をオブジェクトに変換
const items = ['apple', 'banana', 'orange'];
const itemCount = items.reduce((acc, item) => {
  acc[item] = (acc[item] || 0) + 1;
  return acc;
}, {});
console.log(itemCount); // { apple: 1, banana: 1, orange: 1 }

使用場面： 合計値の計算、データの集約、配列の変換など。

参考リンク： MDN Web Docs - Array.prototype.reduce()

6. some()とevery()メソッド - 条件チェック

some()は「少なくとも一つ」、every()は「すべて」の要素が条件を満たすかをチェックします。

// some() - 少なくとも一つが条件を満たすか
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(n => n % 2 === 0);
console.log(hasEven); // true

// every() - すべてが条件を満たすか
const allPositive = numbers.every(n => n > 0);
console.log(allPositive); // true

// 実践例：フォームバリデーション
const formData = {
  email: 'user@example.com',
  password: 'password123',
  age: 25
};

const isValid = Object.values(formData).every(value => value !== '');
console.log(isValid); // true

7. メソッドのチェーン - 複数の処理を組み合わせる

配列メソッドはチェーンして使用できるため、複雑なデータ処理を簡潔に記述できます。

// 実践例：商品データの処理
const products = [
  { name: 'ノートPC', price: 80000, category: 'electronics', rating: 4.5 },
  { name: 'マウス', price: 2000, category: 'electronics', rating: 4.0 },
  { name: 'デスク', price: 15000, category: 'furniture', rating: 4.8 },
  { name: 'チェア', price: 12000, category: 'furniture', rating: 4.2 }
];

// 電子機器カテゴリーで、評価4.0以上の商品の名前を取得
const highRatedElectronics = products
  .filter(product => product.category === 'electronics')
  .filter(product => product.rating >= 4.0)
  .map(product => product.name);

console.log(highRatedElectronics);
// ['ノートPC', 'マウス']

// 価格の合計を計算
const totalPrice = products
  .map(product => product.price)
  .reduce((sum, price) => sum + price, 0);

console.log(totalPrice); // 109000

8. パフォーマンスの考慮

大量のデータを処理する際は、パフォーマンスに注意が必要です。

- 大きな配列の場合： forループの方が高速な場合があります
- メモリ使用量： メソッドチェーンは中間配列を作成するため、メモリを消費します
- 可読性とのバランス： パフォーマンスが重要な箇所では、可読性とパフォーマンスのバランスを考慮しましょう

// パフォーマンスが重要な場合の例
const largeArray = Array.from({ length: 1000000 }, (_, i) => i);

// メソッドチェーン（読みやすいが、中間配列を作成）
const result1 = largeArray
  .filter(n => n % 2 === 0)
  .map(n => n * 2);

// forループ（高速だが、読みにくい）
const result2 = [];
for (let i = 0; i < largeArray.length; i++) {
  if (largeArray[i] % 2 === 0) {
    result2.push(largeArray[i] * 2);
  }
}

9. よくある間違いとベストプラクティス

間違いの例

// ❌ 悪い例：map()で副作用を起こす
const numbers = [1, 2, 3];
numbers.map(n => console.log(n)); // 目的に合わない

// ✅ 良い例：forEach()を使用
numbers.forEach(n => console.log(n));

// ❌ 悪い例：filter()とmap()の順序が非効率
const result = array
  .map(item => expensiveOperation(item))
  .filter(item => item.isValid);

// ✅ 良い例：filter()を先に実行
const result = array
  .filter(item => item.isValid)
  .map(item => expensiveOperation(item));

ベストプラクティス

1. イミュータビリティを意識する： 元の配列を変更せず、新しい配列を返すメソッドを優先
2. メソッドの目的を理解する： 各メソッドの役割を理解し、適切に使い分ける
3. 可読性を重視する： コードは書く時間より読む時間の方が長い
4. パフォーマンスを考慮する： 大量のデータを処理する場合は、パフォーマンスも考慮

参考資料： JavaScript.info - 配列メソッド