JavaScript配列の条件抽出（filter）の基本と実践
「条件に合う要素だけを取り出して新しい配列を作りたい」なら、filterが最短で安全。元の配列は変えず、判定関数がtrueを返した要素だけが残ります。書き味はシンプルで、読みやすさも高いのが魅力です。
構文とポイント
const result = arr.filter((value, index, array) => {
// 条件式を返す（true の要素だけ残る）
return /* 条件式（true/false） */;
});
- 役割: 各要素に対して条件を評価し、trueの要素だけからなる新しい配列を返します（元配列は不変）。
- 引数: コールバックには最大3つ（value, index, array）が渡され、必要ならインデックスや元配列を参照できます。
- 戻り値: “選別”された新しい配列。filter自体は必ず最後まで走査します（途中終了は不可）。
- thisArg: 第2引数にthisとして使う値を渡せます（利用場面は限定的だが、OOP風に書きたいときに便利）。
すぐ使えるテンプレート集
数値を閾値で絞り込み（基本）
const nums = [5, 12, 8, 130, 44];
const over10 = nums.filter(n => n > 10);
console.log(over10); // [12, 130, 44]
- ポイント: 「条件を返す」だけに集中。読みやすい一行にもできる。
偶数だけ抽出
const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4]
- ポイント: 判定は自由。複数条件は論理演算子で組み合わせます。
文字列の空・null・undefined除去
const raw = ["", "Aki", null, "Ren", undefined];
const clean = raw.filter(Boolean);
console.log(clean); // ["Aki", "Ren"]
- ポイント: Booleanをそのまま渡す“定番テク”で、truthyだけ残す。
オブジェクト配列の条件抽出（例：20歳以上）
const users = [
{ name: "Aki", age: 19 },
{ name: "Mao", age: 22 },
{ name: "Ren", age: 17 },
];
const adults = users.filter(u => u.age >= 20);
console.log(adults); // [{name:"Mao", age:22}]
- ポイント: プロパティ条件でスッキリ選別。
よくある落とし穴と対策
- 返り値を忘れる問題
- 症状: すべてfalse相当になり、空配列や意図しない結果に。
- 対策: アロー関数を「式戻り」で書く（波括弧を外す）と、return忘れを防げます。
- 途中終了したい問題
- 落とし穴: filterは全要素を評価し、途中終了はできません。
- 対策: 早期終了が必要ならfor/for…ofを使う。filterは“選別して新配列を返す”用途に特化。
- 副作用を混ぜる問題
- 落とし穴: filter内で外部状態を更新すると、意図が曖昧に。
- 対策: 副作用中心はforEachへ。filterは「条件で残す」ことに専念。
組み合わせで強くなるパターン
- filter → map（先に絞ってから変換）
const names = [" aki ", "", "Ren", null];
const normalized = names
.filter(Boolean)
.map(s => s.trim().toUpperCase());
// ["AKI", "REN"]
- filterの連鎖（段階的に絞る）
const nums = [3, 10, 12, 25, 30];
const result = nums
.filter(n => n >= 10)
.filter(n => n % 5 === 0);
// [10, 25, 30]
- indexやarrayの活用（重複除去の一例）
- ポイント: 第3引数arrayで重複チェックなどの応用が可能。
const arr = ["A", "B", "A", "C"];
const unique = arr.filter((v, i, a) => a.indexOf(v) === i);
// ["A", "B", "C"]
他メソッドとの使い分け
| 手段 | 目的 | 元配列の変更 | 返り値 |
|---|---|---|---|
| filter | 条件で選別 | しない | 新しい配列 |
| map | 形を変える | しない | 新しい配列 |
| find | 最初の一致1件取得 | しない | 要素 or undefined |
| forEach | 副作用中心（ログ/DOM/push） | 任意 | なし |
練習問題（手を動かして覚える）
- 10より大きい数だけ取り出す
const nums = [2, 5, 11, 3, 20];
const over10 = nums.filter(n => n > 10);
console.log(over10); // [11, 20]
- 名前に「a」を含むユーザーだけ抽出（大文字小文字無視）
const users = [{name:"Aki"}, {name:"Mao"}, {name:"Ren"}];
const withA = users.filter(u => u.name.toLowerCase().includes("a"));
console.log(withA); // [{name:"Aki"}, {name:"Mao"}]
- 無効値を除去して、偶数だけ残す
const values = [null, 2, 5, undefined, 8, 11];
const even = values.filter(Number.isFinite).filter(n => n % 2 === 0);
console.log(even); // [2, 8]