JavaScriptのincludesを使いこなす5つの方法

初心者向けJavaScriptのincludesメソッド解説JS
この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptのincludesメソッドを使いこなすことができるようになります。

初心者の方でもわかりやすく、徹底的に解説していくので、安心して学んでいってください。

それでは、早速見ていきましょう!

●JavaScriptのincludesメソッドとは

includesメソッドは、JavaScriptで文字列や配列に対して、指定した要素が存在するかどうかを調べるためのメソッドです。

簡単な検索を行う際に便利で、簡潔なコードで実装できます。

○includesメソッドの基本

includesメソッドは、文字列と配列の両方で使えます。次のような構文で使用します。

文字列.includes(検索する文字列);
配列.includes(検索する要素);

検索対象に指定した要素が存在すればtrue、存在しなければfalseを返します。

●includesメソッドの使い方

それでは、実際のサンプルコードを見ながら、includesメソッドの使い方を学んでいきましょう。

○サンプルコード1:文字列の検索

このコードでは、includesメソッドを使って文字列の中に特定の文字列が存在するかを調べるコードを紹介しています。

この例では、”こんにちは”の中に”にち”が含まれているかどうかを調べています。

const str = "こんにちは";
const result = str.includes("にち");

console.log(result); // true

○サンプルコード2:配列の要素検索

このコードでは、includesメソッドを使って配列の中に特定の要素が存在するかを調べるコードを紹介しています。

この例では、配列に3が含まれているかどうかを調べています。

const arr = [1, 2, 3, 4, 5];
const result = arr.includes(3);

console.log(result); // true

○サンプルコード3:大文字小文字を区別せずに検索

このコードでは、大文字小文字を区別せずに検索を行う方法を紹介しています。

この例では、”Hello, world!”の中に”hello”が含まれているかどうかを調べています。

const str = "Hello, world!";
const searchStr = "hello";
const result = str.toLowerCase().includes(searchStr.toLowerCase());

console.log(result); // true

○サンプルコード4:検索対象範囲を指定

このコードでは、includesメソッドを使って検索対象の範囲を指定する方法を紹介しています。

この例では、”こんにちは、世界!”の中で、”ん”が含まれているかどうかを3文字目以降で調べています。

const str = "こんにちは、世界!";
const searchStr = "ん";
const fromIndex = 3;
const result = str.includes(searchStr, fromIndex);

console.log(result); // false

●includesメソッドの応用例

includesメソッドは、基本的な使い方だけでなく、さまざまな応用例があります。

ここでは、単語の出現回数をカウントする方法を紹介します。

○サンプルコード5:単語の出現回数カウント

このコードでは、includesメソッドを使って文章の中で特定の単語が何回出現するかをカウントするコードを紹介しています。

この例では、”apple”が何回出現するかを調べています。

const text = "I have an apple. She has two apples. They have three apples.";
const searchWord = "apple";
let count = 0;
let position = 0;

while ((position = text.indexOf(searchWord, position)) !== -1) {
  count++;
  position += searchWord.length;
}

console.log(`${searchWord}の出現回数: ${count}`); // appleの出現回数: 3

●注意点と対処法

includesメソッドを使う際には、いくつか注意点があります。

  1. 大文字と小文字は区別されるため、検索前に両方を小文字または大文字に変換しておくことが推奨されます。
  2. 配列に対して使用する際、検索対象の要素がオブジェクトの場合、同じオブジェクトへの参照がない限り検索にヒットしません。
    この場合は、独自の検索方法を実装する必要があります。

まとめ

この記事では、JavaScriptのincludesメソッドについて初心者目線で詳しく徹底解説しました。

基本的な使い方から応用例まで、実際のサンプルコードを交えて説明しました。

これであなたもincludesメソッドを使いこなすことができるでしょう。

今後のプログラミングにぜひ活用してみてください。