JavaScript | 配列の要素を条件で調べる便利メソッドまとめ

JavaScript JavaScript
2020.08.01
スポンサーリンク

配列の要素を「条件」で調べる基本

初心者がつまずきやすいのは、「値そのもの」と「位置（インデックス）」の違いです。配列には、条件に合う要素を探すためのメソッドがいくつかあり、それぞれ「返してくれるもの」が違います。ここを押さえれば混乱が減ります。

4つの定番メソッドの役割

findIndex（条件に合う最初の位置を返す）

  • 役割: 条件に合う最初の要素のインデックス（位置）を返す
  • 戻り値: 見つからないときは -1
  • 使いどころ: 「何番目にあるか」を知りたいとき
const scores = [75, 68, 92, 84, 90];
const idx = scores.findIndex(score => score > 85);
console.log(idx); // 2（92は配列の2番目 = 0,1,2...）
JavaScript

find（条件に合う最初の値を返す）

  • 役割: 条件に合う最初の要素の「値」を返す
  • 戻り値: 見つからないときは undefined
  • 使いどころ: 「実際の値」を取り出したいとき
const scores = [75, 68, 92, 84, 90];
const val = scores.find(score => score > 85);
console.log(val); // 92
JavaScript

some（1つでも条件に合えば true）

  • 役割: 条件を満たす要素が「少なくとも1つあるか」をチェック
  • 戻り値: true または false
  • 使いどころ: 「一部一致」かどうかの判定
const scores = [75, 68, 92, 84, 90];
console.log(scores.some(score => score > 85)); // true（92がある）
console.log(scores.some(score => score < 60)); // false
JavaScript

every（全部が条件に合えば true）

  • 役割: すべての要素が条件を満たすかをチェック
  • 戻り値: true または false
  • 使いどころ: 「全一致」かどうかの判定
const scores = [75, 68, 92, 84, 90];
console.log(scores.every(score => score > 60)); // true
console.log(scores.every(score => score < 90)); // false（92がある）
JavaScript

つまずきやすいポイントの整理

  • 返ってくるものの違い:
    • findIndex: インデックス（数字）
    • find: 値そのもの（要素）
    • some / every: 真偽値（true/false）
  • 「最初のひとつ」しか見ない:
    • find / findIndex は最初に見つかった1個だけ。複数取り出したいなら filter を使う。
  • 見つからないときの挙動:
    • findIndex: -1
    • find: undefined
    • some / every: 条件次第で true/false（「見つからない」ではなく「判定の結果」）

例題で身につける

例題1：会員リストから「初回購入が1万円超」の人の位置を調べる（findIndex）

  • 状況: 会員の初回購入金額の配列がある
  • 目的: 最初に1万円を超えた人が何番目か知りたい
const firstPurchases = [2500, 8000, 12000, 5000];
const pos = firstPurchases.findIndex(amount => amount > 10000);
console.log(pos); // 2（0,1,2... 3番目の人）
JavaScript
  • ポイント: インデックスが分かれば、その人の名前など別の配列と組み合わせて参照できる。

例題2：在庫リストから「賞味期限切れの最初の商品」を見つける（find）

  • 状況: 商品オブジェクト配列（名前と期限）
  • 目的: 最初に期限切れの商品を取り出す
const products = [
  { name: 'Milk', expires: '2025-10-01' },
  { name: 'Yogurt', expires: '2025-11-05' },
  { name: 'Cheese', expires: '2025-09-30' },
];

const today = new Date('2025-10-27');
const expired = products.find(p => new Date(p.expires) < today);
console.log(expired); // { name: 'Milk', ... } など（例）
JavaScript
  • ポイント: findなら「商品オブジェクトまるごと」取れるので、名前や数量にもすぐアクセスできる。

例題3：チャットメッセージにNGワードが含まれているかを確認（some）

  • 状況: NGワードの一覧と、投稿文がある
  • 目的: 投稿前チェックで警告を出す
const ngWords = ['暴言', '差別', 'スパム'];
const message = '今日は少しスパムっぽい内容が多いね';

const hasNg = ngWords.some(word => message.includes(word));
console.log(hasNg); // true
JavaScript
  • ポイント: 1つでも含まれていれば true。即座にアラートを出せる。

例題4：テストの合格判定（every）

  • 状況: 複数科目の点数がある
  • 目的: 全科目が合格点（60点以上）なら「合格」
const scores = [78, 61, 90, 73];
const isPass = scores.every(s => s >= 60);
console.log(isPass); // true
JavaScript
  • ポイント: ひとつでも落としていれば false。合否の一発判定に便利。

よくあるミスと回避策

  • ミス: findで「全部」取りたい
    • 回避策: 複数取り出すなら filter を使う（条件に合う全部の配列を返す）
const numbers = [1, 4, 7, 10, 13];
const overFiveAll = numbers.filter(n => n > 5);
console.log(overFiveAll); // [7, 10, 13]
JavaScript
  • ミス: findIndexの結果を、そのまま要素として使う
    • 回避策: インデックスを使って配列から値を取り出す
const idx = numbers.findIndex(n => n === 10);
const value = numbers[idx]; // 10
JavaScript
  • ミス: 見つからないときの処理を忘れる
    • 回避策: -1 や undefined をチェックしてから使う
const userIdx = ['a', 'b', 'c'].findIndex(u => u === 'd');
if (userIdx === -1) {
  console.log('見つかりませんでした');
}
JavaScript

練習問題

  • 問題1: 配列 temps = [18, 22, 27, 31, 29] から、最初に 30 以上になった温度の「位置」を求めて表示する。
    • 期待する出力のヒント: 0から数えると3番目
  • 問題2: 配列 users = [{id:1, active:true}, {id:2, active:false}, {id:3, active:false}] から、最初の「非アクティブユーザー」を見つけて id を表示する。
  • 問題3: 文字列 title = 'JavaScript入門 完全ガイド' とキーワード配列 keys = ['入門', '基礎', '応用'] を使い、some でタイトルにキーワードが含まれるか判定する。
  • 問題4: 配列 prices = [1200, 980, 1500, 1300] が「すべて1000以上」かどうかを every で判定する。

解答と解説

問題1

配列 temps = [18, 22, 27, 31, 29] から、最初に 30 以上になった温度の「位置」を求める

const temps = [18, 22, 27, 31, 29];
const pos = temps.findIndex(t => t >= 30);
console.log(pos); // 3
JavaScript
  • 解説:
    • findIndex は「条件に合う最初のインデックス」を返す。
    • 31 が最初に 30 以上なので、インデックスは 3（0から数える）。

問題2

配列 users = [{id:1, active:true}, {id:2, active:false}, {id:3, active:false}] から、最初の「非アクティブユーザー」を見つけて id を表示する

const users = [
  {id:1, active:true},
  {id:2, active:false},
  {id:3, active:false}
];

const inactiveUser = users.find(u => u.active === false);
console.log(inactiveUser.id); // 2
JavaScript
  • 解説:
    • find は「条件に合う最初の要素そのもの」を返す。
    • 最初に active:false なのは id:2 のユーザー。

問題3

文字列 title = 'JavaScript入門 完全ガイド' とキーワード配列 keys = ['入門', '基礎', '応用'] を使い、some でタイトルにキーワードが含まれるか判定する

const title = 'JavaScript入門 完全ガイド';
const keys = ['入門', '基礎', '応用'];

const hasKeyword = keys.some(k => title.includes(k));
console.log(hasKeyword); // true
JavaScript
  • 解説:
    • some は「1つでも条件に合えば true」。
    • title.includes(k) で文字列に含まれるかを判定。
    • '入門' が含まれているので true。

問題4

配列 prices = [1200, 980, 1500, 1300] が「すべて1000以上」かどうかを every で判定する

const prices = [1200, 980, 1500, 1300];
const allOver1000 = prices.every(p => p >= 1000);
console.log(allOver1000); // false
JavaScript
  • 解説:
    • every は「すべての要素が条件を満たすか」を判定。
    • 980 が 1000 未満なので false。

まとめ

  • findIndex → 条件に合う最初の「位置」
  • find → 条件に合う最初の「値」
  • some → 1つでも条件に合えば true
  • every → 全部条件を満たせば true

👉 ここまで理解できたら、次のステップは filter を使って「条件に合う要素を全部取り出す」練習をするとさらに応用力がつきます。

前へ次へ
12345
スポンサーリンク
タイトルとURLをコピーしました