配列の中から特定の要素を見つけたいけれど、条件がひとつじゃ足りない――そんな時が誰にでもあります。JavaScriptで「複数条件」をどう書いたらよいか悩んでいませんか。findメソッドを使ってAND／ORなどの論理演算を組み合わせる方法、配列の中身がオブジェクトの場合の実装例、動的に条件を指定するテクニックなどをやさしく整理します。読めば「JavaScript find 複数 条件」の疑問がすべて解消できる内容です。
目次
JavaScript find 複数 条件を使った基本的な使い方
まずはfindメソッドの基本と、複数条件を組み込むための書き方を押さえましょう。findは配列を先頭から走査して、条件を満たす最初の要素を返します。条件がひとつならシンプルですが、複数の条件を使う場合は論理演算子を使って組み合わせる必要があります。AND（すべて満たす）なら&&、OR（どれかひとつで良い）なら||を使います。複雑な条件式を関数に切り出したり、ネストさせたりすることで見通しのよいコードにできます。
AND条件を使う例
AND条件とは、複数の条件をすべて満たす要素を見つけたい場合です。findのコールバック内で条件A && 条件B のように書きます。例えばオブジェクト配列で「age が 30 未満 かつ status が active」であるものを探すといった使い方です。すべての条件が true である最初の要素が返され、それ以外はundefinedになります。
次のようなコードが一般的です。
const users = [ {name: ‘A’, age:25, status: ‘active’}, {name: ‘B’, age:35, status: ‘active’}, {name: ‘C’, age:28, status:’inactive’} ];
const result = users.find(u => u.age < 30 && u.status === 'active');
この例では name ‘A’ のオブジェクトが見つかります。
OR条件を使う例
OR条件を使うのは、複数の条件のうちどれかひとつでも満たせばよい場合です。find のコールバックで条件A || 条件B のように書きます。例えば「name が ‘X’ であるか age が 40 以上であるか」を探すケースなどです。複数の OR を使うことで柔軟な検索が可能ですが、処理の順序や短絡評価（先に真になった時点でそれ以降を評価しない仕組み）も理解しておく必要があります。
AND と OR を組み合わせる応用例
現実の要件は AND だけ、あるいは OR だけで済むことは少なく、組み合わせが必要になることが多いです。例えば「age が 20 以上かつ country が ‘Japan’、または status が ‘pending’」といった条件です。このような場合、(条件1 && 条件2) || 条件3 という形で条件式をグループ化します。かっこで囲むことで評価順を制御しやすくなります。
応用例コード：
const result = users.find(u => (u.age >= 20 && u.country === ‘Japan’) || u.status === ‘pending’);
このように組み合わせれば複雑な検索要件にも対応できます。
配列要素がオブジェクトの場合の複数条件検索
配列の要素がオブジェクトである場合、プロパティを複数チェックしたい要件がよくあります。例えばユーザーオブジェクトで「性別」「年齢」「地域」など複数フィールドを条件にするケースです。ここではプロパティ名が一致するか、数値の範囲チェック、文字列部分一致など、頻出するパターンを具体例付きで説明します。実務でそのまま使えるコードが身につきます。
プロパティの値一致で検索
最も基本的なパターンは、プロパティの値が期待する定数と一致するかをチェックすることです。例えば user.role === ‘admin’ && user.active === true のような条件です。このような一致チェックならコードが明瞭でバグも少なくなります。find のコールバックで複数のプロパティを && でつなぐ形です。
コード例：
const users = [ {name:’Alice’, role:’admin’, active:true}, {name:’Bob’, role:’user’, active:true}, {name:’Carol’, role:’admin’, active:false} ];
const adminActive = users.find(u => u.role === ‘admin’ && u.active === true);
結果は Alice のオブジェクトになります。
数値範囲チェックとの組み合わせ
年齢や価格など、数値が「〜以上」「〜未満」などの範囲内であることを条件にするパターンです。プロパティの数値を比較演算子でチェックし、さらに別のプロパティとの組み合わせをする場合、&& を使って AND 条件を追加します。OR 条件を使えば複数の範囲のうちどれか一つでも合致するものも可能です。
コード例：
const products = [ {name:’A’, price:100, stock:50}, {name:’B’, price:200, stock:0}, {name:’C’, price:150, stock:30} ];
const affordableInStock = products.find(p => p.price 0);
この場合、 name ‘C’ の商品が返されます。 price 0 の両方を満たしています。
文字列部分一致や正規表現との組み合わせ
文字列フィールドにおいて、完全一致でなくても「含む」「始まる」「パターンにマッチする」などを使う場面があります。このような場合、文字列メソッド（includes, startsWith, match など）や正規表現を使って判定し、それを他の条件と組み合わせます。正規表現は強力ですが読みやすさを考えてシンプルな表現で使うと保守性が高まります。
コード例：
const items = [ {title:’JavaScript入門’, tags:[‘js’,’プログラミング’]}, {title:’Python講座’, tags:[‘python’,’学習’]}, {title:’上級JS’, tags:[‘js’,’応用’]} ];
const hasJsAndAdvanced = items.find(i => i.tags.includes(‘js’) && i.title.match(/^上級/));
この例では「タグに js を含む」かつ「タイトルが上級ではじまる」要素が対象です。
動的条件や関数で抽象化する方法
検索条件がコード中で固定されていない場合、例えばユーザー入力や設定によって条件が変わるケースがあります。そのような動的な条件を扱うためのパターンを学んでおけばコードの再利用性が高まります。条件オブジェクトを受け取る関数をつくる、条件関数を外部に切りだす、配列の演算子を組み立てる、といった方法があります。
条件オブジェクトを使うパターン
UI操作や関数の引数として「どのプロパティをいくつチェックするか」が可変な場合、条件オブジェクトを用意して、そのオブジェクトのプロパティと値をループ処理でチェックする方法があります。これにより、条件が増えても処理コードはほぼ変わらずに対応できます。AND 条件で複数プロパティをすべて満たすケースに最適です。
例：
function findByConditions(arr, cond) {
return arr.find(item => {
for (const key in cond) { if (item[key] !== cond[key]) return false; }
return true;
});
}
const data = [ {a:1,b:2}, {a:1,b:3} ];
const found = findByConditions(data, {a:1, b:3});
結果は {a:1, b:3} です。
条件関数を外部に切り出す方法
複雑な条件式だと find の中が長くなり可読性が下がります。そこで、判定部分を独立した関数に切り出すことで見通しがよくなります。特に同じ条件を複数箇所で使いたい場合やテストを書きたい場合に有効です。
例：
function isValidUser(u) {
return u.age >= 18 && /admin|editor/.test(u.role) && u.active;
}
const users = […];
const firstValid = users.find(isValidUser);
OR と AND を組み合わせて条件関数で抽象化する
OR 条件を含む複雑な組み合わせを抽象化したい場合もあります。例えば「特定の役割(role) が admin または moderator で、かつアクティブ(active)である」といったケースです。抽象化の際は OR 条件を配列で持ち、includes を使うなどして柔軟に扱えます。
例：
const roles = [‘admin’,’moderator’];
function matches(u) {
return roles.includes(u.role) && u.active;
}
const team = users.find(matches);
find と filter の使い分け／パフォーマンスの注意点
find と filter は似た用途に見えますが、それぞれ特性が異なります。filter は条件を満たすすべての要素を含む配列を返し、find は最初にマッチしたひとつの要素を返します。検索要件によって正しい方を選ばないと、期待外れの結果になったり、パフォーマンスに影響が出たりします。
find の特徴と使いどころ
find は条件を満たした最初の要素を返すので、欲しい要素がひとつで済む場合には効率的です。配列の途中でマッチすればそれ以降は走査をしないため、時間の節約になります。undefined を返す場合があるため、その扱いにも注意が必要です。
filter の特徴と使いどころ
filter は条件にマッチしたすべての要素を配列として返します。find よりも遅くなることがありますが、結果が複数であることが期待される場面では使い勝手がよいです。条件式を共有できれば filter を使って結果をそれから先で pick するという設計も考えられます。
パフォーマンス上の注意点
配列が非常に大きい場合、find や filter の中の条件式が重い処理を含むと実行コストが高くなります。特に文字列の正規表現マッチや深いプロパティのチェックなどは負荷になります。可能であれば条件を順序付けて軽いチェックから行う、キャッシュを使う、ユーザー入力をサニタイズして条件数を減らすなどが効果的です。
実践的なケーススタディ付き例
実際によくある要件を例として取り上げ、複数条件を使った実装を通じて理解を深めましょう。実務で似たようなケースが出てきたときに「こう書けばいい」というイメージがつきます。
ケース1：ユーザー一覧から特定の顧客を探す
例えば顧客データの配列から、国(country) が日本で age が 30 未満、かつ membership が ‘premium’ のユーザーを探したいとします。この3条件すべて満たす最初のユーザーを取得するには、find と論理演算子を組み合わせます。
具体的なコード：
const customers = [
{name:’山田’, country:’Japan’, age:28, membership:’standard’},
{name:’佐藤’, country:’Japan’, age:32, membership:’premium’},
{name:’鈴木’, country:’Japan’, age:29, membership:’premium’},
{name:’高橋’, country:’USA’, age:25, membership:’premium’}
];
const target = customers.find(c => c.country === ‘Japan’ && c.age < 30 && c.membership === 'premium');
このコードでは name が ‘鈴木’ のオブジェクトが返されます。
ケース2：商品のカタログから割引対象を検索する
商品データの配列から、「在庫がある」「価格が一定以下」「タグにセールが含まれる」の3条件を組み合わせて条件を動的に変えたいケースです。タグや価格条件が可変であるため、条件関数や条件オブジェクトを使った設計が効果的です。
具体的なコード：
const catalog = [
{name:’アイテムA’, price:5000, stock:0, tags:[‘sale’,’new’]},
{name:’アイテムB’, price:3000, stock:10, tags:[‘popular’]},
{name:’アイテムC’, price:4500, stock:5, tags:[‘sale’]}
];
function findDiscountItem(arr, maxPrice, requireTag) {
return arr.find(item => item.stock > 0 && item.price <= maxPrice && item.tags.includes(requireTag));
}
const discounted = findDiscountItem(catalog, 4000, ‘sale’);
この例では アイテムC が返されます。
ケース3：ユーザー入力に基づく検索フォームの処理
検索フォームからフィルター条件をユーザーが選ぶようなケースでは、入力が空欄であれば条件を無視するといった動的挙動が必要になることがあります。条件オブジェクトを作って、与えられた入力だけを対象に find する関数があると柔軟です。
具体例：
function findUserInteractive(users, filters) {
return users.find(u => {
if (filters.name && u.name.indexOf(filters.name) === -1) return false;
if (filters.minAge && u.age < filters.minAge) return false;
if (filters.country && u.country !== filters.country) return false;
return true;
});
}
const resultUser = findUserInteractive(users, {name:’佐’, minAge:20});
名前に佐を含む、20歳以上という条件で最初に一致するユーザーが得られます。
エラーになりやすいポイントとデバッグのヒント
複数条件で find を使う際の落とし穴を知っておくことで、書いたコードのバグを早く見つけられます。条件式の論理の間違いや、期待していた型と異なるデータが混じっている場合などが典型例です。デバッグのためのプリントやツールの使い方も含めて説明します。
論理条件の優先順と括弧の使い忘れ
AND と OR を混ぜて使うとき、評価順序が意図と異なっていることがあります。例えば A && B || C は (A && B) || C と解釈されますが、書き間違えると A && (B || C) にしたかったというケースも多いです。意図した論理を実現するには常にかっこで明示することが重要です。
型違いによる未検出や予期しない評価
データに文字列と数値が混ざっていたり、プロパティが存在しない要素があったりすると、=== や比較演算子が期待通りに動かず、条件判定で失敗します。例えばプロパティが undefined の場合に undefined === ‘文字列’ は false になるだけで副作用はありませんが、後続の処理に影響します。型チェックを含めるか、optional chaining を使うと安全です。
見つからなかったときの戻り値チェック
find は該当要素が見つからないと undefined を返します。結果をそのまま使用すると後続処理でエラーになることがあります。戻り値が undefined かどうかをチェックするガードを入れることが望ましいです。if 文や三項演算子、Null 合体演算子（??）などを使って安全なコードを書きましょう。
デバッグ時の console.log とユニットテスト活用
条件式が正しく書けているかを確認するには、最初は簡単な条件で find を試し、段階的に複数条件を追加していく方法が有効です。console.log を使って各アイテムがコールバックに入ったときの値や判定結果を出力すると原因が分かりやすくなります。ユニットテストを書いておけば、将来コードを変更したときにも安心です。
まとめ
JavaScript の find メソッドで複数条件を使うには、AND／OR の論理演算子を正しく使い、条件式を明確に書くことが肝心です。配列要素がオブジェクトの場合はプロパティの一致・範囲チェック・文字列一致などを組み合わせるパターンがよくあります。動的な条件を扱うなら条件オブジェクトや判定関数の外部化が有効です。さらに、filter との使い分けや未検出時の処理、型の安全性などにも注意することで堅牢な実装になります。これらをふまえてコードを書けば、「JavaScript find 複数 条件」について満足できる知識が身につくでしょう。
コメント