【初心者向け】JavaScript indexOfの使い方｜配列・文字列検索ガイド

はじめに

JavaScriptで配列や文字列から特定の値の位置を調べる方法として、基本的かつ便利な手法としてindexOfがあります。

しかし、「どのように使えば効率的に検索できるのか」「配列と文字列で挙動に違いはあるのか」と疑問に思うことも多いでしょう。

本記事では、indexOfの基本的な使い方から応用例、注意点や使用時のポイントまでを丁寧に解説します。
実際のコード例を交えながら学習することで、配列や文字列の検索をスムーズに行い、開発効率を向上させることができます。

indexOfとは

基本的な概要

indexOfは、文字列または配列の中から指定した値の位置を取得するメソッドです。

戻り値として、該当する要素の最初のインデックス番号を返します。インデックスは0から始まるため、最初の要素は0番目として扱われます。

文字列の場合

const str = "JavaScript";
console.log(str.indexOf("S")); // 4

配列の場合

const arr = ["apple", "banana", "cherry"];
console.log(arr.indexOf("banana")); // 1

上記のコードでは、文字列 “JavaScript” の中では “S” が最初に出現する位置を取得し、配列 [“apple”, “banana”, “cherry”] の中では “banana” が何番目の要素かを取得しています。

つまり、どの位置に指定した値があるかを簡単に知ることができます。

文字列と配列での違い

文字列と配列のindexOfは似ていますが、検索対象が文字列の部分一致か配列の完全一致かが異なります。

文字列では部分一致で見つかりますが、配列では要素全体が完全一致しないと見つかりません。

部分一致（文字列）
console.log("JavaScript".indexOf("Script")); // 4

配列は完全一致
console.log(["apple","banana"].indexOf("app")); // -1

文字列 “JavaScript” では “Script” が含まれるため位置4が返りますが、配列の場合は “app” は “apple” と完全一致しないため -1 が返されます。

検索対象によって挙動が異なる点に注意が必要です。

indexOfの返り値の意味

indexOfは、対象が見つかるとインデックス番号、見つからない場合は「-1」 を返します。

const fruits = ["apple","banana"];
console.log(fruits.indexOf("cherry")); // -1

このコードでは、配列に “cherry” は含まれていないため -1 が返ります。これを利用して条件分岐や複数要素の検索が可能です。

第二引数について

indexOf には第二引数を指定でき、検索を開始する位置を決められます。
省略すると先頭（0）から検索します。

const text = "Hello World";
console.log(text.indexOf("o", 5)); // 7

const arr = ["apple", "banana", "cherry", "banana"];
console.log(arr.indexOf("banana", 2)); // 3

このコードでは、文字列 “Hello World” の5文字目以降で “o” を探し、見つかった位置7を返します。
配列では、2番目以降で “banana” を探し、3番目の位置が返ります。

第二引数を使うと、検索を途中から始めることができます。

応用的な使い方

条件分岐

indexOfは、返り値を利用して条件分岐で処理を分けることができます。

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

if(fruits.indexOf("banana") !== -1){
  console.log("bananaは配列に含まれています");
} else {
  console.log("bananaは配列に含まれていません");
}

このコードでは、配列 fruits に “banana” が含まれているかを確認しています。indexOfが-1でない場合は配列に含まれていることを意味し、その結果に応じてコンソールに表示される内容が変わります。

複数要素検索

配列に同じ要素が複数存在する場合、indexOfでは最初に見つかった位置のみが返ります。

すべての位置を取得したい場合は、ループやfilterと組み合わせます。

const arr = [1,2,3,2,4];
let indices = [];
let idx = arr.indexOf(2);

while(idx != -1){    //idxが−1でない限り処理を続ける
  indices.push(idx);    // 見つかった位置idxをindices配列に追加する
  idx = arr.indexOf(2, idx + 1);    // idxの次の要素から2を再検索し、新しくidxに代入する
}

console.log(indices); // [1,3]

この例では、配列の中で 2 が出現するすべての位置を取得しています。最初に見つかった位置を取得後、次の要素から再検索することで全位置をリスト化しています。

よくある間違いと対処法

よくある間違い

indexOfを使用する際には、いくつか注意すべき点があります。ここを押さえておかないと、意図しない結果やバグにつながることがあります。

これらの注意点を意識することで、誤動作やデバッグの手間を減らすことができます。

デバッグ方法

コードが意図通りに動作しているかを確認するために、コンソールを使って値やインデックスを逐一チェックしましょう。

これにより、想定通りの挙動になっているか、誤った計算や条件分岐がないかを確認できます。

const arr = [1,2,3,2,4];
console.log(arr.indexOf(2));

出力結果

1

コンソールに出力される結果を見ながら、どの位置が返っているかを確認することで、処理の流れやロジックの誤りを簡単に発見できます。

この方法を習慣化することで、デバッグ（バグを見つけ手直しすること）の効率が大幅に向上します。

indexOf 使用時のポイント

indexOfはシンプルで便利なメソッドですが、正しく使うためにはいくつか押さえておきたいポイントがあります。

これらを理解して、効率的に検索や条件の判定を行っていきましょう。

まとめ

本記事では、JavaScript の indexOf を使って配列や文字列の中から特定の値の位置を調べる方法について解説しました。

indexOf はシンプルなメソッドですが、検索結果を条件分岐に利用したり、複数回の検索に応用したりすることで、さまざまな処理に活用できます。

特に、検索結果をそのまま使うのではなく、意図した条件で正しく判定できているかを意識することが大切です。

こうしたJavaScriptの基礎からWeb制作を学びたい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

段階的に学び、コーディングスキルを着実に身につけていきましょう。