中学生でもわかる〜JavaScriptの「.includes()」メソッド入門

programming
学習コースキャンペーンバナー

こんにちは、フローです。

今回は、JavaScriptの非常に便利なメソッド、

“.includes()”について話をしましょう。

「.includes()」とは

JavaScriptのメソッドの一つで、

ある配列や文字列が特定の要素や文字列を含んでいるかどうかを調べるために使用されます。

結果は(true)または(false)というブール値で返されます。


たとえば、友達の名前のリストがあり、

特定の友達がそのリストにいるかどうかを確認したいとしましょう。

それが「.includes()」メソッドの出番です!

次に、”.includes()”メソッドをどのような場面で使うか、見てみましょう。

基本的には、配列や文字列に特定の要素が含まれているかどうかを確認する必要がある場合に使用します。

ユーザー名のリストがあるとして、

新しいユーザーがその名前を使用できるかどうかをチェックするときなどに便利です。

配列に対する使用

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

このコードでは、

“fruits”という配列が「apple」を含んでいるかどうかをチェックしています。

結果は「true」です。

次に、「grape」が含まれているかをチェックし、結果は「false」です。

つまり、「grape」は「fruits」配列には含まれていないということです。

文字列に対する使用

let sentence = "The quick brown fox jumps over the lazy dog";
console.log(sentence.includes("fox")); // true
console.log(sentence.includes("cat")); // false

上記のコードでは、

文章が「fox」を含むかどうかをチェックしています。

結果は「true」です。

次に、「cat」が含まれているかをチェックし、

結果は「false」です。つまり、「cat」はこの文章には含まれていないということです。

インデックスを指定して使用

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

このコードでは、配列”numbers”に値2が存在するかどうかをチェックしています。

しかし、2番目のパラメーターに2を指定しているので、

インデックス2(つまり、3番目の要素)以降で値2が存在するかどうかをチェックしています。

そのため、結果は「false」になります。

次に、インデックス1からチェックすると、値2が存在するため、「true」を返します。

includes()メソッドの注意点

・includes()メソッドは大文字と小文字を区別します。

つまり、”Apple”と”apple”は異なるものとして扱われます。

・NaNを探すときは、特殊なケースがあります。

NaNとは、”Not a Number”の略で、数字ではない値を表します。

他の多くの比較演算子と異なり、

includes()メソッドはNaNが配列に含まれている場合にtrueを返します。

・配列に特定のオブジェクトが存在するかどうかを確認するために使用することはできません。

つまり、オブジェクトの参照を比較しますが、オブジェクトの内容自体は比較しません。

以上がJavaScriptの”.includes()”メソッドの基本的な使い方と注意点です。

これは本当に便利なツールで、特定の要素や文字列が存在するかどうかを簡単に確認できます。

あなたがプログラミングの旅を続ける中で、

このメソッドがどれほど役立つかを実感することでしょう。

まとめ

“.includes()”メソッドは

JavaScriptで特定の要素や文字列が配列や文字列に含まれているかをチェックするためのツールです。

大文字と小文字を区別し、

NaNを特別に扱い、オブジェクトの内容ではなく参照を比較します。

上記の例を参考に、自分のコードで試してみてください。

レッツチャレンジ!