includes で「その値があるか」を一発で確かめる
arr.includes(5)
includes は、「この配列の中に、この値は“あるか・ないか”を調べるためのメソッド」です。 天才プログラマー視点で言うと、「存在確認したいならまず includes」と言っていいくらい、シンプルで強力な道具です。
true か false を返すだけ。 だからこそ、条件分岐と相性が抜群です。
includes の基本構造と戻り値の意味
const arr = [1, 3, 5, 7];
console.log(arr.includes(5)); // true
console.log(arr.includes(2)); // false
JavaScriptここで起きていることを分解します。
配列 arr の中を先頭から順番に見ていき、 「5 と完全に同じ値」が見つかったら true を返します。 最後まで見ても見つからなければ false を返します。
つまり、includes(値) は、 「この配列の中に、その値が“含まれているかどうか”を真偽値で教えてくれる」メソッドです。
例題:会員ランクが有効かどうかをチェックする
const validRanks = ["silver", "gold", "platinum"];
const inputRank = "gold";
if (validRanks.includes(inputRank)) {
console.log("有効なランクです");
} else {
console.log("不正なランクです");
}
JavaScriptここでのポイントはこうです。
配列 validRanks が「許可された値の一覧」になっていること。 includes(inputRank) が「その入力値が許可一覧に含まれているか」をチェックしていること。
このように、「許可された値のリスト」と組み合わせると、includes はバリデーション(入力チェック)の主役になります。
原始値に対する比較の仕組みを深掘りする
ここでいう「原始値」とは、数値・文字列・真偽値などの基本的な値のことです。 includes は、これらに対して 「===(厳密な等価)」とほぼ同じルールで比較します。
const arr = [1, 2, 3];
console.log(arr.includes(1)); // true
console.log(arr.includes("1")); // false(型が違う)
JavaScript重要なのは、「型も含めて同じかどうか」を見ていること。 数値の 1 と文字列の “1” は別物なので、includes("1") は false になります。
この性質のおかげで、「意図しない一致」が起きにくく、安全な存在確認ができます。
例題:NGワードチェックのイメージ
const ngWords = ["spam", "ad", "ban"];
function containsNgWord(text) {
return ngWords.some(word => text.includes(word));
}
console.log(containsNgWord("this is spam mail")); // true
console.log(containsNgWord("hello world")); // false
JavaScriptここでは、文字列の includes と配列の includes を組み合わせていますが、 「ある集合の中に、その値が含まれているか」という発想は同じです。
配列版の includes は、 「候補の中に、その値があるかどうか」を一発で聞けるという意味で、とても直感的です。
find や indexOf との違いを理解する
includes は「あるか・ないか」だけを知りたいときのメソッドです。 一方で、似たような用途のメソッドに indexOf や find があります。
const arr = [1, 3, 5];
console.log(arr.includes(3)); // true / false
console.log(arr.indexOf(3)); // 1(見つからないときは -1)
console.log(arr.find(x => x === 3)); // 3(見つからないときは undefined)
JavaScript違いを一言でまとめると、
「存在だけ知りたい」なら includes。 「どこにあるか知りたい」なら indexOf。 「要素そのものを取りたい」なら find。
天才講師としての感覚で言えば、 「if 文の条件にそのまま書きたいなら includes が一番素直」です。
よくあるミスと注意点を深掘りする
まず、オブジェクトや配列など「参照型」に対しては、includes は「同じ参照かどうか」で判定します。
const obj = { id: 1 };
const arr = [obj];
console.log(arr.includes(obj)); // true
console.log(arr.includes({ id: 1 })); // false(別オブジェクト)
JavaScript同じ形でも、別々に作られたオブジェクトは「別物」として扱われます。 原始値(数値・文字列など)なら問題ありませんが、 オブジェクトに対して includes を使うときは、この点に注意が必要です。
初心者のうちは、 「includes は数値や文字列の存在確認に使うもの」 と割り切っておくと、変なハマり方を避けられます。
まとめ:includes は「存在確認の最短ルート」
includes を使いこなせると、条件分岐が驚くほど読みやすくなります。
配列の中に、その値があるかどうか。 true / false だけ分かればいい。 そんなときに、includes は最もシンプルで、最も意図が伝わる書き方です。
「この値、許可リストに入ってる?」 「この番号、選択肢の中にある?」
そう感じた瞬間に、 arr.includes(value) と書けるようになることが、JavaScript 初心者から一歩抜け出す小さな一歩です。
