状況別で見る！ jQuery.inArray() とその他の方法を使い分けるポイント

2024-04-02

jQuery.inArray()の使い方

使い方

// 配列
const array = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

// 検索したい要素
const value = 'イチゴ';

// 検索
const index = $.inArray(value, array);

// 結果を出力
console.log(index); // 2

上記のように、$.inArray()メソッドは3つの引数を受け取ります。

検索したい要素
検索対象の配列
(オプション) 検索開始位置

3つ目の引数は省略可能で、デフォルトは0（配列の先頭）です。

例

例1：要素の存在確認

const array = ['a', 'b', 'c'];

// 要素 "b" が存在するかどうかを確認
const exists = $.inArray('b', array) !== -1;

// 結果を出力
console.log(exists); // true

例2：要素のインデックスを取得

const array = ['a', 'b', 'c'];

// 要素 "b" のインデックスを取得
const index = $.inArray('b', array);

// 結果を出力
console.log(index); // 1

例3：検索開始位置を指定

const array = ['a', 'b', 'c', 'b', 'a'];

// 2番目以降から "b" を検索
const index = $.inArray('b', array, 2);

// 結果を出力
console.log(index); // 3

注意点

要素は厳密に一致する必要があります。
NaNはNaNと一致しません。
nullはundefinedと一致しません。

jQuery.inArray()は、配列内に特定の要素が存在するかどうかを簡単に検索できる便利なメソッドです。ぜひ覚えて活用しましょう。

例1：要素の存在確認

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery.inArray() サンプル</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <script>
  // 配列
  const array = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

  // 検索したい要素
  const value = 'イチゴ';

  // 検索
  const exists = $.inArray(value, array) !== -1;

  // 結果を出力
  console.log(exists); // true
  </script>
</body>
</html>

例2：要素のインデックスを取得

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery.inArray() サンプル</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <script>
  // 配列
  const array = ['a', 'b', 'c'];

  // 要素 "b" のインデックスを取得
  const index = $.inArray('b', array);

  // 結果を出力
  console.log(index); // 1
  </script>
</body>
</html>

例3：検索開始位置を指定

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery.inArray() サンプル</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <script>
  // 配列
  const array = ['a', 'b', 'c', 'b', 'a'];

  // 2番目以降から "b" を検索
  const index = $.inArray('b', array, 2);

  // 結果を出力
  console.log(index); // 3
  </script>
</body>
</html>

jQuery.inArray()は、jQueryのユーティリティ関数の一つです。
詳細については、jQueryの公式ドキュメントを参照してください。

jQuery.inArray() 以外の方法

JavaScript の indexOf() メソッドは、配列内で特定の要素の最初の出現位置を返します。要素が見つからない場合は -1 を返します。

const array = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

const value = 'イチゴ';

const index = array.indexOf(value);

console.log(index); // 2

some() メソッドは、配列内のすべての要素をテストし、少なくとも 1 つの要素が条件を満たすかどうかを判断します。

const array = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

const value = 'イチゴ';

const exists = array.some(element => element === value);

console.log(exists); // true

find() メソッドは、条件を満たす最初の要素を返します。要素が見つからない場合は undefined を返します。

const array = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

const value = 'イチゴ';

const element = array.find(element => element === value);

console.log(element); // イチゴ

ループ処理

forループなどのループ処理を使用して、配列内のすべての要素を順番に確認することもできます。

const array = ['リンゴ', 'メロン', 'イチゴ', 'スイカ'];

const value = 'イチゴ';

let exists = false;

for (const element of array) {
  if (element === value) {
    exists = true;
    break;
  }
}

console.log(exists); // true