JavaScript配列から最初の一致を取得（find）の基本と実践
「条件に合う最初の要素を1つだけ取り出したい」なら find が最適です。filterは「全部」を返しますが、findは「最初の1件」だけを返すので、検索や探索に向いています。
構文と考え方
const result = arr.find((value, index, array) => {
// 条件式を返す（trueならその要素が返される）
return /* 条件式 */;
});
- 役割: 配列を先頭から順に調べ、条件に合う最初の要素を返す。
- 返り値: 条件に合う要素そのもの。見つからなければ
undefined。 - 引数: コールバックには最大3つ（value, index, array）が渡される。
すぐ使えるテンプレート集
基本：idが3の要素を探す
const items = [
{ id: 1, name: "Pen" },
{ id: 2, name: "Note" },
{ id: 3, name: "Bag" },
{ id: 3, name: "Shoes" },
];
const found = items.find(x => x.id === 3);
console.log(found); // { id: 3, name: "Bag" }
- ポイント: 最初に見つかった
{id:3}が返る。2つ目の{id:3}は無視される。
条件に合わない場合
const nums = [1, 2, 3];
const result = nums.find(n => n > 10);
console.log(result); // undefined
- ポイント: 見つからなければ
undefined。安全に扱うには条件分岐を追加。
if (result === undefined) {
console.log("見つかりませんでした");
}
インデックスも使いたい場合
const nums = [5, 12, 8, 130, 44];
const found = nums.find((n, i) => {
console.log("調べ中:", i, n);
return n > 10;
});
console.log("結果:", found); // 12
- ポイント: 第2引数でインデックスを確認できる。デバッグや位置確認に便利。
文字列検索（部分一致）
const names = ["Aki", "Mao", "Ren", "Mika"];
const found = names.find(n => n.toLowerCase().includes("mi"));
console.log(found); // "Mika"
- ポイント: 部分一致検索にも使える。最初に条件を満たす要素だけ返る。
よくある落とし穴と対策
- 複数一致が欲しいのにfindを使う
- 症状: 最初の1件しか返らない。
- 対策: 複数欲しいならfilterを使う。
- 見つからない場合の処理を忘れる
- 症状:
undefinedをそのまま使ってエラー。 - 対策:
if (!result)でチェックする。
- 症状:
- 副作用を混ぜる
- 症状: findの中で外部変数を更新すると意図が曖昧に。
- 対策: findは「検索」に専念。副作用はforEachやforで。
他メソッドとの使い分け
| 手段 | 返り値 | 主な用途 |
|---|---|---|
| find | 最初の一致1件 | 検索・探索 |
| filter | 全ての一致 | 条件抽出 |
| some | true/false | 条件に合う要素が存在するか確認 |
| every | true/false | 全要素が条件を満たすか確認 |
練習問題（手を動かして覚える）
1. 最初の偶数を探す
const nums = [3, 7, 11, 12, 5];
const even = nums.find(n => n % 2 === 0);
console.log(even); // 12
2. 名前が「Ren」のユーザーを探す
const users = [
{ name: "Aki", age: 19 },
{ name: "Mao", age: 22 },
{ name: "Ren", age: 17 },
];
const ren = users.find(u => u.name === "Ren");
console.log(ren); // { name: "Ren", age: 17 }
3. 10より大きい最初の数を探す（見つからなければメッセージ）
const nums = [2, 5, 8];
const found = nums.find(n => n > 10);
if (found === undefined) {
console.log("条件に合う要素はありません");
} else {
console.log("見つかった:", found);
}
直感的な指針
- 最初の1件だけ欲しい: find。
- 複数件欲しい: filter。
- 存在確認だけ: some。