JS
filter
中級読み方：フィルター｜英語：Filter
配列から条件に合う要素だけを取り出して新しい配列を作るメソッドだよ。いつ使う？ 18歳以上のユーザーだけ抽出したい、完了済みのタスクだけ表示したいなど、条件で絞り込むときに使うよ。間違いやすいポイント: コールバックはtrue/falseを返す必要があるよ。trueを返した要素だけが残る。何も返さないと全部消えるよ。
やさしい説明
filterは、配列から条件に合う要素だけを取り出すメソッドです。元の配列は変更されません。
「テストで80点以上の人だけ抽出する」「未完了のTODOだけ表示する」のように、条件でデータを絞り込むときに使います。
コールバック関数が true を返した要素だけが新しい配列に含まれます。
具体例・使い方
// 2より大きい数だけ取り出す
[1, 2, 3, 4, 5].filter(x => x > 2); // [3, 4, 5]
// 18歳以上のユーザーだけ
const adults = users.filter(u => u.age >= 18);
// 空文字を除外
["a", "", "b", ""].filter(s => s !== ""); // ["a", "b"]
// mapと組み合わせる（よくあるパターン）
users
.filter(u => u.active) // アクティブなユーザーだけ
.map(u => u.name); // 名前だけ取り出すいつ使う？
検索結果の絞り込み、条件に合うデータの抽出、不要なデータの除外に使います。ECサイトの価格フィルター、TODOの完了/未完了切り替えなどが典型例です。
間違いやすいポイント
❌ filterとfindを混同する
filter は条件に合う「全要素」を配列で返します。find は条件に合う「最初の1つ」だけを返します。1つだけ欲しいなら find を使いましょう。
よくある疑問
Q: filterの書き方は？
A: const adults = users.filter(u => u.age >= 18); 条件に合う要素だけの新しい配列が返ります。
Q: filterとfindの違いは？
A: filterは条件に合う「全ての要素」を配列で返す。findは条件に合う「最初の1つ」だけを返します。
Q: filterで元の配列は変わる？
A: いいえ。filterは新しい配列を作って返します。元の配列はそのままです。
関連用語
📖 関連レッスン
レッスンを見る →