MENU
プログラミングを学んで自由な働き方を手に入れよう！Webエンジニアとして活躍するためのプログラミング学習方法・スクール情報メディア
  1. ホーム
  2. プログラミング
  3. JavaScript
  4. JavaScriptのfindメソッドを使って配列から特定の要素を見つける方法

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

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

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

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

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

この記事を書いた人
筆者のプロフィールアイコン
  • 現役のフルスタックエンジニアとして活躍中
  • 開発チームリーダーとして複数プロジェクトをリード
  • 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
  • プログラミングスクールのカリキュラム執筆経験あり
目次

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は、各要素userのidプロパティが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は学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？

Muscle Coding
【初心者向け】JavaScriptの勉強法3選を現役エンジニアが比較・解説！ | Muscle Coding JavaScriptの効果的な学習方法を現役エンジニアが解説！本、動画教材（Udemy）、プログラミングスクールの特徴を比較し、最適な方法を提案します。初心者でも理解しやすい…
JavaScript
JavaScript
目次