【JavaScript入門】特定の要素を判定する

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

特定の要素を判定する

　JavaScript で配列を扱う際、配列の中に特定の要素が含まれているかどうかを確認したり、条件に合致する要素を検索したい場合がしばしばあります。そのために用意されているメソッドが .includes(), .indexOf(), .lastIndexOf(), .find(), .findIndex(), .every(), .some() です。これらを使用することで、配列内の要素を簡単に検索・評価できます。ここでは、それぞれのメソッドの使い方と、返り値の意味を紹介します。

１．特定の要素を判定できるメソッド

メソッド	説明
.includes(v[, s])	配列に値 `v` が含まれていれば `true`、そうでなければ `false` を返す。オプションの引数 `s` を指定すると、その位置以降を検索する。負の数の場合は末尾から数える。
.indexOf(v[, s])	配列の先頭から探し、値 `v` と一致する最初の位置を返す。見つからない場合は `-1`。オプションの引数 `s` を指定すると、その位置以降を検索。負の数の場合は末尾から数える。
.lastIndexOf(v[, s])	配列の末尾から探し、値 `v` と一致する最初の位置を返す。見つからない場合は `-1`。オプションの引数 `s` を指定すると、その位置を始点にして逆方向に検索。負の数の場合は末尾から数える。
.find(f)	コールバック関数 `f` を満たす最初の要素を返す。見つからない場合は `undefined`。コールバック関数 `f` は `(要素, インデックス, 配列)` の引数を取り、真偽値を返すアロー関数などを指定する。
.findIndex(f)	コールバック関数 `f` を満たす最初の要素の位置(インデックス)を返す。見つからない場合は `-1`。
.every(f)	コールバック関数 `f` を配列の全ての要素で満たした場合のみ `true`、そうでなければ `false`。
.some(f)	コールバック関数 `f` を配列の1つでも満たせば `true`、全て満たさないなら `false`。

２．サンプルコード（HTML + JavaScript）

　以下の例を「myArrayElementCheck.html」というファイル名で保存し、ブラウザで開き、開発者ツールのコンソールを確認してください。

【myArrayElementCheck.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myArrayElementCheck.html</title>
</head>
<body>
  <h1>特定の要素を判定する配列メソッドの例</h1>
  <p>ブラウザの開発者ツールを開いて、コンソール出力を観察してください。</p>

  <script>
    // 1) .includes() の例
    console.log('=== .includes() の例 ===');
    const arrA = [1, 2, 3, 4, 5];
    console.log(arrA.includes(3));         // => true
    console.log(arrA.includes('3'));       // => false (厳密な一致)
    console.log(arrA.includes(3, 3));      // => false (index 3 以降に 3 はない)
    console.log(arrA.includes(3, -3));     // => true  (末尾から数えて検索)

    // 2) .indexOf() / .lastIndexOf() の例
    console.log('=== .indexOf() と .lastIndexOf() の例 ===');
    const arrB = [1, 2, 3, 1];
    console.log('arrB.indexOf(1):', arrB.indexOf(1));         // => 0
    console.log('arrB.indexOf("1"):', arrB.indexOf('1'));     // => -1
    console.log('arrB.indexOf(4):', arrB.indexOf(4));         // => -1
    console.log('arrB.indexOf(1, 2):', arrB.indexOf(1, 2));   // => 3
    console.log('arrB.indexOf(1, -2):', arrB.indexOf(1, -2)); // => 3

    console.log('arrB.lastIndexOf(1):', arrB.lastIndexOf(1));         // => 3
    console.log('arrB.lastIndexOf("1"):', arrB.lastIndexOf('1'));     // => -1
    console.log('arrB.lastIndexOf(4):', arrB.lastIndexOf(4));         // => -1
    console.log('arrB.lastIndexOf(1, 2):', arrB.lastIndexOf(1, 2));   // => 0
    console.log('arrB.lastIndexOf(1, -2):', arrB.lastIndexOf(1, -2)); // => 0

    // 3) .find() / .findIndex() の例
    console.log('=== .find() と .findIndex() の例 ===');
    const arrC = [
      { name: 'カフェラテ', price: 380 },
      { name: 'ミルクティー', price: 420 },
      { name: '抹茶ラテ', price: 450 }
    ];
    console.log('.find() price >= 400 =>', arrC.find(x => x.price >= 400));
    console.log('.find() price >= 500 =>', arrC.find(x => x.price >= 500)); // => undefined

    console.log('.findIndex() price >= 400 =>', arrC.findIndex(x => x.price >= 400)); 
    console.log('.findIndex() price >= 500 =>', arrC.findIndex(x => x.price >= 500)); // => -1

    // 4) .every() / .some() の例
    console.log('=== .every() と .some() の例 ===');
    const arrD = [
      { name: 'リンゴ', price: 120 },
      { name: 'バナナ', price: 80 },
      { name: 'マンゴー', price: 150 }
    ];
    console.log('.every() price > 70 =>', arrD.every(x => x.price > 70));   // => true
    console.log('.every() price > 100 =>', arrD.every(x => x.price > 100)); // => false
    console.log('.some() price > 100 =>', arrD.some(x => x.price > 100));   // => true
    console.log('.some() price > 200 =>', arrD.some(x => x.price > 200));   // => false
  </script>
</body>
</html>

デバックコンソールの出力

=== .includes() の例 ===
true
false
false
true
=== .indexOf() と .lastIndexOf() の例 ===
arrB.indexOf(1): 0
arrB.indexOf("1"): -1
arrB.indexOf(4): -1
arrB.indexOf(1, 2): 3
arrB.indexOf(1, -2): 3
arrB.lastIndexOf(1): 3
arrB.lastIndexOf("1"): -1
arrB.lastIndexOf(4): -1
arrB.lastIndexOf(1, 2): 0
arrB.lastIndexOf(1, -2): 0
=== .find() と .findIndex() の例 ===
.find() price >= 400 => {name: 'ミルクティー', price: 420}
.find() price >= 500 => undefined
.findIndex() price >= 400 => 1
.findIndex() price >= 500 => -1
=== .every() と .some() の例 ===
.every() price > 70 => true
.every() price > 100 => false
.some() price > 100 => true
.some() price > 200 => false

まとめ

.includes(v[, s])：値 v が含まれているかを真偽値で返す。部分検索には不向きだが、厳密な一致判定に便利。
.indexOf(v[, s]) / .lastIndexOf(v[, s])：値を探し出し最初または最後に出現した位置を返す。見つからなければ -1。
.find(f) / .findIndex(f)：テスト関数 f で条件を満たす要素・位置を探す。満たさなければ undefined や -1。
.every(f) / .some(f)：テスト関数 f によって、すべての要素が条件を満たすか、一部の要素が条件を満たすかを判定。

　これらのメソッドを使いこなすと、配列内のデータを素早く検索・検証できるようになり、より効率的なコードを書けるようになります。