JavaScript | indexOf() / lastIndexOf() / includes() / find() / findIndex() と比較して、どれをいつ使うか図解で説明

indexOf() / lastIndexOf() に続いて、includes()、find()、findIndex() は「配列から値や条件に合う要素を探す」ときによく使われるメソッドです。

初心者でも直感的に理解できるように、図解＋例＋実際の使いどころで説明します。

1. 配列検索メソッドの全体図

2. イメージ図で理解！

【A】indexOf()／lastIndexOf()／includes()

🔹 値を直接指定して検索するタイプ
（「完全一致」＝=== 比較）

配列: ['🍎','🍌','🍎','🍒']

indexOf('🍎')       → 0    （左から最初）
lastIndexOf('🍎')   → 2    （右から最初）
includes('🍎')      → true （存在するかどうか）
includes('🍍')      → false

配列: ['🍎','🍌','🍎','🍒']

indexOf('🍎')       → 0    （左から最初）
lastIndexOf('🍎')   → 2    （右から最初）
includes('🍎')      → true （存在するかどうか）
includes('🍍')      → false

🧠 イメージ図：

← 左から右へ ────────────────────→

 🍎(0)   🍌(1)   🍎(2)   🍒(3)
 ↑indexOf('🍎')     ↑lastIndexOf('🍎')

【B】find()／findIndex()

🔹 値ではなく、条件（関数） で検索するタイプ。
（中身を細かく調べたいときに最適）

const users = [
  { name: '太郎', age: 15 },
  { name: '花子', age: 20 },
  { name: '次郎', age: 25 }
];

// find: 条件に合う「要素」を返す
console.log(users.find(u => u.age >= 20));
// => { name: '花子', age: 20 }

// findIndex: 条件に合う「位置（インデックス）」を返す
console.log(users.findIndex(u => u.age >= 20));
// => 1

const users = [
  { name: '太郎', age: 15 },
  { name: '花子', age: 20 },
  { name: '次郎', age: 25 }
];

// find: 条件に合う「要素」を返す
console.log(users.find(u => u.age >= 20));
// => { name: '花子', age: 20 }

// findIndex: 条件に合う「位置（インデックス）」を返す
console.log(users.findIndex(u => u.age >= 20));
// => 1

🧠 イメージ図：

配列:
0:{太郎,15}   1:{花子,20}   2:{次郎,25}
          ↑ 最初に条件(age>=20)を満たす位置

find()      → {花子,20}
findIndex() → 1

3. どう使い分ける？（実践ベストプラクティス）

4. 使い分けのリアル例

✅ 例1：TODOリストの中に「完了済み」があるか？

const todos = ['買い物', '掃除', '読書(完了)'];
console.log(todos.includes('掃除')); // true

const todos = ['買い物', '掃除', '読書(完了)'];
console.log(todos.includes('掃除')); // true

✅ 例2：特定の名前の人がリストにいるか（値検索）

const names = ['太郎', '花子', '次郎'];
console.log(names.indexOf('花子')); // 1

const names = ['太郎', '花子', '次郎'];
console.log(names.indexOf('花子')); // 1

✅ 例3：年齢20歳以上の最初の人を探す（条件検索）

const users = [
  { name: '太郎', age: 15 },
  { name: '花子', age: 20 },
  { name: '次郎', age: 25 }
];
const adult = users.find(u => u.age >= 20);
console.log(adult); // { name: '花子', age: 20 }

const users = [
  { name: '太郎', age: 15 },
  { name: '花子', age: 20 },
  { name: '次郎', age: 25 }
];
const adult = users.find(u => u.age >= 20);
console.log(adult); // { name: '花子', age: 20 }

✅ 例4：20歳以上の人がいるかどうかだけ知りたい

const hasAdult = users.some(u => u.age >= 20);
console.log(hasAdult); // true

const hasAdult = users.some(u => u.age >= 20);
console.log(hasAdult); // true

💡補足：「some()」は find() と似ていますが、「あるかないか」だけ調べて真偽値を返します。

5. まとめ図（これだけ覚えればOK）

┌─────────────────────────────────┐
│ 値で検索      │ 条件で検索                                │
├────────┬────────────────────────┤
│ indexOf()    │ findIndex()  │ 位置を返す                │
│ lastIndexOf()│              │                          │
├────────┼────────────────────────┤
│ includes()   │ find()       │ 要素そのもの／存在を返す    │
└────────┴────────────────────────┘

6. 初心者向けポイントまとめ

• 値を直接検索 → includes()／indexOf()／lastIndexOf()
• 条件で検索 → find()／findIndex()（コールバック関数が必要）
• find は「中身そのもの」
  findIndex は「位置」
• 存在チェックだけなら includes() が一番シンプル！