今日の開発Tips（2025-05-23）

flatMap()による配列の処理

flatMap()は、配列の各要素に対して与えられた関数を適用し、その結果を一つの配列に平坦化して返します。map()とflat()を組み合わせた処理を簡潔に記述できます。特に、配列の中にさらに配列が含まれるネスト構造の配列を扱う際に便利です。

const nestedArray = [[1, 2], [3, 4], [5, 6]];

// map() と flat() を使った従来の方法
const flattenedArray1 = nestedArray.map(innerArray => innerArray).flat();
console.log(flattenedArray1); // [1, 2, 3, 4, 5, 6]


// flatMap() を使った方法
const flattenedArray2 = nestedArray.flatMap(innerArray => innerArray);
console.log(flattenedArray2); // [1, 2, 3, 4, 5, 6]

//さらに複雑な例：各要素を2倍にして平坦化する
const doubledFlattenedArray = nestedArray.flatMap(innerArray => innerArray.map(num => num * 2));
console.log(doubledFlattenedArray); //[2, 4, 6, 8, 10, 12]

注意点：flatMap()は、コールバック関数が返す値が配列であることを前提に動作します。もし、コールバック関数が配列以外の値を返す場合、flat()と同じように動作します。 返り値が空の配列の場合も考慮する必要があります。 flatMap()は配列の要素数が膨大である場合、map()とflat()を別々に実行するよりもパフォーマンスが劣る可能性があるので、注意が必要です。 ブラウザの互換性も確認しましょう。

おすすめポイント：map()とflat()の組み合わせを簡潔に記述できるため、コードの可読性と保守性が向上します。ネストされた配列の処理を効率的に行うことができます。