JavaScript 配列 findIndex()関数：コールバック関数の条件に一致する最初の要素のインデックスを取得

定義と使い方

findIndex()関数は、与えられた配列内でコールバック関数の条件を満たす最初の要素のインデックスを返します。
条件に一致する要素が存在しない場合は-1を返します。

配列のインデックスは0から始まります。

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

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

// この配列では、検索条件である果物（🍎、🍇）のうち
// 最初の果物（🍎）のインデックス（2）が返されます。

findIndex()関数は、配列内で特定の条件を満たす最初の要素のインデックスを取得する際に有用です。

特徴

条件はコールバック関数内で適用します。
- 条件を満たす場合はtrue、満たさない場合はfalseを返すように記述します。
条件に一致する要素が複数存在しても、最初に一致した要素のインデックスのみが返されます。
この動作によって元の配列は変更されずそのまま維持されます。

基本例

以下の例では、配列内で条件を満たす最初の要素のインデックスをfindIndex()関数で取得する方法を示します。各ステップごとにコメントで動作を説明します。

JavaScript

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

// 条件（偶数）を満たす最初の要素のインデックスを取得します。
const firstEvenIndex = numbers.findIndex(function(num) {
    return num % 2 === 0; // 偶数かどうかを確認
});

// 結果を出力します。
// 条件（偶数）を満たす最初の要素は4で、
// その要素のインデックスは3です。
console.log(firstEvenIndex); // 出力: 3

参考です！
配列のfindLastIndex()関数は、与えられた配列内でコールバック関数の条件を満たす最後の要素のインデックスを返します。

参考です！
配列のfind()関数は、与えられた配列内でコールバック関数の条件を満たす最初の要素を返します。

構文

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

パラメーター

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

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

JavaScript

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

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

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

戻り値

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

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

findIndex()関数は、与えられた配列の要素を開発者が直接作成したコールバック関数を使用して条件に従って検索し、条件を満たす最初の要素のインデックスを返す関数です。

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

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

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

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

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

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

さまざまな活用例

findIndex()関数は、配列内で特定の条件を満たす最初の要素のインデックスを取得するために使用され、さまざまな活用例があります。特に特定の値の位置を探す際に有用です。いくつかの例を見てみましょう。

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

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

JavaScript

// 配列に特定の要素が存在するかの確認
// 配列内で条件を満たす要素のインデックスを使って
// 存在の有無を判定できます。

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

// 条件を満たす最初の要素のインデックスを取得します。
const index = numbers.findIndex(element => element === target);

// 結果に応じてメッセージを出力します。
if (index !== -1) {
    console.log(`検索する値(${target})は配列に存在します。インデックス: ${index}`);
} else {
    console.log(`検索する値(${target})は配列に存在しません。`);
}

// 出力: 検索する値(3)は配列に存在します。インデックス: 2

特定ユーザーの最初のログイン記録を探す

この例では、ユーザーログイン記録の配列から特定のユーザーの最初のログイン記録を取得する方法を見ていきます。

JavaScript

// ユーザーログイン記録の配列
const loginHistory = [
  { user: 'Alice', date: '2025-01-01' },
  { user: 'Bob', date: '2025-01-02' },
  { user: 'Alice', date: '2025-01-05' },
  { user: 'Charlie', date: '2025-01-06' },
  { user: 'Alice', date: '2025-01-10' },
  { user: 'Bob', date: '2025-01-12' },
];

// 特定のユーザー
const targetUser = 'Alice';

// 最初のログイン(findIndex)
const firstLoginIndex = loginHistory.findIndex(record => record.user === targetUser);

if (firstLoginIndex !== -1) {
  const firstLogin = loginHistory[firstLoginIndex];
  console.log(`最初のログイン:
    - ユーザー: ${firstLogin.user}
    - 日付: ${firstLogin.date}`);
} else {
  console.log(`${targetUser}の最初のログイン記録はありません。`);
}

/* 出力:
最初のログイン:
    - ユーザー: Alice
    - 日付: 2025-01-01
*/

findIndex()関数を使用すると、配列内で条件に合致する最初の要素のインデックスを効率的に取得できるため、さまざまな状況で有用に活用できます。