初心者向け：検索（indexOf / includes）の基本
文字列や配列の中から「ある値が含まれているか」「位置はどこか」を調べる代表的なメソッドが indexOf と includes です。迷ったら「存在だけ知りたい→includes」「位置を知りたい→indexOf」と覚えるとスムーズです。
文字列での検索
- 目的の違い:
- includes: ある部分文字列が含まれているか（真偽）
- indexOf: どこにあるか（先頭からの位置。なければ -1）
const s = "Hello World";
// 含まれているか
console.log(s.includes("World")); // true
console.log(s.includes("world")); // false（大文字小文字は区別される）
// 位置（インデックス）を調べる
console.log(s.indexOf("World")); // 6
console.log(s.indexOf("world")); // -1（見つからない）
- 開始位置（fromIndex）を指定できる:
const t = "banana";
console.log(t.includes("na", 2)); // true（2文字目以降に "na" があるか）
console.log(t.indexOf("na", 2)); // 2（2文字目以降で最初の位置）
- 先頭・末尾の判定に便利（組み合わせ）:
const file = "app.min.js";
console.log(file.indexOf(".") !== -1); // ドットがあるか
console.log(file.includes(".js")); // ".js" を含むか
console.log(file.lastIndexOf(".js") === file.length - 3); // 末尾が ".js" か
- 大小文字を無視した検索（正規化）:
const q = "Tokyo";
const text = "I love TOKYO!";
console.log(text.toLowerCase().includes(q.toLowerCase())); // true
配列での検索
- 目的の違い:
- includes: 要素が含まれているか（真偽）
- indexOf: 要素の位置（なければ -1）
const arr = ["red", "green", "blue"];
console.log(arr.includes("green")); // true
console.log(arr.indexOf("blue")); // 2
console.log(arr.indexOf("pink")); // -1
- fromIndex（開始位置）も使える:
const nums = [1, 2, 3, 2];
console.log(nums.indexOf(2)); // 1（最初の2）
console.log(nums.indexOf(2, 2)); // 3（2番目以降で探す）
console.log(nums.includes(2, 2)); // true
- NaN の扱い（includes は見つけられる／indexOf は見つけられない）:
const a = [NaN];
console.log(a.includes(NaN)); // true
console.log(a.indexOf(NaN)); // -1（同値判定の仕様で見つからない）
よくあるつまずきと注意点
- ラベル: 文字列検索は大文字小文字を区別する。必要なら
toLowerCase()で揃える。 - ラベル:
indexOfは見つからないと-1。条件分岐でそのまま使うとバグになりやすいので、必ず!== -1で判定する。 - ラベル: 部分一致か完全一致かを意識する。配列の
includesは「要素の完全一致」、文字列のincludesは「部分文字列の一致」。 - ラベル: 末尾判定には
endsWith、先頭判定にはstartsWithを使うとわかりやすい。 - ラベル: 多数ヒットの検索は
indexOfで見つけた後、fromIndexを進めてループする。
実用パターン
- 拡張子が .js かを簡単に判定:
const file = "main.js";
console.log(file.endsWith(".js")); // true（includes より明確）
- 配列に要素がなければ追加（重複防止）:
const tags = ["js", "web"];
if (!tags.includes("node")) tags.push("node");
- 全ての出現位置を列挙（文字列）:
const s = "bananana";
let pos = s.indexOf("na");
while (pos !== -1) {
console.log(pos); // 2, 4, 6
pos = s.indexOf("na", pos + 1);
}
- 安全な存在チェック（indexOf の -1 を使う例）:
const list = ["a", "b", "c"];
const idx = list.indexOf("b");
if (idx !== -1) {
// 見つかったときだけ処理
console.log(`位置: ${idx}`);
}
ミニ練習
- 問1: 文字列 “Hello JavaScript” に “Script” が含まれているか判定せよ。
console.log("Hello JavaScript".includes("Script")); // true
- 問2: 配列 [“a”,”b”,”c”,”b”] で、2番目の “b” の位置を調べよ。
const arr = ["a","b","c","b"];
console.log(arr.indexOf("b", 2)); // 3
- 問3: 文字列 “image.photo.png” で最後の “.” の位置を取り出し、拡張子を表示せよ。
const file = "image.photo.png";
const i = file.lastIndexOf(".");
console.log(file.slice(i + 1)); // "png"
- 問4: 大文字・小文字を無視して “Tokyo” を含むか判定せよ。
const t = "I love TOKYO!";
console.log(t.toLowerCase().includes("tokyo")); // true
まとめ
- 存在だけなら includes、位置が必要なら indexOf。
- 文字列は部分一致、配列は要素の完全一致。
- 見つからないときの
-1に注意し、大小文字の扱いは正規化で揃える。 - 開始位置（fromIndex）や
lastIndexOfを使うと、複数回の検索や末尾寄り探索が楽になる。