【JavaScript】includesを使って配列に値があるか調べる方法

JavaScriptで配列に特定の値が含まれているかどうかを調べたいとき、includesメソッドがとても便利です。

この記事では、初心者の方にもわかりやすいように、includesの使い方と処理の流れをシンプルなコード例で解説します。実際にコードを動かしながら理解を深めましょう。

コード

const members = ['佐藤', '田中', '鈴木', '木村', '小林'];
const member = '佐藤';

if (members.includes(member)) {
  console.log(`${member}さんはいます`);
} else {
  console.log(`${member}さんはいません`);
}

簡単な解説

このコードは、members という名前のリスト（配列）の中に、指定した名前があるかどうかを調べています。

具体的には、

if (members.includes(member))

という部分で、members の中に member の値があるかどうかをチェックしています。

includes は名前がある場合に true を返します。
今回は member に '佐藤' が入っているので、members.includes(member) は true となり、コンソールに「佐藤さんはいます」と表示されます。

もし member を '山田' に変えると、リストの中に '山田' はないので、includes は false を返します。

そのため、「山田さんはいません」と表示されます。

indexOfを使った書き方

indexOfメソッドを使っても、配列に特定の値が含まれているかを調べることができます。

const list = ['牛乳', 'パン', '卵'];

if (list.indexOf('牛乳') === -1) {
  console.log('牛乳を買いましょう');
} else {
  console.log('牛乳を買う必要はありません');
}

このコードは、買い物リスト list の中に '牛乳' があるかどうかを調べています。

• list.indexOf('牛乳') は '牛乳' がリストの何番目にあるかを返します。
• もし '牛乳' がリストにない場合、indexOf は -1 を返します。

コードでは、indexOf('牛乳') === -1 という条件で「牛乳がリストにないかどうか」をチェックしています。

• もし牛乳がリストに無ければ true になり、console.log('牛乳を買いましょう'); と表示されます。
• 逆に牛乳がリストにあれば false になり、console.log('牛乳を買う必要はありません'); と表示されます。

つまり、「牛乳がリストにあれば買わなくていいし、なければ買いましょう」と判断するコードです。

現在、配列に特定の値が含まれているかどうかを調べる際には、includes メソッドを使うのが一般的で簡単です。
しかし、indexOf を使う場合もあります。それは、「値が配列の何番目にあるかを知りたい時」や「特定の位置を使って削除や置換などの処理を行いたい時」です。

つまり、単に存在チェックだけでなく、要素の位置を取得して何か操作をしたい場合に indexOf が役立ちます。

Web制作を学ぶならUdemy

HTML・CSS・JavaScriptの基本から本格的なWebアプリ制作まで学べます。

【世界で90万人が受講】Web Developer Bootcamp（日本語版）

※このリンクは広告です（アフィリエイトリンク）

📚 おすすめのUdemy講座について詳しく
👉 独学でWebアプリが作れる！初心者におすすめのUdemy講座【体験レビューあり】