【JavaScript】findIndex()で条件に合う最初の要素の位置を探す方法

配列内の特定の条件に合致する最初の要素のインデックス（位置）を素早く見つけたいとき、JavaScriptのfindIndex()メソッドが非常に便利です。この記事では、findIndex()の基本的な使い方から実用的な例、さらには注意点まで、丁寧に解説します。

「findIndex()」の基本的な使い方

「findIndex()」とは？

findIndex()は、配列内で特定の条件に合致する最初の要素のインデックス（位置）を探し出して返すメソッドです。見つからない場合は-1を返します。

基本的な使い方をコードで見てみましょう。

const numbers = [10, 20, 30, 40, 50];
const index = numbers.findIndex(num => num >= 30);
console.log(index); // 2

この例では、30以上の最初の数字のインデックス（位置）を探しています。

「findIndex()」のコールバック関数

findIndex()は、条件を指定するためのコールバック関数を引数として受け取ります。このコールバック関数は、以下の3つの引数を取ることができます。

1. currentValue: 現在処理されている要素。
2. index: 現在処理されている要素のインデックス。
3. array: findIndex()が呼び出された配列。

const numbers = [10, 20, 30, 40, 50];
const index = numbers.findIndex((currentValue, index, array) => {
  console.log(`Checking index ${index}: ${currentValue}`);
  return currentValue >= 30;
});
// Checking index 0: 10
// Checking index 1: 20
// Checking index 2: 30
console.log(index); // 2

「findIndex()」の使用例4パターン

配列内に特定の値が存在するかを確認する

const fruits = ['apple', 'banana', 'cherry'];
const index = fruits.findIndex(fruit => fruit === 'banana');
console.log(index); // 1

バナナ('banana')のインデックスが1なので、1が出力されます。

最初の偶数を見つける

const numbers = [1, 3, 5, 8, 10];
const index = numbers.findIndex(num => num % 2 === 0);
console.log(index); // 3

最初の偶数8のインデックスは3なので、3が出力されます。

条件に合ったオブジェクトを探す

const persons = [{name: 'Alice', age: 30}, {name: 'Bob', age: 25}, {name: 'Charlie', age: 35}];
const index = persons.findIndex(person => person.age > 30);
console.log(index); // 2

年齢が30以上の最初の人物（Charlie）のインデックスは2なので、2が出力されます。

最初に条件に合わない要素を見つける

const numbers = [2, 4, 6, 7, 8];
const index = numbers.findIndex(num => num % 2 !== 0);
console.log(index); // 3

最初に条件に合わない（奇数）の数7のインデックスは3なので、3が出力されます。

「findIndex()」と「indexOf()」

「indexOf()」とは？

indexOf()も配列内の特定の要素のインデックスを探すメソッドですが、findIndex()とは異なり、具体的な値を指定して検索します。

const numbers

 = [10, 20, 30, 40, 50];
const index = numbers.indexOf(30);
console.log(index); // 2

「findIndex()」と「indexOf()」の違い

findIndex()は柔軟な条件指定が可能ですが、indexOf()は固定の値しか検索できません。

// findIndex()
const indexFlexible = [10, 20, 30, 40, 50].findIndex(num => num >= 30);
console.log(indexFlexible); // 2

// indexOf()
const indexFixed = [10, 20, 30, 40, 50].indexOf(30);
console.log(indexFixed); // 2

「findIndex()」を使用する際の注意点

要素が見つからない場合の戻り値

findIndex()メソッドが条件に合致する要素を見つけられなかった場合、-1を返します。これをしっかりとハンドリングすることが重要です。

const numbers = [10, 20, 30, 40, 50];
const index = numbers.findIndex(num => num > 100);
console.log(index); // -1

最初にマッチしたインデックスしか返されない

findIndex()メソッドは、条件に合う最初の要素のインデックスだけを返します。同じ条件に合う要素が複数存在する場合でも、最初に見つかった要素のインデックスしか取得できません。

const numbers = [5, 10, 15, 10, 20];
const index = numbers.findIndex(num => num === 10);
console.log(index); // 1

この例では、値が10である要素はインデックス1と3にありますが、findIndex()は最初にマッチした1しか返していません。複数のマッチを全て取得したい場面では、findIndex()だけでは不十分なので注意が必要です。

「findIndex()」の使い方まとめ

• findIndex()は配列内で条件に合う最初の要素のインデックスを返す便利なメソッドです。
• コールバック関数を使用して、条件を自由に設定できます。
• indexOf()とは違い、より柔軟な条件指定が可能です。
• 条件に合致する要素がない場合は、-1が返されるので注意が必要です。

これでfindIndex()の基本から応用、注意点までしっかり学べました。ぜひ実際のコードで使ってみてください。