Update!!ここ最近ブログ記事のテーマにしているJavaScriptでの配列操作ですが、第3回目の今回もフロントエンド開発でよく使うメソッドについてまとめていきたいと思います。前回は「JavaScriptで配列を扱う時によく使うメソッド#2【配列の値に対して繰り返し処理を行う】」ということで、配列の値をHTML上に展開していくのを例にしていました。今回は配列データに値が含まれるかどうか?そして、何番目に値が入っているのかを見ていくメソッドになります。Array.includes()配列データに特定の値が一致したものが含まれているかどうかを調べるときに使えるのが「Array.includes()」です。対象となる配列に対して実行し、検索したい値を引数に入れると、その値が配列に含まれている場合はtrueを、含まれていない場合はfalseを返します。条件分岐などで処理の結果を見せることができます。console.log(`${search}さんはメンバーではありません`);}【console】"中村さんはメンバーに含まれています"Array.includes()では、オブジェクト型の配列の場合には正しい結果を得ることができず、値型の配列しか使うことができませんので注意が必要です。Array.some()先ほどの、Array.includes()と同じく、配列データに対して、特定の値が一致したものが含まれているかどうかを調べることができますが、オブジェクト型の配列にも使えるのが「Array.some()」です。対象となる配列に対して実行しますが、引数にはコールバック関数を指定できるので、そこで検索の条件などを指定できます。console.log(`${search}さんはメンバーではありません`);}【console】"中村さんはメンバーに含まれています"コールバック関数を使うことで、オブジェクト内のプロパティも参照できるようになります。APIなどでバックエンドから取得した複雑なデータの処理にも対応できます。Array.indexOf()配列データに特定の値が一致したものが含まれている場合に、その値のインデックス番号を取得できます。対象の値が何番目にあるのかを調べることができるのが「Array.indexOf()」です。対象となる配列に対して実行し、先ほどと同じく検索したい値を引数に指定すると、値が含まれている場合には、0から始まるその値のインデックス番号が返ってきます。console.log(`${search}さんはメンバーではありません`);}【console】"村山さんは3番目のメンバーです"インデックス番号は0から始まりますので、何番目かという使い方をする場合には1を足しておくことに注意します。ちなみに、値が含まれていない場合には-1が返ってくるので、それを利用することで、Array.includes()と同じ結果を得ることができます。console.log(`${search}さんはメンバーではありません`);}この方法は、Array.includes()が登場する前にはよく使われていましたが、トランスパイルなどのツールが揃っている今ではあえて使う理由はあまりないかもしれませんね。この、Array.indexOf()では対象のなる配列は値型のものになります。オブジェクト型の配列の場合には正しい結果が返ってこないので注意が必要です。Array.findIndex()Array.indexOf()と同じく、配列の中に含まれている値のインデックス番号を返すのですが、「Array.findIndex()」だとオブジェクト型の配列にも使うことができます。引数にはコールバック関数が入るので、その中でオブジェクト内のプロパティを参照することができます。console.log(`${search}さんはメンバーではありません`);}【console】"村山さんは3番目のメンバーです"Array.indexOf()同様にインデックス番号を取得することができます。オブジェクトを扱うという点では、Array.some()と使い方も似ていますね。);主に今回のメソッドは、取得したデータに対して検索をかけるときや、配列を加工する際の条件判定などに使えるかと思います。単体ではあまり使われないかもしれませんが、今後別記事でまとめていく予定の配列操作のメソッドと組み合わせることで、より幅広い処理ができるようになるのではないでしょうか。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。