JavaScriptのfilter()入門｜配列から条件に合う要素を抽出する

filter()は、配列の各要素に対して条件判定を行い、条件を満たす要素だけを集めた新しい配列を返すメソッドです。データの検索やフィルタリングなど、実務で非常によく使われます。元の配列を変更しないため、安全にデータを絞り込むことができます。

基本的な使い方

filter()メソッドは、コールバック関数がtrueを返した要素だけを含む新しい配列を作成します。falseを返した要素は除外されます。

JavaScript

// 基本構文
const filtered = array.filter(function(element, index, array) {
  return 条件式; // trueなら残す、falseなら除外
});

// アロー関数を使った書き方
const filtered = array.filter(element => 条件式);

コールバック関数はmap()と同様に、現在の要素・インデックス・元の配列の3つの引数を受け取ります。戻り値がtruthyなら要素が残り、falsyなら除外されます。

JavaScript

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 偶数だけを抽出
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens);

// 5より大きい数を抽出
const large = numbers.filter(num => num > 5);
console.log(large);

実行結果

[2, 4, 6, 8, 10]
[6, 7, 8, 9, 10]

条件に一致する要素がない場合は空の配列[]が返されます。エラーにはならないため、結果のlengthをチェックすることで該当データの有無を確認できます。

オブジェクト配列のフィルタリング

実務で最もよく使うパターンは、オブジェクトの配列から特定の条件に合うレコードを抽出する処理です。

JavaScript

const employees = [
  { name: "田中", department: "開発部", age: 28, active: true },
  { name: "佐藤", department: "営業部", age: 35, active: true },
  { name: "鈴木", department: "開発部", age: 42, active: false },
  { name: "高橋", department: "開発部", age: 31, active: true },
  { name: "伊藤", department: "総務部", age: 27, active: true }
];

// 開発部のメンバーだけを抽出
const devTeam = employees.filter(emp => emp.department === "開発部");
console.log(devTeam.map(e => e.name));

// アクティブかつ30歳以上のメンバー
const seniorActive = employees.filter(emp => emp.active && emp.age >= 30);
console.log(seniorActive.map(e => e.name));

実行結果

["田中", "鈴木", "高橋"]
["佐藤", "高橋"]

複数条件を組み合わせる場合は、&&（AND）や||（OR）を使います。条件が複雑になる場合は、判定用の関数を別に定義すると可読性が向上します。

実践的な活用例

filter()はmap()やreduce()とチェーンして使うことで、データの絞り込みから変換までを一連の処理として記述できます。

JavaScript

const products = [
  { name: "ノートPC", price: 89000, category: "電子機器", inStock: true },
  { name: "マウス", price: 3500, category: "電子機器", inStock: true },
  { name: "デスク", price: 45000, category: "家具", inStock: false },
  { name: "チェア", price: 32000, category: "家具", inStock: true },
  { name: "モニター", price: 55000, category: "電子機器", inStock: true }
];

// 在庫ありの電子機器を価格順に表示
const result = products
  .filter(p => p.category === "電子機器" && p.inStock)
  .sort((a, b) => a.price - b.price)
  .map(p => `${p.name}: ¥${p.price.toLocaleString()}`);

console.log(result);

// 重複を除去する（filter + indexOf）
const values = [1, 2, 3, 2, 4, 1, 5, 3];
const unique = values.filter((val, index, arr) => arr.indexOf(val) === index);
console.log(unique);

実行結果

["マウス: ¥3,500", "モニター: ¥55,000", "ノートPC: ¥89,000"]
[1, 2, 3, 4, 5]

filter()とfind()の使い分け

filter()は条件に合うすべての要素を配列で返しますが、find()は条件に合う最初の1つを返します。1件だけ取得したい場合はfind()の方が効率的です。

注意点

filter()は浅いコピーを行うため、オブジェクトの配列をフィルタリングした場合、新しい配列の要素は元のオブジェクトへの参照です。フィルタリング後に要素を変更すると、元の配列にも影響します。必要に応じてstructuredClone()で深いコピーを行いましょう。

まとめ

filter()はコールバックがtrueを返す要素だけを集めた新しい配列を返す
元の配列は変更されない（イミュータブルな操作）
条件に一致する要素がなければ空の配列が返される
map()やsort()とチェーンして複雑なデータ処理が可能
1件だけ必要な場合はfind()を使う方が効率的