【JavaScript】includes – 配列や文字列に特定の値が含まれているかを判定するメソッド

JavaScriptのincludes()メソッドは、配列や文字列に特定の要素や部分文字列が含まれているかどうかを確認するために使用されます。シンプルで直感的な記述ができるため、非常に便利なメソッドです。今回はincludes()の基本的な使い方や使用時の注意点をまとめていきたいと思います。

includes() メソッドとは?

includes()は、配列文字列に指定した値が含まれているかどうかを判定し、trueまたはfalseを返すメソッドです。

基本的な構文

JavaScript
// 文字列での使用
文字列.includes(検索する文字列 [, 開始位置])

// 配列での使用
配列.includes(検索する要素 [, 開始位置])
  • 検索する文字列(または要素):探したい値を指定します。
  • 開始位置(省略可能):検索を開始する位置(インデックス番号)を指定します(デフォルトは 0)。

文字列での includes() の使用例

部分文字列を含むかどうかを確認

JavaScript
const sentence = 'コーヒーはブラックで飲むのが好きです。';
console.log(sentence.includes("ブラック")); // true
console.log(sentence.includes("ミルク")); // false

この例では、文字列 "ブラック"sentence 内に含まれているかどうかを判定しています。

開始位置を指定して検索

JavaScript
const text = 'ブラックコーヒーが好きです。カフェラテも好きです。';
console.log(text.includes('コーヒー', 5)); // false
console.log(text.includes('カフェラテ', 5)); // true

5文字目以降で "コーヒー" を探すと見つかりませんが、 "カフェラテ" は見つかります。

配列での includes() の使用例

配列に特定の要素が含まれているか確認

JavaScript
const sweets = ['クッキー', 'チョコ', 'ドーナツ'];
console.log(sweets.includes('チョコ')); // true
console.log(sweets.includes('ケーキ')); // false

この例では、配列 sweets"チョコ" が含まれているかどうかをチェックしています。

開始位置を指定して検索

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

インデックス3以降で3を探すと見つかりませんが、4は見つかります。

使用時の注意点

大文字小文字の区別

includes() は大文字小文字を区別します。

JavaScript
console.log('JavaScript'.includes('javascript')); // false

大文字小文字を無視して検索したい場合は、toLowerCase() を併用するとよいでしょう。

JavaScript
console.log('JavaScript'.toLowerCase().includes('javascript')); // true

部分一致の動作

includes() は部分一致で検索を行うため、予期せぬ一致が発生することがあります。

JavaScript
console.log('cat'.includes('at')); // true

完全一致を確認したい場合は .includes() ではなく ===indexOf() を使いましょう。

配列のincludes()indexOf()の違いindexOf()は要素が見つかった場合にインデックスを返し、見つからない場合 -1 を返します。一方、includes()true/falseを返すため、コードがシンプルになります。

JavaScript
const arr = ['a', 'b', 'c'];
console.log(arr.includes('b')); // true
console.log(arr.indexOf('b') !== -1); // true(同じ判定だがやや冗長)

さいごに

includes() メソッドは、文字列や配列に特定の値が含まれているかを簡単に判定できる便利なメソッドです。ただし、以下の点に注意して使いしましょう。

  • 大文字小文字を区別するため、必要に応じてtoLowerCase()を併用しましょう。
  • 部分一致で検索するため、厳密な比較が必要な場合は===indexOf()も検討しましょう。
【JavaScript】toLowerCase / toUpperCase – 文字列を小文字・大文字に変換するためのメソッド 【JavaScript】indexOf / lastIndexOf – 指定した値が出現する位置を取得するメソッド