JavaScriptのincludes()徹底解説！配列・文字列の要素チェックを簡潔に

本記事には広告が含まれています

2025/09/05

JavaScriptのincludes()徹底解説！配列・文字列の要素チェックを簡潔に

プログラミングをしていると、「この配列に特定の名前は含まれているかな？」「この文章にNGワードが入っていないかチェックしたい」といった場面が頻繁にありますよね。

そんな時に大活躍するのが、JavaScriptのincludes()メソッドです。

includes()を使えば、配列や文字列の中に特定の要素が含まれているかどうかを、trueかfalseで簡単に判定できます。従来のindexOf()を使った方法よりもコードが直感的で分かりやすくなるため、今では多くの場合でincludes()が使われています。

この記事では、includes()の基本的な使い方から、少し発展的な内容、そして似たような役割を持つ他のメソッドとの違いまで、サンプルコードを交えながら分かりやすく解説していきます。

JavaScriptのincludes()とは？配列・文字列の要素チェックを簡単に

includes()メソッドは、配列（Array）や文字列（String）が、特定の要素を含んでいるかどうかをチェックするためのメソッドです。

含まれていればtrue（真）、含まれていなければfalse（偽）という真偽値を返します。

例えば、果物のリスト（配列）に「りんご」があるかどうかを調べる場合、includes('りんご')とするだけで結果が分かります。戻り値がtrueかfalseなので、if文の条件式などで非常に使いやすいのが特徴です。

このメソッドが登場する前は、indexOf()メソッドがよく使われていました。indexOf()は要素が見つかった場合はその位置（インデックス）を、見つからなかった場合は-1を返します。そのため、「要素が含まれているか？」を判定するには、indexOf('りんご') !== -1のように、ひと手間加えた書き方が必要でした。

includes()を使えば、このような比較は不要です。コードがシンプルになり、後から見返したときに「ああ、ここでは存在チェックをしているんだな」と、やりたいことが一目で理解できるのが大きなメリットと言えるでしょう。

includes()の基本的な使い方【サンプルコード付き】

それでは早速、includes()メソッドの具体的な使い方を見ていきましょう。

配列で使う場合と、文字列で使う場合に分けて解説します。

配列（Array）で要素を検索する方法

配列でincludes()を使うと、その配列内に引数で指定した値が存在するかどうかをチェックできます。

// フルーツの配列
const fruits = ['りんご', 'バナナ', 'みかん'];

// 'バナナ'が含まれているかチェック
console.log(fruits.includes('バナナ'));
// 出力結果: true

// 'ぶどう'が含まれているかチェック
console.log(fruits.includes('ぶどう'));
// 出力結果: false

// 数値の配列でも同様に使えます
const numbers = [1, 5, 10, 15];
console.log(numbers.includes(10));
// 出力結果: true

このように、配列に対して.includes()と記述し、括弧（()）の中に探したい要素を入れるだけで、簡単に存在確認が可能です。シンプルでとても分かりやすいですね。

文字列（String）で特定の文字が含まれるか調べる方法

文字列に対してもincludes()は利用できます。特定の文字列の中に、指定した部分文字列が含まれているかを判定するのに便利です。

const message = '今日は良い天気ですね。';

// '天気'という文字列が含まれているかチェック
console.log(message.includes('天気'));
// 出力結果: true

// '雨'という文字列が含まれているかチェック
console.log(message.includes('雨'));
// 出力結果: false

ブログ記事の本文から特定のキーワードを探したり、ユーザーの入力した文章に禁止ワードが含まれていないかをチェックしたりと、様々な場面で活用できます。配列の時と同じように、直感的に使えるのが嬉しいポイントです。

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

includes()には、第二引数を指定することもできます。この引数はfromIndexと呼ばれ、検索を開始する位置（インデックス）を指定するものです。

// 配列の場合
const fruits = ['りんご', 'バナナ', 'みかん', 'バナナ'];

// 配列全体から 'バナナ' を検索
console.log(fruits.includes('バナナ')); // true

// インデックス2（みかん）から 'バナナ' を検索
console.log(fruits.includes('バナナ', 2)); // true

// インデックス0から 'みかん' を検索
console.log(fruits.includes('みかん', 0)); // true

// インデックス3から 'みかん' を検索
console.log(fruits.includes('みかん', 3)); // false

上記の例では、fruits.includes('バナナ', 2)は、インデックス2（3番目の要素「みかん」）から検索を開始します。そのため、インデックス3にある「バナナ」が見つかり、trueが返ります。

この第二引数は、文字列の場合でも同様に機能します。特定の箇所より後ろに、キーワードが出現するかどうかを調べたい場合などに役立ちます。

includes()と他のメソッドとの違いを比較（indexOf, some）

JavaScriptには、includes()と似たような目的で使えるメソッドがいくつか存在します。

ここでは、特によく比較されるindexOf()とsome()との違いを明確にしていきましょう。使い分けができるようになると、より適切なコードが書けるようになります。

indexOf()との違いは「戻り値」と「NaNの扱い」

indexOf()はincludes()が登場する前から使われてきた、要素を検索するメソッドです。一番の違いは戻り値にあります。

項目	includes()	indexOf()
見つかった場合	`true`	要素のインデックス番号（0以上）
見つからない場合	`false`	`-1`
`NaN`の扱い	`NaN`を正しく検索できる	`NaN`を検索できない
主な用途	値の存在チェック	値の存在チェックと、その位置の特定

includes()が単純な存在チェックに特化しているのに対し、indexOf()は要素の「位置」を知りたい場合にも使えます。

また、重要な違いとしてNaN（Not a Number：非数）の扱いが挙げられます。indexOf()ではNaNを見つけることができませんが、includes()は正しく見つけることが可能です。

const array = [1, 2, NaN, 4];

console.log(array.includes(NaN));   // true
console.log(array.indexOf(NaN));    // -1

このように、NaNが含まれている可能性のある配列を扱う際は、includes()を使うのが安全です。

参考：MDN Web Docs – Array.prototype.includes()

some()との違いは「オブジェクト配列」の検索

some()は、配列の各要素が、指定されたテスト関数（コールバック関数）の条件を少なくとも1つ満たすかどうかを判定するメソッドです。

単純な値の比較ならincludes()が手軽ですが、オブジェクトを含む配列から特定の条件で検索したい場合にはsome()が非常に役立ちます。

項目	includes()	some()
検索対象	数値や文字列などのプリミティブ値	プリミティブ値、オブジェクト
コールバック関数	不要	必要
主な用途	単純な値の存在チェック	条件に合う要素が1つでも存在するかチェック

例えば、ユーザー情報の配列から「20歳以上のユーザーがいるか」を調べたい場合、includes()では実現できません。このような場合にsome()の出番です。

const users = [
  { name: '山田', age: 25 },
  { name: '佐藤', age: 18 },
  { name: '鈴木', age: 32 }
];

// 20歳以上のユーザーがいるかチェック
const hasAdult = users.some(user => user.age >= 20);
console.log(hasAdult); // true

// 40歳以上のユーザーがいるかチェック
const hasSenior = users.some(user => user.age >= 40);
console.log(hasSenior); // false

includes()は単純な値のマッチング、some()は条件に基づいた柔軟な検索、と覚えておくと良いでしょう。

JavaScriptでincludes()を使う際の注意点

手軽で便利なincludes()ですが、いくつか知っておきたい注意点があります。

思わぬバグを防ぐためにも、以下のポイントをしっかり押さえておきましょう。

大文字と小文字は区別される

includes()メソッドは、大文字と小文字を厳密に区別します。

例えば、’JavaScript’という文字列に対して’javascript’を検索しても、falseが返ってきます。

const str = 'JavaScriptは楽しい！';

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

もし大文字・小文字を区別せずに検索したい場合は、元の文字列と検索したい文字列を、toLowerCase()（すべて小文字にする）やtoUpperCase()（すべて大文字にする）メソッドでどちらかに統一してから比較する方法が有効です。

const str = 'JavaScriptは楽しい！';
const keyword = 'javascript';

// 両方を小文字に変換してから比較する
console.log(str.toLowerCase().includes(keyword.toLowerCase())); // true

このように一手間加えることで、より柔軟な文字列検索が実現できます。

オブジェクトや配列の検索は参照で行われる

includes()を使ってオブジェクトや配列そのものを検索する場合、その比較は「値」ではなく「参照」で行われます。これはJavaScriptの少し難しい部分ですが、非常に重要なポイントです。

簡単に言うと、「見た目が同じでも、保存されているメモリ上の場所が違うものは別物と判断される」ということです。

const user1 = { name: '山田' };
const user2 = { name: '佐藤' };
const users = [user1, user2];

// 配列に格納されているオブジェクトそのものを指定すればtrue
console.log(users.includes(user1)); // true

// 見た目が同じでも、新しく作ったオブジェクトは別物なのでfalse
console.log(users.includes({ name: '山田' })); // false

2つ目のconsole.logでは、{ name: '山田' }という見た目が全く同じオブジェクトを渡していますが、結果はfalseになります。これは、配列usersの中にあるオブジェクトと、includes()の引数で新しく作られたオブジェクトが、メモリ上では別々の場所に存在しているためです。

オブジェクトのプロパティ値で検索したい場合は、先ほど紹介したsome()メソッドを使うようにしましょう。

Solid.js入門ガイド｜React超えの爆速フレームワークを徹底解説【2025年最新版】