【JavaScript】flatMap()入門: 配列を変換しながら平らにする方法

flatMap()は、JavaScriptの配列操作において、各要素を変換しながら 同時にネストされた配列を平らにする便利なメソッドです。このメソッドを駆使することで、配列内の要素を柔軟に変換し、取り扱いやすい形に整えることができます。JavaScriptコーディングの効率性向上に寄与する重要な道具の一つです。

「flatMap()」の基本的な使い方

「flatMap()」とは？

flatMap()は、配列の各要素を関数で変換しながら平らにするメソッドです。つまり、map()のように配列の各要素を関数に適用し、flat()のようにネストされた配列を平らにすることができます。

const numbers = [1, 2, 3, 4];
const result = numbers.flatMap(num => [num, num * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6, 4, 8]

「flatMap()」のコールバック関数

flatMap()に渡されるコールバック関数は、3つの引数を取ることができます。

• currentValue: 現在処理している配列の要素。
• index: 現在処理している要素のインデックス番号。
• array: flatMap()が呼び出された配列自体。

これらの引数を使って、各要素に対する操作をカスタマイズすることができます。

const numbers = [1, 2, 3];
const result = numbers.flatMap((value, index, array) => {
    return [value * index];
});
console.log(result); // [0, 2, 6]

この例では、各数字をそのインデックス番号で乗算しています。

「flatMap()」の使用例4パターン

文字列の配列を数値に変換

数字の文字列が入った配列を数値の配列に変換したい場合に使用できます。

const strNumbers = ["1", "2", "3"];
const result = strNumbers.flatMap(num => [parseInt(num)]);
console.log(result); // [1, 2, 3]

ネストされた配列の平坦化

ネストされた配列を一つの平坦な配列に変換する場合にも使用できます。

const nested = [[1, 2], [3, 4], [5, 6]];
const result = nested.flatMap(num => num);
console.log(result); // [1, 2, 3, 4, 5, 6]

要素の重複除去

配列内の重複する要素を除去するときに役立ちます。

const values = [1, 2, 2, 3, 3, 3];
const result = values.flatMap((num, i, self) => (self.indexOf(num) === i ? [num] : []));
console.log(result); // [1, 2, 3]

条件を満たす要素のみを取得

特定の条件を満たす要素だけを取得する場合に使用します。

const numbers = [1, 2, 3, 4, 5];
const result = numbers.flatMap(num => (num > 3 ? [num] : []));
console.log(result); // [4, 5]

「flatMap()」と「flat()」

「flat()」とは？

flat()は配列のネストを平坦化するためのメソッドで、指定した深さまでネストされた配列を平坦化します。

const nested = [[1, 2], [3, 4, [5, 6]]];
const result = nested.flat();
console.log(result); // [1, 2, 3, 4, [5, 6]]

「flatMap()」と「flat()」の違い

flatMap()はmap()とflat()を合わせたような動作をしますが、flat()は単にネストされた配列を平坦化するだけの機能を持っています。

// flatMap()の場合
const numbers = [1, 2, 3];
const resultA = numbers.flatMap(num => [num * 2]);
console.log(resultA); // [2, 4, 6]

// flat()の場合
const nested = [[1, 2], [3, 4]];
const resultB = nested.flat();
console.log(resultB); // [1, 2, 3, 4]

「flatMap()」を使用する際の注意点

深くネストされた配列

flatMap()は1レベルのネストしか平坦化しないことを覚えておきましょう。深くネストされた配列を平坦化する場合はflat()を使用する必要があります。

配列のサイズ

大きな配列を扱う場合、flatMap()を多用するとパフォーマンスの問題が生じる可能性があるため注意が必要です。

「flatMap()」の使い方まとめ

flatMap()は配列の要素を変換しながら平坦化する非常に便利なメソッドです。このメソッドを上手く使いこなすことで、JavaScriptでの配列操作がより柔軟で効率的になります。是非、日々のコーディングに取り入れてみてください！