JavaScript | 配列・オブジェクト：配列の検索・判定 – find

JavaScript JavaScript
スポンサーリンク

find とは何か

find は「配列から、条件を満たす“最初の1要素”を返す」検索メソッドです。見つかればその要素、見つからなければ null ではなく undefined を返します。ここが重要です：find は“値そのもの”の一致ではなく、“関数で定義した条件”で探します。オブジェクトのプロパティ一致や複合条件に強く、indexOf/includes では扱いづらい検索を自然に書けます。

基本の使い方（コールバック関数で条件を定義）

最初に一致した要素を返す

const users = [
  { id: 1, name: "A" },
  { id: 2, name: "B" },
  { id: 3, name: "B" }
];

const hit = users.find(u => u.name === "B");
console.log(hit); // { id: 2, name: "B" }（最初の一致だけ）
JavaScript

ここが重要です：一致が複数あっても“最初の1件”のみ。全部集めたいときは filter を使います。

見つからない場合（undefined に注意）

const xs = [10, 20, 30];
const hit = xs.find(x => x > 100);
console.log(hit); // undefined（条件を満たす要素なし）
JavaScript

ここが重要です：undefined を返すため、if (hit === undefined) の判定が安全です。0 や “” は“有効な値”になり得るので falsy 判定だけに頼らないでください。

コールバックに渡される引数（書きやすく、誤りにくく）

値・インデックス・配列全体が取れる

const arr = [5, 12, 8];
const hit = arr.find((value, index, array) => {
  // value: 今見ている値
  // index: その位置
  // array: 元の配列（必要なら参照）
  return value % 4 === 0 && index > 0;
});
console.log(hit); // 8
JavaScript

ここが重要です：インデックスや配列も参照できるので、位置条件や前後関係を含む検索が書けます。

thisArg で外部コンテキストを使う（必要なときだけ）

const threshold = { limit: 50 };
const arr = [10, 60, 40];
const hit = arr.find(function (x) { return x > this.limit; }, threshold);
console.log(hit); // 60
JavaScript

ここが重要です：第二引数 thisArg でコールバック内の this を指定できます。通常はクロージャ（直接変数を参照）で十分です。

indexOf/includes と find の違い（目的に応じた選び分け）

値そのもの vs 条件

  • indexOf/includes は“値そのものの一致”を調べます。
  • find は“関数で定義した条件”で探します。

ここが重要です：オブジェクトのプロパティ一致、範囲条件、複合条件などは find が最短です。位置が欲しいなら findIndex を選びます。

位置が必要なら findIndex

const users = [{id:1},{id:2}];
const idx = users.findIndex(u => u.id === 2);
console.log(idx); // 1（見つからなければ -1）
JavaScript

ここが重要です：find は“要素”を返し、findIndex は“位置”を返します。目的に合わせて使い分けましょう。

実践パターン（1件取得の定番レシピ）

ID で1件取得（見つかったら使う、なければ分岐）

const users = [{id:1},{id:2},{id:3}];
const user = users.find(u => u.id === 2);
if (user) {
  // 見つかった要素を使う
} else {
  // 404 的な扱い・フォールバック
}
JavaScript

ここが重要です：存在しないケースを必ず考慮する。undefined の扱いを明確にするとバグが減ります。

優先ルールで選ぶ（複合条件）

const products = [
  { name: "A", stock: 0, price: 100 },
  { name: "B", stock: 5, price: 200 },
  { name: "C", stock: 3, price: 150 }
];
const pick = products.find(p => p.stock > 0 && p.price <= 180);
console.log(pick); // { name: "C", ... }
JavaScript

ここが重要です：複数条件を素直に書けるのが find の強み。読みやすい論理式で“最初の適合”を取ります。

入れ子や関連配列を使った検索

const orders = [
  { id: 1, items: ["pen", "note"] },
  { id: 2, items: ["book"] }
];
const order = orders.find(o => o.items.includes("note"));
console.log(order); // id:1 の注文
JavaScript

ここが重要です：他メソッド（includes など）と組み合わせると、実用的な検索が短く書けます。

パフォーマンス・挙動の要点（誤解しないために）

最初に見つかったら即停止（短絡評価）

find は先頭から順に評価し、条件を満たした瞬間に探索を止めます。ここが重要です：高コストの条件式は“可能性が高い簡易チェック”を前段に置くと効率が上がります。

配列を変更しない（非破壊）

find は元配列を変更しません。ここが重要です：状態管理や共有参照でも安全。必要に応じて返ってきた要素を複製（スプレッド）して扱うと副作用を避けられます。

const user = users.find(u => u.id === 2);
const safe = user ? { ...user } : undefined; // 要素をコピーしてから編集

“全部欲しい”なら filter

find は1件だけ。ここが重要です：複数を取りたいなら filter、統計なら reduce、要素変換なら map を選びます。

よくある落とし穴と回避策

undefined を null と誤認

find が返す“見つからない”は undefined。等価比較の混乱を避けるため、明示的に hit === undefined で判定するか、if (!hit) と書く場合は 0 や “” を返す設計にしないよう注意します。

オブジェクトを直接書き換えて副作用

見つけた要素をそのまま編集すると、元配列の要素（同じ参照）を変更します。必要なら複製（{ …obj }）してから編集しましょう。

高コスト条件を無駄に評価

重い処理（正規表現の複雑なテスト、外部参照）を毎要素で実行すると遅くなります。先に軽い条件でふるいにかける、前処理で索引化するなどの工夫を。

まとめ

find は「条件で定義した最初の一致を“要素そのもの”として返す」非破壊の検索メソッドです。見つからなければ undefined。値そのものの一致は indexOf/includes、位置が欲しいなら findIndex、複数が欲しいなら filter と使い分けます。コールバックで値・インデックス・配列を扱え、複合条件やプロパティ一致に強い。短絡評価と非破壊の特性を理解し、undefined の扱い・副作用回避（要素の複製）・条件の効率化を意識すれば、初心者でも“意図通りで安全な1件検索”をシンプルに書けます。

スポンサーリンク
タイトルとURLをコピーしました