JS
filter
中級読み方：フィルター｜英語：Filter
配列から条件に合う要素だけを取り出して新しい配列を作るメソッドだよ。
やさしい説明
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"]
// 特定の値を除外
const nums = [1, 2, 3, 4, 5];
const without3 = nums.filter(n => n !== 3); // [1, 2, 4, 5]実際のUI開発での使い方
// TODOアプリ: 未完了タスクだけ表示
const todos = [
{ id: 1, text: "買い物", done: false },
{ id: 2, text: "勉強", done: true },
{ id: 3, text: "運動", done: false },
];
const active = todos.filter(todo => !todo.done);
// [{ id: 1, ... }, { id: 3, ... }]
// 検索機能: キーワードで絞り込む
const keyword = "react";
const results = articles.filter(a =>
a.title.toLowerCase().includes(keyword)
);
// mapと組み合わせる（よくあるパターン）
const activeNames = users
.filter(u => u.active) // アクティブなユーザーだけ
.map(u => u.name); // 名前だけ取り出すfilter と map の組み合わせは非常によく使われます。「絞り込んでから変換する」という流れで、データの加工をシンプルに書けます。
filter・find・findIndexの使い分け
- filter — 条件に合う「全要素」を配列で返す。複数取り出したいとき
- find — 条件に合う「最初の1要素」を返す。1つだけ欲しいとき
- findIndex — 条件に合う「最初の要素のインデックス」を返す。位置を知りたいとき
const users = [
{ id: 1, name: "太郎", admin: false },
{ id: 2, name: "花子", admin: true },
{ id: 3, name: "次郎", admin: false },
];
users.filter(u => !u.admin); // [太郎, 次郎]（配列）
users.find(u => u.admin); // 花子（1つだけ）
users.findIndex(u => u.admin); // 1（インデックス）いつ使う？
- 検索結果の絞り込みUI（キーワード・カテゴリ・価格フィルター）
- TODOの完了/未完了切り替え表示
- 配列から不要な要素（null・空文字・重複）を除外するとき
- APIレスポンスから条件に合うデータだけを取り出すとき
間違いやすいポイント
❌ filterとfindを混同する
filter は条件に合う「全要素」を配列で返します。find は条件に合う「最初の1つ」だけを返します。1つだけ欲しいなら find を使いましょう。
❌ 元の配列が変更されると思う
filter は元の配列を変更しません。新しい配列を返すので、結果を変数に受け取る必要があります。arr.filter(...) だけでは結果が捨てられます。
よくある疑問
Q: filterの書き方は？
A: const adults = users.filter(u => u.age >= 18); 条件に合う要素だけの新しい配列が返ります。
Q: filterとfindの違いは？
A: filterは条件に合う「全ての要素」を配列で返す。findは条件に合う「最初の1つ」だけを返します。
Q: filterで元の配列は変わる？
A: いいえ。filterは新しい配列を作って返します。元の配列はそのままです。
関連用語
📖 関連レッスン
レッスンを見る →