JavaScriptのArray.prototype.flatMap()メソッドは、配列の要素を変換し、その結果を1レベル平坦化する便利な機能です。map()とflat()を組み合わせたような動作をする単一のメソッドとして、より効率的な配列操作を実現します。

flatMap()の基本構文

array.flatMap(callback(currentValue[, index[, array]]))
  • callback: 各要素に対して実行される関数
  • currentValue: 現在処理している要素
  • index: 現在の要素のインデックス（省略可能）
  • array: メソッドが呼び出された配列（省略可能）

基本的な使用例

const numbers = [1, 2, 3];

// map()とflat()を別々に使用する場合
const result1 = numbers.map(x => [x, x * 2]).flat();
console.log(result1); // [1, 2, 2, 4, 3, 6]

// flatMap()を使用する場合
const result2 = numbers.flatMap(x => [x, x * 2]);
console.log(result2); // [1, 2, 2, 4, 3, 6]

flatMap()の実践的な使用例

1. 文字列の分割と平坦化

const sentences = ['Hello world', 'Good morning'];
const words = sentences.flatMap(sentence => sentence.split(' '));
console.log(words); // ['Hello', 'world', 'Good', 'morning']

2. 条件付きの要素追加

const numbers = [1, 2, 3, 4];
const result = numbers.flatMap(num => {
    if (num % 2 === 0) {
        return [num, num * 2];
    }
    return [num];
});
console.log(result); // [1, 2, 4, 3, 4, 8]

3. 無効な要素の除外

const data = [1, null, 3, undefined, 5];
const validNumbers = data.flatMap(item => {
    return item ? [item] : [];
});
console.log(validNumbers); // [1, 3, 5]

map()とflat()の組み合わせとの違い

flatMap()は以下の点で優れています：

1. パフォーマンス: 単一の操作で実行されるため、より効率的

2. メモリ使用: 中間配列を作成しないため、メモリ効率が良い

3. コードの可読性: より簡潔に記述可能

ブラウザ互換性

flatMap()は比較的新しいメソッドですが、主要なモダンブラウザでサポートされています：

  • Chrome 69以降
  • Firefox 62以降
  • Safari 12以降
  • Edge 79以降

古いブラウザをサポートする必要がある場合は、ポリフィルの使用を検討してください。

まとめ

flatMap()メソッドは、配列の変換と平坦化を効率的に行うための強力なツールです。特に：

  • 配列要素の変換と平坦化を1つの操作で実行
  • パフォーマンスとメモリ効率に優れる
  • コードをより簡潔に記述可能

適切な使用シーンで活用することで、より効率的で読みやすいコードを作成できます。