JavaScriptで配列や文字列の中に特定の要素や文字列が含まれているかどうか確認する includesメソッド徹底解説

JavaScriptのコーディングにおいて、配列や文字列の中に特定の要素や部分文字列が含まれているかどうかを確認することは一般的なタスクです。この記事では、そんな時に便利なincludesメソッドについて詳しく解説します。

Array.prototype.includes() 配列の要素チェック

基本的な使い方

Array.prototype.includes()メソッドは、配列が指定した要素を含んでいるかどうかを判定します。戻り値はtrueまたはfalseとなります。

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana'));  // true
console.log(fruits.includes('grape'));   // false

この例では、’banana’がfruits配列に存在するのでtrueを返し、’grape’は存在しないのでfalseを返します。

検索開始位置の指定

includesメソッドの2つ目の引数で、検索開始位置を指定することが可能です。これにより、特定のインデックスから先で要素を探すことができます。

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3, 3));  // false

上の例では、3番目のインデックスから検索を開始しているため、3は見つけられずfalseが返されます。

String.prototype.includes() 文字列の部分文字列チェック

基本的な使い方

String.prototype.includes()メソッドは、文字列が指定した部分文字列を含んでいるかどうかを判定します。こちらも戻り値はtrueまたはfalseです。

let message = "Hello, world!";
console.log(message.includes("Hello"));  // true
console.log(message.includes("goodbye"));// false

この例では、”Hello”がmessage文字列に存在するためtrueが返され、”goodbye”は存在しないためfalseが返されます。

検索開始位置の指定

文字列に対するincludesメソッドでも、2つ目の引数で検索開始位置を指定できます。

let message = "Hello, world!";
console.log(message.includes("world", 8));   // false

上記の例では、8番目のインデックスから検索を開始しているため、’world’は見つけられずfalseが返されます。

サンプルコード

特定の値が配列に含まれている場合に処理を実行する

このサンプルコードでは、特定のフルーツがショッピングリストに含まれている場合に、そのフルーツのジュースを作る処理を実行します。

const shoppingList = ['apple', 'banana', 'orange', 'pineapple'];
const fruitToCheck = 'banana';

if (shoppingList.includes(fruitToCheck)) {
    console.log(`I will make ${fruitToCheck} juice.`);
} else {
    console.log(`${fruitToCheck} is not in the shopping list.`);
}

// 出力: I will make banana juice.

指定した文字列がEメールアドレスに含まれているかを確認する

このサンプルコードでは、ユーザーが入力したEメールアドレスに@が含まれているかをチェックします。

const email = 'example@gmail.com';

if (email.includes('@')) {
    console.log('This is a valid email address format.');
} else {
    console.log('Please enter a valid email address.');
}

// 出力: This is a valid email address format.

配列に特定の値がない場合に新しい値を追加する

このサンプルコードでは、新しいタグが既存のタグリストになければ、それを追加します。

const tags = ['JavaScript', 'Programming', 'Web Development'];
const newTag = 'Frontend';

if (!tags.includes(newTag)) {
    tags.push(newTag);
    console.log(`Added new tag: ${newTag}`);
} else {
    console.log(`${newTag} already exists in the tags list.`);
}

// 出力: Added new tag: Frontend

文字列の内容に基づいて特別なメッセージを表示する

このサンプルコードでは、メッセージの内容にurgentが含まれている場合、特別な通知を表示します。

const message = 'This is an urgent message!';

if (message.toLowerCase().includes('urgent')) {
    console.log('URGENT ALERT: ' + message);
} else {
    console.log('Regular message: ' + message);
}

// 出力: URGENT ALERT: This is an urgent message!

まとめ

includesメソッドは、配列や文字列の中に特定の要素や部分文字列が含まれているかどうかを簡単にチェックするための非常に便利なツールです。検索開始位置を指定するオプションを使うことで、更に柔軟な検索が可能です。このメソッドを上手に活用し、より効率的なコーディングを目指しましょう。