JavaScriptのfind()入門｜条件に一致する最初の要素を取得する

find()は、配列の中から条件を満たす最初の要素を返すメソッドです。filter()が条件に合う全要素を配列で返すのに対し、find()は最初に見つかった1つの要素だけを返します。IDによるデータ検索や、特定条件のレコード取得など、実務で非常によく使われます。

基本的な使い方

find()はコールバック関数がtrueを返す最初の要素を返します。見つからない場合はundefinedを返します。

JavaScript

// 基本構文
const found = array.find(function(element, index, array) {
  return 条件式;
});

// アロー関数を使った書き方
const found = array.find(element => 条件式);

条件を満たす要素が見つかった時点で検索は停止します。配列全体を走査するfilter()と比べて、最初の1件だけが必要な場合はパフォーマンス面で有利です。

JavaScript

const numbers = [10, 20, 30, 40, 50];

// 25より大きい最初の数を取得
const result = numbers.find(num => num > 25);
console.log(result);

// 条件に合う要素がない場合
const notFound = numbers.find(num => num > 100);
console.log(notFound);

実行結果

30
undefined

オブジェクト配列での検索

find()の最も一般的な使い方は、IDやキーでオブジェクトを検索するパターンです。APIレスポンスやデータベースから取得したデータの中から特定のレコードを探す場面で活躍します。

JavaScript

const users = [
  { id: 1, name: "田中", role: "admin" },
  { id: 2, name: "佐藤", role: "editor" },
  { id: 3, name: "鈴木", role: "viewer" },
  { id: 4, name: "高橋", role: "editor" }
];

// IDで検索
const user = users.find(u => u.id === 3);
console.log(user);

// roleで検索（最初に見つかった1件のみ）
const editor = users.find(u => u.role === "editor");
console.log(editor);

// オプショナルチェイニングで安全にアクセス
const targetId = 99;
const name = users.find(u => u.id === targetId)?.name ?? "ユーザー不明";
console.log(name);

実行結果

{ id: 3, name: "鈴木", role: "viewer" }
{ id: 2, name: "佐藤", role: "editor" }
ユーザー不明

find()はundefinedを返す可能性があるため、オプショナルチェイニング（?.）やNull合体演算子（??）と組み合わせて安全にアクセスすることが推奨されます。

findIndex()との組み合わせ

findIndex()はfind()と同様に動作しますが、要素そのものではなくインデックスを返します。要素の位置が必要な場合や、配列を更新する場合に使います。

JavaScript

const tasks = [
  { id: 1, title: "設計書作成", done: false },
  { id: 2, title: "実装", done: true },
  { id: 3, title: "テスト", done: false }
];

// 未完了タスクのインデックスを取得
const index = tasks.findIndex(task => !task.done);
console.log(index);
console.log(tasks[index]);

// 特定のタスクを更新
const targetIndex = tasks.findIndex(task => task.id === 2);
if (targetIndex !== -1) {
  tasks[targetIndex] = { ...tasks[targetIndex], title: "実装（修正済み）" };
}
console.log(tasks[targetIndex]);

実行結果

0
{ id: 1, title: "設計書作成", done: false }
{ id: 2, title: "実装（修正済み）", done: true }

find()とfilter()の使い分け

1件だけ欲しい場合はfind()、条件に合う全件が欲しい場合はfilter()を使います。filter()[0]でも1件取得できますが、find()の方が見つかった時点で検索を止めるため効率的です。

注意点

find()は要素が見つからない場合にundefinedを返します。findIndex()は見つからない場合に-1を返します。それぞれの戻り値を確認せずにプロパティにアクセスすると、TypeErrorが発生する可能性があります。

まとめ

find()は条件を満たす最初の要素を返すメソッド
見つからない場合はundefinedを返す
最初に見つかった時点で検索が停止するため効率的
findIndex()を使えば要素のインデックスを取得できる
オプショナルチェイニングと組み合わせて安全にアクセスする