JavaScript includesメソッド徹底解説｜配列・文字列検索の使い方と実践テクニック

この記事では、JavaScriptのincludes()メソッドについて、配列や文字列での基本的な使い方、応用例、注意点を体系的に解説します。検索・判定処理の効率化やコードの可読性向上を目指す人に最適な内容です。

JavaScriptのincludesメソッドとは

includesメソッドの概要と役割

JavaScriptのincludesメソッドは、配列や文字列に特定の値が含まれているかを簡潔に確認できるメソッドです。従来は検索を行う際にindexOf()などを使用していましたが、includesを使うことで、より直感的で読みやすいコードを書くことができます。

例えば、配列の場合には「この要素が含まれているか」を真偽値で判定することができ、文字列では「部分文字列が存在するか」を確認できます。このメソッドは、結果としてtrueまたはfalseを返すため、条件分岐と組み合わせて使いやすい点が特徴です。

• 配列: 特定の要素が存在するかどうかを確認。
• 文字列: 部分文字列が存在するかどうかを確認。
• 返り値: 含まれていればtrue、含まれていなければfalse。

このようにincludesメソッドは、「存在確認」に特化したシンプルかつ強力なツールであり、可読性を高めたい場合に非常に有効です。

includesが導入された背景と従来の方法との違い

includesメソッドはECMAScript 2016（ES7）で正式に導入されました。その背景には、JavaScriptで要素の存在を確認するための標準的な方法が分かりづらかったことが挙げられます。従来はindexOf()を使って要素の位置を取得し、その結果が-1でないかを判定する必要がありました。

例えば、次のようなコードがよく使われていました。

const fruits = ["apple", "banana", "orange"];
if (fruits.indexOf("banana") !== -1) {
  console.log("バナナがあります");
}

この書き方では、条件式がやや冗長であり、「含まれているかどうか」を直接的に表していません。これに対してincludesメソッドを使えば、より明確に意図を伝えることができます。

if (fruits.includes("banana")) {
  console.log("バナナがあります");
}

このようにincludesは、コードの可読性と理解性を向上させる目的で登場しました。また、NaNの比較を正しく扱える点もindexOf()との大きな違いです。従来の方法では検出できなかったNaNも、includesなら正しく検出可能です。

つまり、includesメソッドは「シンプルでエラーの少ない存在確認」を実現するために設計された、現代的なJavaScriptの書き方を支えるメソッドと言えます。

includesメソッドの構文と基本的な使い方

基本構文と引数の指定方法

JavaScriptのincludes()メソッドは、配列や文字列に特定の値が含まれているかどうかを判定するシンプルで直感的な手段です。構文は非常に分かりやすく、次のように記述します。

array.includes(valueToFind, fromIndex)

string.includes(searchString, position)

配列・文字列それぞれにおいて、最初の引数は検索対象の値または部分文字列を指定し、2つ目の引数では検索を開始する位置を指定します。これらの引数を使い分けることで、検索範囲を柔軟に制御できるのが特徴です。

第一引数（検索する値）

includes()メソッドの第一引数には、配列または文字列内で検索したい値を指定します。
配列の場合、比較は===（厳密等価演算子）と同じルールで行われるため、型の違いによって結果が異なる点に注意が必要です。

• [1, 2, 3].includes(2) → true
• [1, 2, 3].includes('2') → false

また、文字列の場合は部分一致での検索になるため、対象文字列内に引数の文字列が含まれていればtrueを返します。

• 'JavaScript'.includes('Script') → true
• 'JavaScript'.includes('script') → false（大文字小文字を区別）

第二引数（検索開始位置）

第二引数は任意指定であり、検索を開始するインデックスを整数値で指定します。指定しない場合、既定値は0となり、先頭から探索が始まります。
たとえば、配列が大きい場合や先頭部分を除外したい場合に、この引数を活用すると効率的です。

• [1, 2, 3, 4].includes(2, 2) → false（インデックス2以降に2は存在しない）
• 'JavaScript'.includes('Java', 4) → false

第二引数を負の値に設定すると、配列や文字列の末尾からのオフセットとして解釈されます。たとえば-1を指定すると、最後の要素（または文字）から検索を始めます。
ただし、負の値が先頭を越える場合は、自動的に0として扱われるため、エラーにはなりません。

返り値と動作の仕組み

includes()メソッドは、指定した値が見つかった場合にtrueを返し、見つからなければfalseを返します。この返り値は論理型（boolean）であり、検索処理が成功したかどうかをシンプルに判定できます。

内部的には指定されたインデックスから順に要素や文字を走査し、完全一致（または文字列の場合は部分一致）の結果を比較します。最初に一致が見つかった時点で処理を停止するため、全体を探索する必要はありません。
この動作原理により、短い配列や文字列では非常に高速に動作します。

例外やエラーの扱い

includes()メソッドは、基本的に実行時エラーを発生させることはほとんどありません。配列や文字列以外のオブジェクトで呼び出しても、構文上正しく処理されればTypeErrorは発生しませんが、意図しない結果になる可能性があります。
特にnullやundefinedに対して直接呼び出すと例外が発生するため、実行前に対象が有効な配列・文字列であるかを確認することが推奨されます。

また、第二引数に不正な値（例：小数値や非数値）を指定した場合でも、自動的に整数へ変換される仕組みがあり、エラーにはなりません。このようにincludes()は比較的安全に扱えるメソッドですが、正確な動作を理解しておくことで意図しないバグを防ぐことができます。

配列（Array）でのincludesの使い方

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

JavaScriptのincludes()メソッドは、配列の中に特定の要素が存在するかどうかを直感的に確認できる便利な機能です。従来のindexOf()のようにインデックス番号を返すのではなく、真偽値（true / false）を返す点が大きな特徴です。これにより、条件分岐やバリデーション処理をシンプルに記述できます。

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

このように、includes()を使うことで対象の値が存在するか簡潔に判定できます。検索は大文字と小文字を区別して行われるため、例えば'Banana'と'banana'は別の要素として認識される点に注意が必要です。

検索開始位置（fromIndex）を指定した操作

includes()メソッドの第2引数には、「検索を開始する位置」を指定するfromIndexを設定できます。省略した場合は先頭（0番目）から検索が行われますが、任意のインデックス番号を指定することで柔軟な検索が可能になります。

const numbers = [1, 2, 3, 4, 2];
console.log(numbers.includes(2, 3)); // true（インデックス3以降に2があるかを確認）

負の値を指定した場合は、配列の末尾からのオフセットとして計算されます。例えば-2を指定した場合は、配列の後ろ2番目から検索を開始します。

console.log(numbers.includes(2, -2)); // false（末尾2つの要素には2が含まれない）

このようにfromIndexを活用すると、特定の範囲のみを検索したい場合や、大量データの処理で効率を重視したい場合に役立ちます。

疎な配列（欠損のある配列）での挙動

JavaScriptの配列には「疎（そ）な配列」と呼ばれる、要素の一部が欠損している形態が存在します。includes()メソッドはこのような欠損部分をundefinedとして扱い、欠損も検索対象として認識します。

const sparseArray = [1, , 3];
console.log(sparseArray.includes(undefined)); // true（欠損部分がundefinedとして認識される）

この挙動はループ処理ではスキップされる欠損要素を含めて検索するため、他の配列メソッド（例：map()やforEach()）と異なる結果になる場合があります。特にデータの欠損を正確に把握したい場合には、有効な検索方法といえるでしょう。

配列ではないオブジェクトでの使用時の注意点

includes()は配列専用のメソッドであり、配列以外のオブジェクトに直接使用するとエラーが発生します。例えば通常のオブジェクトリテラルやMap、Setではそのまま使えません。

const obj = { a: 1, b: 2 };
console.log(obj.includes(1)); // TypeError

このような場合には、ObjectやSetの内容を一度配列に変換してからincludes()を利用します。

console.log(Object.values(obj).includes(1)); // true

このように、対象のデータ構造に応じて使い分けることが、JavaScriptにおけるincludes()の正しい活用方法です。

文字列（String）でのincludesの使い方

文字列内で部分文字列を検索する方法

JavaScriptのincludes()メソッドは、文字列の中に特定の部分文字列が含まれているかどうかを簡潔に判定できる便利な機能です。特に、従来のindexOf()メソッドでは数値による判定が必要でしたが、includes()では読みやすく直感的な真偽値（true / false）を返すため、コードの可読性が大幅に向上します。

基本的な使用方法は次の通りです。

const text = "JavaScript includes メソッドの解説";
console.log(text.includes("includes")); // true
console.log(text.includes("Python"));   // false

このように、includes()メソッドに検索したい部分文字列を渡すだけで、その文字列が含まれている場合はtrue、含まれていない場合はfalseを返します。
また、第二引数に検索開始位置（インデックス番号）を指定することで、文字列の途中から検索を行うことも可能です。

const message = "Welcome to JavaScript!";
console.log(message.includes("Java", 10)); // false

この例ではインデックス10以降から検索が行われるため、「Java」が検出されずにfalseが返ります。検索範囲を柔軟に調整できる点も、includes()の特徴のひとつです。

大文字小文字の区別と注意点

includes()メソッドでは、大文字と小文字が区別される点に注意が必要です。つまり、「JavaScript」と「javascript」は異なる文字列として扱われます。

const str = "JavaScript";
console.log(str.includes("javascript")); // false

もし大文字小文字を区別せずに検索したい場合は、toLowerCase()やtoUpperCase()メソッドと組み合わせることで対処できます。

const str = "JavaScript";
console.log(str.toLowerCase().includes("javascript")); // true

このように文字列全体を小文字（または大文字）に変換してからincludes()を実行すると、ケースインセンシティブな検索を簡単に実現できます。

文字列検索における実例

実務でincludes()を使うケースは多岐にわたります。例えば、ユーザー入力のバリデーションや、URL・メールアドレスなどに特定の文字列が含まれているかどうかをチェックする際に有効です。

// 入力されたメールが特定のドメインを含むかを判定
const email = "user@example.com";
if (email.includes("@example.com")) {
  console.log("自社ドメインのメールアドレスです。");
}

また、Webアプリケーションにおいて、SEOのキーワードチェックや文章内の特定フレーズ判定などにも用いることができます。
シンプルで軽量なメソッドであるため、文字列処理の中でも最も実用的な関数のひとつと言えるでしょう。

includesメソッドの応用テクニック

配列から特定の要素を除外する

includesメソッドは、配列に特定の値が含まれているかを判定する機能として知られていますが、応用することで「除外」処理にも活用できます。
例えば、不要な要素を取り除いた新しい配列を生成するケースでは、filter()メソッドとincludesを組み合わせるのが効果的です。

// 除外したい要素を定義
const excludeList = ['apple', 'banana'];

// 元の配列
const fruits = ['apple', 'banana', 'orange', 'grape'];

// includesで除外条件を指定
const result = fruits.filter(fruit => !excludeList.includes(fruit));

console.log(result); // ["orange", "grape"]

このように、includesを条件式内で「含まれているかどうか」を反転して活用することで、配列の除外処理をシンプルかつ直感的に書けます。
特定のキーワードを除外した検索結果や、ユーザーが選択した項目を除外するユースケースでも有効に機能します。

配列内のオブジェクトから該当データを探す

includesメソッドは基本的にプリミティブ値を対象としますが、応用的な使い方として「オブジェクト配列」内で一部のプロパティに一致するデータを検索することも可能です。
この場合は、some()と組み合わせるか、プロパティを抽出してからincludesに渡す方法が有効です。

const users = [
  { id: 1, name: 'Taro' },
  { id: 2, name: 'Hanako' },
  { id: 3, name: 'Ken' }
];

// 名前リストを作成
const nameList = users.map(user => user.name);

// includesで検索
const hasHanako = nameList.includes('Hanako');

console.log(hasHanako); // true

この例のように、オブジェクト全体を比較するのではなく、指定プロパティを取り出してからincludesで判定するのがポイントです。
特にデータベース検索や動的なフォーム入力の検証などで、シンプルに一致判定を行う実装として役立ちます。

条件分岐やフィルタリングでの活用例

includesメソッドの応用範囲は、単純な検索にとどまりません。条件分岐やフィルタリング処理に組み込むことで、コードの可読性・保守性を高めることができます。

const keywords = ['error', 'warning', 'critical'];
const message = 'critical system failure occurred.';

if (keywords.some(keyword => message.includes(keyword))) {
  console.log('警告レベルのメッセージを検出しました。');
}

文字列の中に特定の単語が含まれているか確認して処理を分岐させるパターンは、ログ解析やアラートシステムなどで頻繁に利用されます。
また、includesを条件式内で使用することで、複雑なif文を簡潔に記述でき、実装の意図が明確になります。
このように「検索」「除外」「分岐」など多階層な処理ロジックに柔軟に応用できるのが、JavaScriptのincludesメソッドの大きな利点です。

includesを使用する際の注意点とよくあるミス

書き方を間違えやすいパターン

JavaScriptのincludesメソッドはシンプルに見えて、意外と書き方を間違えやすい部分があります。特に、文字列と配列の両方に同名メソッドが存在するため、どちらを対象にしているのか整理せずに書くとエラーや意図しない結果を招くことがあります。

• 配列ではなくオブジェクトに対してincludesを使ってしまう
• 大文字・小文字を区別しない検索を期待して、そのまま使用する
• includes()とindexOf() > -1を混同して使う

これらのミスを防ぐには、まず「対象が配列か文字列か」を明確にし、ケースセンシティブな比較である点を理解しておくことが重要です。また、条件文での使用時にはincludes()が直接trueまたはfalseを返すことを意識し、複雑な比較式を省略できる場面も多いでしょう。

型の違いによる予期せぬ結果

includesメソッドは、内部的に厳密等価演算子（===）を使って比較を行います。そのため、型が異なる場合は見た目が似ていても一致しないと判断されます。

const arr = [1, 2, 3];
console.log(arr.includes('1')); // false

上記のように、文字列'1'と数値1は異なる型のため一致しません。また、オブジェクトや配列のような参照型も、同じ構造を持っていても別インスタンスであればincludesで一致しない点に注意が必要です。

型の違いを軽視すると、条件分岐やフィルタリング処理で意図しない挙動を起こす可能性があります。 データ型を意識した比較を行うことが、バグを防ぐ第一歩です。

パフォーマンス上の注意点

includesは内部で線形検索（リニアサーチ）を行うため、配列が大きくなるほど検索コストが高くなります。特に数万件規模のデータを扱う場面では、毎回includesを呼ぶとパフォーマンス低下の原因になります。

• 大規模データではSetを使って高速化する
• 頻繁に同じ検索を行う場合は結果をキャッシュする
• 文字列検索では正規表現の方が効率的なケースもある

includesは手軽に使える反面、処理対象が大きくなるとボトルネックになることがあります。規模に応じて適切なデータ構造やアルゴリズムを選択することが、パフォーマンス最適化の鍵となります。

他の類似メソッドとの比較

indexOfとの違い

javascript includesメソッドとよく比較されるのがindexOfです。どちらも配列や文字列内に特定の値が含まれているかを確認するために使用しますが、返り値と可読性の面で明確な違いがあります。includesはブール値（trueまたはfalse）を返すのに対し、indexOfは該当する要素のインデックスを返し、存在しない場合は-1を返します。

• includesの特徴：単純に「含まれているかどうか」を判定し、条件分岐の記述が短く明確。
• indexOfの特徴：要素の位置を知りたい場合には有用だが、存在判定にはやや冗長。

また、includesはNaNの比較も正しく判定できますが、indexOfではNaNを検出できません。これはSameValueZeroアルゴリズムを使用している点での内部的な違いです。したがって、「要素が存在するか」だけを知りたい場合はincludesを用いる方が推奨されます。

someやfind、findIndexとの使い分け

javascript includesは、あくまで「配列内に指定した値がそのまま存在するかどうか」を調べるシンプルなメソッドです。一方、Array.prototype.some()、find()、findIndex()は、条件式やコールバック関数を使って柔軟に検索条件を指定できる点が異なります。

• some()：条件を満たす要素が1つでもあればtrueを返す。
• find()：条件に一致する最初の要素そのものを返す。
• findIndex()：条件に一致する最初の要素のインデックスを返す。
• includes()：完全一致で値の存在をチェックする。

例えば、「オブジェクト配列の中で特定のプロパティ値を持つ要素を探したい」場合はsomeやfindが適し、単純な値チェックにはincludesが向いています。つまり、includesは単純比較に特化し、条件付き検索には他の3つのメソッドを使い分けることが最適です。

正規表現との併用の可否

javascript includesメソッドは、正規表現オブジェクト（/pattern/）を直接引数として渡すことはできません。includesが受け付けるのはプリミティブな値、すなわち文字列または配列の要素の実値のみです。そのため、正規表現で部分一致を確認したい場合はRegExp.test()メソッドやString.match()と併用する必要があります。

// 正規表現で部分一致を確認する正しい例
const text = "JavaScript includes method";
console.log(/includes/.test(text)); // true

// includesと正規表現を直接組み合わせるとエラー
text.includes(/includes/); // TypeError

このように、正規表現を直接includesで扱うことはできないため、用途に応じて別のメソッドを使い分けることが重要です。ただし、静的な部分文字列の検索であればincludesの方がシンプルで高速な傾向があります。

TypeScriptでのincludesの使用方法

型定義と互換性の確認

TypeScriptでincludesメソッドを使用する際には、JavaScriptと異なり型定義とその互換性を明確に理解しておく必要があります。特に配列や文字列に対してincludesを呼び出す場合、それぞれの型が適切に推論されているかを確認することで、型エラーを未然に防ぐことができます。

たとえば配列に対してincludesを利用する場合、配列のジェネリック型として指定した要素型に対して正しい値を検索しているかが重要です。以下の例では、数値型の配列に文字列を検索しようとするとエラーになります。

const numbers: number[] = [1, 2, 3];
numbers.includes("2"); // ❌ エラー: 型 'string' の引数は型 'number' のパラメーターに割り当てられません。
numbers.includes(2);   // ✅ 正しい書き方

このようにTypeScriptは引数の型チェックを行うため、型安全性が確保されます。特にtsconfig.jsonで"strict": trueが有効になっている場合、型の齟齬があるとコンパイルエラーとして検出され、実行前にミスを防げます。

また、TypeScript 2.1以降では、ECMAScript 2016 (ES7) の仕様に基づき、Array.prototype.includesおよびString.prototype.includesの型定義が標準でサポートされています。もし古いTypeScriptバージョンを使用している場合は、@types/es2016など型定義ライブラリの導入を検討すると良いでしょう。

ジェネリクスやユニオン型と併用する際の注意点

TypeScriptではジェネリクスやユニオン型を用いた柔軟な型設計が可能ですが、その際にincludesを使う場合はいくつかの注意点があります。特にincludesのパラメーター型が明確に特定できないケースでは、型推論が曖昧になることがあります。

function hasValue<T>(array: T[], value: T): boolean {
  return array.includes(value);
}

// 使用例
const fruits = ["apple", "banana", "orange"];
hasValue(fruits, "apple"); // ✅ true

上記のようにジェネリクスを利用することで、柔軟かつ型安全に値の存在をチェックできます。しかし、次のようにユニオン型を扱う場合は要注意です。

type Fruit = "apple" | "banana" | "orange";
const mixArray: (Fruit | number)[] = ["apple", 10, "banana"];

mixArray.includes("orange"); // ✅ 型的には成立
mixArray.includes(true);     // ❌ Error: boolean は型に含まれない

このように、ユニオン型の要素を持つ配列では、includesに渡す引数がそのいずれかの型に合致している必要があります。また、実際の比較はJavaScript同様に===演算子で行われるため、オブジェクトや配列などの参照型を比較する際は注意が必要です。

まとめると、TypeScriptでincludesを安全に活用するには、次のポイントを意識しておくと良いでしょう。

• 配列や文字列の型定義を明確にする
• ジェネリクスを活用して柔軟性と型安全性を両立する
• ユニオン型を扱う場合は比較対象の型が正しいかを常に確認する

これらを守ることで、TypeScript環境でもjavascript includesの機能をエラーなく活用でき、高いコード品質を維持できます。

includesメソッドのブラウザー対応状況と仕様

ECMAScript仕様での定義

JavaScriptのincludesメソッドは、ECMAScript 2016（ES7）にて正式に仕様化されたメソッドです。Array.prototype.includesおよびString.prototype.includesとして定義され、配列や文字列に特定の値が含まれているかどうかを判定するための汎用的な手段として導入されました。

ECMAScript仕様では、includesメソッドは厳密な等価比較（===に準じた比較、ただしNaNの扱いが異なる）によって判定を行います。つまり、includesはindexOfと異なり、NaNも正しく検出できる仕様です。この点は、数値計算や特殊値を扱う際に特に有用です。

また、仕様上fromIndexパラメータは整数として評価され、負の値を指定した場合には、配列や文字列の末尾からの相対位置として解釈されます。これは開発現場で柔軟な検索操作を実現するための設計であり、モダンなJavaScriptコードベースでは推奨される基本的な検索方法の一つです。

各ブラウザーでのサポート状況

includesメソッドはECMAScript 2016に準拠する多くのブラウザーでサポートされています。主要ブラウザーの対応状況は以下の通りです。

モダンブラウザーでは基本的に完全対応しており、配列・文字列双方で利用可能です。ただし、Internet Explorerではincludesメソッドがサポートされていないため、旧環境をサポートする場合はPolyfillの導入（たとえばcore-jsなど）を検討する必要があります。

現在では、モバイルブラウザー（Android Chrome、iOS Safari、Firefox for Androidなど）でも広く実装済みであり、クロスプラットフォームなWebアプリケーションでも安心して活用できます。そのため、最新の開発環境では標準的な検索メソッドとしてincludesが積極的に利用されています。

まとめ

includesメソッドのポイント整理

JavaScriptのincludesメソッドは、配列や文字列の中に特定の値が含まれているかを簡潔に判定できる非常に便利なメソッドです。その最大の特徴は、可読性と直感的な操作性にあります。従来のindexOf()と比べても返り値が論理値（trueまたはfalse）であるため、条件分岐処理の記述がシンプルになります。

主なポイントを以下に整理します。

• includesは配列・文字列の両方で使用できる。
• 検索対象の値は厳密一致（===）で比較される。
• 第二引数（検索開始位置）を指定することで柔軟な探索が可能。
• 欠損のある配列（疎な配列）では、未定義要素をスキップして検索される。
• ES2016（ES7）以降の仕様で標準化され、主要ブラウザーで広く対応。

このようにjavascript includesメソッドは、コードの可読性や保守性を高める上でも重要な役割を果たします。特に条件分岐処理やデータ検証の場面で、開発効率を向上させる効果があります。

効果的な活用のためのベストプラクティス

includesメソッドを活用する際には、単に要素の存在確認を行うだけでなく、パフォーマンスやコード品質を意識することが大切です。以下にベストプラクティスをまとめます。

1. 型を明確にして比較を行う：
   配列や文字列内の要素の型が異なると、includesは意図しない結果を返す可能性があります。データ前処理の段階で型を揃えておきましょう。
2. 検索範囲を最小限にする：
   配列が大規模な場合、第二引数（fromIndex）を指定して不要な検索を避けることで、パフォーマンスの最適化が可能です。
3. 可読性の高い条件文を意識する：
   if (array.includes(value))のように、処理意図が一目でわかるように記述すると、チーム開発での保守性が向上します。
4. ブラウザー対応を確認する：
   旧バージョンの環境（特に古いIEなど）をサポートする場合は、polyfillの導入を検討しましょう。
5. 条件分岐・フィルタリングと組み合わせる：
   より柔軟なロジックを組み立てる際には、includesをfilter()やmap()などと組み合わせることで、データ処理の効率化が実現できます。

これらの実践を通じて、javascript includesメソッドを安全かつ効果的に利用できるようになります。今後の開発でも、コードの明確さとパフォーマンスの両立を意識して活用していくことが重要です。