JavaScriptで配列から特定の要素を1つ見つける方法（Array.find()の使い方）

バニラJavaScript（フレームワークに依存しない素のJavaScript）で、配列から特定の要素を1つだけ見つけたい場合は、ES6で導入された Array.find() メソッドを使うのが最もシンプルで効果的です。

例として、野菜の名前が入った配列を用意し、その中から「carot（ニンジン）」を探してみましょう。

const vegetables = ["broccoli", "carot", "kale", "spinach"]

// 配列からcarotを検索
let carot = vegetables.find(function(vegetables) {
  return vegetables === "carot"
})

console.log(carot)
// "carot"

コードの仕組み

• まず、結果を格納するための変数 carot を宣言します。
• 次に、vegetables 配列に対して Array.find() メソッドを呼び出し、文字列 "carot" と完全に一致する要素を返すよう指示します。一致した要素が変数 carot に代入されます。
• 最後に console.log() で結果をコンソールに出力します。

押さえておきたい注意点

注意1： トリプルイコール演算子（===）は、値の一致 と 型の一致 の両方を厳密にチェックします。そのため、意図しない型変換による誤マッチを防ぐことができます。

注意2： JavaScriptは大文字・小文字を区別します。配列の要素に大文字が含まれている場合は、Array.find() メソッド内の比較文字列でも同じように大文字を使用する必要があります。

また、一致する要素が1つも存在しなかった場合は、undefined が返される点にも注意してください。条件に合う要素が複数ある場合でも、Array.find() は最初に一致した1件のみを返します。

アロー関数でさらに簡潔に書く

ES6のアロー関数を組み合わせれば、同じ処理を1行でスッキリと書くこともできます。

const carot = vegetables.find(item => item === "carot")

配列内の特定の要素を検索する場面は実開発でも頻繁にあります。Array.find() を使いこなして、コードの可読性と効率を向上させましょう。