【JavaScript】Object.groupBy の使い方｜配列をキーごとにグループ分けする方法

const products = [
  { name: 'Tシャツ', stock: 12 },
  { name: 'パーカー', stock: 0 },
  { name: 'キャップ', stock: 3 },
  { name: 'トートバッグ', stock: 0 },
];

const grouped = products.reduce((acc, product) => {
  const key = product.stock > 0 ? 'inStock' : 'soldOut';
  if (!acc[key]) {
    acc[key] = []; // キーが初めて出てきたら配列を用意する
  }
  acc[key].push(product);
  return acc;      // 次の繰り返しへ引き継ぐ
}, {});            // 初期値は空のオブジェクト

const grouped = Object.groupBy(products, (product) => {
  return product.stock > 0 ? 'inStock' : 'soldOut';
});

console.log(grouped);
// {
//   inStock: [ { name: 'Tシャツ', stock: 12 }, { name: 'キャップ', stock: 3 } ],
//   soldOut: [ { name: 'パーカー', stock: 0 }, { name: 'トートバッグ', stock: 0 } ]
// }

console.log(grouped.inStock.length); // 2
console.log(products.length);        // 4 ← 元の配列はそのまま

Object.groupBy(items, callbackFn)

const letters = ['a', 'b', 'c', 'd', 'e'];

// index を使って偶数番目・奇数番目に振り分ける
const grouped = Object.groupBy(letters, (element, index) => {
  return index % 2 === 0 ? 'even' : 'odd';
});

console.log(grouped.even); // ['a', 'c', 'e']
console.log(grouped.odd);  // ['b', 'd']

const grouped = Object.groupBy(products, (p) => (p.stock > 0 ? 'inStock' : 'soldOut'));

console.log(Object.getPrototypeOf(grouped)); // null
console.log(grouped.hasOwnProperty);         // undefined
console.log(grouped.toString);               // undefined

// grouped.hasOwnProperty('inStock');
// → TypeError: grouped.hasOwnProperty is not a function

console.log('inStock' in grouped);              // true
console.log(Object.hasOwn(grouped, 'soldOut')); // true
console.log(Object.keys(grouped));              // ['inStock', 'soldOut']
console.log(grouped['inStock']);                // [ {...}, {...} ]
console.log(JSON.stringify(grouped));           // 文字列化もできる

// for...in や Object.entries での繰り返しもそのまま書ける
for (const [key, list] of Object.entries(grouped)) {
  console.log(key, list.length);
}

// どうしても普通のオブジェクトが必要なときはコピーする
const plain = { ...grouped };
console.log(plain.hasOwnProperty('inStock')); // true

const users = [
  { name: '田中', age: 28 },
  { name: '鈴木', age: 34 },
  { name: '佐藤', age: 22 },
];

// 年代（20, 30）でグループ分けする
const byDecade = Object.groupBy(users, (user) => Math.floor(user.age / 10) * 10);

console.log(Object.keys(byDecade)); // ['20', '30'] ← 数値ではなく文字列
console.log(byDecade['20'].length); // 2
console.log(byDecade[20].length);   // 2（20 が '20' に変換されるので同じ結果）

const posts = [
  { title: '公開済みの記事', published: true },
  { title: '下書きの記事', published: false },
];

// 真偽値をそのまま返すと 'true' / 'false' というキーになる
const a = Object.groupBy(posts, (post) => post.published);
console.log(a.true.length); // 1 ← 読みづらい

// 意味の分かる文字列を返したほうが扱いやすい
const b = Object.groupBy(posts, (post) => (post.published ? 'published' : 'draft'));
console.log(b.published.length); // 1

// 値を返し忘れると 'undefined' キーに集まる
const c = Object.groupBy(posts, (post) => {
  if (post.published) return 'published'; // false のときは何も返していない
});
console.log(Object.keys(c)); // ['published', 'undefined']

const dev = { name: '開発チーム' };
const sales = { name: '営業チーム' };

const members = [
  { name: '田中', team: dev },
  { name: '鈴木', team: sales },
  { name: '佐藤', team: dev },
];

// Object.groupBy だと全員が同じキーに入ってしまう
const ng = Object.groupBy(members, (member) => member.team);
console.log(Object.keys(ng)); // ['[object Object]']

// Map.groupBy ならオブジェクトのままキーにできる
const byTeam = Map.groupBy(members, (member) => member.team);

console.log(byTeam.get(dev));   // [ { name: '田中', ... }, { name: '佐藤', ... } ]
console.log(byTeam.get(sales)); // [ { name: '鈴木', ... } ]
console.log(byTeam.size);       // 2

const products = [
  { name: 'Tシャツ', stock: 12 },
  { name: 'パーカー', stock: 0 },
  { name: 'キャップ', stock: 3 },
];

const grouped = Object.groupBy(products, (product) => {
  return product.stock > 0 ? 'inStock' : 'soldOut';
});

// 該当なしのときは undefined になるので、空配列を用意しておく
const inStock = grouped.inStock ?? [];
const soldOut = grouped.soldOut ?? [];

const toListItems = (list) => list.map((p) => `<li>${p.name}</li>`).join('');

document.getElementById('in-stock').innerHTML = toListItems(inStock);
document.getElementById('sold-out').innerHTML = toListItems(soldOut);

console.log(`在庫あり ${inStock.length}件 / 売り切れ ${soldOut.length}件`);

const posts = [
  { title: 'Object.groupBy を使ってみた', publishedAt: '2026-09-13T10:00:00' },
  { title: 'CSS の余白設計を見直す', publishedAt: '2026-09-13T18:30:00' },
  { title: 'WordPress のブロック開発メモ', publishedAt: '2026-09-11T09:15:00' },
];

// '2026-09-13T10:00:00' の先頭10文字 = '2026-09-13' をキーにする
const byDate = Object.groupBy(posts, (post) => post.publishedAt.slice(0, 10));

console.log(Object.keys(byDate)); // ['2026-09-13', '2026-09-11']

const html = Object.entries(byDate)
  .sort(([a], [b]) => b.localeCompare(a)) // 日付の新しい順に並べ替える
  .map(([date, list]) => {
    const items = list.map((post) => `<li>${post.title}</li>`).join('');
    return `<section><h3>${date}</h3><ul>${items}</ul></section>`;
  })
  .join('');

document.getElementById('post-list').innerHTML = html;

const scores = [
  { name: '田中', score: 82 },
  { name: '鈴木', score: 45 },
  { name: '佐藤', score: 91 },
  { name: '高橋', score: 58 },
];

// 分割代入で2つのグループを直接受け取る（空のときは [] になる）
const { passed = [], failed = [] } = Object.groupBy(scores, (student) => {
  return student.score >= 60 ? 'passed' : 'failed';
});

console.log(passed.map((s) => s.name)); // ['田中', '佐藤']
console.log(failed.map((s) => s.name)); // ['鈴木', '高橋']
console.log(`合格 ${passed.length}人 / 不合格 ${failed.length}人`);

export function groupBy(items, callbackFn) {
  // 使える環境ではそのまま標準の機能を使う
  if (typeof Object.groupBy === 'function') {
    return Object.groupBy(items, callbackFn);
  }

  // 使えない環境では reduce で同じ形を作る
  return [...items].reduce((acc, element, index) => {
    const key = callbackFn(element, index);
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(element);
    return acc;
  }, Object.create(null)); // 戻り値の性質も合わせておく
}