【JavaScript】includes()入門: 配列に特定の要素が存在するか確認する方法

「includes()」はJavaScriptの配列内に特定の要素が存在するかどうかを確認する便利なメソッドです。ただし、オブジェクトやNaNなど特殊な値の扱いに注意が必要です。

「includes()」の基本的な使い方

「includes()」とは？

includes()は、配列の中に特定の要素が含まれているかをBooleanの値（true or false）で返すメソッドです。例えば、ある文字が文字列の中に存在するか、ある数字が数字のリストの中に存在するかを調べたいときに使います。

const fruits = ["apple", "banana", "cherry"];
console.log(fruits.includes("apple")); // true
console.log(fruits.includes("grape")); // false

「includes()」の使用例4パターン

文字列を配列から検索する

配列の中に特定の文字列が含まれているかを確認する場合の例です。

const animals = ["dog", "cat", "lion"];
console.log(animals.includes("cat")); // true

数字を配列から検索する

配列の中の数字が存在するかを確認する場合の例です。

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true

オブジェクトを配列から検索する

通常、オブジェクトリテラルを使ってincludes()を試すと、予期しない結果が返ることがあります。これは、新しいオブジェクトリテラルが常に新しい参照を持つためです。

const objects = [{ id: 1 }, { id: 2 }, { id: 3 }];
console.log(objects.includes({ id: 2 })); // false

参照を利用する方法

配列の中に特定のオブジェクトが含まれているかを、オブジェクトの参照を直接利用して確認する方法です。

const objReference = { id: 2 };
const objectsWithRef = [{ id: 1 }, objReference, { id: 3 }];
console.log(objectsWithRef.includes(objReference)); // true

配列の中の要素を特定の位置から検索する

特定の位置から検索を開始する場合の例です。

const words = ["pen", "paper", "book"];
console.log(words.includes("book", 2)); // true (2番目の要素から検索開始)

「includes()」と「indexOf()」

「indexOf()」とは？

indexOf()はincludes()に似ていますが、要素が存在するかどうかの代わりに、その要素の位置（インデックス）を返します。要素が存在しない場合は-1を返します。

const colors = ["red", "green", "blue"];
console.log(colors.indexOf("green")); // 1
console.log(colors.indexOf("yellow")); // -1

「includes()」と「indexOf()」の違い

includes()は要素の存在をBooleanで返すのに対し、indexOf()は要素の位置を返します。存在しない場合、includes()はfalseを、indexOf()は-1を返します。

const foods = ["rice", "bread", "meat"];
console.log(foods.includes("bread")); // true
console.log(foods.indexOf("bread"));  // 1

「includes()」を使用する際の注意点

等価性の判定

JavaScriptのオブジェクトや配列は参照によって比較されるため、includes()は期待する結果を返さない場合があります。

const array1 = [{ name: "Alice" }];
console.log(array1.includes({ name: "Alice" })); // false

NaNの扱い

JavaScriptでは、NaNは自分自身とも等しくないという特性がありますが、includes()はNaNを正しく識別します。

const array2 = [NaN];
console.log(array2.includes(NaN)); // true

「includes()」の使い方まとめ

• includes()は、配列に特定の要素が存在するかどうかを確認するのに便利です。
• オブジェクトや配列を検索する際は、参照による比較を理解して使用してください。
• 類似のメソッドとしてindexOf()がありますが、返される値のタイプが異なるので注意して使用してください。