JavaScriptのfindメソッドを使って配列から特定の要素を見つける方法

当サイトでは一部リンクに広告が含まれています
アイキャッチ

JavaScriptで配列を扱う際、特定の条件に合う要素を見つけ出したいことがよくあります。
そんな時に役立つのがfind()メソッドです。

find()メソッドを使えば、配列から条件に合致する最初の要素を簡単に取得できます。

本記事では、find()メソッドの基本的な使い方から、似たメソッドとの違いや使用時の注意点まで、実例を交えてわかりやすく解説していきます!

この記事を書いた人
筆者のプロフィールアイコン
  • 未経験からWebエンジニアとして転職成功(年収 30% アップ)
  • 現役のフルスタックエンジニアとして活躍中
  • 開発チームリーダーとして複数プロジェクトをリード
  • 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
目次

find()メソッドの基本的な使い方

find()メソッドは配列に対して使用し、引数にテスト関数を取ります。配列の各要素に対してこのテスト関数が実行され、真値を返した最初の要素が返却されます。

以下は、数値の配列から特定の条件を満たす要素を見つける基本的な例です。

const numbers = [1, 2, 3, 4, 5];

const foundNumber = numbers.find(num => num > 3);

console.log(foundNumber); // 4

この例では、配列numbersの中から、3より大きい最初の要素を見つけ出しています。find()メソッドのテスト関数num => num > 3は、各要素numが3より大きいかどうかを判定しています。

オブジェクトの配列から特定のプロパティで検索

find()メソッドは、オブジェクトの配列からも特定の条件に合う要素を見つけることができます。

const users = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 35 },
];

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

console.log(foundUser); // {id: 2, name: "Jane", age: 30}

この例では、users配列からidが2のユーザーオブジェクトを見つけ出しています。テスト関数user => user.id === 2は、各要素useridプロパティが2と等しいかどうかを判定しています。

アロー関数の省略記法

テスト関数が単純な場合、アロー関数の省略記法を使ってより簡潔に書くこともできます。

const foundNumber = numbers.find(num => num > 3);

const foundUser = users.find(({ id }) => id === 2);

find()メソッドの注意点

条件に合う要素が複数ある場合

find()メソッドは、条件に合致する「最初の要素」のみを返します。たとえ配列内に条件を満たす要素が複数あったとしても、最初に見つかった要素だけが返却されます。

  • 条件に合う要素をすべて取得したい場合は、filter()メソッドを使いましょう。

条件に合う要素が見つからない場合

条件に合致する要素が1つも見つからなかった場合、find()メソッドはundefinedを返します。

const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find(num => num > 10);

console.log(foundNumber); // undefined
  • find()メソッドの戻り値を使う際は、undefinedになるケースも考慮しておく必要があります。

類似のメソッドとの違い

findIndex()

findIndex()メソッドもfind()メソッドと同様に、配列から特定の条件を満たす要素を探しますが、見つかった要素そのものではなく、その「インデックス」(添字)を返します。

見つからなかった場合は-1を返します。要素の値ではなく、配列内の位置を知りたい時に使われます。

filter()

filter()メソッドは、find()メソッドと同じく配列から特定の条件に合う要素を探しますが、条件に合致したすべての要素を新しい配列として返します。

条件を満たす要素が複数あり、それらをすべて取得したい場合に使われます。

some()

some()メソッドは、配列の中に条件を満たす要素が「少なくとも1つ」存在するかどうかを判定し、真偽値を返します。

条件に合う要素の値そのものは返さず、存在有無だけを確認したい場合に使われます。

まとめ

find()メソッドは、JavaScriptの配列から特定の条件を満たす要素を効率的に見つけ出すのに非常に便利です。

基本的な使い方をマスターしつつ、条件に合う要素が複数ある場合や1つも見つからない場合の挙動にも注意しましょう。

状況に応じてfindIndex()filter()some()など類似のメソッドとの使い分けも覚えておくと、配列操作の幅がさらに広がるはずです。

ぜひ色々なシーンでfind()メソッドを活用してみてください!

参考リンク

JavaScript を挫折せず学習するならプログラミングスクールがおすすめ!

この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。

そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか

JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。



おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。

現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています!

目次