JavaScriptのincludesメソッドについて徹底解説

（最終更新月：2023年11月）

✔以下のような方に向けて書かれています

✔当記事を通じて、伝える内容は以下のとおりです

• Javascript includesメソッドの基礎知識
• Javascript includesメソッドの書き方とそれを活用する方法
• Javascript includesメソッドの具体的な実例

当記事では、Javascript includesメソッドの基本的な使い方から、高度な活用法まで、具体的な例を交えつつ丁寧に解説しています。

最後までお付き合いいただけると幸いです。

JavaScriptとincludesの基本

こちらでは、JavaScriptとその中でのincludesメソッドの重要性についてお伝えしていきます。

JavaScriptの基本的なメソッドを理解することで、効率的なコーディングが可能です。

• JavaScriptとその重要性
• ‘includes’メソッドの概要とその役割

JavaScriptとその重要性

JavaScriptは、ウェブページの動的な動作を制御するための言語です。

多くのウェブサイトやアプリケーションで使用されており、その知識はウェブ開発者にとって必須となっています。

JavaScriptを学ぶことで、ウェブページをよりインタラクティブにできます。

‘includes’メソッドの概要とその役割

includesメソッドは、配列や文字列に特定の要素や文字列が含まれているかどうかを確認するためのメソッドです。

このメソッドを使用することで、データの存在確認や条件分岐の処理を簡単におこなえます。

‘includes’メソッドとその構文

こちらでは、includesメソッドの基本的な構文やその特性について詳しく見ていきましょう。

includesメソッドの正確な使用方法を理解することで、データの検索や確認作業を効率的におこなえます。

• その基本構造とわかりやすい説明
• 引数の形式と機能
• 返り値とその役割

その基本構造とわかりやすい説明

includesメソッドの基本的な構文は以下のようになります。

array.includes(elementToSearch, fromIndex)

arrayは検索を行いたい配列、elementToSearchは検索したい要素、fromIndexは検索を開始するインデックスを指定します。

引数の形式と機能

includesメソッドは、最大で2つの引数を取ります。

1. elementToSearch（必須）: 検索したい要素
2. fromIndex（オプション）: 検索を開始するインデックス。指定しない場合は、配列の先頭から検索が始まります

返り値とその役割

includesメソッドは、指定した要素が配列に含まれている場合はtrue、含まれていない場合はfalseを返します。

この返り値を利用して、条件分岐などの処理をおこなえます。

‘includes’メソッドの具体的な使用例

こちらでは、includesメソッドの具体的な使用例やその応用について詳しく見ていきましょう。

includesメソッドを様々なシチュエーションで適切に使用することで、データの操作や確認作業を効率的におこなえます。

• 基本的な使い方とその解説
• ‘includes’メソッドと配列との結合
• ‘includes’メソッドと文字列との結合
• 大きな配列での’includes’メソッドの使用例
• 負の値での’includes’メソッドの挙動
• ‘includes’メソッドの一般的な応用例

基本的な使い方とその解説

includesメソッドの基本的な使い方は、配列や文字列に特定の要素や文字列が含まれているかを確認することです。

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

簡単に要素の存在を確認できます。

‘includes’メソッドと配列との結合

配列に対してincludesメソッドを使用すると、その配列に特定の要素が存在するかを確認できます。

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

‘includes’メソッドと文字列との結合

文字列に対してもincludesメソッドを使用でき、部分文字列の存在を確認できます。

const greeting = "Hello, world!";
console.log(greeting.includes("Hello"));  // true
console.log(greeting.includes("Bye"));    // false

大きな配列での’includes’メソッドの使用例

大きな配列に対してもincludesメソッドは効率的に動作します。

非常に大きなデータセットでは、パフォーマンスの問題が生じる可能性があるため、注意が必要です。

負の値での’includes’メソッドの挙動

includesメソッドの第二引数として負の値を指定すると、配列の末尾からのオフセットとして機能します。

const colors = ["red", "green", "blue"];
console.log(colors.includes("red", -3));  // true

‘includes’メソッドの一般的な応用例

ウェブ開発の中で、ユーザーからの入力やAPIからのレスポンスなど、不確定なデータに対して特定の値の存在を確認する際にincludesメソッドは非常に役立ちます。

‘includes’メソッド使用時の注意点

こちらでは、includesメソッドを使用する際の潜在的な問題点やその解決策について詳しく解説していきます。

• 潜在的な問題点
• 解決策

潜在的な問題点

includesメソッドはNaN（Not a Number）の確認にも対応していますが、オブジェクトの等価性の確認には使用できません。

const array = [NaN];
console.log(array.includes(NaN));  // true

const objArray = [{ id: 1 }, { id: 2 }];
console.log(objArray.includes({ id: 1 }));  // false

解決策

オブジェクトの等価性を確認する場合は、JSON.stringifyや他のヘルパー関数を使用することで、期待する結果を得られます。

‘includes’メソッドと’indexOf’メソッドの比較

こちらでは、includesメソッドとindexOfメソッドの違いや使い分けについて詳しく解説していきます。

• 使い分けの基準とその解説
• それぞれのメソッドの用途

使い分けの基準とその解説

includesメソッドは要素の存在を確認するために使用され、indexOfメソッドは要素のインデックスを取得するために使用されます。

indexOfは要素が存在しない場合、-1を返します。

const animals = ["cat", "dog", "fish"];
console.log(animals.includes("dog"));  // true
console.log(animals.indexOf("dog"));   // 1

それぞれのメソッドの用途

includesは単純な存在確認に、indexOfは要素の位置や重複要素の確認など、より詳細な情報が必要な場合に使用されます。

まとめ

当記事では、Javascript includesメソッドについて見てきました。

• このメソッドは、日常のコーディング作業で頻繁に使用されるため、その挙動や特性をしっかりと理解しておくことは非常に重要
• JavaScriptのincludesメソッドは、データの存在確認を簡単かつ効率的に行うための強力なツール
• 正確な使用方法とその応用を理解することで、日常のコーディング作業を大いに助けられる

JavaScriptの学習は終わりがありません。

手を動かして学びつつ、JavaScriptのスキルをさらに磨いていきましょう。