TypeScriptで配列内のオブジェクトをグループ分けする方法

この記事では、TypeScriptで配列内のオブジェクトをグループ分けする方法をお伝えします。

少しでも実装方法で悩んでいる方の参考になれば幸いです。

TypeScriptで配列内のオブジェクトをグループ分けする方法

結論から言うと、TypeScriptで配列内のオブジェクトをグループ分けするには、以下のコードを実装します。

export const group = <T>(values: T[], key: keyof T) => {
  return values.reduce((prev, current) => {
    const keyValue = String(current[key]);
    (prev[keyValue] || (prev[keyValue] = [])).push(current);
    return prev;
  }, {} as Record<string, T[]>);
};

以下がコードの説明です。

export const group = <T>(values: T[], key: keyof T) => {:
- group という名前の関数をエクスポートし、ジェネリクス <T> を使って型パラメータ T を定義します。これは、関数が異なる型の配列を処理できるようにするためのものです。
- 関数は、values と key という2つの引数を受け取ります。values はグループ化する対象の配列であり、key はグループ化の基準となるオブジェクトのプロパティ名です。
return values.reduce((prev, current) => {:
- reduce メソッドを使用して、values 配列を走査しながら新しいオブジェクトを構築します。prev は現在の累積オブジェクト、current は現在処理中の要素を表します。
const keyValue = String(current[key]);:
- 現在の要素から指定されたキー(key)にアクセスし、その値を文字列に変換して keyValue に格納します。この値は、グループのキーとして使用されます。
(prev[keyValue] || (prev[keyValue] = [])).push(current);:
- 現在の要素を keyValue に基づいてグループ化します。これは、オブジェクト prev 内の keyValue プロパティを取得し、存在しない場合は新しい空の配列([])を代入します。
- その後、現在の要素(current)をこの配列に追加します。
return prev;:
- reduce メソッドの各ステップで更新された prev オブジェクトを返します。このオブジェクトには、指定されたキーに基づいてグループ化された要素が含まれています。
}, {} as Record<string, T[]>);:
- reduce メソッドの初期値として空のオブジェクト({})を使用します。これは、グループ化の結果を格納するための初期状態を提供します。
- 型アサーション (as Record<string, T[]>) を使用して、オブジェクトの型を明示的に指定しています。このオブジェクトは、文字列型のキーと T 型の配列値を持つことを示しています。

これを使用して、以下のようなデータ（users）をグループ分けしてみます。

type User = {
  id: number;
  name: string;
  group: "A" | "B" | "C";
};

const users: User[] = [
  { id: 1, name: "jiro", group: "A" },
  { id: 2, name: "hana", group: "B" },
  { id: 3, name: "keita", group: "C" },
  { id: 4, name: "yuta", group: "B" },
  { id: 5, name: "ai", group: "C" },
  { id: 6, name: "sakura", group: "B" },
];

このデータに対して先ほどのgroup関数を呼び出します。

const result = group(users, "group");

すると、以下のようにグループ分けできます。

const result = {
  A: [{ id: 1, name: "jiro", group: "A" }],
  B: [
    { id: 2, name: "hana", group: "B" },
    { id: 4, name: "yuta", group: "B" },
    { id: 6, name: "sakura", group: "B" },
  ],
  C: [
    { id: 3, name: "keita", group: "C" },
    { id: 5, name: "ai", group: "C" },
  ],
};

以上が、TypeScriptで配列内のオブジェクトをグループ分けする方法です。

もちろん、他の方法でもグループ分けを実現することはできます。あくまで一例と捉えていただけると嬉しいです。

TypeScriptで配列内のオブジェクトをグループ分けする方法おわりに

今回は、TypeScriptで配列内のオブジェクトをグループ分けする方法を解説しました。

TypeScriptでは、以下のコードを使うことで、配列内のオブジェクトをグループ分けすることができます。

export const group = <T>(values: T[], key: keyof T) => {
  return values.reduce((prev, current) => {
    const keyValue = String(current[key]);
    (prev[keyValue] || (prev[keyValue] = [])).push(current);
    return prev;
  }, {} as Record<string, T[]>);
};

最後まで読んでいただきありがとうございました。