findIndex で「見つかった場所」を手に入れるイメージ
arr.findIndex(x => x.id === 3)
findIndex は、「配列の中から条件に合う“最初の1件”を探して、そのインデックス（場所の番号）を返す」メソッドです。 天才プログラマー視点で言うと、「要素そのものじゃなくて“位置”が欲しいときは findIndex 一択」です。
find は「要素」を返しますが、findIndex は「インデックス」を返します。 この違いをちゃんと理解すると、配列操作の自由度が一気に上がります。
findIndex の基本構造と「インデックスが返る」仕組み
const arr = [
{ id: 1, name: "Aki" },
{ id: 3, name: "Mika" },
{ id: 5, name: "Ken" }
];
const idx = arr.findIndex(x => x.id === 3);
console.log(idx); // 1
console.log(arr[idx]); // { id: 3, name: "Mika" }
このコードで起きていることを丁寧に分解します。
配列 arr の先頭から順番に、要素 x を取り出していきます。 そのたびに、コールバック関数 x => x.id === 3 を呼びます。 この関数が true を返した瞬間、その要素のインデックス（位置の番号）を返して検索を終了します。
つまり、「条件に合う最初の1件が、配列の何番目にいるか」を教えてくれるのが findIndex です。
例題：ユーザー一覧から特定 id の位置を探す
const users = [
{ id: 1, name: "Aki" },
{ id: 2, name: "Mika" },
{ id: 3, name: "Ken" }
];
const index = users.findIndex(u => u.id === 3);
console.log(index); // 2
console.log(users[index]); // { id: 3, name: "Ken" }
ここでの流れはこうです。
0番目 { id: 1, name: "Aki" } → u.id === 3 は false。 1番目 { id: 2, name: "Mika" } → false。 2番目 { id: 3, name: "Ken" } → true。
true になったので、「2」というインデックスを返して終了します。 「どこにいるか」が欲しいときに、findIndex は非常に自然な選択です。
見つからなかったときの挙動を深掘りする
const users = [
{ id: 1, name: "Aki" },
{ id: 2, name: "Mika" }
];
const index = users.findIndex(u => u.id === 999);
console.log(index); // -1
条件に合う要素が1件もない場合、findIndex は -1 を返します。 ここがとても重要です。
find は「見つからないとき undefined」ですが、 findIndex は「見つからないとき -1」です。
そのため、使うときは必ずこういうチェックが必要になります。
const index = users.findIndex(u => u.id === 2);
if (index === -1) {
console.log("ユーザーが見つかりませんでした");
} else {
console.log("見つかった位置:", index);
console.log("ユーザー:", users[index]);
}
この「-1 チェック」を忘れると、users[-1] のような意味不明なアクセスになり、バグの原因になります。 プロのコードでは、ここを丁寧に書くかどうかが品質の差になります。
コールバック関数の役割と設計を理解する
findIndex のコールバックは、最大3つの引数を受け取れます。
arr.findIndex((value, index, array) => {
// value: 今の要素
// index: その要素のインデックス
// array: 元の配列そのもの
// 戻り値: true なら「ここだ！」と判断、false なら次へ
});
よく使うのは value だけですが、インデックスを条件に含めることもできます。
例えば、「偶数番目にある id=3 を探したい」ならこう書けます。
const idx = arr.findIndex((v, i) => i % 2 === 0 && v.id === 3);
ここで重要なのは、「この条件を満たした瞬間に止まる」ということです。 filter のように「全部見てから絞り込む」のではなく、「見つかったら即終了」です。 そのぶん、無駄な処理が減り、効率的な検索ができます。
find と findIndex の違いをはっきりさせる
find は「要素そのもの」を返します。 findIndex は「インデックス（場所）」を返します。
const arr = [
{ id: 1, name: "Aki" },
{ id: 3, name: "Mika" },
{ id: 5, name: "Ken" }
];
const item = arr.find(x => x.id === 3); // { id: 3, name: "Mika" }
const index = arr.findIndex(x => x.id === 3); // 1
どちらを使うかは、「欲しいのが“中身”か、“場所”か」で決めます。
例えば、 「見つけた要素をそのまま使うだけ」なら find。 「見つけた要素を削除したい・差し替えたい」なら findIndex の方が便利です。
例題：特定ユーザーを削除する処理
const users = [
{ id: 1, name: "Aki" },
{ id: 2, name: "Mika" },
{ id: 3, name: "Ken" }
];
const targetId = 2;
const index = users.findIndex(u => u.id === targetId);
if (index !== -1) {
users.splice(index, 1); // その位置の要素を1件削除
}
console.log(users);
// [{ id: 1, name: "Aki" }, { id: 3, name: "Ken" }]
ここでは、
findIndexで「削除したいユーザーがどこにいるか」を調べるspliceでその位置の要素を削除する
という流れになっています。 「位置が分かるからこそ、削除や差し替えが簡単になる」というのが、findIndex の大きな価値です。
よくあるミスと注意点を深掘りする
ブロック {} を使ったのに return を書き忘れると、常に -1 が返ります。
const idx = arr.findIndex(x => {
x.id === 3; // return がない！
});
console.log(idx); // -1（見つからなかった扱い）
正しくはこうです。
const idx = arr.findIndex(x => {
return x.id === 3;
});
または省略形でこう書けます。
const idx = arr.findIndex(x => x.id === 3);
もうひとつ重要なのは、「見つからないときは -1」という挙動を忘れないこと。 if (idx === -1) のチェックを必ず書く癖をつけると、バグがぐっと減ります。
まとめ：findIndex は「場所が欲しいときの検索専用ツール」
findIndex を使いこなせると、配列操作のレベルが一段階上がります。
配列の中から、条件に合う「最初の1件」が、何番目にいるか知りたいとき。 その位置を使って、削除・更新・差し替えなどをしたいとき。
「この中から該当するものを1つ探して、その“場所”を知りたい」と感じたら、まず findIndex を思い出す。 その瞬間から、あなたの JavaScript は“配列の編集テクニック”の面でも、確実にプロ寄りになっていきます。