find で「最初の一致」を手に入れるイメージ
arr.find(x => x.id === 3)
find は、「配列の中から条件に合う“最初の1件”を探して返す」ためのメソッドです。 天才プログラマー視点で言うと、「検索したいときはまず find」と言っていいくらい、よく使う道具です。
「この配列の中から、id が 3 のものを1件だけ取りたい」 そんなときに、まさにぴったりなのが find です。
find の基本構造と「1件だけ返す」仕組み
const arr = [
{ id: 1, name: "Aki" },
{ id: 3, name: "Mika" },
{ id: 3, name: "Ken" }
];
const r = arr.find(x => x.id === 3);
console.log(r); // { id: 3, name: "Mika" }
ここで起きていることを分解します。
配列 arr の先頭から順番に、要素 x を取り出していきます。 そのたびに、コールバック関数 x => x.id === 3 を呼びます。 この関数が true を返した瞬間、その要素を返して検索を終了します。 つまり、「条件に合う最初の1件だけを返し、それ以降は見ない」という動きです。
重要なのは、「最初の一致だけ」というところです。 同じ条件に合う要素が複数あっても、最初の1件しか返しません。
例題：ユーザー一覧から特定の id を持つユーザーを探す
const users = [
{ id: 1, name: "Aki" },
{ id: 2, name: "Mika" },
{ id: 3, name: "Ken" }
];
const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: "Mika" }
ここでの流れはこうです。
1件目 { id: 1, name: "Aki" } → u.id === 2 は false。 2件目 { id: 2, name: "Mika" } → u.id === 2 は true。 true になったので、このオブジェクトを返して終了。
3件目以降はもう見ません。 「最初に見つかったものだけ欲しい」というときに、find は非常に自然な選択です。
見つからなかったときの挙動を深掘りする
const users = [
{ id: 1, name: "Aki" },
{ id: 2, name: "Mika" }
];
const user = users.find(u => u.id === 999);
console.log(user); // undefined
条件に合う要素が1件もない場合、find は undefined を返します。 ここがとても重要です。
つまり、find を使うときは、「見つからない可能性」を必ず考える必要があるということです。
例えばこう書きます。
const user = users.find(u => u.id === 2);
if (!user) {
console.log("ユーザーが見つかりませんでした");
} else {
console.log("見つかったユーザー:", user.name);
}
この「存在チェック」を忘れると、user.name のようなアクセスでエラーになります。 プロのコードでは、ここを丁寧に書くかどうかで品質が変わります。
コールバック関数の役割を理解する
find のコールバックは、最大3つの引数を受け取れます。
arr.find((value, index, array) => {
// value: 今の要素
// index: その要素のインデックス
// array: 元の配列そのもの
// 戻り値: true なら「これだ！」と判断、false なら次へ
});
よく使うのは value だけですが、インデックスを使うこともできます。
例えば、偶数番目の要素だけを対象にしたいならこう書けます。
const arr = ["A", "B", "C", "D"];
const r = arr.find((v, i) => i % 2 === 0 && v === "C");
console.log(r); // "C"
ここでのポイントは、「この条件を満たした瞬間に止まる」ということです。 filter のように「全部見てから絞り込む」のではなく、「見つかったら即終了」です。
filter と find の違いをはっきりさせる（超重要）
filter は「条件に合うものを全部集める」メソッドです。 find は「条件に合う最初の1件だけを返す」メソッドです。
const arr = [5, 12, 8, 20];
const all = arr.filter(x => x > 10); // [12, 20]
const first = arr.find(x => x > 10); // 12
filter は「配列」を返します。 find は「要素そのもの」を返します。
天才講師として一言でまとめるなら、 「全部欲しいなら filter、1件だけ欲しいなら find」 と覚えると、使い分けが一気に楽になります。
例題：ログイン時にユーザーを検索するイメージ
const users = [
{ id: 1, name: "Aki", email: "aki@example.com" },
{ id: 2, name: "Mika", email: "mika@example.com" }
];
function findUserByEmail(email) {
return users.find(u => u.email === email);
}
const loginUser = findUserByEmail("mika@example.com");
if (!loginUser) {
console.log("メールアドレスが登録されていません");
} else {
console.log("ログインユーザー:", loginUser.name);
}
ここでは、
メールアドレスをキーにして、ユーザー配列から1件だけ探しています。 「ユーザー一覧から該当ユーザーを1人だけ見つける」というのは、現場で本当に頻出するパターンです。 find を知っているかどうかで、コードの自然さがまるで違ってきます。
よくあるミスと注意点を深掘りする
コールバックで return を書き忘れると、常に undefined が返ります。
const arr = [1, 2, 3];
const r = arr.find(x => {
x === 2; // return がない！
});
console.log(r); // undefined
ブロック {} を使ったときは、必ず return が必要です。
const r = arr.find(x => {
return x === 2;
});
または省略形でこう書けます。
const r = arr.find(x => x === 2);
もうひとつ大事なのは、「見つからないときは undefined」という挙動を忘れないこと。 これを前提に、必ず存在チェックを書く癖をつけてください。
まとめ：find は「1件だけ欲しいときの検索専用ツール」
find を使いこなせると、配列の扱い方が一段階プロ寄りになります。
配列の中から、条件に合う「最初の1件だけ」を取りたいとき。 filter ではなく、find を選ぶことで、意図がコードからはっきり伝わります。
元の配列は壊さず、必要な1件だけを取り出す。 見つからないときは undefined を返すので、存在チェックを書く。
「この中から、該当するものを1つだけ探したい」と感じたら、まず find を思い出す。 その瞬間から、あなたの JavaScript は“検索ロジック”の面でも、確実にレベルアップしていきます。