みなさんこんにちは！Kotonoです。
今回はとても便利なincludesメソッドの使い方をご紹介したいと思います。
この記事では
- includesメソッドとは
- 配列や文字列のincludesメソッドについて
などといった基本的な内容から
- 配列や文字列のincludesメソッドの使い方
- indexOfメソッドとの使い分け
など、より応用的な内容に関してもわかりやすく解説していきたいと思います。
includesメソッドとは
皆さんはincludesメソッドを使用したことはありますか？
includesメソッドとは、特定の要素が配列や文字列に含まれているかどうか確認するためのメソッドです。主に、配列内や文字列内の要素の存在確認のために使用されます。
配列（Array）のincludesメソッドについて
配列（Array）オブジェクトの既存メソッドのひとつとして、includesメソッドが存在します。配列内にある特定の要素が存在するかどうかをチェックするために使われます。
基本的な構文は以下の通りです。
配列.includes(要素)
includesメソッドの戻り値はtrueかfalseのみです。引数に指定した要素が配列内に含まれていればtrueを返し、含まれていない場合はfalseを返します。
配列（Array）のincludesメソッドの使い方
では、実際にincludesメソッドを使用してみましょう。
以下のコードをご覧ください。
var myarray = [1,2,3,4,5]; var res1 = myarray.includes(3); var res2 = myarray.includes(7); console.log(res1) console.log(res2)
実行結果は以下の通りです。
true false
上のコードでは、まずは配列myarrayを作成しました。そして、includesメソッドを用いて「3」という要素がmyarray内に存在するかどうかをチェックしました。
「3」はmyarray内に含まれているので、変数res1にはtrueが保存されました。次に「7」という要素がmyarray内に存在するかどうかをチェックしました。
「7」はmyarray内には存在しないので、変数res2にはfalseが含まれています。また、指定した要素の検索を始める位置を指定することも出来ます。
以下のコードをご覧ください。
var myarray = [1,2,3,4,5]; var res1 = myarray.includes(3,1); var res2 = myarray.includes(1,2); console.log(res1) console.log(res2)
実行結果は以下の通りです。
true 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(検索したい文字列)
先ほどのincludesメソッドと同じように、戻り値はtrueかfalseのみです。
文字列（String）のincludesメソッドの使い方
では実際に、文字列のincludesメソッドを使ってみましょう。
以下のコードをご覧ください。
var mystr = "Hello, world!";
var res1 = mystr.includes("Hello");
var res2 = myarray.includes("Ohayo");
console.log(res1)
console.log(res2)
実行結果は以下の通りです。
true false
上のコードは、先ほどのセクションで説明したincludesメソッドと同じ働きをもっています。Helloという文字列はmystr文字列内に存在するので、trueが返ってきました。
しかし、Ohayoという文字列はmystr内には存在しないものなので、falseと表示されたのです。また、先ほどと同じように、指定した要素の検索を始める位置を指定することも出来ます。
以下のコードをご覧ください。
var mystr = "Hello, world!";
var res1 = mystr.includes("Hello", 1);
var res2 = mystr.includes("ello", 1);
console.log(res1)
console.log(res2)
実行結果は以下の通りです。
false true
上のコードでは、文字列Helloを2番目の要素から検索しています。
ここでいう「要素」とは、文字列を構成するひとつひとつの文字のことです。なので、1番目から検索を始めるということは、頭文字であるHを取った状態の文字列 ello, world! 内を検索するということです。
ello, world! 文字列内には、当然ながらHelloという文字列は存在しません。その為、変数res1にはfalseが保存されてしまいます。しかし、elloという文字列は存在するので、変数res2にはtrueが含まれています。
文字列のincludesメソッドを使用する際に注意したいポイントは、includesメソッドは大文字と小文字を区別するということです。
以下のコードをご覧ください。
var mystr = "Hello, world!";
var res1 = mystr.includes("hello");
console.log(res1)
実行結果は以下の通りです。
false
上のコードでは、mystr内にhelloという文字列があるかどうかを検索しました。includesメソッドはHelloとhelloを区別するので、falseと表示されました。
indexOfメソッドとの使い分け
includesメソッドとよく似た働きを持つメソッドとして、indexOfメソッドがあります。indexOfメソッドは、includesメソッドとは違い、検索した要素が配列や文字列内に出現する位置を返すメソッドです。
以下のコードをご覧ください。
var myarray = [1,2,3,4,5]; var res1 = myarray.indexOf(3); var res2 = myarray.indexOf(7); console.log(res1); console.log(res2);
実行結果は以下の通りです。
2 -1
上のコードでは、indexOfメソッドを使用して、検索した要素の位置を表示させました。myarray内の要素「3」は0から数えて2番目の要素なので、変数res1には2が含まれています。
反対に、myarray内に要素「7」は存在しないので、‐1が返ってきました。indexOfメソッドは検索要素の位置を知りたい時、includesメソッドは存在確認したい時と、使い分けるとより便利です。
まとめ
今回はincludesメソッドの使い方をご紹介しました。シンプルなメソッドですが、使い方を覚えておくと様々なシチュエーションにおいて活躍するので便利です。
みなさんもこの記事を通して、様々なメソッドの知識を深めていってくださいね！
