JavaScript配列の存在確認(includes)の基本と実践
「この値、配列に入ってる?」を一発で確かめるなら includes。true/falseだけ返すシンプルさが強みで、indexOfより読みやすく、初心者にも扱いやすいです。
構文と基本ポイント
// 基本
arr.includes(value);
// 先頭以外から検索したい場合(第2引数: fromIndex)
arr.includes(value, fromIndex);
JavaScript- 返り値: 指定した値が含まれていればtrue、なければfalse。
- 開始位置: 第2引数のfromIndexで「どこから探すか」を指定できる。省略時は先頭から。
- 比較の性質: NaNも一致と判定される(SameValueZero比較)。indexOfでは見つからないNaNがincludesなら見つかる点が違い。
すぐ使えるテンプレート集
数値の存在確認(基本)
const nums = [1, 2, 3, 4, 5];
console.log(nums.includes(3)); // true
console.log(nums.includes(7)); // false
JavaScript文字列の存在確認(大小文字は区別される)
const names = ["Aki", "Mao", "Ren"];
console.log(names.includes("Aki")); // true
console.log(names.includes("aki")); // false(大小文字は別扱い)
JavaScript- ポイント: 大文字小文字を区別するため、ケース無視でチェックしたいときは前処理を挟むと安全。
ケース無視で文字列を確認
const names = ["Aki", "Mao", "Ren"];
const target = "aki";
const normalized = names.map(s => s.toLowerCase());
console.log(normalized.includes(target.toLowerCase())); // true
JavaScriptfromIndexで検索開始位置を指定
const items = ["a", "b", "c", "a"];
console.log(items.includes("a")); // true(先頭から)
console.log(items.includes("a", 2)); // true(index 2以降に"a"あり)
console.log(items.includes("a", 4)); // false(範囲外)
JavaScript- ポイント: fromIndexを使うと「以降に存在するか」を簡単に判定できる。
NaNを含む配列での判定(includesなら見つかる)
const arr = [1, 2, NaN];
console.log(arr.includes(NaN)); // true
- ポイント: includesはNaNを一致とみなす。indexOfではNaNは見つからない。
よくある落とし穴と回避策
- 大小文字の違いを見落とす: 文字列はケースを区別。比較前にtoLowerCaseなどで正規化すると意図どおりになる。
- オブジェクトは“同値”ではなく“同一参照”で判定: includesは参照一致。同じ形のオブジェクトでも別インスタンスはfalse。オブジェクト条件ならsomeやfindでプロパティ比較を使う。
- 検索範囲の指定ミス: fromIndexが大きすぎるとfalseになりがち。開始位置が正しいか確認。
目的別の使い分け
| 手段 | 返り値 | 向いている場面 |
|---|---|---|
| includes | true/false | プリミティブ値の存在確認(直感的で速い) |
| indexOf | 位置(なければ-1) | 位置も欲しいとき。NaNは見つからない |
| some | true/false | 条件で存在確認(オブジェクトや複合条件) |
| find | 要素そのもの | 最初の一致要素を取得(値が必要なとき) |
練習問題(手を動かして覚える)
- 基本の存在確認:
const nums = [2, 5, 11, 3];
console.log(nums.includes(11)); // true
console.log(nums.includes(10)); // false
JavaScript- ケース無視の名前チェック:
const members = ["Aki", "Mao", "Ren"];
const query = "REN";
console.log(members.map(s => s.toLowerCase()).includes(query.toLowerCase())); // true
JavaScript- fromIndexで“以降にあるか”を判定:
const list = ["todo", "done", "todo"];
console.log(list.includes("todo", 1)); // true(index1以降に"todo"あり)
JavaScript- オブジェクトはsomeで条件存在確認(参考):
const users = [{id:1},{id:2},{id:3}];
console.log(users.some(u => u.id === 2)); // true
// includes({id:2}) は false(別参照)
JavaScript直感的な指針
- プリミティブの存在確認なら: includesで十分。
- 位置が欲しいなら: indexOf。
- 条件で存在確認(オブジェクト含む)なら: some/find。
