これだけで分かる！JavaScriptのindexOf使い方10選

はじめに
●JavaScriptのindexOfメソッドとは
- ○indexOfメソッドの基本
●indexOfメソッドの使い方
●indexOfメソッドの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのindexOfメソッドを使いこなすことができるようになります。

初心者の方でもわかりやすいように、基本的な使い方から応用例、注意点やカスタマイズ方法まで詳しく解説していきます。

サンプルコードもたっぷりと紹介しているので、実際のプログラムに応用してみてください。

●JavaScriptのindexOfメソッドとは

○indexOfメソッドの基本

indexOfメソッドは、JavaScriptにおいて文字列や配列の中から特定の要素が存在する位置を調べる際に使用されます。

該当する要素が存在する場合は、その位置（インデックス）を返し、存在しない場合は-1を返します。

●indexOfメソッドの使い方

○サンプルコード1：文字列内の特定文字の位置を調べる

このコードでは、文字列内に特定の文字が存在する位置を調べるコードを紹介しています。

この例では、「こんにちは、世界！」という文字列内に「世界」が存在する位置を調べています。

let str = "こんにちは、世界！";
let searchWord = "世界";
let position = str.indexOf(searchWord);
console.log(position); // 6

○サンプルコード2：配列内に特定の要素が存在するか調べる

このコードでは、配列内に特定の要素が存在するかどうかを調べるコードを紹介しています。

この例では、配列fruits内に"apple"が存在するかどうかを調べています。

let fruits = ["banana", "apple", "orange"];
let searchElement = "apple";
let index = fruits.indexOf(searchElement);
console.log(index); // 1

○サンプルコード3：複数の特定文字が存在する位置をすべて調べる

このコードでは、文字列内に複数の特定文字が存在する位置をすべて調べるコードを紹介しています。

この例では、「あいうあかあさ」という文字列内に「あ」が存在する位置をすべて調べています。

let text = "あいうあかあさ";
let target = "あ";
let positions = [];
let pos = text.indexOf(target);

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

console.log(positions); // [0, 3, 5]

●indexOfメソッドの応用例

○サンプルコード4：単語検索機能を作成する

このコードでは、テキストエリアに入力された文字列内に指定した単語が存在するかどうかを調べるコードを紹介しています。

この例では、入力されたテキスト内に「JavaScript」という単語が存在するかを調べて、結果を表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>単語検索機能</title>
</head>
<body>
  <textarea id="inputText" rows="10" cols="30"></textarea><br>
  <button id="searchBtn">検索</button>
  <p id="result"></p>

  <script>
    document.getElementById("searchBtn").addEventListener("click", function() {
      let inputText = document.getElementById("inputText").value;
      let searchWord = "JavaScript";
      let position = inputText.indexOf(searchWord);

      if (position !== -1) {
        document.getElementById("result").textContent = "「" + searchWord + "」が見つかりました。";
      } else {
        document.getElementById("result").textContent = "「" + searchWord + "」は見つかりませんでした。";
      }
    });
  </script>
</body>
</html>

○サンプルコード5：特定文字列で始まる要素を配列から抽出する

このコードでは、配列内の要素のうち、特定の文字列で始まる要素を抽出するコードを紹介しています。

この例では、配列words内にある「apple」で始まる要素を抽出しています。

const words = ["apple", "orange", "applePie", "grape", "appleJuice"];
const prefix = "apple";
const filteredWords = words.filter(word => word.indexOf(prefix) === 0);

console.log(filteredWords); // ["apple", "applePie", "appleJuice"]

○サンプルコード6：特定の文字列を含む行だけ表示するテーブル

このコードでは、HTMLテーブル内の行のうち、特定の文字列を含む行だけを表示する機能を実装しています。

この例では、テーブル内に「プログラミング」を含む行だけを表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>特定の文字列を含む行だけ表示するテーブル</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <input id="filterInput" type="text" value="プログラミング">
  <button id="filterBtn">フィルター</button>
  <table id="dataTable" border="1">
    <tr>
      <td>JavaScriptプログラミング入門</td>
    </tr>
    <tr>
      <td>HTMLとCSSの基本</td>
    </tr>
    <tr>
      <td>Pythonプログラミング入門</td>
    </tr>
  </table>

  <script>
    document.getElementById("filterBtn").addEventListener("click", function() {
      const filterInput = document.getElementById("filterInput").value;
      const dataTable = document.getElementById("dataTable");
      const rows = dataTable.getElementsByTagName("tr");

      for (let row of rows) {
        const cellText = row.getElementsByTagName("td")[0].textContent;

        if (cellText.indexOf(filterInput) !== -1) {
          row.classList.remove("hidden");
        } else {
          row.classList.add("hidden");
        }
      }
    });
  </script>
</body>
</html>

○サンプルコード7：テキスト内にURLが含まれているかチェックする

このコードでは、入力されたテキスト内にURLが含まれているかどうかをチェックする機能を実装しています。

この例では、テキスト内で”http://”または”https://”から始まる文字列を検出しています。

function containsURL(text) {
  const urlPattern = /(http|https):\/\/[\w.-]+(\.[\w.-]+)+[\w@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-]/;
  return urlPattern.test(text);
}

const sampleText = "この文はURLを含んでいます: https://example.com";
console.log(containsURL(sampleText)); // true

○サンプルコード8：カンマ区切りの文字列から指定した要素を取り出す

このコードでは、カンマ区切りの文字列から指定したインデックスの要素を取り出す機能を実装しています。

この例では、文字列”apple,orange,banana,grape”から2番目の要素を取り出しています。

function getCSVElement(csv, index) {
  const elements = csv.split(",");
  return elements[index];
}

const csvString = "apple,orange,banana,grape";
console.log(getCSVElement(csvString, 2)); // "banana"

○サンプルコード9：部分一致で配列を検索して絞り込む

このコードでは、配列内の要素を部分一致で検索し、該当する要素だけを新しい配列に追加しています。

この例では、配列[“apple”, “orange”, “banana”, “grape”]から”an”を含む要素だけを抽出しています。

function filterArrayByPartialMatch(array, query) {
  return array.filter(element => element.indexOf(query) !== -1);
}

const fruits = ["apple", "orange", "banana", "grape"];
const filteredFruits = filterArrayByPartialMatch(fruits, "an");
console.log(filteredFruits); // ["orange", "banana"]

○サンプルコード10：複数の文字列を含む要素を検索する

このコードでは、配列内の要素を複数の文字列で検索し、すべての文字列を含む要素だけを新しい配列に追加しています。

この例では、配列[“apple”, “orange”, “banana”, “grape”]から”a”と”e”を両方含む要素だけを抽出しています。

function filterArrayByMultipleQueries(array, queries) {
  return array.filter(element => queries.every(query => element.indexOf(query) !== -1));
}

const fruits = ["apple", "orange", "banana", "grape"];
const queries = ["a", "e"];
const filteredFruits = filterArrayByMultipleQueries(fruits, queries);
console.log(filteredFruits); // ["apple", "grape"]