【2026年9月最新】jQuery $.inArray()で配列要素を検索する方法を完全解説｜使い方・注意点・モダンJS代替まで

jQueryで配列の中に特定の値が含まれているかを調べたいとき、多くの人が最初にたどり着くのが$.inArray()です。しかし、いざ使ってみると「見つかったはずなのにif文がfalseと判定される」「文字列の'1'を探しても見つからない」といった、名前からは想像しにくいクセに戸惑うことがあります。

この記事では、$.inArray()の基本構文と正しい使い方から、初心者がつまずきやすい「戻り値0のtruthy罠」、型の厳密な比較仕様、部分一致検索の実装方法まで丁寧に解説します。さらに、ネイティブJavaScriptのindexOf・includes・findIndexとの比較や、2026年現在の実務における「jQueryに頼らない書き方」への移行判断、そしてClaude Codeを使ったレガシーコードの改修効率化まで踏み込んで紹介します。

01 OVERVIEW $.inArray()とは何か 配列の中から値の位置（インデックス）を探すメソッド

$.inArray()は、jQueryが提供するユーティリティメソッドの1つで、指定した値が配列の中に存在するかどうかを調べ、見つかった場合はそのインデックス番号（0から始まる位置）、見つからなかった場合は-1を返します。

// 基本構文
$.inArray(検索したい値, 対象の配列, [検索を開始するインデックス])

// 例
var fruits = ['apple', 'banana', 'orange'];
var index = $.inArray('banana', fruits);
console.log(index); // 1（'banana'は0番目から数えて1番目にある）

注目してほしいのは、戻り値が「見つかった/見つからない」を表す真偽値（true/false）ではなく、インデックス番号（数値）であるという点です。この設計が、次の章で説明する典型的なバグの原因になります。

1-1. なぜjQueryにこのメソッドが用意されたのか

$.inArray()は、jQueryの登場当時（2000年代後半）、多くのブラウザでネイティブJavaScriptのArray.prototype.indexOf()がまだサポートされていなかったという歴史的経緯から用意されたメソッドです。当時主流だった古いInternet ExplorerなどでindexOf()が使えなかったため、jQueryが差分を吸収する形で提供していました。

02 BASIC USAGE $.inArray()の基本的な使い方 3つの引数と戻り値のパターンを押さえる

2-1. 引数の詳細

引数	必須/任意	説明
value	必須	検索したい値
array	必須	検索対象の配列
fromIndex	任意	検索を開始する位置（省略時は0番目から）

var numbers = [10, 20, 30, 20, 40];

// 通常の検索（最初に見つかったインデックスを返す）
console.log($.inArray(20, numbers)); // 1

// fromIndexを指定して、2番目以降から検索
console.log($.inArray(20, numbers, 2)); // 3

// 見つからない場合
console.log($.inArray(99, numbers)); // -1

fromIndexを指定すると、配列の途中から検索を開始できます。上記の例のように同じ値が複数含まれる配列で、「最初の1つ以外の出現位置も知りたい」ときに活用できます。

2-2. 戻り値のパターンを整理する

状況	戻り値	意味
配列の先頭（0番目）で見つかった	0	見つかった（インデックス0）
配列の途中で見つかった	1以上の整数	見つかった（そのインデックス番号）
見つからなかった	-1	見つからなかった

03 THE TRUTHY TRAP 【最重要】戻り値0のtruthy罠 初心者もベテランも一度は踏む定番のバグ

$.inArray()に関する最も有名で、実務でも頻繁に発生するバグが「戻り値が0のときの条件分岐の誤り」です。以下のコードを見てください。

var fruits = ['apple', 'banana', 'orange'];

// 一見正しそうに見えるが、実はバグがある書き方
if ($.inArray('apple', fruits)) {
    console.log('appleが見つかりました');
} else {
    console.log('appleは見つかりませんでした'); // ← こちらが実行されてしまう！
}

'apple'は配列の先頭（インデックス0）にあるため、$.inArray()は0を返します。しかしJavaScriptにおいて0は偽（falsy）として扱われるため、if (0)はfalseと判定され、意図に反して「見つかりませんでした」の分岐が実行されてしまいます。

3-1. 正しい判定方法

この罠を回避するには、戻り値を直接if文の条件にせず、必ず-1と比較するようにします。

var fruits = ['apple', 'banana', 'orange'];

// 正しい書き方：-1と明示的に比較する
if ($.inArray('apple', fruits) !== -1) {
    console.log('appleが見つかりました'); // ← 正しくこちらが実行される
} else {
    console.log('appleは見つかりませんでした');
}

04 TYPE STRICTNESS 型（データ型）まで厳密に比較される仕様 数値の1と文字列の'1'は別物として扱われる

$.inArray()は内部的にネイティブのindexOf()に準じた比較を行っており、値の比較には厳密等価演算子（===）相当のロジックが使われます。つまり、値だけでなくデータ型まで一致していないと「見つかった」と判定されません。

var numbers = [1, 2, 3];

console.log($.inArray(1, numbers));   // 0（数値の1が見つかる）
console.log($.inArray('1', numbers)); // -1（文字列の'1'は見つからない）

この仕様は、フォームの入力値やURLパラメータなど、本来は数値であるべきデータが文字列として渡ってくる場面で問題になりがちです。例えば、HTMLのinput要素から取得した値は基本的に文字列型なので、数値の配列に対してそのまま検索をかけると、意図せず「見つからない」判定になってしまいます。

05 PARTIAL MATCH 部分一致検索・複数該当時の挙動 $.inArray()の限界と、それを補う実装方法

5-1. 複数該当時は最初の1つしか分からない

$.inArray()は、条件に合致する最初の1つのインデックスだけを返します。「配列の中に何個一致するものがあるか」「すべての該当箇所を知りたい」という用途には、そのままでは対応できません。

var scores = [80, 60, 80, 90, 80];

console.log($.inArray(80, scores)); // 0（最初に見つかった位置のみ）
// scores配列には80が3つ含まれるが、他の位置(2番目・4番目)は分からない

すべての該当箇所を知りたい場合は、$.each()やArray.prototype.forEach()でループしながら自分で該当インデックスを収集する実装が必要です。

var scores = [80, 60, 80, 90, 80];
var matchedIndexes = [];

$.each(scores, function(index, value) {
    if (value === 80) {
        matchedIndexes.push(index);
    }
});

console.log(matchedIndexes); // [0, 2, 4]

5-2. 部分一致検索を実現する方法

$.inArray()は完全一致のみをサポートしており、「文字列の一部が含まれているかどうか」を調べる部分一致検索には対応していません。部分一致を行いたい場合は、$.grep()やArray.prototype.filter()と、文字列のindexOf()やincludes()を組み合わせます。

var fruits = ['green apple', 'banana', 'red apple', 'orange'];

// $.grep()を使った部分一致検索
var matched = $.grep(fruits, function(item) {
    return item.indexOf('apple') !== -1;
});

console.log(matched); // ['green apple', 'red apple']

06 NATIVE JS COMPARISON ネイティブJavaScriptとの比較 indexOf・includes・findIndex・someとの使い分け

現在のモダンブラウザでは、jQueryを使わなくても配列を検索する手段がネイティブJavaScriptに複数用意されています。ここで一度、それぞれの違いを整理しておきましょう。

メソッド	戻り値	主な用途	備考
$.inArray(value, arr)	インデックス番号 or -1	完全一致の位置を知りたい	jQuery依存、indexOf相当
Array.prototype.indexOf(value)	インデックス番号 or -1	完全一致の位置を知りたい	$.inArray()とほぼ同じ動作、ネイティブJS
Array.prototype.includes(value)	true / false（真偽値）	含まれているかだけ知りたい	ES2016以降、truthy罠が起きない
Array.prototype.findIndex(callback)	インデックス番号 or -1	オブジェクト配列など複雑な条件で検索したい	コールバック関数で柔軟な条件指定が可能
Array.prototype.some(callback)	true / false（真偽値）	複雑な条件で「存在するか」だけ知りたい	findIndexの真偽値版

「含まれているかどうかだけを知りたい」という用途であれば、$.inArray()よりもArray.prototype.includes()の方が安全で読みやすいコードになります。戻り値が最初から真偽値なので、truthy罠が構造的に起こり得ません。

var fruits = ['apple', 'banana', 'orange'];

// includes()を使えばtruthy罠が起きない
if (fruits.includes('apple')) {
    console.log('appleが見つかりました'); // 正しく実行される
}

6-1. オブジェクトの配列を検索したい場合

実務でよくあるのが、「オブジェクトの配列の中から、特定のプロパティが一致する要素を探したい」というケースです。$.inArray()は値そのものの完全一致しか判定できないため、このような場合はArray.prototype.findIndex()が適しています。

var users = [
    { id: 1, name: '田中' },
    { id: 2, name: '佐藤' },
    { id: 3, name: '鈴木' }
];

// $.inArray()ではオブジェクトの中身までは検索できない
console.log($.inArray({ id: 2, name: '佐藤' }, users)); // -1（オブジェクトの参照が異なるため一致しない）

// findIndex()ならコールバックで柔軟に条件指定できる
var index = users.findIndex(function(user) {
    return user.id === 2;
});
console.log(index); // 1

07 COMMON MISTAKES よくある間違い・チェックリスト 実装前に確認しておきたい5つのポイント

特に最後の1つは見落とされがちです。既存のコードベースにjQueryが使われているからといって、新しく書くコードまで機械的にjQueryのスタイルを踏襲する必要はありません。プロジェクトの方針次第では、新規部分だけネイティブJSの書き方に寄せていく、という判断も十分にあり得ます。

7-1. jQueryを使い続けるべきか、脱却すべきか

2026年現在、多くの企業システムには、過去に構築されたjQuery依存のコードが数多く残っています。すべてを一気にモダンな書き方に置き換えるのは現実的ではなく、「保守するレガシー部分」と「新規に書く部分」を切り分けて判断するのが実務的なアプローチです。

状況	推奨される対応
既存のjQueryコードを保守・軽微修正するだけ	無理に書き換えず、$.inArray()の仕様を正しく理解した上で保守する
既存コードに大きな機能追加が発生する	その機能部分だけネイティブJSの書き方（includes/findIndex）に寄せる
新規プロジェクト・新規モジュールを立ち上げる	jQueryに依存せず、ネイティブJSまたはモダンフレームワークで設計する

08 AI-ASSISTED REFACTORING 【独自】Claude Codeを使ったjQueryレガシーコードの改修 「動いているが古い」コードと向き合う実務的な方法

$.inArray()のようなjQueryのユーティリティメソッドが大量に使われている古いコードベースは、「動いているから触りたくない」という理由で長年放置されがちです。しかし、保守担当者が変わるたびにtruthy罠のようなクセを知らない人がバグを埋め込んでしまうリスクは、放置すればするほど積み上がっていきます。

ここで実務的に有効なのが、Claude CodeのようなAIコーディングアシスタントに、既存のjQueryコードを見せて「このファイルの$.inArray()の使い方に問題がないか」「ネイティブJSに置き換えるならどう書き換えるべきか」を確認しながら進める方法です。

作業	AIへの依頼例
truthy罠の有無を洗い出す	「このファイル内で$.inArray()の戻り値をif文で直接判定している箇所を全部洗い出して」
ネイティブJSへの書き換え	「この$.inArray()の呼び出しを、Array.includes()を使った書き方に書き換えて」
オブジェクト配列検索の修正	「この$.inArray()はオブジェクトの配列を検索しようとして常に-1になっているバグを直して」
影響範囲の確認	「この関数を書き換えた場合に、呼び出し元でtruthy判定に依存している箇所がないか確認して」

09 GENAI CASE STUDY 【独自データ】GENAI社内のレガシーコード改修実例 Claude Max 20xプランでの活用実態

弊社（株式会社GENAI）では、Claude Max 20xプラン（月額$200・約30,000円）を契約し、営業・広告運用・記事制作・経理・秘書業務に加え、既存のWebサイト・LP（ランディングページ）の保守・改修にもClaude Codeを活用しています。

作業内容	従来のやり方	Claude Code活用後
既存jQueryコードの危険箇所チェック	ファイルを手作業で1行ずつ確認	AIに全ファイルをスキャンさせ、危険な書き方を一覧化
ネイティブJSへの部分置き換え	書き換え→目視確認を繰り返す	AIが置き換え案を提示→人間が最終確認するフローに短縮
影響範囲の洗い出し	該当箇所をエディタの検索機能で探す	AIが呼び出し元まで含めて関連箇所を提示

10 CONCLUSION まとめ $.inArray()の仕様を正しく理解し、適切な選択をする

$.inArray()は一見シンプルなメソッドですが、戻り値の仕様を正しく理解していないと、truthy罠のような分かりにくいバグを生みます。既存のjQueryコードを保守する場合はこの記事で紹介した注意点を、新規開発の場合はネイティブJSへの移行を、それぞれの状況に合わせて判断してください。

弊社では、こうした地味だが重要な技術的判断も含めて、Claude Codeを活用した業務システムの保守・改修を支援しています。「古いコードのメンテナンスに時間を取られている」という方は、ぜひ一度ご相談ください。

既存システムの保守・改修も、AI鬼管理が伴走します

jQueryのようなレガシー資産を抱えるシステムは、多くの企業に共通する悩みです。
AI鬼管理では、Claude Codeを活用した既存コードの解析・改修支援から、社内のAI活用定着まで対応しています。

ここから先の進め方は、大きく2つあります。

自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。

覚えるより任せたい方は、AI社員AIKATAでこの記事のような定型業務を丸ごと預ける道があります。料金は月30万円の月額定額、追加費用は0円です。

どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。

よくある質問

Q. $.inArray()とArray.prototype.indexOf()は何が違いますか？

A. 基本的な動作はほぼ同じで、どちらも見つかった位置のインデックス番号、見つからなければ-1を返します。$.inArray()は古いブラウザでindexOf()が使えなかった時代に用意されたjQueryの機能で、現在のモダンブラウザではindexOf()と実質的に同等の動作をします。

Q. なぜ$.inArray()の戻り値0をif文で判定するとバグになるのですか？

A. JavaScriptでは数値の0はfalsy（偽として扱われる値）だからです。$.inArray()は配列の先頭（0番目）で一致した場合に0を返しますが、if文にそのまま渡すと0がfalseと判定され、「見つからなかった」分岐が誤って実行されてしまいます。必ず`!== -1`で比較してください。

Q. $.inArray()でオブジェクトの配列を検索できますか？

A. できません。JavaScriptのオブジェクトは中身が同じでも参照（実体）が異なれば別物として扱われるため、$.inArray()で一致判定できません。オブジェクトの配列からプロパティの値で検索したい場合は、Array.prototype.findIndex()にコールバック関数を渡す方法を使ってください。

Q. 含まれているかどうかだけ知りたい場合、何を使うのが良いですか？

A. Array.prototype.includes()がおすすめです。戻り値が最初から真偽値（true/false）なので、$.inArray()のようなtruthy罠が構造的に発生しません。ES2016以降のモダンブラウザであれば問題なく使用できます。

Q. 新規プロジェクトでも$.inArray()を使うべきですか？

A. 基本的には推奨しません。新規開発であれば、truthy罠のリスクがなく可読性も高いArray.prototype.includes()や、柔軟な条件指定ができるfindIndex()を使う方が安全です。$.inArray()の知識が必要になるのは、主に既存のjQueryコードを保守する場面です。

Q. 古いjQueryコードを書き換える際に気をつけることは何ですか？

A. 一度に全体を書き換えようとせず、1ファイル・1関数単位で影響範囲を確認しながら進めることが重要です。特にtruthy罠に依存した分岐が他の処理と絡み合っているケースがあるため、書き換え後は必ず動作確認を行ってください。AIコーディングアシスタントを使うと、危険箇所の洗い出しを効率化できます。

AIAI鬼管理

AI鬼管理／AI社員AIKATAへのお問い合わせ

この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。

ご希望のサービス

お問い合わせ対象のサービス*必須 選択してください AI鬼管理（AI業務自動化の導入支援） AI社員AIKATA（業務の丸ごと代行） 両方・相談して決めたい

サービスを選択してください

---

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。