条件に一致する要素だけを含む新しい配列を返す
// ── 基本: 条件に合う要素だけ残す ────────────────────────
const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]
// ※ 元の nums は変わらない(非破壊)
// ── オブジェクト配列の絞り込み ──────────────────────────
const users = [
{ name: '田中', age: 20, active: true },
{ name: '鈴木', age: 17, active: false },
{ name: '佐藤', age: 25, active: true },
];
// 18歳以上かつアクティブなユーザーだけ
const eligible = users.filter(u => u.age >= 18 && u.active);
// [{ name: '田中', ... }, { name: '佐藤', ... }]
// ── falsy な値を除去 ────────────────────────────────────
const data = [0, 1, '', 'hello', null, undefined, 42];
const valid = data.filter(Boolean);
// [1, 'hello', 42] ← 0・''・null・undefined が除去される
// ── 検索フィルター(Reactでよく使うパターン)───────────
const [query, setQuery] = useState('');
const filtered = items.filter(item => item.name.includes(query));
// ── TypeScript: 型ガードで型を絞り込む ─────────────────
const values: (string | null)[] = ['a', null, 'b', null];
// v is string の型ガードで戻り値が string[] になる
const strs = values.filter((v): v is string => v !== null);
// strs は string[] 型として扱われるfilter()は条件に一致する要素だけを抽出した新しい配列を返します。TypeScriptの型ガード((v): v is Type)と組み合わせると返り値の型を絞り込めます。map()と組み合わせてデータのフィルタリング→変換というパターンが頻出です。
array.filter(callbackFn(element, index?, array?) => boolean)
callbackFnFunctiontrueを返した要素が新しい配列に含まれるコールバックがtrueを返した要素のみを含む新しい配列。マッチしない場合は空配列。
TypeScriptでは型ガード関数を渡すと返り値の型が絞り込まれる。