配列メソッド早見表 — やりたいことから選ぶチートシート

JavaScriptで最も触る機会が多いデータ構造は配列です。 APIのレスポンスを加工する、フォームの入力値をまとめる、UIにリストを表示する——ほぼすべての場面で配列が登場します。

学習者

map とか filter とか、名前は聞くけど…結局どれをいつ使えばいいのか毎回迷っちゃう。

このページは、配列メソッドをやりたいことから逆引きする入口です。 詳しい使い方は各ページへ分けているので、迷ったらまずこの早見表から探してください。

配列メソッドとは — Array インスタンスのメソッドという意味

[1, 2, 3].map(...) のように配列に対して .map() を呼べるのは、配列が Array コンストラクタのインスタンスだからです。

const arr = [1, 2, 3];
 
console.log(arr instanceof Array); // true
console.log(typeof arr); // "object"（配列もオブジェクトの一種）

JavaScriptでは、[] というリテラルで配列を作ると、内部的には new Array() と同等のオブジェクトが生成されます。 そして、すべての Array インスタンスは Array.prototype というオブジェクトからメソッドを継承しています。

console.log(arr.hasOwnProperty('map')); // false
console.log(Array.prototype.hasOwnProperty('map')); // true

配列っぽく見えるが Array インスタンスではないもの（例: document.querySelectorAll() の戻り値である NodeList）では、そのままでは .map() が使えません。

const nodes = document.querySelectorAll('div');
// nodes.map(...) → TypeError: nodes.map is not a function
 
Array.from(nodes).map((node) => node.textContent);

やりたいことから選ぶ早見表

詳しく読む順番

1. 変換・絞り込み・集約

まずは map・filter・reduce です。 実務で最もよく使う組み合わせで、APIレスポンスの整形、リスト表示、集計処理の基礎になります。

配列の変換メソッド — map・filter・reduce で詳しく扱います。

2. 検索・判定

「1件だけ探す」「条件を満たすものがあるか確認する」場面では find・findIndex・some・every を使います。 filter で全部取るべきか、find で1件だけ取るべきかを分けられると、コードの意図が読みやすくなります。

配列の検索・判定メソッド — find・some・every で詳しく扱います。

3. コピー・結合・浅いコピー

slice・concat・スプレッド構文は、元の配列を壊さずに新しい配列を作るときの基本です。 ただし、オブジェクトが入った配列では浅いコピーの落とし穴があります。

配列のコピー・結合メソッド — slice・concat・浅いコピー で詳しく扱います。

4. 破壊的メソッド

push・pop・splice・sort・reverse・fill などは、元の配列を直接変更します。 ReactなどのUI実装では、状態を直接変更しないために非破壊の代替を選ぶことが多いです。

配列の破壊的メソッド — sort・splice・push と非破壊の代替 で詳しく扱います。

5. 初期化・平坦化

fill は配列の初期化、flat・flatMap はネストした配列の処理で使います。 特に fill にオブジェクトや配列を渡すと同じ参照が入る点は、実務でよくハマります。

配列の初期化・平坦化メソッド — fill・flat・flatMap で詳しく扱います。

戻り値で整理する

配列メソッドは「何を返すか」で見ると整理しやすくなります。

破壊的・非破壊的メソッド早見表

配列メソッドは、**元の配列を直接変更する「破壊的メソッド」**と、**元の配列はそのままに新しい配列や値を返す「非破壊メソッド」**に分けられます。

ちゃんと使うためのポイント

• 変換は map、絞り込みは filter、集約は reduce
• 「1件だけ欲しい」なら find、「全部欲しい」なら filter
• 「あるかどうか」だけなら some / every / includes
• 元の配列を壊したくないときは slice・concat・スプレッド構文・ES2023の非破壊代替を使う
• reduce は万能だが読みにくくなりがち。map + filter で書けるなら分けた方が明快
• 破壊的メソッド（sort / reverse / splice / fill）と非破壊メソッドの区別を意識する

次は、実務で最もよく使う 配列の変換メソッド — map・filter・reduce を詳しく見ていきます。

参考リンク

• MDN — Array
• MDN — Array.prototype.map
• MDN — Array.prototype.filter
• MDN — Array.prototype.reduce

JavaScriptクイズに挑戦するこの章で学んだJavaScriptの知識を、4択クイズでアウトプットして定着させよう