【JavaScript入門】includesメソッドで特定の文字列が含まれるかどうかをチェックする

JavaScriptで配列や文字列を扱う際に、特定の値が含まれているかを確認したい時があると思います。
その際に活用できるのが、includesメソッドです。

今回の記事では、includesメソッドの使用方法について詳しく解説していきたいと思います。
includesメソッドに似た働きをするメソッドの動作についてや、それらのメソッドと includesメソッドを使い分けるポイントについても解説するので、ぜひ参考にしてみてください。

JavaScriptのincludesメソッドとは？

includesメソッドは、特定の値が配列の要素や文字列に含まれているかどうかを確認する際に使用するメソッドです。
値の有無によって真偽値が返されるため、if文の条件式などに活用することができます。

配列のincludesメソッドの使い方

includesメソッドは、配列の既存メソッドである includesと、文字列 (String) の既存メソッドである includesの２種類があります。

まずは、配列の既存メソッドである includesから見ていきましょう。

基本構文

配列の includesメソッドを使用する際の基本的な構文は、以下の通りです。

【基本構文】

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

メソッドの第１引数には、検索したい要素の値を指定します。
指定した値が配列内に含まれている場合は true、無い場合は falseが返却されます。

第２引数には、検索を開始する要素の位置 (インデックス) を任意で指定できます。
指定が無い場合は０番目からの検索となり、マイナス値を指定した場合は末尾から遡って数えます。

includesメソッドを実際に使用した場合の動きを、以下のサンプルコードで見てみましょう。

【サンプルコード】

const sampleArray = ["apple", 10, "orange", 30];

console.log(sampleArray.includes("apple"));
console.log(sampleArray.includes(20));

// 開始位置の指定により結果が変わる
if(sampleArray.includes(10, 2)){
    console.log("値が見つかりました");
}else{
    console.log("値が見つかりませんでした");
}

【実行結果】

true
false
値が見つかりませんでした

上記のように、位置指定が無い場合は配列全体から検索し、指定がある場合には該当箇所から末尾までを検索します。

文字列のincludesメソッドの使い方

続いて、文字列の includesメソッドの使い方について見ていきましょう。

基本構文

文字列の includesメソッドを使用する際の基本的な構文は、以下の通りです。

【基本構文】

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

引数の内容や戻り値については、一部の違いを除いて、配列の includesメソッドとほとんど変わりはありません。

第１引数に指定した文字列が検索内容となり、対象の文字列に含まれている場合は true、無い場合は falseが返却されます。
ただし、配列の includesメソッドの場合、文字列の値は全文一致した場合にのみ true判定となりますが、文字列の includesメソッドでは部分一致でも true判定となります。

第２引数には、同じく検索を開始する位置を任意で指定することができます。
配列の場合はインデックス番号の指定となりますが、文字列の場合は先頭から数えて何文字目かを指定します。
デフォルトの数値は、配列同様に先頭を表す０となります。

それでは、文字列の includesメソッドの動きについても、実際のコードで確認してみましょう。

【サンプルコード】

const sampleStr = "This is sampleCode";

// 部分一致でもOK
console.log(sampleStr.includes("sample"));

// 配列同様、開始位置の指定で結果が変わる
console.log(sampleStr.includes("sample", 10));

// 大文字と小文字は区別される
console.log(sampleStr.includes("this"));

【実行結果】

true
false
false

文字列に限らず、どちらの includesメソッドでも影響する大きなポイントとして、大文字と小文字は別の文字として判定されます。
上記のサンプルコードを見ると分かるように、対象の文字列内が 「This」 と大文字が入っているのに対し、検索する文字列は 「this」 と全て小文字になっているため、メソッドの戻り値は falseが返却されています。

indexOfメソッドとの使い分け

includesメソッドと似た動きをするメソッドの１つに、indexOfメソッドがあります。
こちらも配列のメソッドと文字列のメソッドがそれぞれありますが、基本的な機能は同じです。

【基本構文】

検索対象.indexOf(検索値, 検索開始位置)

indexOfメソッドは、includesメソッドと同様に指定の値が対象内に存在するかを判断するメソッドですが、戻り値が異なります。
値が存在する場合には、要素のインデックスや文字列の位置を整数値で返し、存在しない場合は -１が返却されます。

以下のサンプルコードで、実際の動きを見てみましょう。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];
const sampleStr = "This is sampleCode";

// 配列の場合はインデックス、文字列の場合は文字位置を返す
console.log(sampleArray.indexOf(3));
console.log(sampleStr.indexOf("sample"));

// 開始位置の指定はincludesと同じ
console.log(sampleArray.indexOf(5, 2));
// 値が存在しない場合は-1を返す
console.log(sampleStr.indexOf("this"));

【実行結果】

2
8
4
-1

上記で解説したように、配列の場合はインデックス、文字列の場合は文字位置が返却されることが、結果を見ると分かりますね。

値が存在するか否かの真偽ではなく、どこに位置するかを知りたい場合には、indexOfメソッドを使用しましょう。

someメソッドとの使い分け

includesメソッドと似た動きをするメソッドのもう１つに、someメソッドがあります。
someメソッドは、配列のみが持つ既存メソッドです。

検索値が一致した場合の戻り値が異なるのが indexOfメソッドであったのに対し、someメソッドは値の検索方法が異なります。
includesメソッドでは、検索値が対象の要素や文字列と一致するかどうかのみで結果を判断しますが、someメソッドの場合は判定に使用する条件式を自身で指定することができます。

【基本構文】

 配列名.some(コールバック関数)

メソッドの引数には、コールバック関数を指定します。
関数内に記述した条件式に基づいて、指定の条件に一致する値が配列に含まれているか否かを判断し、その結果を真偽値で返します。

以下のサンプルコードで、実際の動きを見てみましょう。

【サンプルコード】

const sampleArray = [5, 1, 8, 15, 3];

const result = sampleArray.some(function(value){
    console.log(value);
	return value > 10;
});

console.log(result);

【実行結果】

5
1
8
15
true

上記のように、判定に使用する条件式は return文を使って記述します。

メソッドの具体的な動きとしては、実行結果を見ると分かるように、条件に一致する要素が現れるまで関数内の処理を繰り返し実行し、最初に trueとなる要素が現れた時点で検索が終了します。

関数の処理を簡潔に記述できる場合は、アロー関数式を使用するとより短いコードで記述することができます。

【サンプルコード】

const sampleArray = [5, 1, 8, 15, 3];

const result = sampleArray.some(value => value % 2 === 0);

console.log(result);

【実行結果】

true

また、条件は複数指定することも可能です。

【サンプルコード】

const sampleArray = [5, 1, 8, 15, 3];

const result = sampleArray.some(value => value % 2 === 0 && value > 10);

console.log(result);

【実行結果】

false

まとめ

いかがでしたか？今回は、includesメソッドの使用方法について解説しました。

配列や文字列などを操作したり、値の検索を行ったりするメソッドは、いずれも実際の開発で使用されるケースが多々あるものです。
includesメソッドを含め、今回紹介したメソッドもまた覚えておいて損はないので、せひ使い方をマスターして、今後の開発に役立ててみてくださいね。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。