【jQuery入門】inArray()で配列要素を検索する方法まとめ！

2024年5月6日

侍テック編集部

こんにちは！フリーランスの桃太郎です。

jQueryにて配列に含まれている要素に対して、指定の要素が存在するかを確認するためのメソッドとして、inArrayメソッドがあります。

この記事では

・inArrayメソッドとは？

・inArrayメソッドの使い方

という基礎的な内容から、

・inArrayメソッドの注意点

・配列要素の部分一致検索の方法

など実践的な内容についても解説していきます。

jQueryのinArrayメソッドについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！

inArrayメソッドとは？

それでは、まず最初に「inArrayメソッド」について基本的な知識から学んでいきましょう！

「inArrayメソッド」は、配列要素の中身を検索して特定の値と一致するかどうかをチェックすることができます。

例えば、次のような配列があるとします。

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

この配列の中で、例えば「イチゴ」に該当する値が格納されているかをチェックしたい時に役立つわけです。

また、IF文などの条件式としても利用することが可能でコードの効率化にも繋がります。

本記事では、inArrayメソッドについて基本から応用まで学べるように構成しているのでぜひ参考にしてみてください！

inArrayメソッドの使い方

この章では、inArrayメソッドの基本的な使い方について学習していきましょう。

一般的な構文や書き方、実際のプログラミング手法について学んでいきます。

基本的な構文と使い方について

まずはinArrayメソッドの基本構文を確認しましょう！

$.inArray( 検索したい値, 検索する配列, インデックス番号(省略可) )

第一引数に「検索したい値」を指定して第二引数に「検索する配列」を設定するのが基本です。

これにより、検索したい値が配列要素の中に格納されているかどうかをチェックすることができます。

また、第三引数の「インデックス番号」を指定すると、配列要素の何番目から検索を開始するかを指定することができます。

配列要素を検索する方法

それでは、実際にinArrayメソッドを使ったプログラミングを行ってみましょう！

文字列が格納された配列要素の中から、任意の値が該当するかをチェックするには次のように記述します。

const array = ['メロン', 'リンゴ', 'イチゴ', 'スイカ'];
const result = $.inArray('イチゴ', array);

console.log(result);

実行結果

この例では、配列要素の中に「イチゴ」という文字列が格納されているかどうかをチェックしています。

実行結果を見ると「2」という数値が出力されていますよね？

これは、該当した配列要素のインデックス番号を意味しており、0から数えて2番目の配列要素にあるというわけです。

inArrayメソッドの注意点

この章では、inArrayメソッドを活用する上で注意するべき点についてご紹介します。

主に「型チェック」「戻り値」「複数要素」に関して学んでいきます。

「型」もチェックされる点を意識する

まずは、「型」について見ていきましょう！

JavaScriptには「数値」「文字列」「配列」「オブジェクト」…など、さまざまな型が存在しています。

inArrayメソッドは、配列を検索する時に「型」も同時にチェックしているという点に注意が必要なわけです。

次のサンプル例を見て下さい！

const array = [5,3,7,9,4];

const result = $.inArray('7', array);

console.log(result);

この例では、数値型のデータが配列に格納されています。

そこで、inArrayメソッドを使って「7」が格納されているかを検索しているのですが結果は該当なしを表す「-1」になります。

理由は簡単で、文字列型の「7」をinArrayメソッドに指定しているからです！

「文字列」と「数値」の値が同じでも型が違うので該当しないわけです。

このような型の違いで想定した結果にならないというケースは少なくないので十分に注意しましょう。

該当しない場合の戻り値は真偽値ではない

次に、戻り値について見ていきましょう！

inArrayメソッドで配列を検索する時に、特定の値が該当した場合はインデックス番号を返してくれます。

しかし、該当しなかった場合は「false」などの真偽値ではなく「-1」になります。

次のサンプル例を見て下さい！

const array = [4,7,9,2,4];

const result = $.inArray(3, array);

console.log(result);

実行結果

-1

この例では、配列要素の中に存在しない「3」を検索対象にしているので該当する値はありません。

実行結果を見ると「-1」が出力されていますね。

この仕組は、IF文などを使った条件分岐を行う時に重要になります。

つまり、inArrayメソッドを使って該当しなかった場合の条件式に指定する場合に次のような記述はできません。

if($.inArray(3, array)) {}

正しくは、次のような記述になります。

if($.inArray(3, array) === -1) {}

このように「-1」と比較することで、該当しなかったのかどうかを分岐させることができるわけです。

対象が複数ある場合は最初の1つだけしか取得されない

inArrayメソッドでは検索対象の配列に複数該当する値が存在する場合は、最初に合致した値のインデックス番号のみを取得します。

この仕様は、配列の中に対象要素が１つだけ存在するかを知りたい場合は問題ありません。

しかし、複数の要素が含まれているかを知りたい場合は想定した結果にはならないことを意味しています。

次のサンプル例を見て下さい！

const array = [4,7,9,7,5];

const result = $.inArray(7, array);

console.log(result);

実行結果

この例では、「7」という数値が配列の中に該当するかをチェックしています。

配列「array」の中には2つの「7」が存在しますが、実行結果を見ると1つ目しか検出していませんよね？

このように、最初に合致した値を検出するとそこで検索を終了してしまうという点を忘れないようにしましょう！

配列要素の部分一致検索の方法

inArrayメソッドでは部分一致しているかどうかを調べることができません。

つまり、完全一致するかどうかを判定するためにinArrayメソッドは使用されます。

これはどういうことかというと、例えば配列の要素が[“東京都渋谷区”,”東京都新宿区”,”東京都江戸川区”…]のような値だとします。

inArrayメソッドの第一引数の検索値に「渋谷区」とセットしても、「東京都渋谷区」と部分一致しているのでそのインデックス値を返すということはできません。

そのため、配列の要素に対して部分一致させたい場合は、inArrayメソッドではなく、eachメソッドとindexOfメソッドなどを併用した別手段を検討する必要があります。

その別手段の一例を以下の通り載せておきますので、必要な方は参考にしてみて下さい。

[サンプルコード]
[HTML]

<p id="result"></p>

[jQuery]

const placelist = ["東京都渋谷区","東京都新宿区","東京都江戸川区"]

$.each(placelist, function(index, val) {
  let result;

  if(val.indexOf("渋谷区") != -1){
      result = "含む"
    $('p#result').text(result);
    return false;
  }
});

実行結果