JavaScript 配列 flat() で再帰的な平坦化も実現！

はい、承知いたしました。JavaScriptのArray.prototype.flat()メソッドについて、特に再帰的な平坦化に焦点を当てた詳細な解説記事を、約5000語のボリュームで記述します。

JavaScript 配列 flat() で再帰的な平坦化も実現！詳細徹底解説

はじめに：ネストされた配列との格闘

JavaScriptでデータを取り扱う際、配列は非常に頻繁に利用されるデータ構造です。しかし、時には配列の中にさらに配列が含まれる、いわゆる「ネストされた配列」に遭遇することがあります。例えば、以下のようなデータ構造です。

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

このようなネストされた配列は、階層的なデータを表現するのに役立ちますが、いざ中の要素をすべて取り出して一列に並べたい（平坦化したい）と思ったときに、少し面倒な作業が発生します。

例えば、上記の nestedArray を [1, 2, 3, 4, 5, 6] のように平坦化したい場合、どのようにすれば良いでしょうか？かつてのJavaScriptでは、これを実現するためにはいくつかの手法がありましたが、いずれもコードが少し複雑になったり、再帰処理を手動で記述する必要があったりしました。

よく使われた手法としては、以下のようなものがありました。

手動でのループと再帰: 配列を順番に走査し、要素が配列であれば再帰的に同じ処理を適用する。
reduce() と concat() の組み合わせ: reduceを使って配列を畳み込みながら、要素が配列であればconcatで結合していく。
スプレッド構文 (...) と concat() の組み合わせ: [].concat(...arr) のように使うことで1レベルの平坦化が可能でしたが、深いネストには複数回適用するか、再帰処理が必要でした。

これらの方法は、もちろん目的を達成できますが、コードの可読性がやや低くなったり、特に再帰的な平坦化を実現するためには、手動で再帰ロジックを組み込む必要があり、間違いが起こりやすかったりするという課題がありました。

このような背景から、よりシンプルかつ直感的に配列を平坦化するためのメソッドとして、Array.prototype.flat()が導入されました。このメソッドは、指定した深さまで配列を平坦化する機能を提供し、特に Infinity という特殊な値を指定することで、どんなに深くネストされた配列でも完全に平坦化する、つまり再帰的な平坦化を非常に簡単に実現できる 点が大きな特徴です。

この記事では、JavaScriptのArray.prototype.flat()メソッドについて、その基本的な使い方から、引数である depth による平坦化レベルの制御、そして最大の魅力である depth: Infinity を使った再帰的な平坦化 まで、詳細かつ網羅的に解説していきます。さらに、flat()を使う上でのメリット・デメリット、代替手段との比較、具体的な応用例、そして知っておくべき注意点についても深く掘り下げていきます。

この記事を読めば、あなたはネストされた配列の平坦化に悩むことはなくなり、モダンJavaScriptの強力な機能であるflat()を自在に使いこなせるようになるでしょう。

さあ、flat()メソッドの世界に飛び込みましょう！

Array.prototype.flat() メソッドの基本

まずは、flat()メソッドの最も基本的な使い方から見ていきましょう。

flat()メソッドは、配列の新しいインスタンスを生成し、その中でネストされた配列のサブ配列要素を、指定された深度レベルまで再帰的に展開します。そして、展開された要素を含む新しい配列を返します。重要な点として、元の配列は変更されません（非破壊的なメソッドです）。

“`javascript
const arr1 = [1, 2, [3, 4]];
const flatArr1 = arr1.flat();

console.log(flatArr1); // 出力: [1, 2, 3, 4]
console.log(arr1); // 出力: [1, 2, [3, 4]] (元の配列は変更されない)
“`

引数を指定しない場合、flat()メソッドはデフォルトで 1レベル だけ配列を平坦化します。上記の例では、[3, 4]というネストされた配列が展開され、その中の要素である 3 と 4 が直接トップレベルの配列に含まれるようになっています。

もう少し深いネストを持つ配列でデフォルトの挙動を見てみましょう。

“`javascript
const arr2 = [1, 2, [3, 4, [5, 6]]];
const flatArr2 = arr2.flat();

console.log(flatArr2); // 出力: [1, 2, 3, 4, [5, 6]]
“`

この例では、arr2は2レベルのネストを持っています。[3, 4, [5, 6]] という配列が1レベル展開され、その中の要素である 3, 4, そして [5, 6] が新しい配列に含まれています。[5, 6] はさらにネストされた配列ですが、デフォルトの平坦化レベルは1なので、これ以上展開されずにそのまま残っています。

これがflat()メソッドの最も基本的な挙動です。非常にシンプルで分かりやすいですね。しかし、flat()の真価は、次に説明する引数 depth を指定することで発揮されます。

flat() メソッドの引数: depth

flat()メソッドは、オプションの引数として depth を取ります。この depth は、配列を何レベルまで平坦化するかを指定するための数値です。

構文は以下の通りです。

javascript arr.flat([depth])

depth: 平坦化の深さを指定する数値です。デフォルト値は 1 です。

depth 引数に様々な値を指定した場合の挙動を見ていきましょう。

`depth` が正の整数の場合

depth に正の整数を指定すると、その数だけレベルを深く潜って配列を平坦化します。

“`javascript
const arr3 = [1, [2, [3, [4, [5]]]]];

// depth = 1 (デフォルト)
console.log(arr3.flat(1)); // 出力: [1, 2, [3, [4, [5]]]]

// depth = 2
console.log(arr3.flat(2)); // 出力: [1, 2, 3, [4, [5]]]

// depth = 3
console.log(arr3.flat(3)); // 出力: [1, 2, 3, 4, [5]]

// depth = 4
console.log(arr3.flat(4)); // 出力: [1, 2, 3, 4, 5]
“`

このように、depth の値を増やすことで、より深くネストされた配列を平坦化できることが分かります。指定した depth が配列の実際のネストの深さ以上の場合、配列は完全に平坦化されます。例えば上記の arr3 は最大で4レベルのネストがありますが、flat(4) を指定すれば完全に平坦化されますし、flat(5) や flat(10) と指定しても結果は同じく完全に平坦化された配列になります。

`depth = 0` の場合

depth に 0 を指定すると、平坦化は一切行われません。元の配列の浅いコピーが返されるだけです。

“`javascript
const arr4 = [1, [2, 3], [4, [5, 6]]];

console.log(arr4.flat(0)); // 出力: [1, [2, 3], [4, [5, 6]]] (元の配列の浅いコピー)
console.log(arr4.flat()); // 出力: [1, 2, 3, [4, [5, 6]]] (depth=1 の場合と比較)
“`

これは、平坦化が必要ない場合や、特定の条件で平坦化レベルを動的に制御したい場合などに役立つかもしれません。

`depth` が非整数の場合

depth に非整数値を指定した場合、小数点以下は切り捨てられ、整数として扱われます。

“`javascript
const arr5 = [1, [2, [3, [4]]]];

console.log(arr5.flat(1.5)); // 出力: [1, 2, [3, [4]]] (flat(1) と同じ)
console.log(arr5.flat(2.9)); // 出力: [1, 2, 3, [4]] (flat(2) と同じ)
“`

これは、メソッド内部で Math.floor() やそれに類する処理が行われていることを意味します。

`depth` が非数値の場合

depth 引数に数値以外の値を渡した場合、JavaScriptはそれを数値に型変換しようとします。変換できない場合は NaN となりますが、flat()メソッドは NaN を 0 として扱います。

“`javascript
const arr6 = [1, [2, 3]];

console.log(arr6.flat(null)); // 出力: [1, 2, 3] (null は数値の 0 に変換される)
console.log(arr6.flat(undefined)); // 出力: [1, 2, 3] (undefined は指定なしと見なされデフォルトの 1 になる)
console.log(arr6.flat(true)); // 出力: [1, 2, 3] (true は数値の 1 に変換される)
console.log(arr6.flat(false)); // 出力: [1, [2, 3]] (false は数値の 0 に変換される)
console.log(arr6.flat(”)); // 出力: [1, [2, 3]] (空文字列は数値の 0 に変換される)
console.log(arr6.flat(‘hello’)); // 出力: [1, [2, 3]] (‘hello’ は NaN に変換され、0 として扱われる)
“`

このように、意図しない挙動を防ぐためにも、depth 引数には明確に数値を指定することが推奨されます。特に、デフォルトの 1 と区別して 0 を指定したい場合は、明示的に 0 と記述することが重要です（undefined はデフォルトの 1 として扱われるため）。

再帰的な平坦化の詳細 (depth: Infinity)

flat()メソッドの最も強力で便利な機能の一つが、depth引数に特別な値 Infinity を指定することです。Infinity を指定すると、flat()メソッドは配列がもはやネストされた配列を含まなくなるまで、つまり 完全に平坦化されるまで 再帰的に要素を展開します。

“`javascript
const deepNestedArray = [1, [2, [3, [4, [5, [6, [7]]]]]]];

console.log(deepNestedArray.flat(Infinity)); // 出力: [1, 2, 3, 4, 5, 6, 7]
“`

どんなに深くネストされた配列であっても、flat(Infinity) を一度呼び出すだけで、すべての要素がトップレベルの配列に展開されます。これは、かつて手動で再帰関数を書いたり、複雑な reduce ロジックを組み立てたりしなければ実現できなかった処理が、非常にシンプルに記述できるようになったことを意味します。

この depth: Infinity こそが、この記事のタイトルにもある「再帰的な平坦化も実現！」の核心です。内部的には、JavaScriptエンジンが再帰的なアルゴリズム（あるいはそれに最適化された非再帰的なスタックベースの処理など）を実行して、配列の各要素をチェックし、それが配列であればさらに展開するという処理を指定された深さまで繰り返しています。Infinity を指定すると、この繰り返しはネストがなくなるまで続きます。

なぜ Infinity が便利なのか？

ネストの深さを知る必要がない: 処理したい配列のネストがどれくらいの深さか事前に分からなくても、確実に完全に平坦化できます。データ構造が動的に変化する場合などに特に役立ちます。
コードの圧倒的な簡潔性: 複雑な再帰ロジックを手書きする必要がなくなります。arr.flat(Infinity) という短いコードで目的が達成されます。
保守性の向上: シンプルなコードは理解しやすく、将来的な修正や機能追加も容易になります。

depth: Infinity 使用時の注意点

ほとんどの場合において depth: Infinity は非常に便利ですが、考慮すべき点もいくつかあります。

非常に深いネスト: 極端に深くネストされた配列（現実的なユースケースでは稀かもしれませんが）に対して flat(Infinity) を実行する場合、理論上はJavaScriptエンジンのスタック深度制限に達する可能性があります。ただし、多くのモダンなJavaScriptエンジンは、このような配列メソッドに対してスタックオーバーフローを避けるための最適化（例えば、内部的にスタックを使わないループベースの実装に変換するなど）を行っているため、実質的な問題となることは少ないでしょう。しかし、非常に巨大なデータセットや未知の深さのネストを扱う場合は、念のためパフォーマンスやメモリ使用量に注意を払うことが重要です。
平坦化したくない配列が途中に含まれる場合: もし、ネストされた配列の一部を意図的にそのまま残しておきたい場合は、Infinity ではなく、適切な depth の値を指定する必要があります。Infinity はすべてのネストを破壊します。

しかし、ほとんどの一般的なデータ処理タスクにおいては、depth: Infinity はネストされた配列を扱うための最もシンプルかつ効果的な手段と言えるでしょう。

flat() と他のメソッド/構文との組み合わせ

flat()メソッドは単独で使うだけでなく、JavaScriptの他の強力な配列メソッドと組み合わせることで、より複雑なデータ変換処理を簡潔に記述できます。

特に頻繁に組み合わせられるのが map() メソッドです。map()は配列の各要素を変換して新しい配列を生成しますが、その変換結果が配列になる場合、結果としてネストされた配列が得られることがあります。このような場合に flat() を組み合わせることで、変換と同時に平坦化を行うことができます。

“`javascript
const words = [“hello world”, “javascript is fun”];

// map() を使って単語の配列に変換
const mappedWords = words.map(sentence => sentence.split(” “));
console.log(mappedWords); // 出力: [[“hello”, “world”], [“javascript”, “is”, “fun”]]

// map() の結果を flat() で平坦化
const flatMappedWords = mappedWords.flat();
console.log(flatMappedWords); // 出力: [“hello”, “world”, “javascript”, “is”, “fun”]
“`

この「map() してから flat(1) する」という操作は非常に一般的です。JavaScriptには、この2つの操作を1つのメソッドで実行できる Array.prototype.flatMap() という便利なメソッドも存在します。

`Array.prototype.flatMap()` の紹介

flatMap()メソッドは、基本的に map() を実行した後に、その結果に対して flat(1) を実行するのと同等です。

“`javascript
const words = [“hello world”, “javascript is fun”];

// flatMap() を使用
const flatMappedWordsDirect = words.flatMap(sentence => sentence.split(” “));
console.log(flatMappedWordsDirect); // 出力: [“hello”, “world”, “javascript”, “is”, “fun”]
“`

上記の例からも分かるように、flatMap() を使うことで、map() と flat() を別々に呼び出すよりもコードをさらに簡潔にすることができます。

flatMap() と map().flat(depth) の違い

重要な違いは、flatMap() は常に1レベルだけ平坦化するのに対し、map().flat(depth) は flat() に渡す depth 引数によって任意の深さまで平坦化できるという点です。

“`javascript
const nestedNumbers = [[1, 2], [3, [4, 5]]];

// map() + flat(1) – flatMap と同等
const result1 = nestedNumbers.map(arr => arr).flat(1);
console.log(result1); // 出力: [[1, 2], 3, [4, 5]] (mapは元の配列を返すだけなのであまり意味ない例だが…)

// map() + flat(Infinity)
const result2 = nestedNumbers.map(arr => arr).flat(Infinity);
console.log(result2); // 出力: [1, 2, 3, 4, 5]

// flatMap() – 常に1レベル
// flatMapのコールバックは、要素とインデックス、元の配列を受け取る
// この例では要素自体が配列なので、そのまま返してもネストは解消されない
// flattenBeforeMapという使い方はできないので注意
// flatMapは map(callback).flat(1) の糖衣構文
const result3 = nestedNumbers.flatMap(arr => arr); // これは map(arr => arr).flat(1) と同じ
console.log(result3); // 出力: [1, 2, 3, [4, 5]]

// flatMap を使って完全に平坦化したい場合は、コールバックの中で再帰的に展開するか、flat(Infinity)を使う別の処理が必要になる
// flatMapのコールバックが常に配列を返すようにする必要がある
const result4 = nestedNumbers.flatMap(arr => arr.flat(Infinity)); // これは map(arr => arr.flat(Infinity)).flat(1) と同じ
console.log(result4); // 出力: [1, 2, 3, 4, 5] – この例では、まず内側の配列を flat(Infinity)で平坦化し、その結果を flatMapがさらに flat(1) する。

// 別の flatMap の適切な例
const data = [
{ name: ‘A’, tags: [‘js’, ‘web’] },
{ name: ‘B’, tags: [‘node’, ‘js’] },
{ name: ‘C’, tags: [‘react’, ‘web’] }
];

// すべてのタグを重複なく一つの配列にリストアップしたい
const allTags = data.flatMap(item => item.tags);
console.log(allTags); // 出力: [“js”, “web”, “node”, “js”, “react”, “web”]

// さらに重複を取り除くには Set を使う
const uniqueTags = […new Set(allTags)];
console.log(uniqueTags); // 出力: [“js”, “web”, “node”, “react”]
“`

flatMap() は、「各要素を変換した結果が配列になり、それらを1レベルだけ平坦化して結合したい」 という特定のパターンで非常に役立ちます。一方、「元の配列にある任意の深さのネストを、指定したレベル（あるいは完全 (Infinity) に）平坦化したい」 という場合は、flat() メソッド単独、または map().flat(depth) の形が適しています。

どちらのメソッドも、配列操作の柔軟性と簡潔性を高める重要なツールです。ユースケースに応じて適切に使い分けることが重要です。

flat() を使用するメリット・デメリット

ここで一度、flat()メソッド（特に flat(Infinity) による再帰的平坦化を含めて）を使用することのメリットとデメリットを整理しておきましょう。

メリット:

コードの圧倒的な簡潔性・可読性: 複雑な手動ループや再帰関数を書く代わりに、arr.flat(depth) や arr.flat(Infinity) という非常に短いコードで目的を達成できます。これにより、コードが理解しやすく、何をしているのかが一目で分かります。
ネイティブ実装によるパフォーマンス: JavaScriptエンジンによって最適化されたネイティブコードで実装されているため、多くの場合、手動で記述したJavaScriptコードよりも高速に動作します。特に大規模な配列や深いネストに対しては、このパフォーマンス上の利点が顕著になることがあります。
意図の明確化: flat()というメソッド名は「平坦化」を明確に示しており、そのコードが配列のネストを解消しようとしている意図が読み手によく伝わります。
機能の集約: 配列の平坦化という特定のタスクに特化したメソッドがあることで、ユーティリティ関数を別途定義したり、外部ライブラリに依存したりする必要性が減ります。

デメリット:

古いJavaScript環境での非対応: flat()メソッドは比較的新しい機能です（ECMAScript 2019で標準化されました）。Internet Explorerなどの古いブラウザ環境ではそのままでは利用できません。このような環境に対応する必要がある場合は、ポリフィルを用意するか、代替手段を使用する必要があります。
配列以外の要素の扱い: flat()はあくまで「配列」要素を平坦化するメソッドです。配列に含まれる数値、文字列、オブジェクトなどの非配列要素は、平坦化の過程でそのまま維持されます。例えば [1, [2], {a: 3}, "hello"] を flat() しても [1, 2, {a: 3}, "hello"] となり、{a: 3} や "hello" が展開されることはありません。これは期待通りの挙動であることが多いですが、意図しない場合は注意が必要です。
疎な配列 (Sparse Arrays) の扱い: flat()メソッドは、疎な配列の空スロット（要素が定義されていない場所）を保持します。例えば [1, , 3, [4, , 6]] を flat() すると [1, , 3, 4, , 6] となり、空スロットはそのまま残ります。これも仕様通りの挙動ですが、空スロットを取り除きたい場合は別途 filter() などを使用する必要があります。
depth: Infinity 使用時の注意点 (再掲): 前述の通り、非常に深いネストを持つ配列に対して flat(Infinity) を使う場合、理論的なスタック深度の制限やパフォーマンス、メモリ使用量について考慮が必要な場合があります（ただし、現代的なエンジンではあまり問題にならないことが多い）。

これらのメリットとデメリットを理解した上で、ご自身のプロジェクトの要件（特にサポート対象のJavaScript環境）に合わせてflat()メソッドの使用を検討することが重要です。モダンな環境であれば、その簡潔性とパフォーマンスの高さから、積極的に活用すべきメソッドと言えるでしょう。

flat() の代替手段 (歴史と実装例)

flat()メソッドが導入される前は、開発者は配列を平坦化するために様々な手法を自前で実装する必要がありました。これらの代替手段を知ることは、flat()メソッドの便利さをより深く理解することに繋がりますし、古い環境への対応や、特殊な要件がある場合に役立つこともあります。

ここでは、いくつかの代表的な代替手段とその実装例を見ていきましょう。特に、再帰的な平坦化を実現するための代替手段は、flat(Infinity)がいかに強力かを際立たせます。

1. 手動ループと再帰

これは最も基本的なアプローチです。新しい配列を用意し、元の配列をループしながら、要素が配列であれば再帰的に処理を行い、そうでない場合は新しい配列に追加します。

“`javascript
// 1レベルの平坦化 (再帰なし)
function flattenOneLevel(arr) {
const result = [];
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
for (let j = 0; j < arr[i].length; j++) {
result.push(arr[i][j]);
}
} else {
result.push(arr[i]);
}
}
return result;
}

const arr1 = [1, 2, [3, 4], 5];
console.log(flattenOneLevel(arr1)); // 出力: [1, 2, 3, 4, 5]

const arr2 = [1, [2, [3, 4]]];
console.log(flattenOneLevel(arr2)); // 出力: [1, 2, [3, 4]] (1レベルのみ)
“`

上記の1レベルの平坦化でも既にネストされたループが必要になり、少し読みにくいと感じるかもしれません。これを任意の深さ、特に完全に再帰的に平坦化しようとすると、再帰関数が必要になります。

“`javascript
// 任意の深さの平坦化 (再帰あり)
function flattenRecursive(arr, depth = 1) {
const result = [];
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
// 要素が配列であり、かつ指定された深さまでまだ潜れる場合
if (Array.isArray(element) && depth > 0) {
// 再帰的に呼び出し、結果をconcatで結合
result.push(…flattenRecursive(element, depth – 1));
// あるいは result = result.concat(flattenRecursive(element, depth – 1));
} else {
// 配列でない要素、または指定深さを超えたネストされた配列はそのまま追加
result.push(element);
}
}
return result;
}

// depth=1 (デフォルト)
const arr3 = [1, [2, 3], [4, [5, 6]]];
console.log(flattenRecursive(arr3)); // 出力: [1, 2, 3, [4, [5, 6]]]

// depth=Infinity に相当する実装にするには、depthのチェックを外すか、特別な値を渡す
function flattenFullyRecursive(arr) {
const result = [];
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
if (Array.isArray(element)) {
// 要素が配列なら、それを完全に平坦化して結果に追加
result.push(…flattenFullyRecursive(element));
} else {
// 配列でなければそのまま追加
result.push(element);
}
}
return result;
}

const deepArr = [1, [2, [3, [4, 5]]], 6];
console.log(flattenFullyRecursive(deepArr)); // 出力: [1, 2, 3, 4, 5, 6]
“`

手動での再帰実装は、再帰の考え方を理解していれば可能ですが、flat(Infinity) と比べると明らかにコード量が多く、複雑です。特に、深いネストに対してはスタックオーバーフローの懸念も考慮に入れる必要が出てきます。

2. reduce() と concat() の組み合わせ

reduce()メソッドは配列の要素を1つの値に畳み込む強力なツールです。これと concat() メソッドを組み合わせることで、配列を平坦化できます。

“`javascript
// 1レベルの平坦化
function flattenOneLevelWithReduce(arr) {
return arr.reduce((accumulator, currentValue) => {
// 現在の要素が配列であれば、accumulator と concat で結合
// 配列でなければ、accumulator に要素を push
return accumulator.concat(currentValue);
}, []); // 初期値として空の配列を指定
}

const arr4 = [1, [2, 3], 4, [5]];
console.log(flattenOneLevelWithReduce(arr4)); // 出力: [1, 2, 3, 4, 5]

const arr5 = [1, [2, [3, 4]]];
console.log(flattenOneLevelWithReduce(arr5)); // 出力: [1, 2, [3, 4]] (1レベルのみ)
“`

これは1レベルの平坦化であれば比較的簡潔に記述できます。しかし、これを再帰的に、任意の深さ（Infinity）まで平坦化しようとすると、reduceのコールバック内で再帰的にreduceを呼び出すか、別の再帰関数と組み合わせる必要があり、コードは再び複雑になります。

例えば、再帰的に平坦化する reduce ベースのポリフィルを実装しようとすると、以下のようになります。

“`javascript
// 再帰的な平坦化 (reduce + concat + 再帰)
function flattenFullyWithReduce(arr) {
return arr.reduce((accumulator, currentValue) => {
if (Array.isArray(currentValue)) {
// 要素が配列なら、それを完全に平坦化し、現在のaccumulatorと結合
return accumulator.concat(flattenFullyWithReduce(currentValue));
} else {
// 配列でなければ、accumulator に要素を追加 (concatでもpushでもOK)
return accumulator.concat(currentValue);
}
}, []);
}

const deepArr2 = [1, [2, [3]], 4, [[5, 6], 7]];
console.log(flattenFullyWithReduce(deepArr2)); // 出力: [1, 2, 3, 4, 5, 6, 7]
“`

このreduceを使った再帰的な実装も、flat(Infinity)に比べるとかなりコード量が多く、特にconcatの連続使用は、大きな配列に対してはパフォーマンス上の懸念（新しい配列の生成コスト）が生じる可能性もあります（多くのエンジンでは最適化されますが）。

3. スタックを使った非再帰的な平坦化

再帰的なアルゴリズムはコードが直感的になることが多いですが、深い再帰呼び出しはスタックオーバーフローの原因になることがあります。これを避けるために、明示的なスタックデータ構造を使って非再帰的に再帰処理をシミュレートする手法があります。平坦化もこの方法で実装できます。

“`javascript
// スタックを使った再帰的な平坦化 (非再帰)
function flattenFullyWithStack(arr) {
const stack = […arr]; // 元の配列の要素を初期スタックに入れる
const result = [];

// スタックが空になるまで繰り返す
while (stack.length > 0) {
    // スタックの末尾から要素を取り出す (LIFO)
    const element = stack.pop();

    // 要素が配列であれば、その要素を逆順にしてスタックに戻す
    // (スタックから pop されるときに元の順序になるように)
    if (Array.isArray(element)) {
         // concat を使わず、一つずつ push する方がパフォーマンスが良い場合がある
         for (let i = element.length - 1; i >= 0; i--) {
             stack.push(element[i]);
         }
        // あるいは stack.push(...element.reverse()); // reverse() は元の配列を変更するので注意
    } else {
        // 配列でなければ結果配列の先頭に追加
        // 注意：stack.pop() なので、結果配列は逆順になる。最後に reverse() が必要
        result.push(element);
    }
}

// スタックから pop された順序と元の配列の順序が逆になるため、最後に反転
return result.reverse();

}

// stack.shift() を使う (FIFO) と reverse() は不要だが、shift() は配列の先頭操作でコストが高い
function flattenFullyWithQueue(arr) {
const queue = […arr]; // 元の配列の要素を初期キューに入れる
const result = [];

// キューが空になるまで繰り返す
while (queue.length > 0) {
    // キューの先頭から要素を取り出す (FIFO)
    const element = queue.shift(); // パフォーマンス注意！

    if (Array.isArray(element)) {
        // 要素が配列であれば、その要素をキューに追加
         for (let i = 0; i < element.length; i++) {
             queue.push(element[i]);
         }
        // あるいは queue.push(...element);
    } else {
        // 配列でなければ結果配列に追加
        result.push(element);
    }
}

return result;

}

const deepArr3 = [1, [2, [3]], 4, [[5, 6], 7]];
console.log(flattenFullyWithStack(deepArr3)); // 出力: [1, 2, 3, 4, 5, 6, 7]
console.log(flattenFullyWithQueue(deepArr3)); // 出力: [1, 2, 3, 4, 5, 6, 7]
“`

スタックやキューを使った非再帰的な実装は、再帰深度の制限を回避できる可能性がありますが、コードはかなり複雑になり、直感的な理解が難しくなります。

4. ライブラリの利用

Lodashなどのユーティリティライブラリには、古くから配列の平坦化機能が提供されています。

“`javascript
// 例: Lodash の .flattenDepth と .flattenDeep
// ライブラリをインストール・インポートする必要があります
// import _ from ‘lodash’;

// .flattenDepth(array, [depth=1])
// console.log(.flattenDepth([1, [2, [3, [4]]]], 2)); // 出力: [1, 2, 3, [4]]

// .flattenDeep(array) – .flattenDepth(array, Infinity) と同等
// console.log(_.flattenDeep([1, [2, [3, [4]]]])); // 出力: [1, 2, 3, 4]
“`

これらのライブラリ関数はflat()メソッドが登場する前は非常に便利でしたが、ネイティブに同等の機能が提供された現在では、特に理由がなければネイティブのflat()を使う方が、外部ライブラリへの依存を減らせるため推奨されます。

これらの代替手段の実装例を見ることで、Array.prototype.flat()、特に flat(Infinity) が、いかに短く、そして意図が明確なコードで強力な機能を提供しているかがよく分かります。現代のJavaScript開発においては、これらの代替手段を自前で実装する機会はほとんどなくなり、特殊な要件がない限りはflat()を使用するのが最も良い選択肢と言えるでしょう。

flat() の応用例

flat()メソッドは、様々なシーンで配列の構造を整理するために役立ちます。ここではいくつかの具体的な応用例を見てみましょう。

例1: ファイルシステムのパスの平坦化

ネストされたディレクトリ構造を配列で表現し、そこに含まれるすべてのファイルパスを一つのフラットなリストとして取得したい場合。

“`javascript
const directoryStructure = [
‘/’,
[‘/documents’, [‘/documents/report.txt’, ‘/documents/image.png’]],
[‘/downloads’, [‘/downloads/file1.zip’]],
‘/config.sys’,
[‘/programs’, [‘/programs/app.exe’, [‘/programs/temp’, ‘/programs/temp/log.txt’]]]
];

// すべてのパスをフラットなリストに
const allPaths = directoryStructure.flat(Infinity);

console.log(allPaths);
/
出力:
[
‘/’,
‘/documents’,
‘/documents/report.txt’,
‘/documents/image.png’,
‘/downloads’,
‘/downloads/file1.zip’,
‘/config.sys’,
‘/programs’,
‘/programs/app.exe’,
‘/programs/temp’,
‘/programs/temp/log.txt’
]
/
“`

この例では、flat(Infinity) を使うことで、どんなに深い階層にファイルやディレクトリがあっても、すべてのパスを一つの配列にまとめることができています。

例2: 検索結果の統合

複数の検索ソースから結果がネストされた配列として返ってきた場合に、それらを統合して表示したい場合。

“`javascript
const searchResults = [
[{ title: ‘Result A1’ }, { title: ‘Result A2’ }], // Source A
[{ title: ‘Result B1’, subResults: [{ title: ‘Result B1.1’ }] }], // Source B (さらにネスト)
[], // Source C (結果なし)
[{ title: ‘Result D1’ }] // Source D
];

// すべての検索結果オブジェクトをフラットなリストに
const allResults = searchResults.flat(Infinity);

console.log(allResults);
/
出力:
[
{ title: ‘Result A1’ },
{ title: ‘Result A2’ },
{ title: ‘Result B1’, subResults: [ { title: ‘Result B1.1’ } ] }, // オブジェクトは展開されない
{ title: ‘Result B1.1’ },
{ title: ‘Result D1’ }
]
/

// 注意: 上記例の Source B の { title: ‘Result B1’, subResults: […] } というオブジェクト自体と、
// subResults 内のオブジェクトの両方が含まれています。
// もし、subResults の中身だけを取り出したいなど、より複雑な構造変換を伴う場合は、
// flatMap などと組み合わせるか、より複雑な処理が必要になります。
// flat はあくまで「配列要素」を展開するだけです。

// 例: subResults 内のタイトルだけをすべて集める
const allSubResultTitles = searchResults.flatMap(source =>
source.flatMap(item => {
// item 自体のタイトルと、subResults があればその中のタイトルの配列を返す
const titles = item.title ? [item.title] : [];
if (item.subResults && Array.isArray(item.subResults)) {
titles.push(…item.subResults.map(subItem => subItem.title));
}
return titles; // flatMap はここで返された配列を1レベル平坦化
})
);

console.log(allSubResultTitles);
/
出力:
[
‘Result A1’,
‘Result A2’,
‘Result B1’,
‘Result B1.1’,
‘Result D1’
]
/
// この例のように、単に flat するだけでなく、map や flatMap を組み合わせてデータの「形」を変換しながら平坦化することが多いです。
“`

例3: タグやカテゴリーの集計

複数のアイテムがそれぞれタグの配列を持っている場合に、すべてのアイテムのタグをまとめて集計したい場合。これは前述の flatMap の例でも示しましたが、flat と map でも実現できます。

“`javascript
const items = [
{ name: ‘Article 1’, tags: [‘programming’, ‘javascript’, ‘web’] },
{ name: ‘Article 2’, tags: [‘javascript’, ‘node.js’] },
{ name: ‘Article 3’, tags: [‘web’, ‘css’, ‘html’] },
{ name: ‘Article 4’, tags: [] } // タグなし
];

// 各アイテムからタグの配列を取り出す
const arrayOfTagArrays = items.map(item => item.tags);
console.log(arrayOfTagArrays); // 出力: [[‘programming’, ‘javascript’, ‘web’], [‘javascript’, ‘node.js’], [‘web’, ‘css’, ‘html’], []]

// それらを1レベル平坦化して、すべてのタグを一つの配列にする
const allTags = arrayOfTagArrays.flat(1); // flatMap(item => item.tags) と同等
console.log(allTags); // 出力: [“programming”, “javascript”, “web”, “javascript”, “node.js”, “web”, “css”, “html”]

// さらに重複を取り除く
const uniqueTags = […new Set(allTags)];
console.log(uniqueTags); // 出力: [“programming”, “javascript”, “web”, “node.js”, “css”, “html”]
“`

これらの例からも分かるように、flat()（特に flat(Infinity)）は、ネストされた配列構造を扱う際の様々なシナリオで、コードを大幅に簡潔にし、データ処理を効率化するのに役立ちます。

flat() を使う上での注意点

ここまでflat()メソッドの強力さと便利さを見てきましたが、適切に使用するためにいくつか注意すべき点があります。

非破壊的なメソッドである: flat()は常に新しい配列を返します。元の配列は一切変更されません。もし元の配列を直接平坦化したい場合は、mapなどで一度平坦化し、その結果を元の変数に再代入するか、ループを使って元の配列をクリアし、新しい要素をpushするなど別の手段を講じる必要があります。
“`javascript
const original = [1, [2, 3]];
const flattened = original.flat();
console.log(original); // [1, [2, 3]] – 変わらない
console.log(flattened); // [1, 2, 3]

// 元の配列を変更したければ
let mutableArray = [1, [2, 3]];
mutableArray = mutableArray.flat(); // 変数に再代入
console.log(mutableArray); // [1, 2, 3]
“`
非配列要素は展開されない: 繰り返しになりますが、flat()は配列要素のみをネスト解除します。数値、文字列、オブジェクト、null、undefinedなどの非配列要素は、深さに関わらずそのまま新しい配列に含まれます。
javascript const mixedArray = [1, [2, 'hello'], { a: 3 }, [[4, null], undefined]]; console.log(mixedArray.flat(Infinity)); // 出力: [1, 2, 'hello', { a: 3 }, 4, null, undefined] // オブジェクト {a: 3} や null, undefined は展開されていないことに注意
疎な配列 (Sparse Arrays) の扱い: 疎な配列に含まれる空スロットは、平坦化されても空スロットのまま保持されます。
javascript const sparseArray = [1, , 3, [4, , 6]]; console.log(sparseArray.flat()); // 出力: [1, <1 empty item>, 3, 4, <1 empty item>, 6] (ブラウザや環境によっては表示が異なる場合あり) console.log(sparseArray.flat(Infinity)); // 出力: [1, <1 empty item>, 3, 4, <1 empty item>, 6]
もし空スロットを取り除きたい場合は、filter()メソッドなどを後続して使用する必要があります。
javascript const denseArray = sparseArray.flat(Infinity).filter(() => true); // filterのコールバックは空スロットでは実行されない console.log(denseArray); // 出力: [1, 3, 4, 6]
パフォーマンスに関する考慮: ほとんどのケースでネイティブ実装は高速ですが、非常に巨大な配列や極端に深いネストに対して flat(Infinity) を使用する場合は、メモリ使用量や処理時間に注意が必要かもしれません。ただし、これは通常、数万レベルのネストや数百万単位の要素といった非常に特殊なケースに限られます。一般的なアプリケーションで遭遇するネストの深さであれば、ほとんど問題なく利用できます。
ブラウザ・環境対応: 前述の通り、flat()は比較的新しいメソッドです。サポートが必要な環境で利用可能か確認し、必要であればポリフィルを検討してください。MDNなどの互換性テーブルで確認できます。主要なモダンブラウザ（Chrome, Firefox, Safari, Edgeなど）の新しいバージョンでは問題なく利用できます。Node.jsでもバージョン11以降で利用可能です。

これらの注意点を踏まえてflat()メソッドを使用することで、予期しない挙動を避け、より堅牢なコードを書くことができます。

ポリフィルの実装例

古い環境でflat()メソッドが利用できない場合、自分で同等の機能を持つ関数を実装（ポリフィル）してArray.prototypeに追加することで、コードを変更せずにflat()を使用可能にすることができます。

ここでは、flat()メソッド、特にflat(Infinity)に相当する機能をポリフィルとして実装する簡単な例を示します。reduceと再帰を使ったアプローチが一般的です。

“`javascript
// Array.prototype.flat() のポリフィル (簡単な例)
// 本番環境ではより堅牢なポリフィルライブラリの利用を検討してください
if (!Array.prototype.flat) {
Array.prototype.flat = function(depth = 1) {
// depth が Infinity の場合は特別な処理
if (depth === Infinity) {
return this.reduce(function(accumulator, currentValue) {
// 要素が配列なら再帰的に完全に平坦化して結合
// 配列でないならそのまま結合
return accumulator.concat(Array.isArray(currentValue) ? currentValue.flat(Infinity) : currentValue);
}, []);
} else if (depth > 0) {
// depth > 0 の場合は指定レベルまで平坦化
return this.reduce(function(accumulator, currentValue) {
// 要素が配列なら指定レベル-1 で再帰的に平坦化して結合
// 配列でないならそのまま結合
return accumulator.concat(Array.isArray(currentValue) ? currentValue.flat(depth – 1) : currentValue);
}, []);
} else {
// depth が 0 以下の場合、または非数値（NaN扱いで0になる）の場合は浅いコピー
return Array.from(this); // あるいは this.slice()
}
};
}

// ポリフィルが適用された環境で flat() を使用する例
const arr = [1, [2, [3, [4]]]];
console.log(arr.flat(2)); // 出力: [1, 2, 3, [4]]
console.log(arr.flat(Infinity)); // 出力: [1, 2, 3, 4]
console.log(arr.flat(0)); // 出力: [1, [2, [3, [4]]]]

// 疎な配列の扱いはポリフィルによって異なる可能性があるが、ネイティブに合わせるならfilterは別途必要
const sparseArr = [1, , 3, [4, , 6]];
console.log(sparseArr.flat()); // ネイティブと同じく空スロットが保持される挙動を目指すなら実装を調整
“`

このポリフィルは、reduce と再帰を組み合わせて depth の値に応じて平坦化レベルを制御しています。depth === Infinity の場合は再帰的に自身 (flat(Infinity)) を呼び出し、それ以外の正の深さの場合は depth - 1 で再帰呼び出しを行っています。depth が 0 以下の場合は浅いコピーを返します。

ただし、実際のポリフィル実装では、疎な配列の扱いや、パフォーマンス、エッジケース（非数値引数など）への対応など、さらに考慮すべき点が多くあります。本番環境でポリフィルを使用する場合は、core-js や polyfill.io のような、広くテストされ、標準仕様に忠実に実装されたライブラリを利用することを強く推奨します。

まとめ

この記事では、JavaScriptのArray.prototype.flat()メソッドについて、その基本的な使い方から始まり、引数 depth による詳細な制御、そして depth: Infinity を使った強力な再帰的な平坦化機能に焦点を当てて解説しました。

flat()メソッドは、ネストされた配列をシンプルかつ効率的に平坦化するための、モダンJavaScriptにおける標準的な機能です。特に flat(Infinity) は、どんなに深いネストであっても一行のコードで完全に平坦化できるため、かつては手動で複雑な再帰ロジックを実装する必要があったタスクを劇的に簡素化します。

また、map()と組み合わせたflatMap()メソッドについても触れ、それぞれのメソッドがどのようなユースケースに適しているかを比較しました。flat()が任意の深さの平坦化に強いのに対し、flatMap()は「変換してから1レベル平坦化」という特定のパターンに特化しており、どちらも配列操作の表現力を高める重要なツールです。

さらに、flat()を使用する上でのメリット・デメリット、そして古い環境への対応としてポリフィルの必要性や実装の考え方についても触れました。手動ループやreduce/concatを使った代替手段と比較することで、flat()の簡潔性と可読性の高さが際立つことも確認しました。

現代のJavaScript開発において、配列の平坦化は非常に一般的なタスクです。Array.prototype.flat()メソッドを正しく理解し、特に depth: Infinity を活用することで、あなたのコードはよりシンプルに、より読みやすく、そして多くの場合より効率的になるでしょう。

ネストされた配列に遭遇した際は、ぜひこの強力なflat()メソッドを思い出して活用してみてください。配列操作の幅が大きく広がるはずです。