JavaScript 配列の絞り込み：filter・find・some の使い方

配列から「条件に合う要素だけ取り出す」には filter・find・findIndex・some・every を使います。何を確認したいかによって使い分けます。

早わかりまとめ

メソッド	戻り値	向いている用途
`filter`	新しい配列	条件に合う要素をすべて取り出す
`find`	要素 or undefined	条件に合う最初の要素を1つ取り出す
`findIndex`	インデックス or -1	条件に合う最初の要素の位置を調べる
`some`	boolean	1つでも条件を満たすか確認する
`every`	boolean	すべて条件を満たすか確認する
`includes`	boolean	特定の値が含まれるか確認する

filter：条件に合う要素をすべて取り出す

const numbers = [1, 2, 3, 4, 5, 6]

// 偶数だけ取り出す
const evens = numbers.filter((n) => n % 2 === 0)
console.log(evens) // [2, 4, 6]

// 3より大きい数
const big = numbers.filter((n) => n > 3)
console.log(big) // [4, 5, 6]

オブジェクトの配列でよく使います。

const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false },
  { id: 3, name: 'Carol', active: true },
]

// アクティブなユーザーだけ
const activeUsers = users.filter((user) => user.active)
// [{ id: 1, name: 'Alice', ... }, { id: 3, name: 'Carol', ... }]

条件に合う要素がなければ空配列 [] を返します（undefined にはなりません）。

find：条件に合う最初の1件を取り出す

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carol' },
]

// id が 2 のユーザーを1件取得
const user = users.find((u) => u.id === 2)
console.log(user) // { id: 2, name: 'Bob' }

条件に合う要素がない場合は undefined を返すため、存在確認が必要です。

const found = users.find((u) => u.id === 99)
console.log(found) // undefined

// 安全に使う
if (found) {
  console.log(found.name)
}

filter との違い：filter は全件返す・find は最初の1件だけ返す。

findIndex：インデックスで位置を調べる

const fruits = ['apple', 'banana', 'cherry']

const index = fruits.findIndex((f) => f === 'banana')
console.log(index) // 1

// 見つからない場合は -1
const notFound = fruits.findIndex((f) => f === 'grape')
console.log(notFound) // -1

splice で削除するときなど、インデックスが必要なケースで使います。

// banana を配列から削除
const idx = fruits.findIndex((f) => f === 'banana')
if (idx !== -1) {
  fruits.splice(idx, 1)
}
console.log(fruits) // ['apple', 'cherry']

some：1つでも条件を満たすか確認する

const scores = [40, 55, 70, 80]

// 60点以上が1つでもあるか
const hasPassed = scores.some((score) => score >= 60)
console.log(hasPassed) // true

// 全員が60点以上か確認
const allPassed = scores.every((score) => score >= 60)
console.log(allPassed) // false（40点がいる）

some は条件に合う要素が見つかった時点で処理を止めます（find と同様）。

every：すべて条件を満たすか確認する

const items = [
  { name: 'A', inStock: true },
  { name: 'B', inStock: true },
  { name: 'C', inStock: false },
]

// すべての商品が在庫ありか
const allInStock = items.every((item) => item.inStock)
console.log(allInStock) // false

includes：特定の値が含まれるか確認する

const colors = ['red', 'green', 'blue']

console.log(colors.includes('green')) // true
console.log(colors.includes('yellow')) // false

includes はオブジェクトの比較には使えません（参照比較になるため）。オブジェクトを探す場合は find や some を使います。

まとめ

したいこと	使うもの
条件に合う要素をすべて取り出す	`filter`
条件に合う最初の要素を1つ取り出す	`find`
条件に合う最初の要素の位置を調べる	`findIndex`
1つでも条件を満たすか確認する	`some`
すべて条件を満たすか確認する	`every`
特定の値が含まれるか確認する	`includes`

配列の繰り返し処理（forEach・map・for...of）は「JavaScript 配列の繰り返し：forEach・map・for...of の使い分け」を参照してください。