filter() は JavaScript の配列メソッドの中でもとてもよく使われるもので、
「配列から特定の条件を満たす要素だけを取り出す」ために使います。
filter()の使い方
🧩 基本構文
const 新しい配列 = 元の配列.filter((要素, インデックス, 配列全体) => {
return 条件式; // true の要素だけ残る
});
要素：配列の各値
インデックス：現在のインデックス番号（0, 1, 2...）
配列全体：元の配列（mapと同じく3番目の引数で参照可能）
return に true を返した要素だけ が残ります。
✅ 通常の書き方
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => {
return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
✅ 例2：省略記法（暗黙のreturn）
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
✔️ このように、
波かっこ {} を外すと自動で return される
1行の式のみ に使える
というルールです。
🎯 例２：オブジェクト配列のフィルター
const users = [
{ name: "Taro", age: 15 },
{ name: "Hanako", age: 22 },
{ name: "Ken", age: 30 },
];
const adults = users.filter(user => user.age >= 20);
console.log(adults);
// [{ name: "Hanako", age: 22 }, { name: "Ken", age: 30 }]
👉 条件に合うオブジェクトだけを抽出できます。
🔍 例３：第3引数（配列全体）を使う
「平均より大きい要素だけを抽出したい」ような場合👇
const numbers = [10, 20, 30, 40];
const result = numbers.filter((num, index, array) => {
const average = array.reduce((sum, n) => sum + n, 0) / array.length;
return num > average; // 平均より大きい要素だけ残す
});
console.log(result); // [30, 40]
ここでも、array は numbers（元配列）そのものです。
✅ まとめ
メソッド名: filter()
返り値: 条件を満たす要素だけを含む 新しい配列
元の配列: 変更されない（非破壊的）
よく使う用途: 検索・絞り込み・除外処理