🔖

JavaScriptでよく使う配列メソッド【要素の検索・判定｜構文・使用例・注意点】

に公開
JavaScript
Web
frontend
入門
初心者向け
tech

🚀 JavaScript 配列メソッド — 要素の検索・判定 編

JavaScript では、配列の要素を検索したり、条件に一致するかを簡単に判定できる
便利なメソッドが豊富に用意されています。
ここでは、その中でも特によく使われる基本の検索・判定メソッドを紹介します。


📌 includes(): 配列に要素が含まれているか判定

includes() は、配列に特定の要素が含まれているかを判定し、真偽値（true / false） を返します。
非破壊的メソッド で、検索は厳密等価（===）で行われます。
単純な存在確認をしたい場合に便利で、特定の値が含まれているかをすぐに調べることができます。

📜 構文：

array.includes(valueToFind, fromIndex);

📎 戻り値:

  • 要素が含まれていれば true、含まれていなければ false

📎 引数:

  • valueToFind: 探したい要素
  • fromIndex（省略可）: 検索を開始するインデックス（負の数も可）

🌟 例：文字列が配列に含まれているか確認

const fruits = ["apple", "banana", "cherry"];

console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape")); // false

🌟 例：数値の場合

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3)); // true
console.log(numbers.includes(6)); // false

🔍 特徴

  • ✅ 配列に要素が含まれているか判定
  • ✅ 戻り値は true / false
  • ✅ 元の配列は変更されない（非破壊的）
  • ✅ 厳密等価（===）で比較

⚠️ 注意点

  • fromIndex を指定すると、その位置から検索を開始
  • fromIndex に負の値を指定すると、末尾からの位置として扱われる


📌 find(): 配列の要素を条件で検索（最初の要素）

find() メソッドは、配列の中で 最初に条件を満たす要素 を返します。
条件を満たす要素がない場合は undefined を返します。
条件を満たす要素を見つけた時点で検索は終了し、それ以降の要素は評価されません。
非破壊的メソッド で、特定の条件に一致する最初の要素を素早く取得したい場合に便利です。

📜 構文

array.find(callback(currentValue, index, array), thisArg);

📎 戻り値:

  • 条件を満たす最初の要素。条件を満たす要素がなければ undefined

📎 引数:

  • callback: 配列の各要素に対して実行する関数
    • currentValue（必須）: 現在処理している配列の要素
    • index（任意）: 現在のインデックス
    • array（任意）: 元の配列
  • thisArg（任意）: callback 内での this の値

🌟 例：基本的な条件一致

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

// 30以上の最初の要素を検索
const result = numbers.find((num) => num >= 30);
console.log(result); // 30

🌟 例：条件に一致する要素がない場合

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

// 60以上の要素を検索
const result = numbers.find((num) => num >= 60);
console.log(result); // undefined

🌟 例：オブジェクト配列から検索（名前一致）

const users = [
  { name: "John", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Alice", age: 22 },
];

// 名前が 'Jane' のユーザーを検索
const result = users.find((user) => user.name === "Jane");
console.log(result); // { name: 'Jane', age: 30 }

🌟 例：数値配列から条件一致（偶数）

const numbers = [1, 2, 3, 4, 5];

// 偶数の最初の要素を検索
const result = numbers.find((num) => num % 2 === 0);
console.log(result); // 2

🌟 例：thisArg を使った検索

thisArg は callback 内での this を指定するのに使います。
例えば、ある条件を this にした外部の設定オブジェクトで管理する場合などに役立ちます。

const items = [
  { name: "apple", price: 100 },
  { name: "banana", price: 150 },
  { name: "cherry", price: 200 },
];

// 条件を外部オブジェクトで管理
const condition = {
  maxPrice: 150,
};

// `thisArg` を渡して `callback` 内で this を参照する
const result = items.find(function (item) {
  return item.price <= this.maxPrice;
}, condition);

console.log(result); // { name: 'apple', price: 100 }

🔍 特徴

  • 最初に条件を満たした要素のみを返す
  • 条件を満たす要素が見つかれば探索は終了（早期終了）
  • 条件に一致しない場合は undefined

⚠️ 注意点

  • 空の配列は常に undefined を返す
  • 複数の要素を取得したい場合は filter() を使う必要がある


📌 findIndex(): 条件を満たす最初のインデックスを取得

findIndex() は、配列の中で 最初に条件を満たす要素のインデックス を返します。
条件を満たす要素が見つからない場合は -1 を返します。
条件を満たした時点で検索は終了し、それ以降の要素は評価されません。
非破壊的メソッド で、条件に一致する要素の位置を素早く特定したい場合に便利です。

📜 構文

array.findIndex(callback(currentValue, index, array), thisArg);

📎 戻り値:

  • 条件を満たす最初のインデックス。該当なしなら -1

📎 引数:

  • callback（必須）
    • currentValue
    • index（任意）
    • array（任意）
  • thisArg（任意）

🌟 例：数値配列で条件に一致する最初のインデックスを探す

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

// 30以上の最初の要素のインデックスを取得
const index = numbers.findIndex((num) => num >= 30);
console.log(index); // 2

🌟 例：条件を満たす要素がない場合

const numbers = [5, 10, 15];

// 20以上の要素のインデックスを探す
const index = numbers.findIndex((num) => num >= 20);
console.log(index); // -1

🌟 例：オブジェクト配列の中で条件一致する要素のインデックスを取得

const users = [
  { name: "John", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Alice", age: 22 },
];

// 名前が 'Jane' のユーザーのインデックスを探す
const index = users.findIndex((user) => user.name === "Jane");
console.log(index); // 1

🌟 例：thisArg を使って findIndex()

const users = [
  { name: "John", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Alice", age: 22 },
];

const checker = {
  minAge: 30,
};

const index = users.findIndex(function (user) {
  return user.age >= this.minAge;
}, checker);

console.log(index); // 1 （Janeが30歳なので最初に一致）

🔍 特徴

  • ✅ 条件を満たす最初のインデックスのみ
  • ✅ 見つかったら処理終了


📌 some(): 条件を満たす要素が 1 つでもあるか

some() は、配列の中に 1 つでも条件を満たす要素があれば true を返し、条件を満たす要素が全くなければ false を返します。
条件を満たす要素が見つかった時点で検索は終了し、それ以降の要素は評価されません。
非破壊的メソッド で、条件を満たす要素が存在するかどうかをすぐに確認したい場合に便利です。

📜 構文

array.some(callback(currentValue, index, array), thisArg);

📎 戻り値:

  • 条件を満たす要素があれば true、なければ false

📎 引数:

  • callback（必須）
    • currentValue
    • index（任意）
    • array（任意）
  • thisArg（任意）

🌟 例：数値配列で条件を満たす要素が1つでもあるか確認

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

// 30以上の要素が1つでもあるか
const hasLargeNumber = numbers.some((num) => num >= 30);
console.log(hasLargeNumber); // true

🌟 例：条件を満たす要素が全くない場合

const numbers = [5, 10, 15];

// 20以上の要素が1つでもあるか
const hasLargeNumber = numbers.some((num) => num >= 20);
console.log(hasLargeNumber); // false

🌟 例：オブジェクト配列の中に条件を満たす要素があるか確認

const users = [
  { name: "John", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Alice", age: 22 },
];

// 30歳以上のユーザーが1人でもいるか
const hasAdult = users.some((user) => user.age >= 30);
console.log(hasAdult); // true

🌟 例：thisArg を使って some() 

const users = [
  { name: "John", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Alice", age: 22 },
];

const checker = {
  minAge: 30,
};

const hasAdult = users.some(function (user) {
  return user.age >= this.minAge;
}, checker);

console.log(hasAdult); // true

🔍 特徴

  • ✅ 1 つでも条件を満たせば終了（早期終了）
  • ✅ 配列が空なら false


📌 every(): 全ての要素が条件を満たすか

every() は、配列の全要素が条件を満たす場合のみ true を返し、1 つでも条件を満たさない要素があれば false を返す非破壊的メソッドです。
全ての要素が基準を満たしているか一括でチェックしたいときに便利です。

📜 構文

array.every(callback(currentValue, index, array), thisArg);

📎 戻り値:

  • 全て条件を満たすなら true、1 つでも満たさないなら false

📎 引数:

  • callback（必須）
    • currentValue
    • index（任意）
    • array（任意）
  • thisArg（任意）

🌟 例：数値配列の全要素が条件を満たすか確認

const numbers = [2, 4, 6, 8];

// 全ての要素が偶数か？
const allEven = numbers.every((num) => num % 2 === 0);
console.log(allEven); // true

🌟 例：一部が条件を満たさない場合

const numbers = [2, 4, 5, 8];

// 全ての要素が偶数か？
const allEven = numbers.every((num) => num % 2 === 0);
console.log(allEven); // false

🌟 例：オブジェクト配列の全要素が条件を満たすか確認

const users = [
  { name: "John", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Alice", age: 22 },
];

// 全員が20歳以上か？
const allAdults = users.every((user) => user.age >= 20);
console.log(allAdults); // true

🌟 例：thisArg を使って every() 

const users = [
  { name: "John", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Alice", age: 22 },
];

const checker = {
  minAge: 25,
};

// 全員が25歳以上か？
const allAboveMin = users.every(function (user) {
  return user.age >= this.minAge;
}, checker);

console.log(allAboveMin); // false

🔍 特徴

  • ✅ 全要素が条件を満たす必要あり
  • ✅ 配列が空の場合は true


✅ まとめ

メソッド 引数例 戻り値 破壊性 説明
includes() valueToFind, fromIndex? true または false ❌ 配列に特定の値が含まれているか判定する。厳密等価(===)で比較。
find() callback(element, index, array) 条件を満たす最初の要素 または undefined ❌ 条件を満たす最初の要素を返す。見つかれば検索終了。
findIndex() callback(element, index, array) 条件を満たす最初の要素のインデックス または -1 ❌ 条件を満たす最初の要素のインデックスを返す。見つかれば検索終了。
some() callback(element, index, array) true または false ❌ 条件を満たす要素が 1 つでもあればtrueを返す。
every() callback(element, index, array) true または false ❌ 全ての要素が条件を満たす場合にtrueを返す。

Discussion