JavaScriptのindexOfを使いこなす：基本から配列・文字列での実践、代替メソッドの選び方まで解説

JavaScriptにおける要素検索の基本であり、古くから多くの開発者に愛用されてきたメソッドがindexOfです。

モダンなJavaScript開発が普及した現在においても、文字列や配列の中に特定の要素が存在するかを確認する手段として、その重要性は変わりません。

本記事では、indexOfの基本的な使い方から、実務で役立つ応用テクニック、さらには最新の代替メソッドとの使い分けまでを詳しく解説します。

初心者から中級者まで、JavaScriptを扱うすべてのエンジニアにとって役立つ知識を整理しました。

indexOfメソッドの基本概念と構文

JavaScriptのindexOfメソッドは、文字列や配列の中に特定の要素が含まれているかを検索し、その「最初に見つかった位置（インデックス）」を数値で返すメソッドです。

もし検索対象が見つからなかった場合には、戻り値として -1 を返すという特徴を持っています。

このメソッドは、JavaScriptの標準仕様であるECMAScriptの初期から存在しており、高いブラウザ互換性と安定性を誇ります。

indexOfの基本的な構文

indexOfの構文は非常にシンプルであり、第一引数に検索したい値、第二引数に検索を開始する位置を指定します。

// 文字列または配列.indexOf(検索したい値, [検索開始インデックス]);

第二引数の「検索開始インデックス」は省略可能であり、省略した場合は先頭（インデックス0）から検索が開始されます。

戻り値は、見つかった場合は0以上の数値、見つからない場合は-1となります。

文字列（String）におけるindexOfの活用

文字列操作において、indexOfは特定のキーワードが含まれているかどうかを調査する際によく利用されます。

例えば、ユーザーの入力内容に特定の禁止ワードが含まれていないかチェックする場合などに有効です。

文字列検索の基本例

以下のコードは、文字列の中から特定の単語のインデックスを取得する例です。

const message = "JavaScriptは非常に強力なプログラミング言語です。";
const searchKeyword = "強力";

const index = message.indexOf(searchKeyword);

console.log("見つかったインデックス:", index);

見つかったインデックス: 11

この例では、「強力」という文字が11番目の位置から始まっているため、11が返されます。

JavaScriptのインデックスは0から数え始めることに注意が必要です。

大文字と小文字の区別について

indexOfは、検索時に大文字と小文字を厳密に区別します。

そのため、「JavaScript」を「javascript」という小文字のキーワードで検索しても、一致するとは見なされません。

const tech = "JavaScript";

console.log(tech.indexOf("javascript")); // 小文字で検索

-1

もし大文字小文字を区別せずに検索したい場合は、一度対象の文字列をtoLowerCase()などで小文字に統一してからindexOfを実行する手法が一般的です。

第二引数を利用した繰り返し検索

同じ文字列内に複数の対象キーワードが存在する場合、indexOfは最初に見つかった位置しか返しません。

しかし、第二引数（検索開始位置）を活用することで、すべての出現位置を特定することが可能です。

const text = "りんご, みかん, りんご, ぶどう, りんご";
const target = "りんご";
let position = text.indexOf(target);

while (position !== -1) {
    console.log("発見位置:", position);
    // 次の検索は、現在の発見位置の直後から開始する
    position = text.indexOf(target, position + 1);
}

発見位置: 0
発見位置: 8
発見位置: 20

このようにループ処理を組み合わせることで、単純な文字列検索をより高度な検索アルゴリズムへと拡張できます。

配列（Array）におけるindexOfの活用

配列におけるindexOfは、指定した要素が配列の何番目に格納されているかを確認するために用いられます。

特に、データの重複チェックや、特定の値を削除するための事前確認として非常に便利です。

配列検索の基本例

配列内に特定の文字列や数値が存在するかを確認する基本的な例を見てみましょう。

const fruits = ["Apple", "Banana", "Orange", "Grape"];

console.log(fruits.indexOf("Orange"));
console.log(fruits.indexOf("Melon"));

2
-1

「Orange」はインデックス2に存在しますが、「Melon」は配列に含まれていないため、-1が返されます。

厳密等価判定（===）による比較の注意点

配列のindexOfで最も注意すべき点は、要素の比較に「厳密等価判定（===）」が使用されることです。

つまり、数値の1を検索する場合に、文字列の"1"は一致とは見なされません。

さらに重要なのが、オブジェクトや配列の検索です。

const users = [{ id: 1, name: "Tanaka" }, { id: 2, name: "Sato" }];
const targetUser = { id: 1, name: "Tanaka" };

console.log(users.indexOf(targetUser));

-1

この結果が-1になる理由は、JavaScriptにおいてオブジェクトの比較が「参照（メモリ上の位置）」で行われるためです。

内容が同じであっても、別の変数やリテラルで作られたオブジェクトは別物と判断されます。

オブジェクトを検索したい場合は、indexOfではなく、後述するfindIndexを使用するのが正解です。

NaNの検索ができない問題

もう一つの落とし穴として、indexOfでは数値のNaN（Not-a-Number）を検索できないという制約があります。

const numbers = [10, NaN, 30];

console.log(numbers.indexOf(NaN));

-1

これはJavaScriptの仕様上、NaN === NaNがfalseになるために発生する現象です。

NaNが含まれているかを確認したい場合は、ES2015で導入されたincludesメソッドを使用しましょう。

代替メソッドとの賢い使い分け

JavaScriptの進化に伴い、indexOfの代わりに使用できるメソッドがいくつか登場しました。

それぞれの特徴を理解し、状況に応じて最適なものを選択することがプロフェッショナルなコードへの第一歩です。

includesメソッドとの違い

ES2015から導入されたincludesメソッドは、指定した値が含まれているかどうかを「真偽値（true / false）」で返します。

単に「存在するかどうか」だけを知りたい場合は、indexOfよりもincludesの方が可読性が高くなります。

const tags = ["js", "html", "css"];

// indexOfを使用する場合（-1と比較が必要）
if (tags.indexOf("js") !== -1) {
    console.log("jsタグが含まれています");
}

// includesを使用する場合（直感的）
if (tags.includes("js")) {
    console.log("jsタグが含まれています");
}

indexOfを使うと、-1との比較を忘れてしまうといったミスが起こりやすいため、存在確認のみが目的であればincludesの使用を推奨します。

一方で、その要素が「どこにあるか（インデックス）」の情報が必要な場合は、引き続きindexOfが必要です。

findIndexメソッドとの違い

前述の通り、オブジェクトの配列を検索する場合、indexOfでは対応できません。

そこで役立つのがfindIndexメソッドです。

findIndexは引数にコールバック関数を受け取り、条件に一致した最初の要素のインデックスを返します。

const users = [
    { id: 1, name: "Tanaka" },
    { id: 2, name: "Sato" },
    { id: 3, name: "Suzuki" }
];

// IDが2のユーザーのインデックスを探す
const index = users.findIndex(user => user.id === 2);

console.log("Satoさんのインデックス:", index);

Satoさんのインデックス: 1

複雑な検索条件やオブジェクトのプロパティを基準に検索したい場合は、findIndexが唯一の選択肢となります。

lastIndexOfメソッドによる末尾からの検索

indexOfが先頭から検索するのに対し、lastIndexOfは「末尾から逆方向に検索」を行います。

ファイルパスから拡張子を特定する場合など、最後に現れる特定の文字を探したい時に威力を発揮します。

const filePath = "/assets/images/header/logo.png";

const lastSlashIndex = filePath.lastIndexOf("/");
const fileName = filePath.substring(lastSlashIndex + 1);

console.log("最後のスラッシュ位置:", lastSlashIndex);
console.log("ファイル名:", fileName);

最後のスラッシュ位置: 21
ファイル名: logo.png

実務で役立つindexOfの応用テクニック

ここでは、indexOfを単なる検索以上の用途で使いこなすための具体的なテクニックをいくつか紹介します。

配列の重複要素を削除する（フィルタリング）

filterメソッドとindexOfを組み合わせることで、配列から重複した要素を取り除くことができます。

const originalArray = [1, 2, 2, 3, 4, 4, 5];

const uniqueArray = originalArray.filter((value, index, self) => {
    // 最初の出現インデックスと現在のインデックスが一致するものだけを残す
    return self.indexOf(value) === index;
});

console.log(uniqueArray);

[1, 2, 3, 4, 5]

これは、indexOfが「最初に見つかったインデックス」を返す性質を巧みに利用した手法です。

現在ではnew Set()を用いる手法の方が一般的ですが、古いコードの保守や特定のロジックにおいては今でも目にすることがあります。

特定の複数条件のうちいずれかに一致するか確認

複数の候補のいずれかが文字列に含まれているかをチェックする場合にも、indexOfは活用できます。

const userAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64)";
const targets = ["Windows", "Macintosh", "Linux"];

const detectedPlatform = targets.find(platform => userAgent.indexOf(platform) !== -1);

console.log("検出されたプラットフォーム:", detectedPlatform);

このようにArray.prototype.findなどと組み合わせることで、条件分岐を簡潔に記述できるようになります。

パフォーマンスに関する考察

indexOfのパフォーマンスについて理解しておくことは、大規模なアプリケーションを開発する上で欠かせません。

indexOfは、基本的に配列の要素を先頭から一つずつ順番に比較していく「線形探索（Linear Search）」アルゴリズムを採用しています。

そのため、配列の要素数が数万件、数百万件と膨大になった場合、検索速度は要素数に比例して遅くなります（計算量はO(n)）。

大規模データでの最適化

もし巨大なデータセットに対して頻繁に存在確認を行う必要がある場合は、indexOfではなくSetやMapの使用を検討してください。

Setのhasメソッドはハッシュテーブルを利用しているため、データ量が増えても検索速度がほとんど落ちません（計算量は平均O(1)）。

const massiveArray = [...Array(1000000).keys()]; // 100万要素
const massiveSet = new Set(massiveArray);

// 配列での検索（遅い可能性がある）
console.time("Array");
massiveArray.indexOf(999999);
console.timeEnd("Array");

// Setでの検索（非常に高速）
console.time("Set");
massiveSet.has(999999);
console.timeEnd("Set");

通常のUI開発で扱う程度のデータ量であればindexOfで十分ですが、大量のログデータや解析処理を扱う場合にはこの違いが決定的な差となります。

よくあるエラーとトラブルシューティング

indexOfを使用する際、予期しない動作に悩まされることがあります。

最も多いのは、nullやundefinedに対してメソッドを呼び出してしまうエラーです。

let userData = null;

// エラー発生: Uncaught TypeError: Cannot read properties of null (reading 'indexOf')
console.log(userData.indexOf("Admin"));

これを防ぐためには、オプショナルチェイニング演算子（?.）を使用するのが現代的な解決策です。

console.log(userData?.indexOf("Admin") ?? -1);

これにより、userDataがnullの場合でもエラーにならず、安全に-1を取得することができます。

また、戻り値が0になるケース（先頭で見つかった場合）にも注意してください。

JavaScriptでは0は「偽（falsy）」として扱われるため、if (array.indexOf(item)) のように書くと、先頭で見つかった時に条件式がfalseになってしまいます。

必ず !== -1 という形で比較を行うことが、バグを防ぐための鉄則です。

まとめ

JavaScriptのindexOfは、文字列や配列内の要素を検索するための最も基本的かつ信頼性の高いメソッドです。

「インデックスを返す」というシンプルな機能は、部分一致の判定、重複排除、位置特定など、多岐にわたるシーンで応用が可能です。

一方で、モダンな開発においてはincludesによる存在確認や、findIndexによるオブジェクト検索など、より適切なメソッドとの使い分けが求められます。

特に、厳密等価比較による判定の仕組みや、大規模データにおけるパフォーマンス特性を正しく理解しておくことは、堅牢なプログラムを書くために不可欠です。

今回解説した特性や注意点を踏まえ、日々のコーディングにおいてindexOfを適切に選択し、使いこなせるようになりましょう。

正しく理解された基礎知識こそが、複雑なアプリケーション開発を支える強力な武器となります。