React (JavaScript) - mapとflatMap

背景
Array.prototype.flatMap()
Array.prototype.map()
- 概要
- 構文 - map
flatMap()とmap()の違い
続く…
- コメント

背景

フロントのリファクタリングを行った際に軽く調べた内容を書き留めておきたいと思いました。

本記事では、配列操作に関する説明を簡単に解説していきます。

コードに関してはフェイクをいれてますので、ご了承ください。

Array.prototype.flatMap()

概要

配列をフラット化して新しい配列を作成するメソッドの1つです。

flatMapメソッドは、配列内の各要素に対して、コールバック関数を実行し、その結果をフラット化した配列として返します。

つまり

多次元配列を一つの配列に展開することができます。

多次元配列

以下の例は配列の中に配列が入れ子になっている多次元配列となります。

厳密にいうと配列の中にオブジェクトが格納されており、オブジェクトのプロパティに別の配列が格納されています。

const dummyData: DummyData = [
  {
    "id": 1,
    "name": "Alice",
    "details": [
      {"id": 1, "value": "A"},
      {"id": 2, "value": "B"},
      {"id": 3, "value": "C"}
    ]
  },
  {
    "id": 2,
    "name": "Bob",
    "details": [
      {"id": 1, "value": "D"},
      {"id": 2, "value": "E"},
      {"id": 3, "value": "F"}
    ]
  }
];

構文 - flatMap

先程定義した多次元配列に対してflatMap()を使用すると、detailsプロパティの配列をフラット化して、新しい配列を作成できます。

const flatDetails:Dummy[] = dummyData.flatMap(data => data.details);

flatMapを使って操作した場合の返り値は、次のようになります。

AliceのdetailsとBobのdetailsをまとめた配列に展開されていることがわかりますね。

  {"id": 1, "name": "Alice", "value": "A"},
    {"id": 1, "name": "Alice", "value": "B"},
    {"id": 1, "name": "Alice", "value": "C"},
    {"id": 2, "name": "Bob", "value": "D"},
    {"id": 2, "name": "Bob", "value": "E"},
    {"id": 2, "name": "Bob", "value": "F"}
]

flatMapは、各要素に対してコールバック関数を適用し、それぞれの結果を1つの配列にまとめた新しい配列を返します。

この例では、dummyDataの各要素はオブジェクトであり、その中にdetailsという配列があるため、flatMapを使ってdetailsを展開し、新しいオブジェクトの配列に変換しています。

Array.prototype.map()

概要

Array.prototype.map()は、配列の要素を1つずつ取り出してコールバック関数を実行し、新しい配列を作成するメソッドです。

map()メソッドを使うことで、元の配列の要素を変換したり、新しいプロパティを追加したりすることができます。

構文 - map

先程と同じ多次元配列を使ってdataを定義します。

const data = [
  {
    "id": 1,
    "name": "Alice",
    "values": [
      {"id": 1, "value": "A"},
      {"id": 2, "value": "B"},
      {"id": 3, "value": "C"}
    ]
  },
  {
    "id": 2,
    "name": "Bob",
    "values": [
      {"id": 1, "value": "D"},
      {"id": 2, "value": "E"},
      {"id": 3, "value": "F"}
    ]
  }
];

map()を使用すると、各要素のvaluesプロパティが取り出され、新しい配列が作成されます。

const extractedValues = data.map(item => item.values);

実行結果は以下のようになります。

[
  [
    {"id": 1, "value": "A"},
    {"id": 2, "value": "B"},
    {"id": 3, "value": "C"}
  ],
  [
    {"id": 1, "value": "D"},
    {"id": 2, "value": "E"},
    {"id": 3, "value": "F"}
  ]
]

flatMap()とmap()の違い

dummyData配列の各要素のdetailsプロパティを取り出して新しい配列を生成していますが違いについて改めて記載します。

// Array.prototype.map()を使用した場合
const mappedData = dummyData.map(item => item.details);
console.log(mappedData);
// 出力: [[{id: 1, value: "A"}, {id: 2, value: "B"}, {id: 3, value: "C"}], [{id: 1, value: "D"}, {id: 2, value: "E"}, {id: 3, value: "F"}]]

// Array.prototype.flatMap()を使用した場合
const flatMappedData = dummyData.flatMap(item => item.details);
console.log(flatMappedData);
// 出力: [{id: 1, value: "A"}, {id: 2, value: "B"}, {id: 3, value: "C"}, {id: 1, value: "D"}, {id: 2, value: "E"}, {id: 3, value: "F"}]

map()メソッドを使用すると2次元配列が生成され、各要素は配列となります。

flatMap()メソッドを使用するとフラット化された1次元配列が生成され、配列の要素が展開されます。

続く…

本記事の内容は以上になります！

書籍の続きのアウトプットも随時更新したいと思います。

プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky

Yanonoblog!

こつこつと