その値、配列にある？JavaScriptの includes() が便利
「この拡張子は対象に入っている？」「選ばれた項目にこの値はある？」。JavaScriptでそんな確認をするとき、配列の includes() が便利です。値があれば true、なければ false を返してくれるので、そのまま条件分岐に使えます。
まずは「含まれているか」を確認
const formats = ["jpg", "png", "webp"];
console.log(formats.includes("png")); // true
console.log(formats.includes("gif")); // false配列の後ろに .includes(探したい値) と書くだけです。位置を知りたいわけではなく、「ある・ない」だけを判断したいときに、意図が読み取りやすくなります。
候補をまとめて条件分岐できる
たとえば画像の拡張子に応じて処理を分けたい場合。条件を || でいくつもつなぐ代わりに、対象の値を配列にまとめられます。
const extension = "png";
const imageFormats = ["jpg", "jpeg", "png", "webp"];
if (imageFormats.includes(extension)) {
console.log("画像向けの処理を行います");
}対象を増やすときも、配列に値を追加するだけ。表示の切り替えや選択項目のチェックなど、候補が少数の場面で使いやすい書き方です。この例は拡張子による分岐だけなので、アップロードするファイルの安全性を検証する処理には使わないでください。
文字の大小と型は区別される
console.log(["png"].includes("PNG")); // false
console.log([1, 2, 3].includes("2")); // false
console.log(["webp"].includes("web")); // false"png" と "PNG"、数値の 2 と文字列の "2" は別の値です。大文字・小文字を区別したくないなら、調べる値と配列側の値を小文字などに揃えてから比較しましょう。また、配列の includes() は文字列の部分一致を調べるものではありません。
オブジェクトの配列にも注意。同じ内容のオブジェクトを新しく作って渡しても、同じ参照でなければ一致しません。オブジェクトのプロパティを条件にして探す場合は、some() などで判定します。
主要な現在のブラウザで広く利用できる機能です。「配列にこの値があるか」を書く場面で、まず思い出してみてください。