JavaScript配列検索完全ガイド｜includes・indexOf・find・inArrayの使い方と実践例

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. はじめに

記事の目的

• 配列検索に使用できる主要なJavaScriptメソッドの違いを理解する。
• 各メソッドの具体的な使い方をコード例で把握する。
• シナリオに応じた適切なメソッド選択ができるようになる。

読者ターゲット

• JavaScriptを使い始めたばかりの初心者。
• 配列の検索やデータ処理について理解を深めたい中級者。
• 実践的なコード例を参考にしたいウェブ開発者。

得られる知識とスキル

• JavaScriptの配列検索メソッド（indexOf(), includes(), find(), findIndex()）の基礎と応用。
• jQueryのinArray()メソッドの使い方と注意点。
• パフォーマンス比較や実践的な利用シナリオの理解。

次回の記事内容

2. JavaScriptの基本的な配列検索メソッド

2-1. indexOf() メソッド

array.indexOf(value, fromIndex)

• value: 検索したい値
• fromIndex: 検索開始位置（省略可能。デフォルトは0）

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

console.log(fruits.indexOf('banana')); // 出力: 1
console.log(fruits.indexOf('grape'));  // 出力: -1

• indexOf() は厳密一致（===）で比較します。データ型が異なる場合は一致とみなされません。
• オブジェクトや配列そのものを比較する場合には適していません。

2-2. includes() メソッド

array.includes(value, fromIndex)

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green')); // 出力: true
console.log(colors.includes('yellow')); // 出力: false

• includes() は ES6（ECMAScript 2015）で追加されたため、古いブラウザではサポートされていない場合があります。

2-3. find() メソッド

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

const result = numbers.find(num => num > 25);
console.log(result); // 出力: 30

2-4. findIndex() メソッド

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

const index = numbers.findIndex(num => num > 25);
console.log(index); // 出力: 2

まとめ

• シンプルな検索には indexOf() または includes() が適しています。
• 条件検索には find() または findIndex() が便利です。

3. jQueryのinArray()メソッドとは？

3-1. jQueryを使う理由

• レガシーシステムの保守: 既存プロジェクトやシステムでの利用。
• シンプルなコード記述: 初心者でも扱いやすい。
• 互換性の確保: 古いブラウザへの対応。

3-2. inArray()メソッドの使い方

$.inArray(value, array, [fromIndex])

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

console.log($.inArray('banana', fruits)); // 出力: 1
console.log($.inArray('grape', fruits));  // 出力: -1

3-3. inArray()とネイティブメソッドの比較

• jQueryプロジェクトでは統一感を保つためにinArray()を利用。
• 新規プロジェクトではネイティブメソッドを優先するのが推奨されます。

3-4. 使用時の注意点

まとめ

• jQuery環境では簡潔で統一感のあるコード記述が可能。
• 新規プロジェクトではネイティブメソッドが推奨される。
• レガシーシステムを扱う場合にはinArray()が有効。

4. メソッドの比較と使い分けガイド

4-1. 各メソッドの特徴と比較

4-2. 使用シナリオごとの推奨メソッド

• 推奨メソッド:
• indexOf() → インデックス番号が必要な場合。
• includes() → 存在確認だけで十分な場合。

const colors = ['red', 'green', 'blue'];

console.log(colors.indexOf('green')); // 出力: 1
console.log(colors.includes('green')); // 出力: true

• 推奨メソッド:
• find() → 条件に一致する最初の要素を取得。
• findIndex() → 条件に一致する最初の要素の位置を取得。

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

console.log(numbers.find(num => num > 25)); // 出力: 30
console.log(numbers.findIndex(num => num > 25)); // 出力: 2

• 推奨メソッド:
• inArray() → jQueryライブラリが必要な環境で利用。

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

console.log($.inArray('banana', fruits)); // 出力: 1

4-3. パフォーマンス比較

• indexOf() や includes() は高速。

• find() や findIndex() は柔軟な条件指定に適しているが、速度はやや劣る。

• inArray()は簡便だが、ネイティブメソッドよりも速度が劣る。

まとめ

• シンプルな検索では indexOf() や includes() を使用。
• 条件付き検索には find() や findIndex() が最適。
• jQuery環境では inArray() がレガシーシステム向けに便利。

5. 実践例と応用シナリオ

5-1. フォーム入力の検証

const validColors = ['red', 'green', 'blue'];
const userInput = 'green';

if (validColors.includes(userInput)) {
  console.log('有効な色です。');
} else {
  console.log('無効な色です。');
}

5-2. ユーザーデータの検索・抽出

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 },
];

const result = users.find(user => user.age >= 30);
console.log(result); // 出力: { id: 2, name: 'Bob', age: 30 }

const index = users.findIndex(user => user.age >= 30);
console.log(index); // 出力: 1

5-3. エラーハンドリングの例

const products = ['apple', 'banana', 'orange'];

const index = products.indexOf('grape');

if (index === -1) {
  console.log('商品が見つかりませんでした。');
} else {
  console.log(`商品はインデックス${index}にあります。`);
}

5-4. 配列データのフィルタリング

const scores = [45, 72, 88, 53, 94];

const highScores = scores.filter(score => score >= 70);
console.log(highScores); // 出力: [72, 88, 94]

5-5. jQueryを用いた検索例

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

if ($.inArray('banana', fruits) !== -1) {
  console.log('バナナはリストに存在します。');
} else {
  console.log('バナナはリストにありません。');
}

まとめ

• ユーザー入力検証にはincludes()がシンプルで便利。
• 条件検索やオブジェクト操作ではfind()やfindIndex()が強力。
• エラーハンドリングではindexOf()が汎用性が高い。
• データフィルタリングではfilter()が効率的。
• jQueryを使用する場合はinArray()がレガシー環境で役立つ。

6. よくある質問 (FAQ)

質問 1: indexOf() と includes() の違いは何ですか？

• indexOf(): 指定された値のインデックス番号を返します。存在しない場合は -1 を返します。
• includes(): 値が存在するかどうかを真偽値（true または false）で返します。

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

console.log(fruits.indexOf('banana')); // 出力: 1
console.log(fruits.includes('banana')); // 出力: true

質問 2: find() と filter() はどう違うのですか？

• find(): 条件に一致する最初の要素のみを返します。
• filter(): 条件に一致するすべての要素を新しい配列として返します。

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.find(num => num > 25)); // 出力: 30
console.log(numbers.filter(num => num > 25)); // 出力: [30, 40, 50]

質問 3: オブジェクト配列で特定のキー値を検索するには？

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const user = users.find(user => user.name === 'Bob');
console.log(user); // 出力: { id: 2, name: 'Bob' }

質問 4: jQueryのinArray()は今でも使うべきですか？

• 新規プロジェクトでは、indexOf() や includes() などのネイティブメソッドを使用。
• 既存のjQuery環境では、統一性を保つために inArray() を利用するのが適切。

質問 5: パフォーマンスを意識した配列検索はどうすればいいですか？

• シンプルな値検索は indexOf() や includes() が高速です。

• 検索結果をキャッシュして、繰り返しの計算を避ける。

• 大規模なデータセットでは、オブジェクトをキーとしたマップやセットを利用する方が効率的です。

const dataSet = new Set([10, 20, 30, 40]);
console.log(dataSet.has(20)); // 出力: true

まとめ

• 各メソッドの違いや用途に応じた使い分けを理解する。
• オブジェクト配列では条件検索にfind()が便利。
• 新規プロジェクトではネイティブメソッドを優先し、jQueryはレガシー環境で活用。
• 大規模データではパフォーマンスを意識した手法を選択する。

7. まとめと次のステップ

7-1. 記事の要点整理

• indexOf(): 配列内の要素のインデックスを検索。
• includes(): 値が存在するかどうかを真偽値で返す。
• find() および findIndex(): 条件に一致する最初の要素やインデックスを検索。

• レガシー環境やjQueryベースのシステムで利用。
• モダンな環境ではネイティブメソッドが推奨される。

• フォーム入力の検証やオブジェクト配列からのデータ抽出など、実用的なコード例を紹介。
• エラーハンドリングやデータフィルタリングも簡潔に実装できる。

• 各メソッドの違いや使い分けのポイントを整理。
• パフォーマンスを意識した処理やオブジェクト配列の検索方法も解説。

7-2. メソッド選択のポイント

7-3. 次のステップ

• 自分でシンプルなWebアプリケーションを作り、今回学んだメソッドを実際に活用してみましょう。 例: TODOリストや商品管理システムでの検索・フィルタリング機能の実装。

• ES6以降の機能: スプレッド演算子や分割代入など、モダンなJavaScript機能を学ぶことで、さらに効率的なコードが書けるようになります。
• 非同期処理の学習: async/awaitやPromiseを使った非同期データ操作の知識を身につけると、より高度なプログラムが作成できます。

• ReactやVue.jsなどのモダンフレームワークでは、配列検索とデータバインディングを組み合わせた応用的な実装が求められます。

• MDN Web Docs: JavaScript Arrays
• W3Schools: JavaScript Array Methods
• JSFiddleやCodePen: コードのテストや共有に便利。

7-4. 最後に

1. 学んだ内容を実践で活用しながら、コードを頻繁に試してみましょう。
2. 必要に応じて、新しい技術や手法を積極的に学び続けることが大切です。
3. 自分のプロジェクトやニーズに応じたメソッドを柔軟に選択し、最適なコードを目指してください。

おわりに