JavaScript配列の変換＋平坦化（flatMap）の基本と実践
「mapで変換した結果が配列になってしまう → そのままでは二重配列になる」
そんなときに便利なのが flatMap。mapとflatを同時にやってくれるので、初心者でもスッキリ書けます。
構文と考え方
const result = arr.flatMap((value, index, array) => {
// valueを変換して返す
return /* 新しい値 または 配列 */;
});
- 返り値: 新しい配列（元の配列は変更されない）
- 特徴: mapで返した結果が配列なら、それを1階層だけ自動で平坦化してくれる
- 深さ: flatMapは常に「1階層」だけ平坦化。もっと深く平坦化したいならflatを使う
すぐ使えるテンプレート集
基本：配列の中の配列を取り出す
const data = [
{ id: 1, items: ["A", "B"] },
{ id: 2, items: ["C"] },
{ id: 3, items: ["D", "E"] },
];
const allItems = data.flatMap(x => x.items);
console.log(allItems); // ["A", "B", "C", "D", "E"]
- ポイント: mapなら
[["A","B"],["C"],["D","E"]]になるが、flatMapなら自動で平坦化される。
文字列を分割して平坦化
const sentences = ["Hello world", "Nice day"];
const words = sentences.flatMap(s => s.split(" "));
console.log(words); // ["Hello", "world", "Nice", "day"]
- ポイント: mapだと
[["Hello","world"],["Nice","day"]]になるが、flatMapなら[ "Hello","world","Nice","day" ]。
条件付きで要素を返す（フィルタ的な使い方）
const nums = [1, 2, 3, 4, 5];
const evenOrEmpty = nums.flatMap(n => (n % 2 === 0 ? [n] : []));
console.log(evenOrEmpty); // [2, 4]
- ポイント: 条件に合わないときは空配列を返す → 自動で消える。filterのように使える。
map＋flatの違いを比較
const arr = [1, 2, 3];
const mapped = arr.map(n => [n, n * 2]);
console.log(mapped); // [[1,2],[2,4],[3,6]]
const flatMapped = arr.flatMap(n => [n, n * 2]);
console.log(flatMapped); // [1,2,2,4,3,6]
- ポイント: flatMapは「mapの結果を1階層だけ平坦化」する。
よくある落とし穴と対策
- 深いネストは解消できない: flatMapは1階層だけ。2階層以上はflatを使う。
- 返り値を配列にしないと平坦化されない: 単一値を返すと普通のmapと同じ挙動。
- 副作用目的で使うのは不向き: flatMapは「変換＋平坦化」専用。副作用ならforEachを選ぶ。
他メソッドとの使い分け
| 手段 | 主な用途 |
|---|---|
| map | 変換（そのまま二重配列になることも） |
| flat | ネスト配列を平坦化 |
| flatMap | 変換＋1階層平坦化を同時に |
| filter | 条件で選別（flatMapでも空配列返しで代用可能） |
練習問題（手を動かして覚える）
1. 配列の中のitemsを全部取り出す
const data = [
{ id: 1, items: ["A", "B"] },
{ id: 2, items: ["C"] },
];
console.log(data.flatMap(x => x.items)); // ["A","B","C"]
2. 文章を単語に分割して平坦化
const sentences = ["I love JS", "flatMap is handy"];
console.log(sentences.flatMap(s => s.split(" ")));
// ["I","love","JS","flatMap","is","handy"]
3. 偶数だけ残す（空配列返し）
const nums = [1,2,3,4,5];
console.log(nums.flatMap(n => (n%2===0 ? [n] : []))); // [2,4]
直感的な指針
- 「変換した結果が配列になる」＋「そのまま平坦化したい」 → flatMap
- 「変換だけ」 → map
- 「平坦化だけ」 → flat