配列メソッド完全ガイド — map・filter・reduceから実務頻出パターンまで

const arr = [1, 2, 3];
 
console.log(arr instanceof Array); // true
console.log(typeof arr); // "object"（配列もオブジェクトの一種）

// .map() は配列自体が持っているのではなく、Array.prototype から借りている
console.log(arr.hasOwnProperty('map')); // false
console.log(Array.prototype.hasOwnProperty('map')); // true

const nodes = document.querySelectorAll('div');
// nodes.map(...) → TypeError: nodes.map is not a function
 
// Array.from() で本物の配列に変換すれば使える
Array.from(nodes).map((node) => node.textContent);

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((n) => n * 2);
 
console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5]（元の配列はそのまま）

const result = ['a', 'b', 'c'].map((element, index, array) => {
  // element: 現在の要素（"a", "b", "c"）
  // index:   現在のインデックス（0, 1, 2）
  // array:   元の配列自体
  return `${index}: ${element}`;
});
// ["0: a", "1: b", "2: c"]

// APIから返ってきたユーザーデータ
const users = [
  { id: 1, first_name: '太郎', last_name: '田中' },
  { id: 2, first_name: '花子', last_name: '佐藤' },
];
 
// フロントで使いやすい形に変換
const displayUsers = users.map((user) => ({
  id: user.id,
  fullName: `${user.last_name} ${user.first_name}`,
}));
// [{ id: 1, fullName: "田中 太郎" }, { id: 2, fullName: "佐藤 花子" }]

// ❌ mapの戻り値を捨てている — forEachを使うべき
users.map((user) => {
  console.log(user.name);
});
 
// ⭕
users.forEach((user) => {
  console.log(user.name);
});

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

const products = [
  { name: 'ノートPC', price: 120000, inStock: true },
  { name: 'マウス', price: 3000, inStock: true },
  { name: 'キーボード', price: 15000, inStock: false },
  { name: 'モニター', price: 45000, inStock: true },
];
 
// 在庫ありで1万円以上の商品
const result = products.filter((p) => p.inStock && p.price >= 10000);
// [{ name: "ノートPC", ... }, { name: "モニター", ... }]

// 在庫あり商品の名前だけを取得
const inStockNames = products.filter((p) => p.inStock).map((p) => p.name);
// ["ノートPC", "マウス", "モニター"]

const result = [1, 2, 3].filter((n) => n > 10);
console.log(result); // []
console.log(result.length); // 0

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => {
  return accumulator + current;
}, 0);
// 0 + 1 + 2 + 3 + 4 + 5 = 15

array.reduce((accumulator, currentValue, index, array) => {
  // accumulator: 前回のコールバックの戻り値（初回は初期値）
  // currentValue: 現在の要素
  return nextAccumulator;
}, initialValue);
//  ^^^^^^^^^^^^^ 第2引数: 初期値（省略可能だが、常に指定するのが安全）

// ❌ 空配列でエラー
[].reduce((acc, cur) => acc + cur);
// TypeError: Reduce of empty array with no initial value
 
// ⭕ 初期値を指定すれば空配列でも安全
[].reduce((acc, cur) => acc + cur, 0); // 0

const orders = [
  { product: 'PC', category: 'electronics' },
  { product: 'シャツ', category: 'clothing' },
  { product: 'マウス', category: 'electronics' },
  { product: 'パンツ', category: 'clothing' },
];
 
const grouped = orders.reduce((acc, order) => {
  const key = order.category;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(order);
  return acc;
}, {});
 
// {
//   electronics: [{ product: "PC", ... }, { product: "マウス", ... }],
//   clothing: [{ product: "シャツ", ... }, { product: "パンツ", ... }]
// }

const grouped = Object.groupBy(orders, (order) => order.category);

// ❌ reduceで書いているが、やっていることはfilter + map
const result = numbers.reduce((acc, n) => {
  if (n > 3) acc.push(n * 2);
  return acc;
}, []);
 
// ⭕ 意図が明確
const result = numbers.filter((n) => n > 3).map((n) => n * 2);

const users = [
  { id: 1, name: '太郎' },
  { id: 2, name: '花子' },
  { id: 3, name: '次郎' },
];
 
const user = users.find((u) => u.id === 2);
console.log(user); // { id: 2, name: "花子" }
 
const notFound = users.find((u) => u.id === 99);
console.log(notFound); // undefined

const index = users.findIndex((u) => u.id === 2);
console.log(index); // 1

const numbers = [1, 3, 5, 8, 9];
 
const hasEven = numbers.some((n) => n % 2 === 0);
console.log(hasEven); // true（8が偶数）

const userRoles = ['editor', 'viewer'];
const canEdit = userRoles.some((role) => role === 'editor' || role === 'admin');
console.log(canEdit); // true

const ages = [20, 25, 30, 18];
 
const allAdults = ages.every((age) => age >= 20);
console.log(allAdults); // false（18が条件を満たさない）

const fields = [
  { name: 'email', value: 'test@example.com', valid: true },
  { name: 'password', value: 'abc', valid: false },
  { name: 'name', value: '太郎', valid: true },
];
 
const isFormValid = fields.every((field) => field.valid);
console.log(isFormValid); // false（passwordが invalid）

[].every((x) => x > 0); // true（！）

const arr = [3, 1, 2];
 
// ❌ 元の配列が変わる
arr.sort();
console.log(arr); // [1, 2, 3]（元の配列が変わっている）
 
// ⭕ 元の配列は変わらない（ES2023）
const sorted = [3, 1, 2].toSorted();

// ❌ mapの中で条件分岐 → undefinedが混じる
const result = numbers.map((n) => {
  if (n > 3) return n * 2;
});
// [undefined, undefined, undefined, 8, 10]
 
// ⭕
const result = numbers.filter((n) => n > 3).map((n) => n * 2);
// [8, 10]