デジタルトレンドナビ
システム開発

2024.05.27

JavaScriptのincludesメソッド:配列や文字列に要素が含まれているかどうかを確認する便利な方法

JavaScriptはその柔軟性と強力な機能で、ウェブ開発の世界において欠かせない言語です。

特に配列や文字列を扱う際に便利なメソッドが数多く提供されており、その中のincludesメソッドは、特定の要素が配列や文字列に含まれているかどうかを簡単に判定できる非常に有用な機能です。


この記事では、JavaScriptのincludesメソッドに焦点を当て、初心者の方でも理解しやすいように、includesメソッドの基本的な使い方から、実践的なコード例を交えながら解説していきます。

効率的なデータ検索と処理のスキルを身につけるための第一歩として、ぜひこの機会にincludesメソッドの魅力を探ってみましょう。

この記事でわかること

  • includesメソッドを用いた配列や文字列内の要素検索の基本。
  • 文字列と配列でのincludesメソッドの使用方法。
  • includesメソッドを活用した便利な応用例。
  • includesメソッド使用時の注意点。

includesメソッドとは

includesメソッドとは

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


このメソッドは真偽値(trueまたはfalse)を返し、簡単に条件分岐や検証を行うことができます。例えば、配列に対して使用する場合、[1, 2, 3].includes(2)はtrueを返します。文字列に対しては、”hello”.includes(“ell”)がtrueを返します。includesメソッドは、特にデータの存在確認や検索機能を実装する際に、コードの可読性と効率性を向上させる強力なツールです。

includesメソッドの使い方

includesメソッドの使い方

1.配列での使い方

配列に対してincludesメソッドを使用する場合は、以下の構文になります。

JavaScript
const array = [‘apple’, ‘banana’, ‘orange’];

// ‘banana’が配列に含まれているかどうかを確認
const isIncluded = array.includes(‘banana’);

console.log(isIncluded); // true

上記の例では、arrayという配列に’banana’という要素が含まれているかどうかを確認しています。includesメソッドは、要素が見つかった場合はtrue、見つからなかった場合はfalseを返します。

2.文字列での使い方

文字列に対してincludesメソッドを使用する場合は、以下の構文になります。

JavaScript
const str = ‘Hello, world!’;

// ‘world’が文字列に含まれているかどうかを確認
const isIncluded = str.includes(‘world’);

console.log(isIncluded); // true

上記の例では、strという文字列に’world’という文字列が含まれているかどうかを確認しています。includesメソッドは、大文字小文字を区別します。

includesメソッドの便利な応用例

includesメソッドの便利な応用例

1.配列から特定の要素を削除する

includesメソッドを使用して、配列から特定の要素を削除することができます。

JavaScript
const array = [‘apple’, ‘banana’, ‘orange’];

// ‘banana’を配列から削除
const newArray = array.filter(element => !element.includes(‘banana’));

console.log(newArray); // [‘apple’, ‘orange’]

上記の例では、filterメソッドを使用して、’banana’を含まない新しい配列を作成しています。

2.オブジェクトの配列から特定のオブジェクトを見つける

includesメソッドを使用して、オブジェクトの配列から特定のオブジェクトを見つけることができます。

JavaScript
const objects = [{ id: 1, name: ‘John’ }, { id: 2, name: ‘Mary’ }];

// idが2のオブジェクトを見つける
const object = objects.find(obj => obj.id === 2);

console.log(object); // { id: 2, name: ‘Mary’ }

上記の例では、findメソッドを使用して、idが2のオブジェクトを見つけています。

includesメソッドの注意点

includesメソッドの注意点
  • includesメソッドは、大文字小文字を区別します。
  • NaNは、NaNと厳密に一致する場合のみtrueを返します。
  • includesメソッドは、オブジェクトの参照値を比較します。

まとめ

まとめ

この記事では、JavaScriptのincludesメソッドについて詳しく解説しました。includesメソッドは配列や文字列内に特定の要素や文字列が含まれているかどうかを確認するために非常に便利です。配列や文字列での使用方法、さらには便利な応用例までを紹介し、データの存在確認や検索機能の実装に役立つことを見てきました。特に、大文字小文字を区別する特性や、特定のオブジェクトを効率的に検索する方法についても触れ、includesメソッドの有効活用方法を学びました。このメソッドを活用して、より効率的にコードを書くことができるように、継続して学習していきましょう。


投稿者

  • デジタルトレンドナビ編集部

    システム開発、Webサイト制作、ECサイトの構築・運用、デジタルトランスフォーメーション(DX)など、デジタルビジネスに関わる多岐の領域において、最新のトレンド情報や実践的なノウハウを発信してまいります。