配列・コレクションの検索(includes・find)

このレッスンでは、配列の.includes()と.find()を使い分けて、目的に応じたデータの検索ができるようになることを目標にします。「JavaScript includes find 違い」「JavaScript 配列 検索」で調べている方向けの内容です。

.includes(値)は配列にその値が含まれているかをtrue/falseで返します。.find(条件)は条件に合う最初の要素そのものを返します。「リストの中にこの商品はあるか」を調べたいだけならincludes、「その商品の詳しい情報がほしい」ならfind、というように目的に応じて使い分けるのが基本の考え方です。

サンプルコードでは、fruits.includes("みかん")で「みかん」が配列に含まれているかを確認し、fruits.find((f) => f.startsWith("ぶ"))で「ぶ」から始まる最初の要素を探しています。.find()は条件に一致する要素が見つからない場合、undefinedを返す点も覚えておきましょう。

初心者がよくつまずくのが、.find()が「最初に見つかった1件だけ」を返す点です。条件に合う要素が複数あっても、2件目以降は無視されます。複数件をすべて取得したい場合は、これまで学んだ.filter()を使う必要があり、findとfilterの違いを理解しておくことが重要です。

実際の開発現場では、IDを指定して該当するユーザー1件を配列から探し出したり、特定の条件を満たすデータが存在するかどうかをチェックしたりと、includesとfindはデータ検索の基本操作として非常によく使われます。目的に合わせて正しいメソッドを選べるようになりましょう。

.findIndex()という似たメソッドもあり、こちらは要素そのものではなく「何番目にあるか」という位置を返します。要素を書き換えたい場合など、位置情報が必要な場面ではfindIndexを使うことになります。