配列から条件に合う要素を探したいとき、単一の条件なら簡単にこなせるけれど、複数の条件を組み合わせたい場面も多いです。特に「JavaScript find 複数 条件」を調べている人は、AND／OR／複数プロパティの組み合わせなど、実用的で効率のいい方法を知りたいはずです。そこでこの記事では、最新情報を踏まえて、複数条件で find を使う方法を丁寧に解説します。一度読めば、どんな場面でも対応できるようになります。
目次
JavaScript find 複数 条件を使って最初の一致を取得する方法
JavaScript の find() メソッドは、配列で指定したテスト関数が true を返す最初の要素を返し、それ以降の検索は行いません。この性質を活かして、複数条件を組み込むことで「複数 条件」の検索が可能です。AND 条件や OR 条件をテスト関数内で論理演算子を使って記述すれば、find() で複数条件を満たす最初の要素を取得できます。
コールバック関数に渡す引数（要素、インデックス、元の配列）を活用すれば、単純な比較から複雑なプロパティチェックまで柔軟に対応できます。
例えば、オブジェクト配列でプロパティ “type” が “a” または “b” のもの、かつ別のプロパティ “status” が “active” のものを最初に見つけたいときなど、以下のように書きます：
const result = arr.find(item => (item.type === 'a' || item.type === 'b') && item.status === 'active');この例では ||（OR）と &&（AND）を組み合わせて複数条件を指定しています。これで「何か OR 条件を満たし、さらに AND 条件も満たす」最初の要素が取得できます。
AND 条件で絞る／完全一致を要求する
複数のフィールドをすべて満たす要素を探したいときは論理演算子 && を使ってすべての条件を結びます。例えば、name が “Alice”、age が 30 のユーザーを探すような場合です。こうするとそれら双方を満たす要素だけを返します。
ただし条件が増えるとコールバックの読みやすさが低下するため、動的に条件を作成するユーティリティ関数を使うと見通しが良くなります。
OR 条件でいずれかを満たせばよい検索
複数条件のうちどれか1つでも成立すれば良い場合は || を使います。ただし OR 条件だけだと AND 条件と組み合わせた際の優先順位に注意が必要です。必要に応じて丸括弧でグループ化すると誤解を防げます。特に OR 条件が複数あり、AND と混在させる場合にはです。
動的条件をオブジェクトや配列を使って扱う
検索条件を予めオブジェクトや配列として用意しておき、条件を動的に生成するパターンが実用的です。例えば filtering 設定がユーザーの入力によって変わるような状況です。criteria オブジェクトにキー・値をセットし、それを使って Object.keys(criteria).every() や some() で条件をチェックし、find のコールバックでその関数を呼び出す形が一般的です。
この方法なら条件の数や種類が変わってもコードの構造を崩さず管理できます。
複数条件で find を使うメリットと注意点
複数条件を find で使うことには多くのメリットがあります。ただし用途に応じて filter や some、findIndex などとの使い分けが必要になります。
主なメリット：
- 最初の一致で探索を終了するので、検索のパフォーマンスが高くなる場合がある。
- 返り値が要素そのものなので値を直接扱いやすい。
- AND／OR 条件を柔軟に組み合わせられるので複雑な検索要件にも対応可能。
注意点：
- 複雑な条件をコールバック内で書き過ぎると可読性が下がる。
- 要素が見つからなかったときは
undefinedが返るので、それに対応する処理が必要。 - filter とは異なり、複数一致するものをすべて取りたい場合には使えない。
filter や some, findIndex との比較
filter() は条件を満たすすべての要素を配列で返します。一方で find() は最初の一致で停止して要素を返します。some() は条件を満たす要素が存在するかを真偽値で返し、findIndex() は一致する要素のインデックスを返します。
パフォーマンス的には、配列が大きくなるほど find は始めに条件を満たす要素が早く出現する場合に強くなります。filter は最後まで走るため、無駄なチェックが発生しやすくなります。
AND／OR 混在の複雑な条件を扱う実践的なユースケース
実際の現場では、AND と OR を組み合わせた複雑なフィルタが求められることが多いです。検索インターフェース、管理画面の絞り込み、ロギングや通知など、条件が動的に変化する場面で find を使う例を見てみましょう。
ユースケース例：
- ユーザーオブジェクト配列から、role が “admin” or “moderator” のユーザーで、status が “active” かつ lastLogin が過去 7 日以内の最初の人を取得。
- 商品リストから price が指定範囲内であり、tag 配列に指定タグを含むものを探す。
ユースケース例 1：ロールとステータスで条件を混在させる
例えば次のようなコードです：
const users = [ {name:'A', role:'admin', status:'active', lastLogin: '2026-05-03'}, ... ];
const result = users.find(u =>
(u.role === 'admin' || u.role === 'moderator')
&& u.status === 'active'
&& (new Date(u.lastLogin) > Date.now() - 7 * 24 * 60 * 60 * 1000)
);このクロージャで OR と AND の組み合わせを使い、日付の比較も含めています。動的条件でもこの構造を保てば管理しやすいです。
ユースケース例 2：配列プロパティの中に複数のタグを含むかどうか
商品タグが配列になっている場合、あるタグを含むかどうかを調べるには includes() を使います。さらに複数タグを要求するなら every() や some() を組み合わせます。例えば「タグ A とタグ B のいずれか」、「あるいは両方」を条件にした検索が可能です。
例：
const result = products.find(p =>
p.price < 100
&& ['electronics', 'gadget'].some(t => p.tags.includes(t))
);find を使う際のパフォーマンス考慮とベストプラクティス
find を複数条件で使うとき、特に大きな配列や複雑な条件の場合、パフォーマンスを考慮することが重要です。最新情報によると、filter を複数回重ねるよりも 1 回の find や filter の中で条件をまとめて書くほうが速度やメモリ効率で優れます。
以下が良い実践例です：
- 条件の中で重い処理（正規表現、日付変換など）は最後に持ってくる。
- 頻度の高い条件を先に評価する。
- 動的条件時は不要なプロパティチェックを避けるために条件オブジェクトのキーを検証する。
- Null や undefined のチェックを忘れずに行う。
評価順とショートサーキット
論理演算子 && や || は左から順に評価されます。したがって、高コストな条件やプロパティがない可能性のある部分は後ろに回すと無駄な処理を減らせます。OR 条件でも同じ原理です。
動的条件でのデフォルト値やフォールバック
条件がユーザー入力で変わるような場合、条件が未指定のプロパティや値もありえます。そのときにはデフォルト値を設定したり、条件オブジェクトから存在するキーのみ使って検査するロジックを組むと堅牢になります。
まとめ
JavaScript の find を使って複数の条件で最初の一致を取得する方法を整理してきました。AND／OR を用いた組み合わせや、動的条件、タグを含む配列プロパティのチェックなど、多様なケースに対応できるようになります。
find は条件を満たす最初の要素で検索を停止するので、大きな配列で特定の要素を探す場面では特に効率的です。
ただし、複数要素を取得したいときや一致するかどうかだけ知りたいときには filter や some を併用するほうが適切です。
コードの見通しや保守性を保つために、条件の順序や動的条件の取り扱い、デフォルト処理をしっかり設計することが成功の鍵です。
コメント