【JavaScript】includes の使い方｜配列・文字列の存在チェック・大文字小文字無視・indexOf / some との違いまで解説

array.includes(searchElement, fromIndex);
// searchElement: 検索する値
// fromIndex:     検索開始位置（省略可、デフォルト 0）
// 戻り値:        true または false

const fruits = ["りんご", "みかん", "ぶどう", "いちご"];

console.log(fruits.includes("みかん")); // true
console.log(fruits.includes("メロン")); // false

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

console.log(nums.includes(30, 0)); // true（0番目以降で検索）
console.log(nums.includes(30, 3)); // false（3番目以降には30がない）

// 負の値: 末尾からの位置として解釈
console.log(nums.includes(40, -2)); // true（末尾2つ=[40,50]で検索）

const values = [1, NaN, 3];

// includes: NaN を正しく見つける
console.log(values.includes(NaN)); // true

// indexOf: NaN を見つけられない（常に -1）
console.log(values.indexOf(NaN));  // -1

string.includes(searchString, position);
// searchString: 検索する文字列
// position:     検索開始位置（省略可、デフォルト 0）
// 戻り値:       true または false

const message = "JavaScriptのincludes解説";

console.log(message.includes("includes")); // true
console.log(message.includes("Python"));   // false

// 空文字列は常に true
console.log(message.includes("")); // true

const text = "Hello World";

// そのまま: 大文字小文字を区別
console.log(text.includes("hello")); // false

// toLowerCase() で大文字小文字を無視
console.log(text.toLowerCase().includes("hello")); // true

function includesIgnoreCase(str, search) {
  return str.toLowerCase().includes(search.toLowerCase());
}

console.log(includesIgnoreCase("JavaScript", "java"));   // true
console.log(includesIgnoreCase("JavaScript", "python")); // false

const colors = ["red", "green", "blue"];

// includes: 直感的
if (colors.includes("green")) {
  console.log("緑が含まれています");
}

// indexOf: 同じ意味だがやや冗長
if (colors.indexOf("green") !== -1) {
  console.log("緑が含まれています");
}

const users = [
  { id: 1, name: "田中", age: 25 },
  { id: 2, name: "鈴木", age: 30 },
  { id: 3, name: "佐藤", age: 22 }
];

// some: 条件に合う要素があるか？
console.log(users.some(u => u.age >= 30)); // true

// find: 条件に合う要素自体を取得
console.log(users.find(u => u.age >= 30)); // { id: 2, name: "鈴木", age: 30 }

// includes はオブジェクトの比較には使えない（後述）

const obj = { id: 1 };
const arr = [obj, { id: 2 }];

// 同じ参照なら true
console.log(arr.includes(obj));      // true

// 同じ内容でも別のオブジェクトなら false
console.log(arr.includes({ id: 1 })); // false（別インスタンス）

// オブジェクトの内容で検索するなら some を使う
console.log(arr.some(item => item.id === 1)); // true

const allowedExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp"];

function isImageFile(filename) {
  const ext = filename.slice(filename.lastIndexOf(".")).toLowerCase();
  return allowedExtensions.includes(ext);
}

console.log(isImageFile("photo.JPG"));  // true
console.log(isImageFile("doc.pdf"));    // false

const tags = ["JavaScript", "CSS", "HTML"];

function addTag(tag) {
  if (tags.includes(tag)) {
    console.log(`"${tag}" は既に追加済みです`);
    return;
  }
  tags.push(tag);
  console.log(`"${tag}" を追加しました`);
}

addTag("React");      // "React" を追加しました
addTag("JavaScript"); // "JavaScript" は既に追加済みです

function validateUsername(name) {
  const forbidden = ["<", ">", "&", '"', "'"];

  for (const char of forbidden) {
    if (name.includes(char)) {
      return { valid: false, message: `"${char}" は使用できません` };
    }
  }
  return { valid: true, message: "OK" };
}

console.log(validateUsername("tanaka<script>"));
// { valid: false, message: '"<" は使用できません' }

function containsAny(text, keywords) {
  const lower = text.toLowerCase();
  return keywords.some(kw => lower.includes(kw.toLowerCase()));
}

const alertWords = ["urgent", "emergency", "critical"];
const msg = "This is an URGENT notification";

console.log(containsAny(msg, alertWords)); // true

if (status === "error" || status === "failed" || status === "timeout") {
  showError();
}

if (["error", "failed", "timeout"].includes(status)) {
  showError();
}

const largeArray = Array.from({ length: 100000 }, (_, i) => i);

// includes: O(n) — 要素数に比例して遅くなる
console.log(largeArray.includes(99999)); // true（遅い）

// Set: O(1) — 要素数に関係なく高速
const largeSet = new Set(largeArray);
console.log(largeSet.has(99999)); // true（高速）