JavaScriptのincludesメソッド徹底解説｜使い方・ユースケース・indexOfとの違い

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. はじめに

JavaScriptを使用して開発を行う際、特定の文字列や配列の中に「特定の値が含まれているかどうか」を判定したい状況がよくあります。たとえば、入力フォームで不適切な単語が含まれているか確認したり、配列に特定の商品が含まれているかチェックしたりするケースです。

このような課題を解決する便利な方法の1つが、JavaScriptのincludes()メソッドです。本記事では、includes()メソッドの基本的な使い方から、応用的な方法や他の手法との比較、さらにブラウザ互換性の問題への対策までを徹底解説します。初心者にも分かりやすく、実際のユースケースに即した内容を提供するので、ぜひ参考にしてください。

2. JavaScriptのincludes()メソッド

includes()メソッドとは

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

構文

文字列で使用する場合：

文字列.includes(検索する文字列, 開始位置)

配列で使用する場合：

配列.includes(検索する値, 開始位置)

基本的な使用例

文字列の例：

const text = "JavaScript is awesome";
console.log(text.includes("awesome")); // true
console.log(text.includes("Awesome")); // false （大文字小文字を区別します）

配列の例：

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

特徴

1. 大文字と小文字を区別
   includes()は文字列検索において、大文字小文字を区別します。そのため、例えば"Apple"と"apple"は異なるものとして扱われます。
2. 部分一致の判定
   配列や文字列の中に、完全に一致する値がある場合にのみtrueを返します。部分一致を判定したい場合は他の手法（正規表現など）を使用する必要があります。

3. 実用的なユースケース

includes()メソッドは、日常的な開発において非常に便利です。以下では、具体的なユースケースをいくつか紹介します。

ユースケース1: 入力フォームで不適切な単語を検出

ウェブフォームでユーザーが入力した内容に、不適切な単語や禁止された言葉が含まれているかをチェックする際に活用できます。

例: 禁止単語のフィルタリング

const forbiddenWords = ["spam", "advertisement", "fake"];
const userInput = "This is a spam message";

let isForbidden = false;

for (const word of forbiddenWords) {
  if (userInput.includes(word)) {
    isForbidden = true;
    break;
  }
}

console.log(isForbidden ? "不適切な単語が含まれています" : "問題ありません");
// 出力: 不適切な単語が含まれています

このように、配列内の禁止単語をループしてチェックすることで、簡単にフィルタリングが可能です。

ユースケース2: 配列内の商品の存在を確認

オンラインショッピングサイトや在庫管理システムでは、特定の商品がリストに存在するかどうかを判定する必要があります。

例: 商品の存在確認

const productList = ["laptop", "mouse", "keyboard", "monitor"];
const targetProduct = "mouse";

if (productList.includes(targetProduct)) {
  console.log(`${targetProduct}はリストに存在します`);
} else {
  console.log(`${targetProduct}はリストに存在しません`);
}
// 出力: mouseはリストに存在します

このコードは、リスト内に指定された商品が含まれているかをシンプルに確認できます。

ユースケース3: 動的なフィルタリング

リアルタイムでユーザーの入力を監視し、検索結果をフィルタリングする動的なシステムにも使用できます。

例: 検索結果のフィルタリング

const items = ["apple", "banana", "grape", "orange", "watermelon"];
const searchQuery = "ap";

const filteredItems = items.filter(item => item.includes(searchQuery));
console.log(filteredItems);
// 出力: ["apple", "grape"]

ここでは、ユーザーが入力した文字列をもとに配列内の項目を動的にフィルタリングする方法を示しています。

ユースケース4: 簡易的なURL検出

Webアプリケーションで、URLに特定のパラメータが含まれているかを確認するケースでも活用できます。

例: URLの判定

const currentURL = "https://example.com/products?category=electronics";

if (currentURL.includes("category=electronics")) {
  console.log("エレクトロニクスカテゴリのページです");
} else {
  console.log("別のカテゴリのページです");
}
// 出力: エレクトロニクスカテゴリのページです

このコードは、現在のURLに特定のパラメータが含まれているかを確認します。Webアプリケーションの動的なルーティングや追跡に役立ちます。

4. indexOf()メソッドとの比較

JavaScriptでは、includes()メソッド以外にも文字列や配列の中に特定の値が含まれているかを確認する手法としてindexOf()メソッドがよく使用されます。このセクションでは、indexOf()メソッドの概要と、includes()メソッドとの違いを比較します。

indexOf()メソッドとは

indexOf()メソッドは、文字列や配列内で特定の値が最初に出現するインデックス（位置）を返すメソッドです。もし指定した値が存在しない場合は-1を返します。

構文

文字列での使用:

文字列.indexOf(検索する文字列, 開始位置)

配列での使用:

配列.indexOf(検索する値, 開始位置)

基本的な使用例

文字列の例:

const text = "JavaScript is awesome";
console.log(text.indexOf("awesome")); // 15
console.log(text.indexOf("Awesome")); // -1

配列の例:

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

includes()メソッドとの違い

使い分けのポイント

1. 存在確認を行うだけの場合はincludes()が便利

• trueまたはfalseだけを知りたい場合はincludes()を使う方が簡潔で読みやすいです。
• 例:
  javascript const text = "Hello, world!"; console.log(text.includes("world")); // true console.log(text.indexOf("world") !== -1); // true

1. 値の位置が必要な場合はindexOf()が適している

• 値が配列や文字列の中のどこにあるかを特定する必要がある場合はindexOf()が役立ちます。
• 例:
  javascript const text = "Find the position of this word."; console.log(text.indexOf("position")); // 10

1. includes()の方が可読性が高い

• 存在確認を行う場合、includes()はそのまま結果を返すため、コードの意図が明確になります。一方、indexOf()を使う場合は!== -1という追加条件が必要で、少し冗長に見えることがあります。

組み合わせた活用例

includes()とindexOf()を組み合わせて、効率的なチェックと位置特定を行うことも可能です。

例: 値の存在を確認してから位置を取得

const sentence = "JavaScript makes web development easy.";
if (sentence.includes("web")) {
  const position = sentence.indexOf("web");
  console.log(`"web"はインデックス${position}に存在します`);
} else {
  console.log(`"web"は存在しません`);
}
// 出力: "web"はインデックス21に存在します

結論

• 存在確認だけが必要な場合はincludes()を使用することで、簡潔で読みやすいコードが書けます。
• 値の位置が重要な場合はindexOf()を活用するのが適切です。
• 両方の特性を理解して適切に使い分けることで、より効率的なJavaScriptコードを記述できます。

5. 正規表現を使った高度な判定

JavaScriptでは、includes()やindexOf()メソッド以外に、正規表現を使って文字列内のパターンマッチを行う方法があります。正規表現は、特定の条件に一致する文字列を柔軟に検索するための強力なツールです。このセクションでは、正規表現を用いた判定方法とその活用例を紹介します。

正規表現を使うメリット

• 複雑な条件の検索が可能: 特定のキーワードだけでなく、パターンや文字の組み合わせを柔軟に検索できます。
• 部分一致検索や繰り返し条件の指定: たとえば、数字や特定のフォーマットを持つ文字列を検索できます。

正規表現の基本

正規表現を使うには、JavaScriptのRegExpオブジェクトや文字列のメソッドを利用します。

1. 正規表現の作成方法

正規表現は以下の2つの方法で作成できます。

1. リテラル形式: /パターン/フラグ
2. RegExpオブジェクト: new RegExp("パターン", "フラグ")

例:

const regex1 = /hello/; // リテラル形式
const regex2 = new RegExp("hello", "i"); // オブジェクト形式

2. 主なフラグ

• i: 大文字小文字を区別しない
• g: グローバル検索（すべての一致を検索）
• m: 複数行モード

正規表現での検索方法

正規表現を用いた文字列検索には、以下の2つのメソッドを使います。

1. test()メソッド

文字列に正規表現が一致するかを判定し、結果をtrueまたはfalseで返します。

例:

const regex = /javascript/i;
const text = "JavaScript is awesome!";
console.log(regex.test(text)); // true

2. match()メソッド

一致する部分を配列で返します。一致しない場合はnullを返します。

例:

const regex = /web/g;
const text = "Web development with Web technologies.";
console.log(text.match(regex)); // ["Web", "Web"]

実用的な正規表現のユースケース

ユースケース1: 特定のフォーマットの検索

ユーザー入力が正しい形式であるかを確認する際に使用します。

例: メールアドレスの検証

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const email = "user@example.com";
console.log(emailRegex.test(email)); // true

ユースケース2: 特定の単語やパターンの検出

文章中に指定された単語が含まれているか確認する際に有用です。

例: 禁止用語の検出

const forbiddenRegex = /spam|advertisement|fake/i;
const userInput = "This is a spam message.";
console.log(forbiddenRegex.test(userInput)); // true

ユースケース3: 数字や特定フォーマットの抽出

文字列から数値や特定の情報を抽出する場合に使用します。

例: 数字の抽出

const numberRegex = /\d+/g;
const text = "The price is 1200 yen.";
console.log(text.match(numberRegex)); // ["1200"]

正規表現の注意点

1. 複雑な構文
   正規表現は強力ですが、複雑なパターンを作成する場合、構文が難解になりがちです。必要に応じてコメントを追加し、可読性を確保しましょう。
2. パフォーマンス
   非常に複雑な正規表現や大規模なテキスト検索は、処理に時間がかかる可能性があります。
3. 適切な利用範囲
   単純な存在確認の場合は、includes()の方が簡潔で可読性が高いです。

結論

正規表現は、複雑な条件の検索やパターンマッチが必要な場合に非常に有用です。includes()やindexOf()が対応できない高度な検索が求められるシナリオでは、正規表現を活用しましょう。ただし、必要以上に複雑にしないことも重要です。

6. ブラウザ互換性とポリフィル

JavaScriptでincludes()メソッドを使用する際、ブラウザ間の互換性に注意する必要があります。特に、古いブラウザ（例: Internet Explorer）ではincludes()メソッドがサポートされていません。このセクションでは、ブラウザ互換性の問題とその対策について解説します。

includes()メソッドのブラウザサポート状況

includes()メソッドは、ECMAScript 2016（ES7）で導入されました。現在では、ほとんどのモダンブラウザでサポートされていますが、Internet Explorerでは非対応です。

主なブラウザのサポート状況:

• 対応済み: Google Chrome, Firefox, Safari, Edge, Opera
• 非対応: Internet Explorer（すべてのバージョン）

ブラウザ互換性の確認が必要な場合は、MDN Web Docsで詳細な情報を確認できます。

古いブラウザでの対策: ポリフィルの使用

互換性のないブラウザでincludes()メソッドを使いたい場合は、ポリフィル（既存のメソッドを模倣するコード）を追加することで対応可能です。以下は、includes()メソッドの簡単なポリフィルの例です。

文字列用のポリフィル

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    if (typeof start !== 'number') {
      start = 0;
    }
    return this.indexOf(search, start) !== -1;
  };
}

配列用のポリフィル

if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement, fromIndex) {
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }
    const o = Object(this);
    const len = o.length >>> 0;
    if (len === 0) {
      return false;
    }
    const n = fromIndex | 0;
    let k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    while (k < len) {
      if (o[k] === searchElement || (searchElement !== searchElement && o[k] !== o[k])) {
        return true;
      }
      k++;
    }
    return false;
  };
}

このコードをプロジェクトに追加することで、Internet Explorerや古いブラウザでもincludes()メソッドを利用できるようになります。

モダンブラウザの使用を促す選択肢

可能であれば、最新バージョンのブラウザを使用するようにユーザーに促すことも一つの方法です。これにより、開発者側でポリフィルを導入する負担を軽減できます。

• ユーザー向けメッセージ例:
  「このウェブサイトは最新のブラウザでの利用を推奨しています。Google Chrome、Firefox、またはEdgeをご利用ください。」

結論

includes()メソッドはモダンブラウザでは広くサポートされていますが、Internet Explorerなどの古いブラウザでは非対応です。ポリフィルを利用することで互換性の問題を解決できますが、可能であればモダンブラウザの使用を促進することで、開発コストを抑えることができます。

7. まとめ

この記事では、JavaScriptで特定の文字列や配列内の要素が含まれているかを確認する方法について詳しく解説しました。以下に重要なポイントを整理します。

各メソッドの特徴

適切なメソッドの選択

• 簡単で直感的な存在確認には、includes()が最適です。コードの可読性も向上します。
• 値の位置が必要な場合は、indexOf()を使用することで具体的なインデックスを取得できます。
• 複雑な条件やパターンマッチングが必要な場合には、正規表現を使用することで柔軟な検索が可能です。

ユースケースに応じたアプローチ

• ユーザー入力のフィルタリングや、リスト内の要素確認など、一般的な用途ではincludes()が便利です。
• 商品リストの確認や検索結果のフィルタリングなど、特定の位置を確認する必要がある場合はindexOf()を検討しましょう。
• 高度なパターンマッチングやフォーマット検証が必要な場面では、正規表現が有効です。

互換性への注意

• includes()メソッドはモダンブラウザで広くサポートされていますが、Internet Explorerなどの古いブラウザでは利用できません。ポリフィルを使用するか、モダンブラウザへの移行を推奨してください。

次のステップ

この記事で紹介した知識を活用し、プロジェクトで効率的な文字列や配列の操作を実現しましょう。また、複雑な場面では必要に応じてincludes()以外の方法も検討し、適切なツールを選択してください。

8. FAQ

この記事では、JavaScriptのincludes()メソッドに関連するよくある質問とその回答をまとめました。実際の使用に役立つ情報を簡潔に提供します。

Q1: includes()メソッドは大文字と小文字を区別しますか？

はい、includes()メソッドは大文字と小文字を区別します。たとえば、以下の例では"JavaScript"と"javascript"が区別されます。

例:

const text = "JavaScript is fun";
console.log(text.includes("javascript")); // false
console.log(text.includes("JavaScript")); // true

Q2: includes()メソッドはInternet Explorerで動作しますか？

いいえ、Internet Explorerではincludes()メソッドはサポートされていません。そのため、古いブラウザで動作させたい場合はポリフィルを使用する必要があります。

ポリフィル例:

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    if (typeof start !== 'number') {
      start = 0;
    }
    return this.indexOf(search, start) !== -1;
  };
}

Q3: 部分一致検索を行うにはどうすれば良いですか？

部分一致検索には正規表現を使用するのが効果的です。以下は、部分一致を検索する例です。

例:

const text = "The quick brown fox";
console.log(/quick/.test(text)); // true
console.log(/lazy/.test(text));  // true

Q4: 配列の中にNaNが含まれているか確認できますか？

はい、includes()メソッドでは、NaNの判定も正確に行うことができます。これは、indexOf()では不可能な点です。

例:

const numbers = [1, 2, NaN, 4];
console.log(numbers.includes(NaN)); // true
console.log(numbers.indexOf(NaN));  // -1

Q5: 特定の文字列が何回含まれているかを調べるには？

includes()メソッドではなく、ループや正規表現を使用することで、文字列の出現回数をカウントできます。

例:

const text = "apple apple orange apple";
const search = "apple";
const count = text.split(search).length - 1;
console.log(`"${search}"は${count}回含まれています`); 
// 出力: "apple"は3回含まれています

Q6: includes()メソッドは特定の開始位置を指定できますか？

はい、includes()メソッドでは検索の開始位置を指定できます。デフォルトでは0から検索が始まります。

例:

const text = "JavaScript is fun";
console.log(text.includes("is", 10)); // true
console.log(text.includes("is", 15)); // false

Q7: 配列のオブジェクト内の要素を確認できますか？

includes()メソッドは配列の要素に対して使用できますが、オブジェクトのプロパティの値を検索する場合はsome()やfind()を使います。

例:

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];

console.log(users.some(user => user.name === "Alice")); // true
console.log(users.some(user => user.age === 40));      // false