JavaScript | find / filter / some / every — 図解でスッキリ理解

初心者向けに、違いを「何を返すか」「いつ使うか」「挙動の図」をコード例つきでまとめます。イメージしやすいように同じデータで比較します。

const users = [
  { name: '太郎', age: 15 },
  { name: '花子', age: 20 },
  { name: '次郎', age: 25 },
  { name: '三郎', age: 20 }
];

const users = [
  { name: '太郎', age: 15 },
  { name: '花子', age: 20 },
  { name: '次郎', age: 25 },
  { name: '三郎', age: 20 }
];

1. 概要（一言で）

• find(predicate) → 条件を満たす最初の要素そのもの を返す（見つからなければ undefined）。
• filter(predicate) → 条件を満たす全要素の配列 を返す（該当がなければ []）。
• some(predicate) → 条件を満たすものが「1つでも」あるか？ を true/false で返す。
• every(predicate) → 全ての要素が条件を満たすか？ を true/false で返す（空配列は true）。

2. 図でイメージ（配列インデックス表示）

配列（インデックス）：

0:{太郎,15}  1:{花子,20}  2:{次郎,25}  3:{三郎,20}

条件：age >= 20

• find → 最初に条件を満たした 1つ目（インデックス1）を返す
  結果: {花子,20}
• filter → 条件を満たす 全て を集めて配列で返す
  結果: [{花子,20}, {三郎,20}, {次郎,25}]（順番は元配列の順）
• some → 条件を満たす要素が 1つでもあれば true
  結果: true
• every → 全ての要素が条件を満たすかチェック（この例は false）
  結果: false

3. 実際のコード例（動かして確認しよう）

const users = [
  { name: '太郎', age: 15 },
  { name: '花子', age: 20 },
  { name: '次郎', age: 25 },
  { name: '三郎', age: 20 }
];

// find: 条件を満たす「最初の要素」を返す
const firstAdult = users.find(u => u.age >= 20);
console.log(firstAdult); // { name: '花子', age: 20 }

// filter: 条件を満たす「全て」を配列で返す
const adults = users.filter(u => u.age >= 20);
console.log(adults); // [{花子,20}, {次郎,25}, {三郎,20}]

// some: 条件を満たすものが「あるか」だけを調べる
const hasAdult = users.some(u => u.age >= 20);
console.log(hasAdult); // true

// every: 全員が条件を満たすかを調べる
const allAdults = users.every(u => u.age >= 20);
console.log(allAdults); // false

const users = [
  { name: '太郎', age: 15 },
  { name: '花子', age: 20 },
  { name: '次郎', age: 25 },
  { name: '三郎', age: 20 }
];

// find: 条件を満たす「最初の要素」を返す
const firstAdult = users.find(u => u.age >= 20);
console.log(firstAdult); // { name: '花子', age: 20 }

// filter: 条件を満たす「全て」を配列で返す
const adults = users.filter(u => u.age >= 20);
console.log(adults); // [{花子,20}, {次郎,25}, {三郎,20}]

// some: 条件を満たすものが「あるか」だけを調べる
const hasAdult = users.some(u => u.age >= 20);
console.log(hasAdult); // true

// every: 全員が条件を満たすかを調べる
const allAdults = users.every(u => u.age >= 20);
console.log(allAdults); // false

4. 使い分けの簡単ルール（実務で役立つ）

• 「最初の1つがほしい」 → find
• 「条件に合うもの全部がほしい」 → filter
• 「条件に合うものが存在するかだけ知りたい」 → some（早期終了して速い）
• 「全員が条件を満たしているか確認したい」 → every

5. 挙動の注意点（初心者がハマりやすいポイント）

• find は見つからないと undefined を返す（誤って if (result) で判定すると、要素が 0 や '' の場合に誤判定することがある）。
• filter は常に配列を返す（空配列 [] になるだけ）。
• some と every は 真偽値 を返す。どちらもコールバックが真になるとループを早期終了する（効率的）。
• コールバックは (element, index, array) の引数を受け取れる（index が必要なら使える）。
• 元の配列は変更しない（pure な検索操作）。

6. よくある用途例

• 検索ワードに合う最初のヒットを表示 → find
• フィルタリングして一覧を作る（例：未完了のTODOを全部抽出） → filter
• バリデーション「条件を満たすユーザーがいるか」 → some
• すべてのユーザーがメール承認済みか確認 → every

7. ミニ・クイズ（答えは下に）

配列 nums = [2, 4, 7, 8]。条件は「奇数か？」（n % 2 !== 0）。

1. 奇数の最初の要素を取得するのはどれ？
2. 奇数が存在するかだけ調べるのはどれ？
3. 配列から奇数を全部取り出すのはどれ？
4. 全てが奇数か確認するのはどれ？

答え
1 → find（7）
2 → some（true）
3 → filter（[7]）
4 → every（false）

各メソッドが配列上でどの要素を対象にするかを視覚的に示します（配列は左→右）。

See the Pen Array Search Methods SVG by MONO365 -Color your days- (@monoqlo365) on CodePen.

補足

• この図は「条件が C または E に当てはまる」想定です。
• 実際にコードで条件を変えると、図のハイライトも変わるイメージです（find は常に最初のマッチ、filter は全マッチ、some/every は真偽値を返す点を押さえてください）。

目的

• find, filter, some, every の「どこまで探索するか」をアニメーションで視覚化
• 初心者でも「どこで止まる？ 何を返す？」が一目でわかる

See the Pen Find / Filter / Some / Every Animation Diagram by MONO365 -Color your days- (@monoqlo365) on CodePen.

このアニメ図のポイント