JavaScriptのfind()とは？最初の要素を取得する方法

JavaScriptで配列から特定の要素を取り出したい場合、find()メソッドは非常に重要な役割を持ちます。
条件に合致した最初の要素だけを取得できる点が特徴です。

本記事では、find()の基本から実務での使い方まで、初心者でも理解できるように丁寧に解説します。

find()とは？

find()は、配列の中から条件に一致する最初の要素を1つだけ取得するメソッドです。

const result = array.find(callback);

• 条件に合う要素が見つかれば → その要素を返す
• 見つからなければ → undefined を返す

基本的な使い方

まずはシンプルな例を確認します。

// find-basic.js
const numbers = [10, 20, 30, 40];

const result = numbers.find((num) => num > 25);

console.log(result); // 30

ポイント

• num > 25 の条件に最初に一致したのは「30」
• そのため、30が返されます

find()のコールバック関数

find()にはコールバック関数を渡します。

array.find((要素, インデックス, 配列) => {
  return 条件;
});

各引数の意味

例：

// find-arguments.js
const fruits = ["apple", "banana", "orange"];

const result = fruits.find((item, index) => {
  console.log(index, item);
  return item === "banana";
});

console.log(result); // banana

オブジェクト配列での使用例

実務ではオブジェクト配列で使うケースが多くあります。

// find-object.js
const users = [
  { id: 1, name: "Taro" },
  { id: 2, name: "Jiro" },
  { id: 3, name: "Saburo" },
];

const user = users.find((u) => u.id === 2);

console.log(user); // { id: 2, name: "Jiro" }

活用シーン

• IDでユーザーを検索
• 商品一覧から特定の商品を取得
• 設定情報の取得

find()とfilter()の違い

find()とよく比較されるのがfilter()です。

// find-vs-filter.js
const numbers = [10, 20, 30, 40];

const findResult = numbers.find((num) => num > 15);
const filterResult = numbers.filter((num) => num > 15);

console.log(findResult);  // 20
console.log(filterResult); // [20, 30, 40]

使い分けの基準

• 1つだけ取得したい → find()
• 複数取得したい → filter()

👉 filter()の詳細は以下の記事で解説しています
「JavaScriptのfilter()とは？配列の絞り込みを徹底解説」

見つからない場合の注意点

条件に一致する要素がない場合、undefinedが返ります。

// find-undefined.js
const numbers = [1, 2, 3];

const result = numbers.find((num) => num > 10);

console.log(result); // undefined

安全な書き方

// find-safe.js
const users = [
  { id: 1, name: "Taro" },
];

const user = users.find((u) => u.id === 2);

if (user) {
  console.log(user.name);
} else {
  console.log("該当するユーザーが存在しません");
}

find()の実務的な使い方

① フォーム選択値に応じたデータ取得

// find-form.js
const plans = [
  { id: "basic", price: 1000 },
  { id: "pro", price: 3000 },
];

const selectedId = "pro";

const plan = plans.find((p) => p.id === selectedId);

console.log(plan.price); // 3000

② 設定オブジェクトの取得

// find-config.js
const settings = [
  { key: "theme", value: "dark" },
  { key: "lang", value: "ja" },
];

const langSetting = settings.find((s) => s.key === "lang");

console.log(langSetting.value); // ja

find()を使う際の注意点

1. 複数一致しても1つしか返らない

// find-multiple.js
const numbers = [10, 20, 30, 40];

const result = numbers.find((num) => num > 15);

console.log(result); // 20（最初の1件のみ）

2. 条件式のreturn忘れ

// find-mistake.js
const numbers = [10, 20, 30];

const result = numbers.find((num) => {
  num > 15; // returnがない
});

console.log(result); // undefined

正しい書き方

// find-correct.js
const numbers = [10, 20, 30];

const result = numbers.find((num) => {
  return num > 15;
});

console.log(result); // 20

find()とmap()の関係

find()は「検索」、map()は「変換」に使われます。

// find-map.js
const users = [
  { id: 1, name: "Taro" },
  { id: 2, name: "Jiro" },
];

const user = users.find((u) => u.id === 1);

const upperName = user.name.toUpperCase();

console.log(upperName); // TARO

👉 map()については以下の記事で詳しく解説しています
「JavaScriptのmap()とは？配列処理の基本から実践まで徹底解説」

まとめ

• find()は条件に一致する最初の要素を1つだけ取得する
• 見つからない場合はundefined
• オブジェクト配列との相性が良い
• 複数取得したい場合はfilter()を使う

関連記事

• JavaScriptのfilter()とは？配列の絞り込みを徹底解説
• JavaScriptのmap()とは？配列処理の基本から実践まで徹底解説
• JavaScriptの高階関数とは？基本から実務での使い方まで徹底解説
• JavaScriptのアロー関数とは？基本から使い方まで徹底解説