JavaScriptのincludesメソッドの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのincludesメソッドの使い方について現役エンジニアが解説しています。includesメソッドは、文字列や配列の中に引数で指定した値が含まれているかをチェックするメソッド似たようなメソッドにでindexOfもあります。両方の違いを見ながら実際に書いてみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのincludesメソッドの使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのincludesメソッドの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

includesメソッドとは

includes メソッドとは、文字列や配列の中に引数で指定した値が含まれているかをチェックするメソッドになります。

“apple and banana” という文字列に”cherry”が含まれているかを調べたり、[1, 2, 3] という配列に2が含まれているかを調べたりするのに使います

includesメソッドの使い方

文字列の場合でも、配列の場合でも使い方は同じです。調べたい対象に対して、含まれているか調べたい値を指定します。調べたい値が含まれる場合にはtrueを、含まれない場合にはfalseを返します。

const targetString = 'This is target';
targetString.includes('This');
// => true
const targetArray = ['This', 'is', 'target'];
targetArray.includes('That');
// => false

調べたい範囲を限定したい場合には、第2引数に開始インデックスとして数値を指定します。

const targetString = 'This is target';
// 5 を指定しているので 'is target' の中に 'This' が含まれるかのチェックとなる
targetString.includes('This', 5);
// => false
const targetArray = ['This', 'is', 'target'];
// 1 を指定しているので ['is', 'target'] の中に 'is' が含まれるかのチェックとなる
targetArray.includes('is', 1);
// => true

より詳細な解説は以下のリンクをご覧ください。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

indexOfメソッドとの使い分け

似たようなメソッドとして、indexOf というメソッドがあります。indexOfメソッドは指定した値が含まれる場合にはその要素のインデックスを、含まれない場合には -1 を返します。

const targetString = 'This is target';
targetString.indexOf('This');
// => 0
const targetArray = ['This', 'is', 'target'];
targetArray.includes('That');
// => -1

単純に指定した値が含まれているかどうかのチェックだけでなく、その値に対して何か操作を加えたいようなケースではindexOfを使うと良いでしょう。

ただし、配列に対するindexOfではNaNを検出することができないので、その点にだけは注意が必要です。

[NaN].indexOf(NaN);
// => -1 になる
[NaN].includes(NaN);
// => true

より詳細な解説は以下のリンクをご覧ください。

 

実際に書いてみよう

それでは実際に書いてみましょう。まずは文字列から。

const targetString = 'Apple';
targetString.includes('p');
// => true
targetString.includes('a');
// => false

大文字/小文字 関係なく調べたい場合は、toLowerCaseやtoUpperCaseを使いましょう。

targetString.toLowerCase().includes('a');
// => true
targetString.toUpperCase().includes('A');
// => true

続いて配列です。

const targetArray = ['Apple', 'Banana', 'Cherry'];
targetArray.includes('Banana');
// => true
targetArray.includes('cherry');
// => false

配列に対しても、大文字/小文字 関係なく調べたいこともあるかと思います。そのような場合にはmapと組み合わせると良いでしょう。

//mapを使って ['apple', 'banana', 'cherry'] という配列を作成してチェック
targetArray.map(str => str.toLowerCase()).includes('cherry');
// => true

 

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。