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

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

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

目次

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

 

 

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

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

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

※ES2015やES2017というのはJavaScriptの仕様のことで、2015年に策定されたからES2015、2017年に策定されたからES2017です。

これらのメソッドはどれも少しずつ異なる仕様を持ちます。

下にいくにつれ、少しずつ構造と仕様が複雑になっていくので、混乱しないよう上からひとつずつインプットしていきましょう！

indexOfメソッド

indexOfメソッドは今回紹介するメソッド達の中では長老のような存在で、古くから多く使われています。

indexOfメソッドを使うと、引数に指定した値が配列に存在していたら、何番目の要素かを表す番号を返します。

存在していなければ、-1を返します。

const array = [1, 2, 3];

array.indexOf(2) //=> 1
array.indexOf(4) //=> -1

2は配列の2番目の要素なのに、出力が1となっています。これは、配列の要素の番号が0から始まるためです。

includesメソッド

inicludesメソッドは、indexOfメソッドの新型版のような立ち位置です。

indexOfメソッドとよく似た仕様ですが、異なる点として、指定した要素が配列に存在すればtrue、しなければfalseを返します。

const array = [1, 2, 3];

array.includes(2) //=> true
array.includes(4) //=> false

findメソッド

findメソッドは、「配列内で、ある条件に一致する最初の要素」を返します。

条件に一致する要素がなければ、undefinedを返します。

const array = [1, 2, 3];

array.find((element) => {
  //3より小さい要素という条件
  return element < 3
}) // => 1

上記の例では、「3より小さい」という条件に当てはまる、「最初の要素」を検索しています。

3より小さい要素は1と2のふたつありますが、より先に出てくる 1 が出力されるという仕組みです。

ちなみに、findメソッドの中身は、アロー関数の特性を利用して以下の様に短くできます。

array.find(element => element < 3); // => 1

filterメソッド

だんだん難しくなってきましたね。あと２つです！

filterメソッドは、findメソッドの複数検索版です。

findメソッドが、条件に一致する最初の要素を返すのに対し、

filterメソッドは条件に一致する要素全てを配列にして返します。

const array = [1, 2, 3];

//findメソッドで紹介した短縮形と同じです
array.filter(element => element < 3)　// => [1, 2]

先ほどと同じく、3より小さい要素は1と2のふたつなので、この2つからなる配列が返ってきました。

someメソッド

いよいよ最後です。

someメソッドは、「ある条件に一致する値がひとつでもあればtrueを、なければfalseを」返します。

const array = [1, 2, 3];

//findメソッドで紹介した短縮形と同じです
array.some(element => element < 3)　// => true
array.some(element => element < 0)　// => false

 

今回は以上です。

最初からこの5つ全てをインプットするのは至難の技ですが、コードを書く時に「この場合はどんなメソッドを使うのが一番スマートかな？」ということを意識することで、自然と使いこなせるようになるものです。

時には使ったことのないメソッドにも挑戦して、JavaScriptマスターを目指しましょう！

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

執筆してくれたメンター

高田悠（たかだゆう） JavaScriptを用いた実装など、フロントエンド領域の開発が得意。 なかでもWeb上での3D表現に興味があり、これまでにWebAR（AR=拡張現実）の実装案件を複数経験。 ワークライフバランスを重視し、趣味の音楽活動や釣りを楽しみつつフリーランス生活を送っている。

 

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！