filter と find
このレッスンで分かること
filterは 条件を満たす全要素、新しい配列を返すfindは 最初の 1 件、見つからなければundefinedsomeは 少なくとも 1 つ が条件を満たすか、everyは 全部 が満たすか- 全て元の配列を変更しない (非破壊)
filter と find とは
条件に合う要素を抽出するfilterと、最初の一致を見つけるfindを使いこなそう。本レッスンでは、filter と find の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
filter と find
配列から条件に合う要素を抽出するメソッドを学びましょう。
filter：条件に合う全要素を抽出
JavaScript
const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(n => n % 2 === 0); // [2, 4, 6]find：最初の一致要素を返す
JavaScript
const users = [{ name: "太郎", age: 25 }, { name: "花子", age: 30 }];
const found = users.find(u => u.age > 28); // { name: "花子", age: 30 }some / every
JavaScript
[1, 2, 3].some(n => n > 2); // true（1つでも条件を満たす）
[1, 2, 3].every(n => n > 0); // true（全て条件を満たす）この問題では、商品リストをフィルタリングし、条件判定を組み合わせた分析関数を実装しましょう。
実務で遭遇するパターン
中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。
- 検索結果のフィルタリング ─
products.filter(p => p.category === selected) - 特定ユーザー検索 ─
users.find(u => u.id === id) - バリデーション ─
errors.some(e => e.severity === "critical") - 全件チェック ─
items.every(i => i.completed)で完了確認
コードレビューで指摘されがちなポイント
PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。
filter(...)[0]─findを使うべき、全件走査せず最初の一致で打ち切るため平均的に速いincludesで済むのにfind─ 単純な存在確認はincludesのほうが意図明確!filter(...).length─everyか!someで書き直しfilterチェーンが長すぎ ─ 条件を 1 つの関数にまとめると読みやすい
パフォーマンス考慮事項
findは早期終了 ─ 見つかった瞬間に止まるsome/everyも早期終了 ─ 条件が決まった瞬間に止まるfilterは全件走査 ─ 大量データならSet/Mapでインデックス化- 配列メソッドは新配列を作る ─ メモリ使用量に注意、巨大データはストリーミング処理
ここまでの要点
全件抽出は filter、1 件は find、存在確認は some / includes、全件チェックは every。filter()[0] ではなく find を使う。
よくある質問
Q. filter と find の違いは？
A. filter は条件を満たす要素を全部集めて配列で返し、find は最初に見つかった 1 件だけ返します。1 件だけ欲しいなら find の方が短絡評価で速く、空のとき undefined（Python の next は StopIteration）になる点に注意してください。
Q. filter の戻り値が空配列のときの扱いは？
A. JS の filter は常に配列を返すため、空でも .length で安全にチェックできます。Python の filter はイテレータを返すので list() で囲んでから使うか、内包表記 [x for x in items if cond] の方が分かりやすいことが多いです。
Q. filter と map をチェーンしても性能は大丈夫ですか？
A. 通常規模なら問題ありません。配列を 2 周することになるため、要素数が数百万を超える場合だけ reduce にまとめるか、JS なら array.reduce で 1 周にすることを検討してください。可読性は filter→map のチェーンが分かりやすいです。
次のレッスン
次は reduce で、条件に合う要素を抽出するfilterと、最初の一致を見つけるfindを使いこなそう を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- filter と find の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. filter と find とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
入出力例
test-cases.txt
analyzeProducts([{"name":"りんご","price":200,"stock":5},{"name":"バナナ","price":100,"stock":3},{"name":"メロン","price":15000,"stock":1}], 100, 1000) → {"allInStock":true,"cheapest":"バナナ","filtered":["りんご","バナナ"],"hasExpensive":true}
analyzeProducts([{"name":"A","price":500,"stock":0},{"name":"B","price":300,"stock":2}], 200, 600) → {"allInStock":false,"cheapest":"B","filtered":["A","B"],"hasExpensive":false}
analyzeProducts([{"name":"X","price":100,"stock":1}], 200, 300) → {"allInStock":true,"cheapest":null,"filtered":[],"hasExpensive":false}