5.2 配列の検索とフィルタリング
配列から特定の条件に合う要素を探したり、抽出したりする操作について学びます。
5.2.1 find と findIndex
find メソッドは、条件に一致する最初の 1 件だけを探し出します。
findIndex メソッドは、条件に一致する最初の要素のインデックス番号を返します。
ソースフォルダ：public/ch05
ファイル名：array-find.js
➢ array-find.html
前の項で作った ch05/array-foreach.html をコピーし、ch05 にペーストしてください。
その際に、ファイル名を array-find.html に変更します。
ファイル内の array-foreach.html や array-foreach.js の記述も、array-find.html や array-find.js に修正します。
➢ array-find.js
ここでは、複数の情報をまとめて管理するためのオブジェクトという仕組みを使用しています。詳しくは 6 章で学習しますが、{ id: 1, name: “田中” } のように書くことで、関連するデータをひとまとめにできます。
// array-find.js
// ユーザーのリスト
const users = [
{ id: 1, name: "田中", age: 25 },
{ id: 2, name: "佐藤", age: 30 },
{ id: 3, name: "鈴木", age: 28 }
];
// 1. find：IDが2のユーザーを探す
const user = users.find(u => u.id === 2);
alert("見つかったユーザー: " + user.name); // 佐藤
// 2. findIndex：年齢が28のユーザーのインデックスを探す
const index = users.findIndex(u => u.age === 28);
alert("インデックス番号: " + index); // 2
実行結果
解説
4 行目から 8 行目で、ユーザー情報を持つオブジェクトの配列を定義しています。 各ユーザーは、id、name、age というプロパティを持っています。
4: const users = [
5: { id: 1, name: "田中", age: 25 },
6: { id: 2, name: "佐藤", age: 30 },
7: { id: 3, name: "鈴木", age: 28 }
8: ];
11 行目では、find メソッドを使って、id が 2 のユーザーを検索しています。 条件に一致する最初の要素（佐藤さんのオブジェクト）が返されます。
11: const user = users.find(u => u.id === 2);
12: alert("見つかったユーザー: " + user.name); // 佐藤
15 行目では、findIndex メソッドを使って、年齢が 28 のユーザーのインデックス番号を取得しています。 鈴木さんは配列の 3 番目（インデックス 2）にいるため、2 が返されます。
15: const index = users.findIndex(u => u.age === 28);
16: alert("インデックス番号: " + index); // 2
find が「最初の 1 件」を返すのに対し、filter は「条件に合うすべての要素」を新しい配列として返します。
5.2.3 some と every
some と every は、配列の要素が条件を満たしているかどうかを true/false で返します。
const scores = [60, 75, 80, 45, 90];
// some：1 つでも条件を満たせば true
const hasHighScore = scores.some(score => score >= 90); // true
// every：すべてが条件を満たす時だけ true
const allPassed = scores.every(score => score >= 60); // false（45 がある）
some は「条件に合う要素が 1 つでもあるか」を判定し、every は「すべての要素が条件を満たすか」を判定します。