JavaScript配列のfind()関数：コールバック関数で条件に合う最初の要素を検索

定義と使用方

配列のfind()関数は、指定された配列の中からコールバック関数の条件を満たす最初の要素を返します。
条件に一致する要素が存在しない場合はundefinedを返します。

使い方を視覚的に示すと次のようになります。

[😃, 🏀, 🍎, 🍇, 🐵].find(function（検索要素）{
    return 検索要素 === 果物;
}); // 👉 🍎

// この配列において、条件となる果物（🍎、🍇）の中で最初に見つかった果物（🍎）が返されます。

find()関数は配列の中から特定の条件を満たす最初の要素を検索する際に便利です。

特徴

条件はコールバック関数の中で指定します。
- 条件を満たす場合はtrue、満たさない場合はfalseを返すように記述します。
条件に一致する要素が複数存在しても、最初に一致した要素だけが返されます。
このような挙動により、元の配列は変更されずそのまま保持されます。

基本の例

以下の例では、配列から条件を満たす最初の要素をfind()関数で検索する方法を示します。各手順ごとにコード内のコメントで動作を説明します。

JavaScript

// 配列を作成します。
const numbers = [1, 3, 7, 4, 6, 8];

// 条件（偶数）を満たす最初の要素を検索します。
const firstEven = numbers.find(function(num) {
    return num % 2 === 0; // 偶数かどうかを確認
});

// 結果を出力します。
console.log(firstEven); // 出力: 4

参考にしてください！
配列のfindLast()関数は、指定された配列の中からコールバック関数の条件を満たす最後の要素を返します。

参考にしてください！
配列のfindIndex()関数は、指定された配列の中からコールバック関数の条件を満たす最初の要素のインデックスを返します。

構文

arrはfind()関数を適用する配列です。

パラメーター

`find（）`関数のパラメーターの説明
`callbackFn`	配列の各要素を処理するコールバック関数です。コールバック関数は配列の各要素に対して実行されます。コールバック関数は与えられた要素に対して処理を行い、関数内で定義された条件を確認します。条件は`return`文を使用して定義され、条件が`true`と評価されると、その要素が見つかったと見なされます。`find()`関数は条件を満たす最初の要素を見つけると、配列の走査を中断してその要素を返します。これによりコードの実行も停止します。コールバック関数のパラメーター: `callbackFn(element[, index[, array]])` `element`：現在処理中の配列要素 `index`：オプション。現在処理中の配列要素のインデックス `array`：オプション。`find()`を呼び出した配列自体
`thisArg`	オプション。`callbackFn`関数内で使用する`this`の値として指定する値です。

最初のパラメーターであるコールバック関数（callbackFn）に関連する、関数の形式ごとの構文は以下の通りです。

JavaScript

// アロー関数
find((element) => { /* … */ })
find((element[, index]) => { /* … */ })
find((element[, index[, array]]) => { /* … */ })

// コールバック関数
find(callbackFn)
find(callbackFn[, thisArg])

// インラインコールバック関数
find(function (element) { /* … */ })
find(function (element[, index]) { /* … */ })
find(function (element[, index[, array]]) { /* … */ })
find(function (element[, index[, array]]) { /* … */ }[, thisArg])

戻り値

コールバック関数が見つけた、条件を最初に満たす配列要素です。
もし条件を満たす要素が見つからなかった場合は、undefinedを返します。

コールバック関数の動作原理

find()関数は、指定された配列の要素を開発者が自分で作成したコールバック関数を使用して目的の条件に従って検索し、条件を満たす最初の要素を返す関数です。

find()関数のコールバック関数は、配列の要素の中からコールバック関数内で定義された条件を確認します。条件はreturn文を使って定義され、条件がtrueと評価されると、その要素が見つかったと見なされます。find（）関数は条件を満たす最初の要素を見つけると配列の走査を中断し、その要素を返します。これによりコードの実行も停止します。

JavaScript find()関数で使用するコールバック関数の構造

/**
 * コールバック関数
 *
 * @param {*} element 配列の各要素
 * @param {number} index 配列のインデックス（オプション）
 * @param {Array} array 元の配列（オプション）
 * @return {boolean} フィルタリング条件を満たす場合はtrue、満たさない場合はfalseを返す
 *
 * コールバック関数は、名前付き関数（ユーザー定義関数）や匿名関数として使用できます。
 * （もちろん）すべてのコールバック関数はアロー関数として使用可能です。
 */

/* 名前付き関数をコールバック関数として使用する場合 */
function callbackFn(element[, index[, array]]) { // 名前付き関数の定義
    // return文を使って条件を定義します。
}

arr.find(callbackFn); // 定義した名前付き関数名をパラメーターとして直接渡します

/* 匿名関数をコールバック関数として使用する場合 */
arr.find(function (element[, index[, array]]) {
    // return文を使って条件を定義します。
});

さまざまな活用例

find()関数は、配列の中から特定の条件を満たす最初の要素を検索するために使用され、さまざまな活用例があります。いくつかの例を見てみましょう。

配列に特定の要素が存在するかどうかの確認

配列の中で条件を満たす要素が存在するかどうかを確認する際に使用できます。

JavaScript

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

// 条件を満たす最初の要素を検索します。
const found = numbers.find(element => element === target);

// 結果に応じてメッセージを出力します。
if (found !== undefined) {
    console.log(`探している値(${target})が配列に存在します。`);
} else {
    console.log(`探している値(${target})が配列に存在しません。`);
}

// 出力: 探している値(3)が配列に存在します。

オブジェクトのプロパティに基づく検索

オブジェクトの配列から特定のプロパティ値に基づいてオブジェクトを検索する際に便利です。

JavaScript

// 人オブジェクトの配列を作成します。
const people = [
    {name: "Alice", age: 30},
    {name: "Bob", age: 25},
    {name: "Charlie", age: 35}
];

// 検索したい名前を変数として定義します。
const targetName = "Bob";

// 配列からnameプロパティがtargetNameと一致する最初の人オブジェクトを検索します。
const person = people.find(obj => obj.name === targetName);

// 結果を出力します。
console.log(person); // 出力: {name: "Bob", age: 25}

ユーザー定義の条件に基づく検索

ユーザー定義の条件関数を作成して、配列の要素検索に活用できます。

JavaScript

// 商品の配列を作成します。
const products = [
    {name: "Laptop", price: 1000},
    {name: "Phone", price: 500},
    {name: "Tablet", price: 300}
];

// 条件を定義するコールバック関数を作成します。
// ここでは価格が600未満の商品を検索する条件です。
const customCondition = product => product.price < 600;

// 配列から条件(customCondition)を満たす最初の商品を検索します。
const affordableProduct = products.find(customCondition);

// 結果を出力します。
console.log(affordableProduct); // 出力: {name: "Phone", price: 500}

find()関数を使用すると、配列の中から条件に合致する最初の要素を効率的に検索できるため、さまざまな状況で便利に活用できます。