【JavaScript】indexOfメソッドの使い方｜文字列・配列の検索とincludes・findとの違い

この記事で学べること

• String.prototype.indexOf() の基本構文と戻り値
• fromIndex（第2引数）を活用した検索テクニック
• Array.prototype.indexOf() と厳密等価比較の注意点
• includes() との違いと使い分け
• lastIndexOf()・find()・findIndex()・search() との比較
• 実務で使う頻出パターン（存在チェック・フィルタリング・出現回数カウント）
• indexOf() でハマりやすいミスと対策

str.indexOf(searchValue)
str.indexOf(searchValue, fromIndex)

const str = 'Hello, World!';

// 文字列が見つかった場合 → 開始位置のインデックスを返す
console.log(str.indexOf('World'));   // 7
console.log(str.indexOf('Hello'));   // 0
console.log(str.indexOf('o'));       // 4（最初に見つかった位置）

// 文字列が見つからない場合 → -1 を返す
console.log(str.indexOf('world'));   // -1（大文字小文字が区別される）
console.log(str.indexOf('xyz'));     // -1

// 空文字列を検索
console.log(str.indexOf(''));        // 0

7
0
4
-1
-1
0

const str = 'Hello, World!';

// 大文字小文字を区別する
console.log(str.indexOf('world'));  // -1（見つからない）
console.log(str.indexOf('World'));  // 7（見つかる）

// 大文字小文字を無視して検索する方法
const lowerStr = str.toLowerCase();
console.log(lowerStr.indexOf('world'));  // 7（見つかる）

ポイント：大文字小文字を区別しない検索が頻繁に必要な場合は、正規表現の i フラグ（str.search(/world/i)）を使う方法もあります。

const str = 'abcabc';

// 先頭から検索（デフォルト）
console.log(str.indexOf('abc'));     // 0

// インデックス1から検索
console.log(str.indexOf('abc', 1));  // 3

// インデックス4から検索（見つからない）
console.log(str.indexOf('abc', 4));  // -1

注意：fromIndex に負の値を指定すると 0 として扱われます。fromIndex が文字列の長さ以上の場合は検索が行われず、常に -1 を返します。

const str = 'JavaScript is great. Java is also great.';
const searchWord = 'great';
const positions = [];

let pos = str.indexOf(searchWord);

while (pos !== -1) {
  positions.push(pos);
  pos = str.indexOf(searchWord, pos + 1);
}

console.log(positions); // [15, 35]

[15, 35]

const fruits = ['apple', 'banana', 'cherry', 'banana'];

// 要素が見つかった場合
console.log(fruits.indexOf('banana'));  // 1（最初の位置）
console.log(fruits.indexOf('cherry'));  // 2

// 要素が見つからない場合
console.log(fruits.indexOf('grape'));   // -1

// fromIndex を指定
console.log(fruits.indexOf('banana', 2));  // 3（インデックス2以降で検索）

const arr = [1, 2, 3];

// 数値の 1 は見つかる
console.log(arr.indexOf(1));     // 0

// 文字列の '1' は見つからない（=== で比較するため）
console.log(arr.indexOf('1'));   // -1

// オブジェクトの参照も === で比較
const obj = { id: 1 };
const list = [{ id: 1 }, obj];

console.log(list.indexOf({ id: 1 }));  // -1（別のオブジェクト）
console.log(list.indexOf(obj));          // 1（同じ参照）

const arr = [1, NaN, 3];

// indexOf() では NaN を見つけられない
console.log(arr.indexOf(NaN));       // -1

// includes() なら NaN を検出できる
console.log(arr.includes(NaN));     // true

// findIndex() でも検出可能
console.log(arr.findIndex(v => Number.isNaN(v)));  // 1

注意：配列に NaN が含まれる可能性がある場合は、indexOf() ではなく includes() または findIndex() を使いましょう。

const arr = [10, 20, 30];

// indexOf(): 位置を返す
console.log(arr.indexOf(20));     // 1
console.log(arr.indexOf(99));     // -1

// includes(): 真偽値を返す
console.log(arr.includes(20));   // true
console.log(arr.includes(99));   // false

indexOf() vs includes() の使い分け

• 「どの位置にあるか」が必要 → indexOf()
• 「含まれているかどうか」だけ知りたい → includes()
• NaN の検索が必要 → includes()
• IE11 対応が必要 → indexOf()（includes は IE 非対応）

const str = 'abcabc';

// indexOf(): 先頭から検索 → 最初の位置
console.log(str.indexOf('bc'));       // 1

// lastIndexOf(): 末尾から検索 → 最後の位置
console.log(str.lastIndexOf('bc'));   // 4

// 配列でも同様
const arr = [1, 2, 3, 2, 1];
console.log(arr.indexOf(2));         // 1
console.log(arr.lastIndexOf(2));     // 3

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

// find(): 条件に一致する要素の値を返す
const user = users.find(u => u.id === 2);
console.log(user);  // { id: 2, name: 'Bob' }

// findIndex(): 条件に一致する要素のインデックスを返す
const index = users.findIndex(u => u.name === 'Charlie');
console.log(index);  // 2

const str = 'Hello, World!';

// indexOf(): 文字列のみ
console.log(str.indexOf('World'));   // 7

// search(): 正規表現が使える
console.log(str.search(/world/i));  // 7（大文字小文字を無視）
console.log(str.search(/\d+/));     // -1（数字は含まれない）

const message = 'エラーが発生しました: タイムアウト';

// 文字列が含まれているか判定
if (message.indexOf('エラー') !== -1) {
  console.log('エラーメッセージを検出しました');
}

// ES2016以降なら includes() がより直感的
if (message.includes('エラー')) {
  console.log('エラーメッセージを検出しました');
}

const files = [
  'index.html',
  'style.css',
  'app.js',
  'utils.js',
  'README.md',
];

// .js ファイルだけをフィルタリング
const jsFiles = files.filter(file => file.indexOf('.js') !== -1);
console.log(jsFiles);  // ['app.js', 'utils.js']

// includes() を使った書き方（推奨）
const jsFiles2 = files.filter(file => file.includes('.js'));
console.log(jsFiles2); // ['app.js', 'utils.js']

const url = 'https://example.com/api/users?page=1';

// HTTPS かどうか判定（先頭一致）
if (url.indexOf('https://') === 0) {
  console.log('安全な接続です');
}

// クエリパラメータが含まれているか
if (url.indexOf('?') !== -1) {
  const queryStart = url.indexOf('?');
  const queryString = url.substring(queryStart + 1);
  console.log(queryString);  // 'page=1'
}

// ファイルの拡張子を取得
const filename = 'document.pdf';
const dotIndex = filename.lastIndexOf('.');
if (dotIndex !== -1) {
  const ext = filename.substring(dotIndex);
  console.log(ext);  // '.pdf'
}

ポイント：先頭一致の判定には indexOf() === 0 よりも startsWith()（ES2015）を使う方が可読性が高くなります。同様に、末尾一致には endsWith() が便利です。

function countOccurrences(str, searchWord) {
  let count = 0;
  let pos = str.indexOf(searchWord);

  while (pos !== -1) {
    count++;
    pos = str.indexOf(searchWord, pos + 1);
  }

  return count;
}

const text = 'banana';
console.log(countOccurrences(text, 'an'));  // 2

const code = 'const a = 1; const b = 2; const c = 3;';
console.log(countOccurrences(code, 'const'));  // 3

2
3

const arr = [1, 2, 3, 2, 1, 4, 3];

// indexOf() で重複除外（初回出現のみ残す）
const unique = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});

console.log(unique);  // [1, 2, 3, 4]

// Set を使った方がシンプル（推奨）
const unique2 = [...new Set(arr)];
console.log(unique2); // [1, 2, 3, 4]

[1, 2, 3, 4]
[1, 2, 3, 4]

const str = 'Hello, World!';

// NG: 0 は falsy なので、先頭で見つかった場合に false 扱いになる
if (str.indexOf('Hello')) {
  console.log('見つかった');  // 実行されない！
}

// OK: -1 と比較する
if (str.indexOf('Hello') !== -1) {
  console.log('見つかった');  // 実行される
}

注意：if (str.indexOf(...)) のように書くと、先頭（インデックス0）で見つかった場合に「見つからなかった」と誤判定されます。必ず !== -1 で比較しましょう。

const url = 'https://example.com';

// 「https:// で始まるか」の判定
console.log(url.indexOf('https://') === 0);    // true（先頭一致）

// 「example を含むか」の判定
console.log(url.indexOf('example') !== -1);  // true（部分一致）

// ES2015以降はこちらが推奨
console.log(url.startsWith('https://'));  // true
console.log(url.includes('example'));    // true

// String.indexOf() に undefined を渡すと 'undefined' 文字列として検索される
const str = 'value is undefined';
console.log(str.indexOf(undefined));  // 9（'undefined' という文字列を検索）
console.log(str.indexOf());           // 9（引数省略も undefined 扱い）

// Array.indexOf() では undefined 値そのものを検索
const arr = [1, undefined, 3];
console.log(arr.indexOf(undefined));  // 1

// 疎な配列（sparse array）の場合
const sparse = [1, , 3];  // インデックス1は空スロット
console.log(sparse.indexOf(undefined));  // -1（空スロットは undefined ではない）

注意：String.prototype.indexOf() は引数を文字列に変換してから検索します。undefined は "undefined" として、null は "null" として検索される点に注意してください。

覚えておくべき3つのポイント

• 存在チェックだけなら includes() を使う（可読性が高い）
• 位置が必要なら indexOf() を使う（戻り値がインデックス）
• indexOf() の戻り値を if 文で直接使わない（0 が falsy になるバグに注意）