JavaScript/jQuery：配列を制覇せよ！includes、indexOf、filter、findを使いこなす

2024-04-02

JavaScript/jQueryで配列に特定の文字列が含まれているかどうかを見つける方法

includes メソッドは、配列に特定の要素が含まれているかどうかを調べるために使用されます。

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

// "banana" が含まれているかどうかを確認
const isBananaIncluded = fruits.includes("banana");

console.log(isBananaIncluded); // true

この例では、fruits 配列に "banana" が含まれているため、isBananaIncluded 変数は true になります。

indexOf メソッドは、配列内における特定の要素の最初の出現位置を返します。要素が見つからない場合は -1 を返します。

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

// "banana" の最初の出現位置を取得
const bananaIndex = fruits.indexOf("banana");

console.log(bananaIndex); // 1

この例では、fruits 配列内における "banana" の最初の出現位置は 1 番目なので、bananaIndex 変数は 1 になります。

jQuery.inArray メソッドを使う

jQuery を使用している場合は、$.inArray メソッドを使用して配列に特定の要素が含まれているかどうかを確認できます。

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

// "banana" が含まれているかどうかを確認
const isBananaIncluded = $.inArray("banana", fruits) !== -1;

console.log(isBananaIncluded); // true

この例では、$.inArray メソッドは fruits 配列内における "banana" の最初の出現位置を返します。要素が見つからない場合は -1 を返すので、isBananaIncluded 変数は true になります。

シンプルな方法で特定の文字列が含まれているかどうかを確認したい場合は、includes メソッドがおすすめです。
文字列の最初の出現位置を取得したい場合は、indexOf メソッドがおすすめです。
jQuery を使用している場合は、$.inArray メソッドがおすすめです。

includes メソッドを使う

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

// "banana" が含まれているかどうかを確認
const isBananaIncluded = fruits.includes("banana");

console.log(isBananaIncluded); // true

indexOf メソッドを使う

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

// "banana" の最初の出現位置を取得
const bananaIndex = fruits.indexOf("banana");

console.log(bananaIndex); // 1

jQuery.inArray メソッドを使う

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

// "banana" が含まれているかどうかを確認
const isBananaIncluded = $.inArray("banana", fruits) !== -1;

console.log(isBananaIncluded); // true

応用

特定の文字列が含まれている配列の要素を取得する
特定の文字列が含まれているかどうかを条件分岐に使う

これらのサンプルコードを参考に、JavaScript/jQueryで配列に特定の文字列が含まれているかどうかを確認してみてください。

JavaScript/jQueryで配列に特定の文字列が含まれているかどうかを確認するその他の方法

some メソッドは、配列のすべての要素が条件を満たすかどうかを調べます。

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

// "banana" を含む要素が少なくとも1つ存在するかどうかを確認
const isBananaIncluded = fruits.some(fruit => fruit === "banana");

console.log(isBananaIncluded); // true

filter メソッドは、条件を満たす要素のみを含む新しい配列を返します。

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

// "banana" を含む要素のみを含む新しい配列を取得
const bananaFruits = fruits.filter(fruit => fruit === "banana");

console.log(bananaFruits); // ["banana"]

この例では、fruits 配列から "banana" を含む要素のみを含む新しい配列 bananaFruits が作成されます。

find メソッドは、条件を満たす最初の要素を返します。

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

// "banana" を含む最初の要素を取得
const bananaFruit = fruits.find(fruit => fruit === "banana");

console.log(bananaFruit); // "banana"

ループを使う

上記の方法以外にも、ループを使って配列を順に処理し、特定の文字列が含まれているかどうかを確認することができます。

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

// "banana" が含まれているかどうかを確認
let isBananaIncluded = false;
for (const fruit of fruits) {
  if (fruit === "banana") {
    isBananaIncluded = true;
    break;
  }
}

console.log(isBananaIncluded); // true