JavaScriptで指定した要素が配列に存在するかチェックする方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで指定した要素が配列に存在するかチェックする方法について現役エンジニアが解説しています。配列にある要素が存在するかをチェックする場合には、indexOf、some、includesメソッドなどを使用する方法があります。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
JavaScriptで指定した要素が配列に存在するかチェックする方法について解説します。
実際のコードをもとに解説していきますので、理解を深めていきましょう。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ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で挫折しない学習方法を動画で公開中
筆者プロフィール
この記事を監修してくれた方
メンター金成さん。 未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。 |

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

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

分かりました。ありがとうございます!
TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。