JavaScriptで文字列やデータが含まれているかどうかを確認する際、`contains()`メソッドを使おうとして以下のようなエラーに遭遇したことはありませんか？

Uncaught TypeError: xxx.contains is not a function

このエラーの原因と解決策について、実践的なコード例を交えながら詳しく解説します。

contains()メソッドとは

`contains()`メソッドは、文字列やノードに特定の要素が含まれているかを確認するためのメソッドです。ただし、JavaScriptでは文字列に対して直接`contains()`メソッドを使用することはできません。

エラーの解決策

1. 文字列の包含チェック: includes()メソッド

文字列に対して包含関係をチェックする場合は、`includes()`メソッドを使用します。

const text = "Hello World";
console.log(text.includes("World")); // true
console.log(text.includes("Python")); // false

2. DOM要素の包含チェック: contains()メソッド

DOM要素の親子関係をチェックする場合は、`contains()`メソッドが使用できます。

const parent = document.getElementById("parent");
const child = document.getElementById("child");

console.log(parent.contains(child)); // true（childがparentの子要素の場合）

3. 配列の包含チェック: includes()メソッド

配列の要素をチェックする場合も、`includes()`メソッドを使用します。

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

クロスブラウザ対応

古いブラウザでは`includes()`メソッドがサポートされていない場合があります。その場合は、以下の代替方法を使用できます：

文字列の場合：

const text = "Hello World";
console.log(text.indexOf("World") !== -1); // true

配列の場合：

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

まとめ

  • 文字列や配列の包含チェックには`includes()`メソッドを使用
  • DOM要素の包含チェックには`contains()`メソッドを使用
  • 古いブラウザ対応には`indexOf()`メソッドを使用

これらの方法を適切に使い分けることで、エラーを回避しながら効果的に包含関係のチェックを行うことができます。

このように、JavaScriptでの包含関係チェックには複数の方法が存在します。用途に応じて最適な方法を選択することで、より効率的なコーディングが可能になります。