🔖

【JavaScript】配列の includes() の使い方と注意点

2025/06/09に公開

はじめに

JavaScriptで「配列に特定の値が含まれているか」を調べたいとき、
よく使われるのが includes() メソッドです。

const fruits = ['apple', 'banana', 'orange'];
fruits.includes('banana'); // true

シンプルで読みやすい includes() ですが、
実は NaN を含むときの挙動 や オブジェクトとの比較 には注意が必要です。

本記事では、includes() の基本的な使い方と注意点を整理します。

1. 基本の使い方

✅ 配列に含まれているかをチェック

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

✅ 文字列にも使える

const msg = 'Hello, world!';
console.log(msg.includes('Hello')); // true
console.log(msg.includes('bye'));   // false

2. 検索開始位置を指定する（第2引数）

まず、対象の配列を確認しておきましょう。

const items = ['a', 'b', 'c', 'a'];
//               0    1    2    3

console.log(items.includes('a'));       // true（先頭から探す）
console.log(items.includes('a', 2));    // true（index 2 から探す）
console.log(items.includes('a', 3));    // true（index 3 の 'a' にヒット）
console.log(items.includes('a', 4));    // false（index 4 以降に 'a' は無い）

✅ includes(値, 開始インデックス) という形で使います。
インデックスは 0 から始まります。マイナスの値を指定すると、配列の末尾から数えた位置が開始位置になります。
例えば -1 を指定すると、最後の要素から検索を始めます。

3. `NaN` も正しく検出できる

includes() の内部では「SameValueZero」という比較方式が使われており、
NaN === NaN が false になるようなケースでも、includes(NaN) は true を返します。

const arr = [NaN];
console.log(arr.includes(NaN)); // ✅ true（正しく検出される）

💡 これは indexOf(NaN) では -1 になるため、includes() のメリットのひとつです。

4. オブジェクトや配列は「参照」で比較される

以下は 特に注意が必要なポイントです。

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

一見同じ内容のオブジェクトでも、これは別々の場所にある別物（異なる実体） として扱われるため、一致しません。

🔍 includes() はオブジェクトの「中身」ではなく、「同じ実体（メモリ上の同一オブジェクト）かどうか」で比較しています。

✅ 対処法①：`some()` を使う

console.log(list.some(item => item.id === 1)); // ✅ true

some() を使えば、オブジェクトの中身（プロパティの値）を基準にして判定できます。

✅ 対処法②：`find()` を使う

const found = list.find(item => item.id === 1);
console.log(found); // { id: 1 }

find() を使えば、条件に一致する要素そのものを取得できます。
一致する要素が見つからなければ undefined が返ります。
そのため、使うときは if (found) のようなチェックが必要です。

まとめ

シンプルな値（数値・文字列など）なら includes() が便利
NaN も正しく検出できる（indexOf より優秀）
オブジェクトや配列は「参照比較」なので注意（見た目が同じでも別物扱い）
複雑な条件や中身の比較は some() や find() を使うのがおすすめ

おわりに

includes() は配列や文字列の中に「あるかないか」を簡単に調べられる便利なメソッドです。
ただし、オブジェクト比較や NaN の扱いなど、注意が必要なポイントもあります。

本記事が参考になれば幸いです。