JavaScriptで配列の中から特定の条件に一致する要素のインデックスを取得したい場合、findIndex()メソッドを使用します。今回は、findIndex()の基本的な使い方から、使用時の注意点までをまとめていきたいと思います。
目次 非表示
findIndex()は、配列の各要素に対してコールバック関数を実行し、条件に一致する最初の要素のインデックス を返すメソッドです。一致する要素がない場合は-1（false）を返します。
const numbers = [10, 20, 30, 40, 50];
const index = numbers.findIndex(num => num > 25);
console.log(index); // 2（30のインデックス）const drinks = ['espresso', 'cappuccino', 'coffee', 'cappuccino'];
const index = drinks.findIndex(drink => drink.startsWith("c")); // c から始まるという条件を満たす最初の要素のインデックスを探す
console.log(index); // 1（"cappuccino" のインデックス）「c」から始まるという条件を満たす最初の要素のインデックスを取得します。上記の例の場合「capuchino」が条件を満たす最初の要素のため、1を返します。
const numbers = [1, 2, 3, 4, 5];
const index = numbers.findIndex(num => num > 10);
console.log(index); // -1（条件に合う要素なし）条件を満たす要素がないため、-1を返します。
const users = [
{ id: 1, name: 'Alex' },
{ id: 2, name: 'Jordan' },
{ id: 3, name: 'Taylor' }
];
const targetId = 2;
const index = users.findIndex(user => user.id === targetId); // ユーザーリストからidが2のユーザーを探す
console.log(index); // 1（Jordanのインデックス）ユーザーリストからIDが「2」のユーザーを探しています。条件を満たすユーザーは「Jordan」なので、インデックス番号は1を返します。
const items = ['kettle', 'server', 'mill', 'dripper'];
const removeItem = 'server'; // 削除したい要素
const index = items.findIndex(item => item === removeItem);
if (index !== -1) { // indexが-1でない（要素が見つかった）場合のみ以下を実行
items.splice(index, 1);
}
console.log(items); // kettle, mill, dripperitems.findIndex(item => item === "server")は"server"に一致する 最初の要素のインデックス を探します。"server"は インデックス 1（2番目の要素） にあるので、index = 1となる。要素が見つかったので、splice(index, 1) で、インデックス 1 の要素を削除した結果がconsole.log()に表示されます。
ちなみに、削除したい要素が配列に存在しない場合は以下のような結果になります。
const items = ['kettle', 'server', 'mill', 'dripper'];
const removeItem = 'filter'; // 配列に存在しない
const index = items.findIndex(item => item === removeItem);
if (index !== -1) {
items.splice(index, 1);
}
console.log(items); // kettle, server, mill, dripper（変更なし）findIndex()は最初に条件に合致した要素のインデックスを返します。すべての一致する要素を取得したい場合は filter()を使用する方が適切です。
const numbers = [10, 20, 30, 40, 30, 50];
const index = numbers.findIndex(num => num === 30);
console.log(index); // 2（最初に見つかった30のインデックス）戻り値が-1の場合、splice()やslice()などのメソッドで直接使用するとエラーになる可能性があるため、事前にチェックすることが重要です。
const elements = ['a', 'b', 'c'];
const index = elements.findIndex(el => el === 'd');
if (index !== -1) {
elements.splice(index, 1);
}
console.log(elements); // 元の配列のまま（変更なし）
【JavaScript】slice – 配列や文字列の一部を取り出すためのメソッド 