icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

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

 

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

なお本記事は、TechAcademyのオンラインブートキャンプ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] コーディングで副業する方法とは

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

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