JavaScript開発でネストした配列（多次元配列）を扱う際、それを1次元の配列に変換したいケースは少なくありません。Array.prototype.flat()メソッドを使えば、簡単に多次元配列を平坦化（フラット化）できます。この記事では、flat()メソッドの基本的な使い方から実践的な活用方法までを解説します。

flat()メソッドの基本構文

array.flat([depth])
  • `depth`（オプション）: 平坦化の深さを指定する数値（デフォルトは1）

基本的な使い方

2次元配列の平坦化

const array = [1, [2, 3], [4, 5]];
const flattened = array.flat();
console.log(flattened); // [1, 2, 3, 4, 5]

より深いネストの平坦化

const deepArray = [1, [2, [3, 4], 5]];
const flattened = deepArray.flat(2);
console.log(flattened); // [1, 2, 3, 4, 5]

完全な平坦化（無限の深さ）

const veryDeepArray = [1, [2, [3, [4, 5]]]];
const fullyFlattened = veryDeepArray.flat(Infinity);
console.log(fullyFlattened); // [1, 2, 3, 4, 5]

実践的な使用例

空の要素の除去

flat()メソッドは空の要素を自動的に除去します：

const arrayWithHoles = [1, 2, , 4];
const cleaned = arrayWithHoles.flat();
console.log(cleaned); // [1, 2, 4]

データの正規化

APIからネストされたデータを受け取った場合の正規化：

const apiResponse = [
  { id: 1, children: [2, 3] },
  { id: 4, children: [5] }
];
const normalized = apiResponse
  .map(item => [item.id, ...item.children])
  .flat();
console.log(normalized); // [1, 2, 3, 4, 5]

ブラウザ互換性とポリフィル

flat()メソッドは比較的新しい機能で、Internet Explorer等の古いブラウザでは対応していません。互換性が必要な場合は、以下のポリフィルを使用できます：

if (!Array.prototype.flat) {
  Array.prototype.flat = function(depth = 1) {
    return this.reduce((flat, toFlat) => {
      return flat.concat(
        (Array.isArray(toFlat) && depth > 0)
          ? toFlat.flat(depth - 1)
          : toFlat
      );
    }, []);
  };
}

代替手段

flat()メソッドが使用できない環境では、以下の代替方法も有効です：

reduce()を使用する方法

const array = [1, [2, 3], [4, 5]];
const flattened = array.reduce((acc, val) => 
  acc.concat(Array.isArray(val) ? val : [val]), 
[]);

再帰関数を使用する方法

function flattenArray(arr) {
  return arr.reduce((flat, toFlat) => {
    return flat.concat(Array.isArray(toFlat) 
      ? flattenArray(toFlat) 
      : toFlat);
  }, []);
}

パフォーマンスの考慮事項

大きな配列や深いネストを処理する場合、flat()メソッドは新しい配列を生成するため、メモリ使用量に注意が必要です。パフォーマンスが重要な場合は、イテレータを使用するなど、別のアプローチを検討することをお勧めします。

以上で、Array.prototype.flat()メソッドの基本的な使い方から実践的な活用方法まで説明しました。多次元配列の操作が必要な場合は、ぜひ活用してみてください。