JavaScriptのflatMap！flatでmapな処理ができる

JavaScriptで配列の要素を加工しながら平たくするflatMapメソッドについて書いています。
flatMapメソッドは、mapメソッドとflatメソッドを組み合わせたようなもので、配列の各要素を変換し、その結果を1つの新しい配列にまとめます。

実際に動くサンプルを使って、以下の操作を解説します。

flatMapメソッドの基本的な使い方

flatMapメソッドは、配列の各要素に対して指定された関数を適用し、その結果を1つの新しい配列にして返します。
基本的な構文は以下のとおりです。

array.flatMap(callback(currentValue[, index[, array]])[, thisArg])

• callback: 各要素に対して実行する関数。
  • currentValue: 現在処理されている要素。
  • index: 現在処理されている要素のインデックス（省略可能）。
  • array: flatMapが呼び出された配列（省略可能）。
• thisArg: callback内でthisとして使用する値（省略可能）。

配列の要素を変換して平たくする

flatMapメソッドを使って、配列の値を加工しながら新しい配列を作成しています。

const numbers = [1, 2, 3];
const doubledAndFlattened = numbers.flatMap(number => [number * 2]);

console.log(doubledAndFlattened); // 結果：[2, 4, 6]

numbers配列を用意して、次の行でflatMapメソッドを呼び出しています。
この例では、numbers配列の各要素を2倍にし、その結果を新しい配列を作成しています。

ネストされた配列を扱う

flatMapメソッドでネストされた配列を処理してみます。

const nestedArray = [1, [2, 3], 4, [5, 6]];
const flattenedArray = nestedArray.flatMap(item => item);

console.log(flattenedArray); // 結果：[1, 2, 3, 4, 5, 6]

多次元配列のnestedArray配列を作成して、flatMapメソッドに渡しています。
各要素がitemとしてコールバック関数に渡されます。

結果、ネストされた配列が1つの配列として、平たくなっています。

複数の値を返す場合

callback関数は、1つの値だけでなく、複数の値を配列として返すことができます。

const sentences = ["This is a sentence.", "Another sentence."];
const words = sentences.flatMap(sentence => sentence.split(" "));

console.log(words); // 結果：["This", "is", "a", "sentence.", "Another", "sentence."]

この例では、各文をスペースで区切り、それぞれの単語を配列として返しています。
flatMapによって、これらの単語が1つの配列にまとめられています。

コールバック関数で空の配列を返す

callback関数が空の配列を返した場合、その要素は結果の配列には含まれません。

const numbers = [1, 2, 3];
const filteredAndDoubled = numbers.flatMap(number => {
  if (number > 1) {
    return [number * 2];
  } else {
    return [];
  }
});

console.log(filteredAndDoubled); // 結果：[4, 6]

flatMapメソッドのコールバック関数に条件をつけています。

配列要素を比較して、1より大きい数だけ2倍にして返すようにしています。
配列の要素が、「1」のときは条件に合わないため、空の配列が返され、結果の配列には含まれません。

配列要素は「1, 2, 3」ですが、結果として「4, 6」となります。

mapメソッドとflatMapメソッドの違い

mapメソッドとflatMapメソッドの違いについてです。
flatMapを使うと、多次元配列の場合にも平たく、ひとつにして返してくれます。

たとえば、mapメソッドを使ったときです。
下記の例では、numbers変数のそれぞれの数値に、2と3をかけています。

const numbers = [1, 2, 3];
const newArray = numbers.map(number => [number * 2, number * 3]);

console.log(newArray);  // 結果：[[2, 3], [4, 6], [6, 9]]

mapを使った場合は、[number * 2, number * 3]で「[[2, 3], [4, 6], [6, 9]]」と多次元配列で返ってきます。

flatMapを使って同じ処理をやってみます。
そうすると、下記のように多次元ではなく、ひとつの配列として返してくれます。

const numbers = [1, 2, 3];
const newArray = numbers.flatMap(number => [number * 2, number * 3]);

console.log(newArray); // 結果：[2, 3, 4, 6, 6, 9]

このようにflatMapを使うと、mapメソッドを使った後に、flatメソッドを使うのと同様の結果となります。

flatMapメソッドを使うメリット

flatMapメソッドを使う主なメリットは以下のとおりです。

• mapとflatを組み合わせた処理を1度に行える: 要素の変換と平坦化を同時に行うことができ、コードが簡潔になります。
• ネストされた配列の操作が容易になる: 多次元配列を扱う際に、flatMapを使って1次元配列に変換することで、その後の処理が簡単になります。
• コードの可読性向上: 複数の処理をまとめて記述できるため、コードの可読性が向上します。

JavaScriptのflatMapメソッドの使い方まとめ

今回はJavaScriptのflatMapメソッドの使い方について解説しました。
記事の内容をまとめます。