JavaScriptのfilter()とは？配列の絞り込みを徹底解説

JavaScriptのfilter()は、配列の中から条件に合う要素だけを抽出するためのメソッドです。
データの選別や検索など、実務でも頻繁に使用される重要な機能のひとつです。

本記事では、filter()の基本から実践的な使い方までを体系的に解説します。

filter()とは

filter()は、配列の各要素をチェックし、条件を満たしたものだけを新しい配列として返すメソッドです。

元の配列は変更されず、新しい配列が生成される点が特徴です。

基本構文

array.filter(callback(element, index, array))

引数の説明

filter()の基本的な使い方

最も基本的な使い方は、条件に合う要素を抽出することです。

例：偶数だけを取り出す

// filter-even.js
const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(function (num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6]

この例では、num % 2 === 0の条件を満たす要素だけが抽出されています。

アロー関数でシンプルに書く

アロー関数を使うことで、より簡潔に記述できます。

// filter-arrow.js
const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

アロー関数については、以下の記事で詳しく解説しています。
→ JavaScriptのアロー関数とは？基本から使い方まで徹底解説

オブジェクト配列の絞り込み

filter()は、オブジェクトの配列にもよく使われます。

例：条件に合うユーザーを抽出

// filter-object.js
const users = [
  { name: "田中", age: 25 },
  { name: "佐藤", age: 30 },
  { name: "鈴木", age: 20 }
];

const adults = users.filter((user) => user.age >= 25);

console.log(adults);
// [{ name: "田中", age: 25 }, { name: "佐藤", age: 30 }]

複数条件で絞り込む

複数の条件を組み合わせることも可能です。

// filter-multiple.js
const products = [
  { name: "A", price: 1000, inStock: true },
  { name: "B", price: 2000, inStock: false },
  { name: "C", price: 1500, inStock: true }
];

const result = products.filter(
  (product) => product.price >= 1200 && product.inStock
);

console.log(result);
// [{ name: "C", price: 1500, inStock: true }]

空配列になるケース

条件に合う要素がない場合は、空配列が返されます。

// filter-empty.js
const numbers = [1, 3, 5];

const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // []

元の配列は変更されない

filter()は非破壊的なメソッドです。

// filter-non-destructive.js
const numbers = [1, 2, 3];

const result = numbers.filter((num) => num > 1);

console.log(numbers); // [1, 2, 3]
console.log(result);  // [2, 3]

map()との違い

filter()とよく比較されるのがmap()です。

// filter-vs-map.js
const numbers = [1, 2, 3, 4];

// filter：条件に合うものだけ
const filtered = numbers.filter((num) => num > 2);

// map：すべて変換
const mapped = numbers.map((num) => num * 2);

console.log(filtered); // [3, 4]
console.log(mapped);   // [2, 4, 6, 8]

map()については以下で詳しく解説しています。
→ JavaScriptのmap()とは？配列処理の基本から実践まで徹底解説

find()との違い

似たメソッドにfind()があります。

// filter-vs-find.js
const numbers = [1, 2, 3, 4];

const filtered = numbers.filter((num) => num > 2);
const found = numbers.find((num) => num > 2);

console.log(filtered); // [3, 4]
console.log(found);    // 3

実務でよくある使い方

実務では、検索や条件抽出で使われることが多いです。

例：検索機能の実装

// filter-search.js
const items = ["apple", "banana", "orange", "grape"];

const keyword = "ap";

const result = items.filter((item) =>
  item.includes(keyword)
);

console.log(result); // ["apple", "grape"]

注意点

returnを忘れると結果が空になる

// filter-mistake.js
const numbers = [1, 2, 3, 4];

const result = numbers.filter((num) => {
  num > 2; // returnがない
});

console.log(result); // []

正しい書き方はこちらです。

// filter-correct.js
const numbers = [1, 2, 3, 4];

const result = numbers.filter((num) => {
  return num > 2;
});

console.log(result); // [3, 4]

filter()と高階関数の関係

filter()は関数を引数として受け取る「高階関数」です。

高階関数については、以下の記事で詳しく解説しています。
→ JavaScriptの高階関数とは？基本から実務での使い方まで徹底解説

まとめ

• filter()は条件に合う要素を抽出するメソッド
• 元の配列は変更されない（非破壊）
• オブジェクト配列にもよく使われる
• map()やfind()との違いを理解することが重要

配列操作の中でも特に使用頻度が高いため、確実に理解しておくことが重要です。

関連記事

• JavaScriptのmap()とは？配列処理の基本から実践まで徹底解説
• JavaScriptのfind()とは？最初の要素を取得する方法
• JavaScriptの高階関数とは？基本から実務での使い方まで徹底解説
• JavaScriptのアロー関数とは？基本から使い方まで徹底解説