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

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

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

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

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

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

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

• String.prototype.includes() – JavaScript | MDN
• Array.prototype.includes() – JavaScript | MDN

 

[PR] フロントエンドで副業する学習方法を動画で公開中

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

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

• String.prototype.indexOf() – JavaScript | MDN
• Array.prototype.indexOf() – JavaScript | MDN

 

実際に書いてみよう

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

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・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。