はじめに

DBやAPIから取得したデータを扱う際、配列を別の配列にしたり、配列からオブジェクトを生成したり、ということがあるかと思います。

今回はオブジェクトの配列にフォーカスして、どのように別の配列やオブジェクトを生成するか、ということを確認します。

本記事内では「TypeScript」を扱っていますが、JavaScriptでも使えるメソッドになります。

オブジェクトの配列から、別の配列を生成する

概要

// ユーザー型の定義
interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}
// ユーザーデータ
const users: User[] = [
  { id: 1, name: "田中太郎", email: "tanaka@example.com", age: 28 },
  { id: 2, name: "佐藤花子", email: "sato@example.com", age: 35 },
  { id: 3, name: "鈴木一郎", email: "suzuki@example.com", age: 42 },
];

上記のようなユーザーデータが格納された配列から、nameだけを取り出して、別の配列を生成する方法を考えます。

対応方法

配列から新しい配列を生成するには、mapメソッドを使用します。

const userNames: string[] = users.map((user) => user.name);

mapメソッドは引数として関数を受け取ります。
この関数は3つの引数を受け取りますが、ほとんどの場合1つめしか使いません。
そのため、2つめ、3つめの引数の役割については省略します。

引数の1つめは配列のデータです。ここではusersのデータ、つまりオブジェクトが一つずつ渡されます。

そして、関数の戻り値が新たな配列の値として設定されます。
ここではuser.nameを返しているので、新たに生成された配列userNamesはuser.nameの配列となります。

今回は単純な処理ですが、もっと複雑に値を加工することもできます。

配列から配列を生成するときはmap、と覚えておきましょう。

オブジェクトの配列から、単一のオブジェクトを生成する

概要

以下のようなオブジェクトの配列を考えます。

// ユーザー型の定義
interface FunctionControl {
  id: number;
  functionName: string;
  enable_create: number;
  enable_read: number;
  enable_update: number;
  enable_delete: number;
}
// ユーザーデータ
const functionControls: FunctionControl[] = [
  {
    id: 1,
    functionName: "user",
    enable_create: 1,
    enable_read: 1,
    enable_update: 0,
    enable_delete: 0,
  },
  {
    id: 2,
    functionName: "item",
    enable_create: 0,
    enable_read: 1,
    enable_update: 1,
    enable_delete: 0,
  },
  {
    id: 3,
    functionName: "customer",
    enable_create: 0,
    enable_read: 1,
    enable_update: 1,
    enable_delete: 0,
  },
];

機能名(functionName)と、その機能において作成、読取、更新、削除を有効化するか、の設定値(enable_~の各項目)を持ちます。

このままだとcustomerのenable_createを確認したい場合、少し不便です。

{
  customer: {
    enable_create: 0,
    enable_read: 1,
    enable_update: 1,
    enable_delete: 0,
  },
};

こんな形式のオブジェクトであれば、各機能ごとの有効化状況を簡単に取得できます。

対応方法

配列からオブジェクトなどの単一の要素を生成するにはreduceメソッドを使用します。

  const functionControlObj = functionControls.reduce((acc, curr) => {
    acc[curr["functionName"]] = {
      create: curr["enable_create"],
      read: curr["enable_read"],
      update: curr["enable_update"],
      delete: curr["enable_delete"],
    };
    return acc;
  }, {} as Record<string, Record<string, number>>);

reduceメソッドは第一引数に関数を、第二引数に初期値を設定します。
第一引数に設定する関数は、最大で4つの引数を受け取りますが、よく使うのは1つめと2つめです。
1つめの引数には、初期値から蓄積された値が設定されます。
2つめの引数には、配列の値が設定されます。

例えば、今回のデータで行くと、
まず初めのaccは初期値に設定した空のオブジェクト{}が設定されています。
そして、currにはfunctionControlsの1番目のオブジェクトが設定されています。

acc（空のオブジェクト）のプロパティとして、curr（1番目のオブジェクト）のfunctionNameを設定し、その値としてenable_~のオブジェクトを設定しました。

{
  customer: {
    create: 0,
    read: 1,
    update: 1,
    delete: 0,
  },
};

こんな感じのオブジェクトを生成して、accに設定しているということです。

これを繰り返すことで、

{
  customer: { create: 0, read: 1, update: 1, delete: 0 },
  item: { create: 0, read: 1, update: 1, delete: 0 },
  user: { create: 1, read: 1, update: 0, delete: 0 },
};

このようなオブジェクトを生成することができます。

配列から単一の要素を生成する際はreduceと覚えておきましょう。

まとめ

map、reduceを適切に使うことで、配列を扱いやすい形に加工することができます。
個人的にreduceは若干使いにくさを感じますが、慣れれば便利だなと思いました。

ほかにもfromEntriesを使う方法もあるのですが、それはまた別の機会に紹介します。