flat で「1階層だけネストを崩す」イメージ
arr.flat()
flat は、「ネストされた配列を、1階層だけ平らにする（フラットにする）」ためのメソッドです。 天才プログラマー視点で言うと、「配列の中に配列が入っていて扱いづらいとき、まず flat を思い出せ」というくらい便利な道具です。
「[1, [2, 3], [4, 5]] みたいな配列を、[1, 2, 3, 4, 5] にしたい」 まさにそのためのメソッドが flat() です。
flat の基本構造と「1階層だけ平坦化される」仕組み
const arr = [1, [2, 3], [4, 5]];
const r = arr.flat();
console.log(r); // [1, 2, 3, 4, 5]
console.log(arr); // [1, [2, 3], [4, 5]]（元の配列はそのまま）
ここで起きていることを丁寧に分解します。 flat() は、配列の中にある「1階層分の配列」を崩して、中身を同じレベルに並べ直します。 つまり、「配列の中の配列を、1段だけ取り除いて中身を表に出す」イメージです。
重要なのは、デフォルトでは“1階層だけ”という点です。 深いネストがあっても、何段も一気に崩すわけではありません。
例題：APIレスポンスなどでよくある「配列の配列」を扱いやすくする
const pages = [
["Aki", "Mika"],
["Ken", "Aya"],
["Taro"]
];
const allNames = pages.flat();
console.log(allNames); // ["Aki", "Mika", "Ken", "Aya", "Taro"]
ここでのポイントはこうです。 元の配列 pages は「ページごとの名前リスト」が入った配列です。 flat() を使うことで、「全ページ分の名前を1本の配列にまとめる」ことができます。
「配列の配列を、1本の配列にしたい」という場面は、実務でかなり頻繁に出てきます。
flat の「深さ」を指定する話を少しだけ深掘りする
デフォルトの flat() は「1階層だけ」平坦化します。 しかし、ネストがもっと深い場合もあります。
const arr = [1, [2, [3, [4]]]];
console.log(arr.flat()); // [1, 2, [3, [4]]]
console.log(arr.flat(2)); // [1, 2, 3, [4]]
console.log(arr.flat(3)); // [1, 2, 3, 4]
ここで重要なのは、引数に「どこまで崩すか（深さ）」を指定できるという点です。 初心者のうちはまず flat()（=1階層）を覚え、 「ネストが深いときは flat(2) みたいに数字を増やす」と理解しておくと十分です。
例題：map と flat を組み合わせて「変換＋平坦化」する
よくあるパターンとして、map と flat を組み合わせる使い方があります。
const users = [
{ name: "Aki", tags: ["js", "web"] },
{ name: "Mika", tags: ["design"] },
{ name: "Ken", tags: ["js", "backend"] }
];
const allTagsNested = users.map(u => u.tags);
console.log(allTagsNested);
// [["js", "web"], ["design"], ["js", "backend"]]
const allTags = allTagsNested.flat();
console.log(allTags);
// ["js", "web", "design", "js", "backend"]
ここでの流れはこうです。 まず map で「タグ配列だけ」を取り出し、その結果は「配列の配列」になります。 次に flat() でそのネストを崩し、「すべてのタグを1本の配列」にします。
「map で取り出す → flat で平坦化する」というコンボは、プロの現場でもかなり頻出です。
よくあるミスと注意点を深掘りする
まず、flat() は 元の配列を変更しないことが重要です。 新しい配列を返すので、必ず変数に代入して使います。
const arr = [1, [2, 3]];
arr.flat(); // これだけだと結果は捨てられる
console.log(arr); // [1, [2, 3]]
const r = arr.flat();
console.log(r); // [1, 2, 3]
もうひとつの注意点は、「1階層だけ」しか崩れないことを忘れないことです。 ネストが深いのに flat() だけで全部崩れると思い込むと、意図しない結果になります。 深さを意識して、必要なら flat(2) や flat(3) を使うようにしましょう。
まとめ：flat は「配列のネストを1段だけ崩すための整形ツール」
flat を使いこなせると、配列の扱いやすさが一気に変わります。 配列の中に配列が入っていて、扱いづらいと感じたとき。 「これ、1本の配列にしたいんだよな」と思ったとき。
arr.flat() と書けるようになることが、配列整形の世界への入り口です。 そこから先は、map や filter と組み合わせて、 「変換してから平坦化」「抽出してから平坦化」といった、より“プロっぽい”配列処理へ自然に進んでいけます。