JavaScriptにおけるincludesメソッドの正しい使い方を実例10選で解説

●includesメソッドとは？

JavaScriptを学んでいると、配列や文字列内に特定の要素が含まれているかどうかを確認したい場面に遭遇することがあります。

そんなときに力を発揮するのが、includesメソッドです。

○includesメソッドの基本的な使い方

includesメソッドは、ES2015(ES6)で導入された比較的新しいメソッドです。

配列や文字列を対象に、指定した要素や部分文字列が含まれているかどうかを真偽値で返してくれます。

基本的な構文は次のようになります。

配列.includes(検索する要素, 検索を開始するインデックス)
文字列.includes(検索する部分文字列, 検索を開始するインデックス)

検索を開始するインデックスは省略可能で、デフォルトでは0(先頭)から検索を開始します。

○サンプルコード1：配列内の要素の存在チェック

では早速、配列内に特定の要素が含まれているかどうかを確認するサンプルコードを見てみましょう。

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.includes('banana')); // 出力結果: true
console.log(fruits.includes('grape')); // 出力結果: false

上記のコードでは、fruitsという配列に対してincludesメソッドを使用しています。

‘banana’は配列内に存在するため、trueが返されます。

一方、’grape’は配列内に存在しないため、falseが返されます。

実行結果

true
false

includesメソッドを使うことで、簡単に配列内の要素の存在を確認できました。

従来のようにforループを使って要素を1つずつチェックする必要がなくなり、コードがシンプルになりますね。

○サンプルコード2：文字列内の部分文字列の存在チェック

次に、文字列を対象にincludesメソッドを使ってみましょう。

const message = 'Hello, world!';

console.log(message.includes('Hello')); // 出力結果: true
console.log(message.includes('hello')); // 出力結果: false
console.log(message.includes('world', 7)); // 出力結果: true

messageという文字列に対してincludesメソッドを使用しています。

‘Hello’は文字列内に存在するため、trueが返されます。

ただし、includesメソッドは大文字と小文字を区別するため、’hello’を検索するとfalseが返されます。

また、第2引数に7を指定することで、7番目の文字(‘w’)から検索を開始しています。

そのため、’world’が見つかりtrueが返されます。

実行結果

true
false
true

これで、includesメソッドの基本的な使い方は理解できたと思います。

シンプルなメソッドですが、配列や文字列の操作において非常に便利です。

次は、より実践的な場面でのincludesメソッドの活用方法を見ていきましょう。

●配列におけるincludesメソッドの活用

includesメソッドは、配列操作においても大活躍します。

ユーザー入力値のチェックや、条件に基づく配列のフィルタリング、重複要素の削除など、様々な場面で使えるテクニックを身につけましょう。

○サンプルコード3：ユーザー入力値の配列内存在チェック

Webアプリケーションを作成していると、ユーザーが入力した値が予め定義された配列内に存在するかどうかを確認したい場面があります。

そんなときは、includesメソッドを使って簡単に実装できます。

const allowedColors = ['red', 'blue', 'green'];
const userInput = 'blue';

if (allowedColors.includes(userInput)) {
  console.log(`${userInput}は許可された色です。`);
} else {
  console.log(`${userInput}は許可されていない色です。`);
}

上記のコードでは、allowedColorsという配列に許可された色を定義しています。

ユーザーが入力した値がこの配列内に存在するかどうかを、includesメソッドを使ってチェックしています。

実行結果

blueは許可された色です。

ユーザー入力値が許可された色の配列内に存在する場合は、適切なメッセージが表示されます。

このように、includesメソッドを使えば、シンプルな存在チェックを行うことができます。

○サンプルコード4：条件に基づく配列のフィルタリング

配列から特定の条件を満たす要素だけを抽出したい場合、includesメソッドとfilterメソッドを組み合わせると便利です。

const fruits = ['apple', 'banana', 'orange', 'melon', 'apple', 'orange', 'pear'];
const selectedFruits = ['apple', 'orange'];

const filteredFruits = fruits.filter(fruit => selectedFruits.includes(fruit));

console.log(filteredFruits);

上記のコードでは、fruitsという配列から、selectedFruitsに含まれる要素だけを抽出しています。

filterメソッドのコールバック関数内で、includesメソッドを使って各要素がselectedFruits内に存在するかどうかをチェックしています。

実行結果

['apple', 'orange', 'apple', 'orange']

抽出された要素からなる新しい配列が返されます。

このテクニックを使えば、柔軟な条件に基づいて配列をフィルタリングできます。

○サンプルコード5：配列内の重複要素の削除

配列内に重複する要素がある場合、includesメソッドを使って重複を取り除くことができます。

const numbers = [1, 2, 3, 4, 2, 3, 5, 1, 6];
const uniqueNumbers = [];

numbers.forEach(number => {
  if (!uniqueNumbers.includes(number)) {
    uniqueNumbers.push(number);
  }
});

console.log(uniqueNumbers);

上記のコードでは、numbersという配列から重複を取り除いてuniqueNumbers配列に格納しています。

forEachメソッドを使って各要素を走査し、includesメソッドで要素がuniqueNumbers内に存在しない場合にのみpushメソッドで追加しています。

実行結果

[1, 2, 3, 4, 5, 6]

重複が取り除かれた要素からなる新しい配列が返されます。

includesメソッドを活用することで、簡単に重複要素を除去できます。

●文字列におけるincludesメソッドの活用

配列だけでなく、文字列に対してもincludesメソッドは大活躍します。

ユーザー入力の妥当性チェックやURLのパラメータ存在チェック、部分一致検索など、文字列操作の様々な場面で威力を発揮します。

○サンプルコード6：ユーザー入力の妥当性チェック

Webアプリケーションでユーザー入力を受け付ける際、入力値の妥当性チェックは欠かせません。

includesメソッドを使えば、シンプルで効果的なチェックを行うことができます。

const allowedCharacters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
const userInput = 'Hello123';

const isValid = [...userInput].every(char => allowedCharacters.includes(char));

if (isValid) {
  console.log('ユーザー入力は有効です。');
} else {
  console.log('ユーザー入力に無効な文字が含まれています。');
}

上記のコードでは、allowedCharactersという文字列に許可された文字を定義しています。

ユーザー入力userInputを[…userInput]でスプレッド構文を使って文字の配列に変換し、everyメソッドを使って各文字がallowedCharactersに含まれているかどうかをチェックしています。

実行結果

ユーザー入力は有効です。

ユーザー入力が許可された文字のみで構成されている場合は、適切なメッセージが表示されます。

このように、includesメソッドを使って文字列の妥当性チェックを簡潔に行うことができます。

○サンプルコード7：URLのパラメータ存在チェック

Webアプリケーションを開発していると、URLのクエリパラメータの存在チェックが必要になることがあります。

includesメソッドを使えば、簡単にパラメータの有無を確認できます。

const url = 'https://example.com/search?q=JavaScript&category=programming';

if (url.includes('category=')) {
  console.log('URLにcategoryパラメータが含まれています。');
} else {
  console.log('URLにcategoryパラメータが含まれていません。');
}

上記のコードでは、URLを表すurl文字列に対して、includesメソッドを使って’category=’という部分文字列が含まれているかどうかをチェックしています。

実行結果

URLにcategoryパラメータが含まれています。

URLにcategoryパラメータが存在する場合は、適切なメッセージが表示されます。

このように、includesメソッドを使ってURLのパラメータ存在チェックを手軽に行うことができます。

○サンプルコード8：文字列の部分一致検索

文字列内で特定の部分文字列を検索したい場合、includesメソッドが役立ちます。

大文字と小文字を区別しない検索も可能です。

const text = 'The quick brown fox jumps over the lazy dog.';
const searchTerm = 'Fox';

if (text.toLowerCase().includes(searchTerm.toLowerCase())) {
  console.log(`テキストに「${searchTerm}」が含まれています。`);
} else {
  console.log(`テキストに「${searchTerm}」が含まれていません。`);
}

上記のコードでは、textという文字列内でsearchTermという部分文字列を検索しています。

toLowerCase()メソッドを使って大文字と小文字を区別せずに検索しています。

実行結果

テキストに「Fox」が含まれています。

searchTermが大文字で指定されていても、textの対応する部分が小文字であっても、includesメソッドは一致を検出します。

このように、includesメソッドを使って柔軟な部分一致検索を行うことができます。

●includesメソッドと他のメソッドの組み合わせ

includesメソッドは単独で使用するだけでなく、他のメソッドと組み合わせることでより柔軟で強力な機能を実現できます。

ここでは、includesメソッドとindexOfメソッド、そしてsliceメソッドを組み合わせた活用例を見ていきましょう。

○サンプルコード9：includesとindexOfの併用

includesメソッドは要素の存在チェックに優れていますが、要素のインデックスを取得することはできません。

そこで、indexOfメソッドと組み合わせることで、要素の存在チェックとインデックスの取得を同時に行うことができます。

const fruits = ['apple', 'banana', 'orange', 'melon'];
const searchFruit = 'banana';

if (fruits.includes(searchFruit)) {
  const index = fruits.indexOf(searchFruit);
  console.log(`${searchFruit}は配列のインデックス${index}に存在します。`);
} else {
  console.log(`${searchFruit}は配列内に存在しません。`);
}

上記のコードでは、fruitsという配列内でsearchFruitが存在するかどうかをincludesメソッドでチェックしています。

存在する場合は、indexOfメソッドを使ってそのインデックスを取得し、適切なメッセージを表示します。

実行結果

bananaは配列のインデックス1に存在します。

このように、includesメソッドとindexOfメソッドを組み合わせることで、要素の存在チェックとインデックスの取得を効率的に行うことができます。

○サンプルコード10：includesとsliceの組み合わせ

includesメソッドで部分文字列の存在チェックを行った後、sliceメソッドを使ってその部分文字列を抽出することができます。

これにより、文字列の一部を切り出すことが可能です。

const sentence = 'The quick brown fox jumps over the lazy dog.';
const word = 'fox';

if (sentence.includes(word)) {
  const startIndex = sentence.indexOf(word);
  const endIndex = startIndex + word.length;
  const extractedWord = sentence.slice(startIndex, endIndex);
  console.log(`文章から抽出された単語: ${extractedWord}`);
} else {
  console.log(`文章に単語 "${word}" は含まれていません。`);
}

上記のコードでは、sentenceという文章の中にwordが含まれているかどうかをincludesメソッドでチェックしています。

含まれている場合は、indexOfメソッドでwordの開始インデックスを取得し、sliceメソッドを使ってその単語を抽出します。

実行結果

文章から抽出された単語: fox

このように、includesメソッドとsliceメソッドを組み合わせることで、文字列内の特定の部分文字列を検索し、抽出することができます。

●よくあるエラーと対処法

includesメソッドを使っていると、時々思わぬエラーに遭遇することがあります。

ここでは、よく発生するエラーとその対処法を見ていきましょう。

エラーを理解し、適切に対処できるようになることで、スムーズにプログラミングを進められるようになります。

○大文字と小文字の区別によるエラー

includesメソッドは大文字と小文字を区別するため、検索する要素や部分文字列の大文字と小文字が完全に一致していないと、意図した結果が得られないことがあります。

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.includes('apple')); // 出力結果: false

上記のコードでは、配列内の要素は大文字で始まっているのに対し、検索する要素は小文字で指定されているため、includesメソッドはfalseを返します。

対処法としては、配列内の要素と検索する要素の大文字と小文字を統一するか、検索前に両者を小文字（または大文字）に変換することです。

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.map(fruit => fruit.toLowerCase()).includes('apple')); // 出力結果: true

上記のコードでは、配列内の要素をmapメソッドで小文字に変換してから、includesメソッドで検索しています。

これにより、大文字と小文字の区別によるエラーを回避できます。

○要素の型の不一致によるエラー

JavaScriptでは、===演算子を使って厳密等価性を比較する場合、値だけでなく型も一致している必要があります。

includesメソッドも内部で厳密等価性を比較するため、要素の型が一致していないとエラーが発生することがあります。

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes('3')); // 出力結果: false

上記のコードでは、配列内の要素は数値型ですが、検索する要素は文字列型で指定されているため、includesメソッドはfalseを返します。

対処法としては、配列内の要素と検索する要素の型を統一することです。

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(Number('3'))); // 出力結果: true

上記のコードでは、検索する要素を文字列型から数値型に変換してから、includesメソッドで検索しています。

これにより、要素の型の不一致によるエラーを回避できます。

○範囲外のインデックス指定によるエラー

includesメソッドの第2引数で検索開始位置を指定する際、配列のインデックスの範囲外の値を指定するとエラーが発生することがあります。

const fruits = ['Apple', 'Banana', 'Orange'];
console.log(fruits.includes('Banana', 5)); // 出力結果: false

上記のコードでは、配列のインデックスの範囲外である5を検索開始位置として指定しているため、includesメソッドは常にfalseを返します。

対処法としては、検索開始位置が配列のインデックスの範囲内であることを確認してから、includesメソッドを呼び出すことです。

const fruits = ['Apple', 'Banana', 'Orange'];
const startIndex = 1;
if (startIndex >= 0 && startIndex < fruits.length) {
  console.log(fruits.includes('Banana', startIndex)); // 出力結果: true
}

上記のコードでは、検索開始位置が配列のインデックスの範囲内であることを確認してから、includesメソッドを呼び出しています。

これにより、範囲外のインデックス指定によるエラーを回避できます。

●includesメソッドの応用例

includesメソッドは、配列や文字列操作の基本的な場面だけでなく、より複雑なユースケースでも活躍します。

ここでは、includesメソッドのさらなる応用例を見ていきましょう。

オブジェクトの存在チェックや複数条件のフィルタリング、日付や パスワードの妥当性チェックなど、実務で役立つテクニックを身につけましょう。

○サンプルコード11：配列内のオブジェクトの存在チェック

配列内にオブジェクトが存在するかどうかを確認する場合、includesメソッドを使うことができます。

ただし、オブジェクトは参照型のため、単純に includesメソッドを呼び出すだけでは期待した結果が得られません。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
const targetUser = { id: 2, name: 'Bob' };

console.log(users.includes(targetUser)); // 出力結果: false

上記のコードでは、配列内に targetUser と同じプロパティを持つオブジェクトが存在するにもかかわらず、includesメソッドは false を返します。

これは、オブジェクトの比較が参照に基づいて行われるためです。

対処法としては、配列内のオブジェクトを1つずつ確認し、目的のオブジェクトと一致するかどうかを判定する必要があります。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
const targetUser = { id: 2, name: 'Bob' };

const isUserExists = users.some(user => user.id === targetUser.id && user.name === targetUser.name);

console.log(isUserExists); // 出力結果: true

上記のコードでは、someメソッドを使って配列内のオブジェクトを1つずつチェックし、targetUser と一致するオブジェクトが存在するかどうかを判定しています。

○サンプルコード12：includesを使った複数条件のフィルタリング

includesメソッドを使って、複数の条件に基づいて配列をフィルタリングすることができます。

const products = [
  { name: 'Apple', category: 'Fruit', price: 100 },
  { name: 'Banana', category: 'Fruit', price: 80 },
  { name: 'Carrot', category: 'Vegetable', price: 120 },
  { name: 'Donut', category: 'Dessert', price: 150 },
];

const selectedCategories = ['Fruit', 'Dessert'];
const maxPrice = 200;

const filteredProducts = products.filter(product =>
  selectedCategories.includes(product.category) && product.price <= maxPrice
);

console.log(filteredProducts);

上記のコードでは、productsという商品の配列から、selectedCategoriesに含まれるカテゴリーに属し、かつ価格がmaxPrice以下の商品をフィルタリングしています。

includesメソッドを使ってカテゴリーの存在チェックを行い、&&演算子で価格の条件とつなげています。

実行結果

[
  { name: 'Apple', category: 'Fruit', price: 100 },
  { name: 'Banana', category: 'Fruit', price: 80 },
  { name: 'Donut', category: 'Dessert', price: 150 }
]

このように、includesメソッドを使って複数の条件に基づいた配列のフィルタリングを行うことができます。

○サンプルコード13：日付の妥当性チェック

includesメソッドを使って、ユーザー入力された日付の妥当性をチェックすることができます。

const validateDate = (dateString) => {
  const datePattern = /^\d{4}-\d{2}-\d{2}$/;
  if (!datePattern.test(dateString)) {
    return false;
  }

  const [year, month, day] = dateString.split('-');
  const date = new Date(year, month - 1, day);

  const validMonths = '01,02,03,04,05,06,07,08,09,10,11,12';
  const validDays = '01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31';

  return (
    date.getFullYear() == year &&
    validMonths.includes(month) &&
    validDays.includes(day)
  );
};

console.log(validateDate('2023-06-15')); // 出力結果: true
console.log(validateDate('2023-13-01')); // 出力結果: false
console.log(validateDate('2023-02-29')); // 出力結果: false

上記のコードでは、validateDate関数を定義し、ユーザー入力された日付の妥当性をチェックしています。

まず、正規表現を使って日付の形式が「YYYY-MM-DD」であることを確認します。

次に、年、月、日を取得し、Dateオブジェクトを作成します。

最後に、includesメソッドを使って月と日が有効な範囲内にあるかどうかを確認し、結果を返します。

○サンプルコード14：パスワードの強度チェック

includesメソッドを使って、パスワードの強度をチェックすることができます。

const checkPasswordStrength = (password) => {
  const lengthCheck = password.length >= 8;
  const uppercaseCheck = /[A-Z]/.test(password);
  const lowercaseCheck = /[a-z]/.test(password);
  const digitCheck = /\d/.test(password);
  const specialCharCheck = /[!@#$%^&*]/.test(password);

  const checks = [lengthCheck, uppercaseCheck, lowercaseCheck, digitCheck, specialCharCheck];
  const strength = checks.filter(Boolean).length;

  const feedback = [
    '非常に弱いパスワードです。',
    '弱いパスワードです。',
    '中程度の強さのパスワードです。',
    '強力なパスワードです。',
    '非常に強力なパスワードです。'
  ];

  return feedback[strength];
};

console.log(checkPasswordStrength('password')); // 出力結果: 弱いパスワードです。
console.log(checkPasswordStrength('Password123')); // 出力結果: 中程度の強さのパスワードです。
console.log(checkPasswordStrength('Pa$$w0rd123')); // 出力結果: 非常に強力なパスワードです。

上記のコードでは、checkPasswordStrength関数を定義し、パスワードの強度をチェックしています。

パスワードの長さ、大文字、小文字、数字、特殊文字の含有をそれぞれ確認し、条件を満たす数に基づいてパスワードの強度を判定します。

includesメソッドを使って、条件を満たす数に応じたフィードバックメッセージを返します。

まとめ

JavaScriptのincludesメソッドは、配列や文字列操作において非常に便利な機能を提供してくれます。

基本的な使い方から応用的なテクニックまで、様々なシーンで活用できるincludesメソッドを習得することで、コードの可読性と効率性が大幅に向上するでしょう。

includesメソッドを他のメソッドと組み合わせることで、より柔軟で強力なプログラミングが可能になります。

エラーが発生した場合は、原因を特定し、適切な対処を行うことが重要です。

includesメソッドを使いこなすことで、JavaScriptのスキルアップにつながり、より高度なプログラミングに挑戦できるようになるでしょう。