【JavaScript入門】すぐわかる!includesメソッドを徹底解説

みなさんこんにちは!Kotonoです。

今回はとても便利な「includesメソッドの使い方」をご紹介したいと思います。

この記事では

・includesメソッドとは
・配列や文字列のincludesメソッドについて

などといった基本的な内容から

・配列や文字列のincludesメソッドの使い方
・indexOfメソッドとの使い分け

など、より応用的な内容に関してもわかりやすく解説していきたいと思います。

includesメソッドとは

皆さんはincludesメソッドを使用したことはありますか?

includesメソッドとは、特定の要素が配列や文字列に含まれているかどうか確認するためのメソッドです。

主に、配列内や文字列内の要素の存在確認のために使用されます。

配列(Array)のincludesメソッドについて

配列(Array)オブジェクトの既存メソッドのひとつとして、includesメソッドが存在します。

配列内にある特定の要素が存在するかどうかをチェックするために使われます。

基本的な構文は以下の通りです。

includesメソッドの戻り値はtruefalseのみです。

引数に指定した要素が配列内に含まれていればtrueを返し、含まれていない場合はfalseを返します。

配列(Array)のincludesメソッドの使い方

では、実際にincludesメソッドを使用してみましょう。

以下のコードをご覧ください。

実行結果は以下の通りです。

上のコードでは、まずは配列myarrayを作成しました。

そして、includesメソッドを用いて「3」という要素がmyarray内に存在するかどうかをチェックしました。

「3」はmyarray内に含まれているので、変数res1にはtrueが保存されました。

次に「7」という要素がmyarray内に存在するかどうかをチェックしました。

「7」はmyarray内には存在しないので、変数res2にはfalseが含まれています。

また、指定した要素の検索を始める位置を指定することも出来ます。

以下のコードをご覧ください。

実行結果は以下の通りです。

上のコードでは、先ほどと同じmyarray配列を使用しています。

先ほどのサンプルコードでは、includesメソッドの引数はひとつだけでしたが、今回は検索を開始する位置の指定のために、第二引数も使用しています。

myarray.includes(3,1) は、myarray内に「3」が存在するかどうかを、2番目の要素を先頭にして検索するということです。

「3」は3番目の要素なので、2番目から検索しても、「3」はmyarray内に存在します。

次は「1」を3番目の要素を先頭にして検索しています。

しかし、「1」はmyarrayの1番目の要素なので、3番目からのみの検索だと「1」は存在しないということになってしまいます。

ここで注意したいのは、要素は0から数えるので、1だと2番目、2だと3番目にあたるということです。

文字列(String)のincludesメソッドについて

配列のincludesメソッドとはまた別に、文字列(String)オブジェクトの既存メソッドのひとつとして、includesメソッドが存在します。

文字列内にある特定の文字列が存在するかどうかをチェックするために使われます。

基本的な構文は以下の通りです。

先ほどのincludesメソッドと同じように、戻り値はtruefalseのみです。

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

では実際に、文字列のincludesメソッドを使ってみましょう。

以下のコードをご覧ください。

実行結果は以下の通りです。

上のコードは、先ほどのセクションで説明したincludesメソッドと同じ働きをもっています。

Helloという文字列はmystr文字列内に存在するので、trueが返ってきました。

しかし、Ohayoという文字列はmystr内には存在しないものなので、falseと表示されたのです。

また、先ほどと同じように、指定した要素の検索を始める位置を指定することも出来ます。

以下のコードをご覧ください。

実行結果は以下の通りです。

上のコードでは、文字列Helloを2番目の要素から検索しています。

ここでいう「要素」とは、文字列を構成するひとつひとつの文字のことです。

なので、1番目から検索を始めるということは、頭文字であるHを取った状態の文字列 ello, world! 内を検索するということです。

ello, world! 文字列内には、当然ながらHelloという文字列は存在しません。

その為、変数res1にはfalseが保存されてしまいます。

しかし、elloという文字列は存在するので、変数res2にはtrueが含まれています。

文字列のincludesメソッドを使用する際に注意したいポイントは、includesメソッドは大文字と小文字を区別するということです。

以下のコードをご覧ください。

実行結果は以下の通りです。

上のコードでは、mystr内にhelloという文字列があるかどうかを検索しました。

includesメソッドはHelloとhelloを区別するので、falseと表示されました。

indexOfメソッドとの使い分け

includesメソッドとよく似た働きを持つメソッドとして、indexOfメソッドがあります。

indexOfメソッドは、includesメソッドとは違い、検索した要素が配列や文字列内に出現する位置を返すメソッドです。

以下のコードをご覧ください。

実行結果は以下の通りです。

上のコードでは、indexOfメソッドを使用して、検索した要素の位置を表示させました。

myarray内の要素「3」は0から数えて2番目の要素なので、変数res1には2が含まれています。

反対に、myarray内に要素「7」は存在しないので、‐1が返ってきました。

indexOfメソッドは検索要素の位置を知りたい時、includesメソッドは存在確認したい時と、使い分けるとより便利です。

まとめ

今回はincludesメソッドの使い方をご紹介しました。

シンプルなメソッドですが、使い方を覚えておくと様々なシチュエーションにおいて活躍するので便利です。

みなさんもこの記事を通して、様々なメソッドの知識を深めていってくださいね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説