JavaScriptの配列で検索する方法｜コード付きで徹底解説

（最終更新月：2023年12月）

✔この記事は下記の疑問を抱く方々に特化しています

「Javascriptの配列検索とはどのようなもの？」

「Javascriptの配列検索の書き方を学びたい」

「Javascriptの配列検索の具体的な例を見て理解したい」

✔当記事を読み進めることで把握できること

Javascriptの配列検索の基本的な概念
Javascriptの配列検索の具体的な書き方とその使い道
Javascriptの配列検索の実例

記事の内容は、Javascriptの配列検索の基礎から、その活用方法まで範囲が広く、具体的な例を用いて詳細に解説しています。

ぜひ記事の最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/18 14:24:27時点 Amazon調べ-詳細)

配列操作の基本: 構文とメソッド

配列の基本的な構文から始めて、各メソッドの引数と返値についても詳しく見ていきます。

配列の構文
メソッドの引数と返値: 初心者から上級者へ

配列の構文

let fruits = ['apple', 'banana', 'cherry'];

この構文は配列を作成する最も一般的な方法です。

上記の例では、3つの文字列が含まれるfruitsという名前の配列を作成しています。

メソッドの引数と返値: 初心者から上級者へ

配列メソッドは、さまざまな引数を取り、それに応じた値を返します。

これらのメソッドを適切に使用することで、データの操作が単純かつ効率的におこなえます。

配列を検索するJavaScriptのメソッド

ここでは、JavaScriptで提供されている主な配列検索メソッドについて学びます。

要素の存在を確認: “includes”
要素の位置を見つける: “indexOf”
特定の要素を調査: “find”
素元のフィルタリング: “filter”

要素の存在を確認: “includes”

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana')); // trueを返す

includesメソッドは配列内に特定の要素が存在するかどうかを確認します。

要素の位置を見つける: “indexOf”

console.log(fruits.indexOf('cherry')); // 2を返す

indexOfメソッドは指定した要素が配列内に存在する場合、その位置（インデックス）を返します。

特定の要素を調査: “find”

let numbers = [3, 6, 8, 12];
let found = numbers.find(element => element > 7);
console.log(found); // 8を返す

findメソッドは、指定したテスト関数を満たす最初の要素を返します。

素元のフィルタリング: “filter”

let filtered = numbers.filter(element => element > 5);
console.log(filtered); // [6, 8, 12]を返す

filterメソッドは、テスト関数を満たす全ての要素で新しい配列を作成します。

実践！配列検索の具体的な例

実際に配列メソッドを使って、特定のタスクを解決する具体例を見ていきましょう。

配列内のオブジェクトを属性で探す
「アロー関数」と「分割代入」を使いこなす
配列で素数を検索する方法
疎配列とfind()メソッドの組み合わせ
配列でないオブジェクトでfind()メソッドを使うケース

配列内のオブジェクトを属性で探す

let users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Mark' }
];

let user = users.find(user => user.id === 2);
console.log(user.name); // "Jane"を出力

このコードは、idが2のユーザーを配列から探し、その名前を出力します。

「アロー関数」と「分割代入」を使いこなす

let colors = [
  { id: 1, hex: '#ff0000' },
  { id: 2, hex: '#00ff00' }
];

let [firstColor] = colors.filter(color => color.id === 1);
console.log(firstColor.hex); // "#ff0000"を出力

アロー関数と分割代入を組み合わせることで、コードをより読みやすく簡潔に保てます。

配列で素数を検索する方法

let numbers = [4, 6, 7, 10, 11];

function isPrime(num) {
  for (let i = 2, s = Math.sqrt(num); i <= s; i++) {
    if (num % i === 0) return false; 
  }
  return num > 1;
}

let primes = numbers.filter(isPrime);
console.log(primes); // [7, 11]を出力

この関数isPrimeは素数かどうかを判断し、filterメソッドを使って配列から素数のみを抽出します。

疎配列とfind()メソッドの組み合わせ

let array = [undefined, null, 0, 'Hello', false];
let found = array.find(element => element !== undefined && element !== null);
console.log(found); // 0を出力

疎配列では、未定義の要素を飛ばして最初の「実際の」要素を見つけられます。

配列でないオブジェクトでfind()メソッドを使うケース

let pseudoArray = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
let arrayLike = Array.prototype.slice.call(pseudoArray);
let found = arrayLike.find(char => char === 'b');
console.log(found); // "b"を出力

配列風のオブジェクト（Array-like Object）から実際の配列を生成し、find()メソッドを適用する例です。