JavaScriptで指定した要素が配列に存在するかチェックする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで指定した要素が配列に存在するかチェックする方法について現役エンジニアが解説しています。配列にある要素が存在するかをチェックする場合には、indexOf、some、includesメソッドなどを使用する方法があります。

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

JavaScriptで指定した要素が配列に存在するかチェックする方法について解説します。

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

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

 

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

 

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptで指定した要素が配列に存在するかチェックする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

指定した要素が配列に存在するかチェックする方法

JavaScriptで配列で、ある要素が存在するかをチェックする場合、以下の方法が使えます。

  • indexOfメソッドを使う
  • someメソッドを使う(ES 2015以降)
  • includesメソッドを使う(ES 2017以降)

ES2015やES2017というのはJavaScriptの仕様のことです。
お使いの環境によって下の2つのメソッドは、使えない場合もあります。

indexOfメソッドは、引数に渡した値が含まれる場合はインデックス番号を、含まれない場合は-1を返すメソッドです。
 

array = [1,2,3]
array.indexOf(2) // => 1

 
someメソッドは、引数に関数を渡しその関数の処理に引っかかる値があればtrueを、なければfalseを返します。
 

array = [1,2,3]
array.some( num => num === 2) // => true

 
ちなみにnum => num === 2というのはアロー関数というもので、functionで書いていた関数を短くしたものです。
 

function(num){
 return num === 2
}

 
と意味は一緒です。

includesメソッドは、引数の要素が含まれていればtrue、含まれていなければfalseを返します。
 

array = [1,2,3]
array.includes(2) // => true

 

実際に書いてみよう

それでは実際に書いてみましょう。
 

alphabet = ['a','b','c','d','e']

// indexOfメソッドを使う場合
alphabet.indexOf('c') // => 2
alphabet.indexOf('z') // => -1

// someメソッドを使う場合
alphabet.some( target => target === 'c') // => true
alphabet.some( target => target === 'z') // => false

// includesメソッドを使う場合
alphabet.includes('c') // => true
alphabet.includes('z') // => false

 

以上で解説を終わります。

 

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

筆者プロフィール

この記事を監修してくれた方

メンター金成さん。
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

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