JavaScriptの配列から特定の要素を検索・取得する方法（indexOf, includesなど）

1. indexOfメソッドとは？ 配列の中で特定の要素の場所を調べる

1. indexOfメソッドとは？ 配列の中で特定の要素の場所を調べる

indexOfメソッドは、配列の中から探したい値が最初に現れる場所（インデックス）を返します。もし配列にその値がなければ、-1を返します。

ここで「インデックス」とは配列の番号のようなもので、0から始まります。例えば、1番目の要素はインデックス0、2番目はインデックス1です。

let fruits = ["りんご", "バナナ", "みかん", "バナナ"];

console.log(fruits.indexOf("バナナ"));  // 1
console.log(fruits.indexOf("みかん"));  // 2
console.log(fruits.indexOf("メロン"));  // -1

1
2
-1

このように、見つかったら場所の番号を教えてくれて、なければ-1を教えてくれます。

2. includesメソッドとは？ 配列にあるかどうかを「はい・いいえ」で答える

2. includesメソッドとは？ 配列にあるかどうかを「はい・いいえ」で答える

includesメソッドは、配列の中に特定の値があるかどうかを調べて、true（ある）かfalse（ない）で答えてくれます。

let fruits = ["りんご", "バナナ", "みかん"];

console.log(fruits.includes("バナナ"));  // true
console.log(fruits.includes("メロン"));  // false

true
false

要素があるかないかだけを知りたいときに、とても便利です。

3. indexOfとincludesの使い分け

3. indexOfとincludesの使い分け

indexOfは場所（位置）を知りたいときに使い、includesは「ある・ない」の答えだけ欲しいときに使います。

例えば、ある商品が配列の何番目にあるか知りたいときはindexOf、単にその商品が売っているかどうかだけを知りたいならincludesが向いています。

4. 注意点：文字列や数字の扱い

4. 注意点：文字列や数字の扱い

indexOfやincludesは、文字列や数字をそのまま比較します。同じ文字でも全角と半角、英語の大文字小文字が違うと別のものとして扱われます。

例えば、「りんご」と「リンゴ」は違うものですし、「apple」と「Apple」も違います。気をつけましょう。

let fruits = ["apple", "Banana", "Orange"];

console.log(fruits.includes("Apple"));   // false
console.log(fruits.indexOf("Banana"));   // 1

false
1

5. 実践例：配列から条件に合う要素を探す

5. 実践例：配列から条件に合う要素を探す

例えば、「バナナ」が配列にあるか調べて、あったらメッセージを出したいとき、includesを使うと便利です。

let fruits = ["りんご", "バナナ", "みかん"];

if (fruits.includes("バナナ")) {
  console.log("バナナはあります！");
} else {
  console.log("バナナはありません。");
}

バナナはあります！

6. indexOfやincludesのポイント

6. indexOfやincludesのポイント

indexOfやincludesは配列の中から特定の要素を見つけるのにとても役立つメソッドです。

・indexOfは見つけた場所（インデックス）を返し、見つからなければ-1を返します。
・includesは見つけたらtrue、見つからなければfalseを返します。

この違いを理解して、用途に合わせて使い分けましょう。

まとめ

まとめ

配列検索の理解を深めるための振り返り

JavaScriptでは配列の中から特定の要素を探したい場面がとても多くあります。日常的なコードの中でも、配列の中に同じ値が存在するかどうか、どの位置にあるか、そもそも配列の中で扱うべきデータが正しく整っているかを調べる必要が生じます。そうした場面で役に立つのがindexOfとincludesという二つの検索メソッドです。これらは見た目こそ簡単ですが、配列処理をしっかり理解するうえでとても重要な働きを持っています。特に初心者は単純に使うだけでなく、どういう性質を持っているのか、どんな状況で使い分けるべきなのかを知ることで、より確実で読みやすいコードが書けるようになります。配列検索の基礎は、実際の処理の流れを頭の中でしっかり思い描きながら練習することで理解が深まります。特定の値が見つからないときに返される数字、真偽値の扱い、文字列比較の細かな違いなど、ほんの少しの知識の差が挙動を大きく左右します。配列の操作は日々のプログラミングで欠かせないものなので、この理解の積み重ねは確実に実務でも役に立つ選択になります。

とくにindexOfは位置情報を得るためのメソッドであり、配列の中で特定の要素が何番目にあるのかを調べる際に欠かせません。検索した結果が見つからないときには-1という値が返ってきますが、これは条件分岐で利用する機会も多い特徴です。一方のincludesは配列にその値が存在するかどうかだけを知りたいときに使いやすく、扱いが直感的です。特定の値があるかどうかをすぐに判定したいときにとても便利な手段です。この二つのメソッドを適材適所で使い分けることで、処理の流れがとても滑らかになり、無駄な処理を書かずに済むという利点があります。

また、文字列の扱いにおいては大文字と小文字、さらには全角と半角の違いも正確に理解しておく必要があります。配列検索では同じように見える文字でも違う文字と判断されることがあるため、意図した検索が行われないケースを防ぐためには、文字の比較がどのように行われているかをよく理解しておくことが重要です。初心者がつまずきやすい部分でもあるので、このあたりをしっかり押さえておくと後の学習がよりスムーズになります。

サンプルコードでもう一度確認しよう

ここでは配列の検索処理をもう一度振り返りながら確認できるように、実践的なサンプルコードを載せています。実際に動かして結果を見ていくことで、配列に値が存在するかどうかを確かめる処理の流れを自然と理解できるようになります。

let items = ["りんご", "バナナ", "みかん", "ぶどう"];

console.log(items.indexOf("みかん")); // 2
console.log(items.includes("ぶどう")); // true

if (items.includes("バナナ")) {
  console.log("バナナがあります");
} else {
  console.log("バナナはありません");
}

// 小文字と大文字の違いに注意
let samples = ["Apple", "Banana", "Orange"];

console.log(samples.includes("apple")); // false
console.log(samples.indexOf("Banana")); // 1

このように、コードで実際の挙動を見ることで、配列検索における細かな特徴や注意点をより深く理解できるようになります。配列の中から値を探すという処理は、データを扱う場面では必ず出てくる基本的な操作なので、コツをつかんで慣れていくことが大切です。特に複雑なアプリケーションでは、配列の中身を調べる処理は頻繁に出てくるため、しっかり身につけておくと幅広い場面で役に立ちます。

検索処理の応用と使いどころ

配列検索の知識は基本的なスクリプトから大規模なアプリケーションまで多くの場面に応用できます。特定のデータが含まれているかどうかを調べる処理はユーザー入力の検証、商品一覧の検索処理、設定データの確認など、数えきれないほどの用途に利用されています。日々のプログラミングの中で自然と利用頻度が高くなる操作のため、今回の内容を理解しておくことはとても大きな意義があります。

さらに、配列の扱いに慣れてくると自分で条件を決めて検索する処理を作ったり、必要に応じて配列の中身を加工したりと、より柔軟な操作ができるようになってきます。検索処理の基本を知っていると、そこから応用的な操作にも広がっていくため、配列の扱いをしっかり身につけることはプログラミング全体の理解にも良い影響を与えてくれます。毎日の練習を重ねることで自然と身につくので、ぜひ地道に繰り返しながら理解を深めていきましょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

JavaScriptで配列の中に特定の値があるか確認するにはどうすればいいですか？

JavaScriptでは、配列の中に特定の要素が存在するかどうかを確認するにはincludesメソッドを使います。結果はtrueまたはfalseで返されるので、簡単に存在チェックができます。