【配列メソッド早見表】やりたいことから選ぶチートシート
この章の目次開く
先生詳しい使い方は各ページへ分けているので、迷ったらまずこの早見表から探してください。
やりたいことから選ぶ早見表
| やりたいこと | 使うメソッド | 詳細 |
|---|---|---|
| 新しい配列を作りたい | 配列リテラル [] | 配列の初期化・平坦化メソッド |
| 各要素を別の形に変換したい | map | 配列の変換メソッド |
| 各要素に処理を実行したい | forEach | 配列の変換メソッド |
| 条件に合う要素だけ残したい | filter | 配列の変換メソッド |
| 配列全体を1つの値にまとめたい | reduce | 配列の変換メソッド |
| 最大値を求めたい | Math.max / reduce | 配列の変換メソッド |
| 複数の加工をつなげたい | メソッドチェーン | 配列の変換メソッド |
| 最初の1件を探したい | find | 配列の検索・判定メソッド |
| 最初のインデックスを探したい | findIndex / indexOf | 配列の検索・判定メソッド |
| 1つでも条件を満たすか確認したい | some | 配列の検索・判定メソッド |
| すべて条件を満たすか確認したい | every | 配列の検索・判定メソッド |
| 値が含まれるか確認したい | includes | 配列の検索・判定メソッド |
| 配列の一部を取り出したい | slice | 配列のコピー・結合メソッド |
| 配列を結合したい | concat | 配列のコピー・結合メソッド |
| コピーしつつ要素を足したい | スプレッド構文 | 配列のコピー・結合メソッド |
| 配列を文字列にしたい | join | 文字列操作と正規表現 |
| 配列ではないものから配列を作りたい | Array.from | 配列の初期化・平坦化メソッド |
| 同じ値で埋めたい | fill | 配列の初期化・平坦化メソッド |
| ネストした配列を平坦化したい | flat | 配列の初期化・平坦化メソッド |
| 変換して平坦化したい | flatMap | 配列の初期化・平坦化メソッド |
| 重複を取り除きたい | new Set + スプレッド | Map・Set |
| 並び替えたい | sort / toSorted | 配列の破壊的メソッド |
| 逆順にしたい | reverse / toReversed | 配列の破壊的メソッド |
| 末尾に追加・削除したい | push / pop | 配列の破壊的メソッド |
| 先頭に追加・削除したい | unshift / shift | 配列の破壊的メソッド |
| 途中を挿入・削除・置換したい | splice / toSpliced | 配列の破壊的メソッド |
| 1要素だけ差し替えたい（非破壊） | with | 配列の破壊的メソッド |
詳しく読む順番
1. 変換・絞り込み・集約
まずは map・filter・reduce です。
実務で最もよく使う組み合わせで、APIレスポンスの整形、リスト表示、集計処理の基礎になります。
各要素にログや通知などの副作用だけを実行したいときは forEach を使います。
配列の変換メソッド — map・filter・reduce・forEach で詳しく扱います。
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. 作成・初期化・平坦化
配列リテラル [] と Array.from は配列を新しく作るとき、fill は配列の初期化、flat・flatMap はネストした配列の処理で使います。
特に fill にオブジェクトや配列を渡すと同じ参照が入る点は、実務でよくハマります。
配列の初期化・平坦化メソッド — fill・flat・flatMap で詳しく扱います。
戻り値で整理する
配列メソッドは「何を返すか」で見ると整理しやすくなります。
| 戻り値 | メソッド | 例 |
|---|---|---|
| 新しい配列 | map / filter / slice / concat / flat / flatMap | 元配列を壊さず加工する |
undefined | forEach | 副作用だけ実行する |
| 1つの値 | reduce | 合計、集計、グルーピング |
要素 or undefined | find | ID一致の1件を探す |
| 数値 | findIndex / indexOf | 位置を探す |
boolean | some / every / includes | 条件チェック |
| 変更後の元配列 | push / splice / sort / reverse / fill | 破壊的操作 |
破壊的・非破壊的メソッド早見表
配列メソッドは、**元の配列を直接変更する「破壊的メソッド」**と、**元の配列はそのままに新しい配列や値を返す「非破壊メソッド」**に分けられます。
| 種類 | メソッド |
|---|---|
| 破壊的 | push / pop / shift / unshift / splice / sort / reverse / fill / copyWithin |
| 非破壊 | map / filter / reduce / forEach / find / findIndex / some / every / slice / concat / flat / flatMap / includes / join |
| ES2023の非破壊代替 | toSorted / toReversed / toSpliced / with |
破壊的メソッドとES2023の非破壊代替の対応は、配列の破壊的メソッド に一覧があります。
補足: なぜ配列は .map() を呼べるのか
[1, 2, 3].map(...) のように配列に対して .map() を呼べるのは、配列が Array コンストラクタのインスタンスだからです。
const arr = [1, 2, 3];
console.log(arr.hasOwnProperty('map')); // false
console.log(Array.prototype.hasOwnProperty('map')); // truehasOwnProperty は「そのオブジェクト自身が直接持っているプロパティか」だけを調べるメソッドで、継承元まではさかのぼりません。
arr 自身が持っているのは、要素のインデックスと length だけです。
console.log(Object.getOwnPropertyNames(arr)); // ['0', '1', '2', 'length']では、なぜ持っていない map を呼べるのか。
arr.map(...) と書くと、JavaScriptは arr 自身 → Array.prototype → Object.prototype の順にプロパティを探しにいき、Array.prototype で見つけた map を呼び出します。
この「探しにいく道筋」がプロトタイプチェーンです。
つまり配列メソッドは、配列ひとつひとつにコピーされているわけではなく、Array.prototype に1セットだけ存在し、すべての配列がそれを共有しています。
配列を1000個作ってもメソッドの実体は増えません。
配列っぽく見えるが Array インスタンスではないもの（例: document.querySelectorAll() の戻り値である NodeList）では、そのままでは .map() が使えません。
Array.from を使えば、配列風オブジェクトを本物の配列に変換できます。
const nodes = document.querySelectorAll('div');
// nodes.map(...) → TypeError: nodes.map is not a function
Array.from(nodes).map((node) => node.textContent);ちゃんと使うためのポイント
-
変換は
map、絞り込みはfilter、集約はreduce、副作用はforEach - 「1件だけ欲しい」なら
find、「全部欲しい」ならfilter - 「あるかどうか」だけなら
some/every/includes - 元の配列を壊したくないときは
slice・concat・スプレッド構文・ES2023の非破壊代替を使う reduceは万能だが読みにくくなりがち。map+filterで書けるなら分けた方が明快- 破壊的メソッド（
sort/reverse/splice/fill）と非破壊メソッドの区別を意識する
次は、実務で最もよく使う 配列の変換メソッド — map・filter・reduce・forEach を詳しく見ていきます。
参考リンク
- MDN — Array
- MDN — Array.prototype.map
- MDN — Array.prototype.forEach
- MDN — Array.prototype.filter
- MDN — Array.prototype.reduce