JavaScript で配列の中身を探す基本
はじめてでも迷わないように、配列の中から「欲しい値がどこにあるか」を探す方法を、ていねいに説明します。ポイントは「前から探す」か「後ろから探す」か、そして「見つからないときはどうなるか」です。
前から探す indexOf
イメージ: 本の最初のページからキーワードを探して、最初に見つかった場所のページ番号を返す感じです。
- 役割: 指定した値を「先頭から」探して、最初に見つかったインデックスを返す
- 返り値: 見つかればインデックス番号、見つからなければ -1
- 書き方:
配列.indexOf(探す値)
配列.indexOf(探す値, 探し始める位置)
- 注意点: 比較は厳密比較（===）。例えば ‘3’ と 3 は別物。
例題 1：基本の探し方
const fruits = ['apple', 'banana', 'orange', 'banana'];
console.log(fruits.indexOf('banana')); // 1（最初のbananaは1番目）
console.log(fruits.indexOf('grape')); // -1（見つからない）
例題 2：途中から探す
const fruits = ['apple', 'banana', 'orange', 'banana'];
console.log(fruits.indexOf('banana', 2)); // 3（2番目以降で探すと3番目のbananaが見つかる）
後ろから探す lastIndexOf
イメージ: 本の最後のページから逆向きにキーワードを探して、最後に見つかった場所のページ番号を返す感じです。
- 役割: 指定した値を「末尾から」探して、最後に見つかったインデックスを返す
- 返り値: 見つかればインデックス番号、見つからなければ -1
- 書き方:
配列.lastIndexOf(探す値)
配列.lastIndexOf(探す値, ここから後ろ向きに探す開始位置)
- 注意点: 開始位置を指定すると「その位置から前（小さいインデックス側）」へ向かって検索する
例題 3：後ろから探す基本
const fruits = ['apple', 'banana', 'orange', 'banana'];
console.log(fruits.lastIndexOf('banana')); // 3（最後のbananaは3番目）
console.log(fruits.lastIndexOf('grape')); // -1（見つからない）
例題 4：開始位置を指定して後ろ向き検索
const fruits = ['apple', 'banana', 'orange', 'banana'];
console.log(fruits.lastIndexOf('banana', 2)); // 1（2番目より前にある最後のbananaは1番目）
つまずきやすいポイント
- インデックスは 0 から始まる: 最初の要素は 0、2番目は 1。戻り値の数字は「何番目」ではなく「インデックス番号」。
- 型が違うと一致しない: ‘3’ と 3 は別。true と 1 も別。
- -1 の扱いに注意: 見つからないときに -1 が返る。これをそのまま配列アクセスに使わない。
- 重複があるときの違い: indexOf は「最初に見つかった場所」、lastIndexOf は「最後に見つかった場所」。
よくある現場の使い方
- 存在チェック（含まれているか）
const colors = ['red', 'green', 'blue'];
const hasGreen = colors.indexOf('green') !== -1; // true なら存在
- 重複の中で位置を知る
const nums = [1, 2, 3, 2, 1];
const firstTwo = nums.indexOf(2); // 1
const lastTwo = nums.lastIndexOf(2); // 3
- 開始位置で範囲を絞る
const logs = ['INFO', 'WARN', 'INFO', 'ERROR', 'INFO'];
// 2番目以降で最初のINFO
const nextInfo = logs.indexOf('INFO', 2); // 4
// 3番目より前で最後のINFO
const prevInfo = logs.lastIndexOf('INFO', 2); // 2
ミニ練習問題
練習 1：存在チェック
- 課題: 配列
pets = ['dog', 'cat', 'hamster', 'cat']にcatが含まれているかをチェックし、最初と最後の位置を表示してください。 - ヒント: indexOf と lastIndexOf を両方使う
const pets = ['dog', 'cat', 'hamster', 'cat'];
const firstCat = pets.indexOf('cat');
const lastCat = pets.lastIndexOf('cat');
if (firstCat !== -1) {
console.log(`cat はあります。最初: ${firstCat}, 最後: ${lastCat}`);
} else {
console.log('cat はありません。');
}
練習 2：見つからないときの分岐
- 課題: 配列
stores = ['Tokyo', 'Osaka', 'Nagoya']で'Fukuoka'を探し、見つからなければ「見つからない」と表示してください。
const stores = ['Tokyo', 'Osaka', 'Nagoya'];
const idx = stores.indexOf('Fukuoka');
console.log(idx === -1 ? '見つからない' : `見つかった: ${idx}`);
練習 3：範囲検索の活用
- 課題: 配列
scores = [70, 80, 90, 80, 100]の中で、インデックス 2 以降で最初に 80 が出てくる位置を求めてください。
const scores = [70, 80, 90, 80, 100];
const pos = scores.indexOf(80, 2); // 3
console.log(pos);
まとめの核心
- indexOf: 先頭から探して「最初の位置」。見つからないときは -1。
- lastIndexOf: 末尾から探して「最後の位置」。見つからないときは -1。
- 厳密比較: 型が違うと一致しない。
- 開始位置: どこから探すかを指定できる（indexOf は前向き、lastIndexOf は後ろ向き）。
次の一歩（少しだけ発展）
- 含まれているかだけ知りたい:
includes('値')は true/false を返すので簡単。位置が不要ならこちらが便利。 - 複雑な条件で探したい:
findIndex((x) => 条件)なら「関数の条件」で検索できる（例：長さが5以上の文字列の最初の位置など）。