【TypeScript】includes関数を完全マスター！17の実用コードで徹底解説

はじめに
●TypeScriptとincludes関数の基本
- ○TypeScriptとは
- ○includes関数の役割
●includes関数の使い方
●includes関数の応用例
●注意点と対処法
- ○サンプルコード8：NaNの扱い
- ○サンプルコード9：undefinedとnullの違い
●カスタマイズの方法
- ○サンプルコード10：includes関数のカスタマイズ
- ○サンプルコード11：拡張関数の作成
●さらなる活用のヒント
まとめ

はじめに

TypeScriptは、大規模開発や複雑なプロジェクトに適しているJavaScriptのスーパーセットです。

TypeScriptが提供する型安全性やクラスベースのオブジェクト指向プログラミング、そして高度なエディタのサポートなど、多くの開発者がその恩恵を受けています。

その中でも、includes関数は特に有用な機能として多くの開発者に活用されています。

この記事では、TypeScriptのincludes関数を初心者向けに詳しく解説します。

具体的なサンプルコードとともにその使い方や応用例を学び、プログラムをより柔軟に活用する方法を身につけましょう。

●TypeScriptとincludes関数の基本

TypeScriptの強力な機能の一つに包含されるincludes関数は、プログラマーにとってコード内で特定の要素や文字列が存在するかどうかを簡単に確認できる手段を紹介します。

これらの基本的な概念を把握することから始めて、TypeScriptの包括的な機能の理解と適用に進むことができます。

続いて、TypeScriptの背後にあるコンセプトについて詳しく見ていきましょう。

○TypeScriptとは

TypeScriptは、Microsoftが開発したJavaScriptのスーパーセットとして誕生しました。

JavaScriptの全ての機能に加えて、静的型付けやインターフェイスなどの新しい機能を提供します。

これにより、バグを早期に検出したり、コードの可読性を向上させたりすることが可能になりました。

特に大規模なプロジェクトや、チームでの開発を行う際に、TypeScriptの型システムはコードの品質を維持する上で大変有効です。

また、TypeScriptはJavaScriptとの互換性が高く、既存のJavaScriptのコードを少しの手間でTypeScriptに移行することも可能です。

○includes関数の役割

JavaScriptおよびTypeScriptで、ある配列や文字列が特定の要素や文字列を含んでいるかをチェックする際にincludes関数を使用します。

この関数は真偽値を返し、指定した要素が含まれていればtrue、含まれていなければfalseとなります。

例として、次のコードを考えてみましょう。

// 数値の配列を定義
let numbers = [1, 2, 3, 4, 5];

// 配列が3を含むかチェック
let isThreeIncluded = numbers.includes(3);

このコードでは、数値の配列を定義しています。そして、includes関数を使って配列が3を含むかどうかをチェックしています。

このコードを実行すると、isThreeIncludedの値はtrueとなります。

なぜなら、配列numbersには3が含まれているからです。

同様に、文字列に対してもincludes関数を使用することができます。

例えば、次のように文字列内に特定の単語やフレーズが含まれているかを調べることができます。

let greeting = "こんにちは、世界";

// 文字列が「世界」を含むかチェック
let hasWorld = greeting.includes("世界");

このコードを実行すると、hasWorldの値はtrueとなります。

なぜなら、文字列greetingは”世界”という単語を含んでいるからです。

●includes関数の使い方

TypeScriptのincludes関数は、ある配列や文字列が特定の要素や文字列を含んでいるかを確認するための非常に便利な関数です。

この関数を使うことで、プログラムの中でデータの存在チェックを簡単に行うことができます。

今回は、このincludes関数の基本的な使い方をサンプルコードとともに詳しく解説していきます。

○サンプルコード1：基本的な使い方

まずは、配列や文字列に特定の要素や文字列が含まれているかを確認する基本的な使い方から見ていきましょう。

// 配列の中に特定の要素が存在するかをチェック
let fruits = ['apple', 'banana', 'cherry'];
let hasApple = fruits.includes('apple');
console.log(hasApple);  // trueが出力されます。

// 文字列の中に特定の文字列が存在するかをチェック
let sentence = 'TypeScriptはとても強力な言語です。';
let hasTypeScript = sentence.includes('TypeScript');
console.log(hasTypeScript);  // trueが出力されます。

このコードでは、まず配列fruitsを使って、’apple’という文字列がその中に存在するかをincludes関数で確認しています。

存在する場合はtrue、存在しない場合はfalseが返ります。

上の例では、’apple’は配列fruitsの中に存在しているので、hasAppleにはtrueが代入されます。

次に、文字列sentenceを使って、’TypeScript’という文字列がその中に存在するかをincludes関数で確認しています。

同様に、存在する場合はtrue、存在しない場合はfalseが返ります。

上の例では、’TypeScript’は文字列sentenceの中に存在しているので、hasTypeScriptにはtrueが代入されます。

これらのコードを実行すると、console.log(hasApple);の行でtrueが出力され、console.log(hasTypeScript);の行でもtrueが出力されます。

これにより、特定の要素や文字列がデータの中に含まれているかどうかを簡単にチェックすることができます。

○サンプルコード2：配列内の検索

TypeScriptを使用するとき、データの中から特定の要素を探す必要がしばしば生じます。

これは特に、大量のデータを扱う際や、特定の条件を満たす要素をフィルタリングするときなどに役立ちます。

ここでは、TypeScriptのincludes関数を使って、配列内の要素を効率的に検索する方法を詳しく説明します。

includes関数は、配列や文字列の中に特定の要素や文字列が存在するかどうかを判断する関数です。存在する場合はtrueを、存在しない場合はfalseを返します。

この関数を使用すると、手間をかけずにデータの中に特定の要素があるかどうかを確認できます。

まず、基本的な使用方法を確認しましょう。

// 基本的な配列の作成
const fruits: string[] = ["apple", "banana", "cherry", "date"];

// 'apple'という要素がfruitsの中に存在するかをチェック
const hasApple = fruits.includes("apple");
console.log(hasApple); // true

このコードでは、fruitsという名前の文字列型の配列を作成しています。

その後、includes関数を使って、この配列の中に’apple’という要素が存在するかどうかをチェックしています。

結果として、’apple’はfruits配列の中に存在するため、hasAppleはtrueと評価されます。

では、実際に上記のコードを実行すると、次の結果が得られます。

“apple”という文字列は”fruits”配列に含まれているため、結果はtrueになります。

従って、コンソールにはtrueと表示されます。

次に、存在しない要素を検索する場合を考えてみましょう。

// 'grape'という要素がfruitsの中に存在するかをチェック
const hasGrape = fruits.includes("grape");
console.log(hasGrape); // false

このコードを実行すると、”grape”という文字列は”fruits”配列に含まれていないため、結果はfalseになります。従って、コンソールにはfalseと表示されます。

このように、includes関数を使用することで、配列内の特定の要素の存在を簡単に確認することができます。

特に、大量のデータや複雑なデータ構造を扱う際に、この関数は非常に役立ちます。

○サンプルコード3：文字列の中の検索

TypeScriptでは、文字列の中から特定の部分文字列が存在するかを調べるためにincludes関数を使用します。

この機能はJavaScriptの文字列のメソッドとしても提供されているものですが、TypeScriptでの型安全な利用を前提とした説明を行います。

では、具体的にincludes関数の使用例を見てみましょう。

const message: string = "TypeScriptはJavaScriptのスーパーセットです。";
const keyword: string = "JavaScript";

if (message.includes(keyword)) {
    console.log("指定されたキーワードが文字列内に存在します。");
} else {
    console.log("指定されたキーワードは文字列内に存在しません。");
}

このコードでは、messageという変数に格納された文字列の中に、keywordという変数に格納された文字が含まれているかをincludes関数を使って調べています。

もし含まれていれば、”指定されたキーワードが文字列内に存在します。”という文を出力し、そうでなければ”指定されたキーワードは文字列内に存在しません。”という文を出力します。

このコードを実行すると、messageの中に”JavaScript”というキーワードが存在するため、”指定されたキーワードが文字列内に存在します。”という文が出力されるでしょう。

また、includes関数は第二引数として、検索を開始する位置を指定することもできます。

これにより、文字列の特定の位置から後ろを検索対象とすることが可能です。

const position: number = 10;
if (message.includes(keyword, position)) {
    console.log("指定された位置から後ろで、キーワードが文字列内に存在します。");
} else {
    console.log("指定された位置から後ろで、キーワードは文字列内に存在しません。");
}

このコードでは、positionという変数で指定された位置から文字列の検索を開始します。

この例では、10文字目から検索を開始しています。

このコードを実行すると、10文字目以降で”JavaScript”というキーワードがmessageの中に存在するため、”指定された位置から後ろで、キーワードが文字列内に存在します。”という文が出力されるでしょう。

○サンプルコード4：条件を持つオブジェクトの検索

TypeScriptのincludes関数は、配列や文字列内に特定の要素や文字が含まれているかどうかを調べるのに非常に便利です。

しかし、オブジェクトの配列の中から特定の条件を持つオブジェクトを探す場合、少し工夫が必要です。

たとえば、次のようなオブジェクトの配列を考えてみましょう。

type User = {
  id: number;
  name: string;
  age: number;
};

const users: User[] = [
  { id: 1, name: "田中", age: 25 },
  { id: 2, name: "佐藤", age: 30 },
  { id: 3, name: "鈴木", age: 20 },
];

このオブジェクトの配列の中から、例えば名前が”田中”のユーザーが存在するかどうかを調べるためには、includes関数だけでは難しいです。

そこで、some関数を組み合わせて利用する方法があります。

このコードでは、some関数を使って条件を持つオブジェクトの検索を行っています。

const isTanakaExists = users.some((user) => user.name === "田中");
console.log(isTanakaExists);

このコードを実行すると、usersの中に”田中”という名前のユーザーが存在すればtrueを、存在しなければfalseを出力します。

ここでは、some関数を利用して、配列の中の各要素に対して条件を持つオブジェクトが1つでも存在するかどうかを確認しています。

some関数の中のコールバック関数で指定した条件に一致する要素が1つでもあれば、trueを返します。

結果として、このサンプルコードを実行すると、”田中”という名前のユーザーがusersの中に存在しているため、trueが出力されます。

●includes関数の応用例

includes関数は、基本的な使い方だけでなく、さまざまなシチュエーションでの応用が可能です。

ここでは、その応用の一部を紹介します。具体的なサンプルコードを交えて、その動作や使い方を解説します。

○サンプルコード5：複数の要素を一度に検索

TypeScriptで複数の要素が配列や文字列に存在するか一度に確認したい場合、includes関数を利用することができます。

下記のコードでは、指定した要素群が配列内に全て存在するかを確認する関数を実装しています。

// 複数の要素が配列に存在するか確認する関数
function includesAll(array: any[], elements: any[]): boolean {
    return elements.every(element => array.includes(element));
}

// 使用例
const fruits = ["apple", "banana", "cherry", "date"];
const searchFruits1 = ["apple", "banana"];
const searchFruits2 = ["apple", "fig"];

console.log(includesAll(fruits, searchFruits1)); // true
console.log(includesAll(fruits, searchFruits2)); // false

このコードでは、includesAll関数を使って、配列fruitsにsearchFruits1やsearchFruits2の要素が全て存在するかを確認しています。

everyメソッドとincludes関数を組み合わせることで、指定した要素群が全て配列内に存在するかを簡単に確認することができます。

このコードを実行すると、searchFruits1の要素はfruitsに全て存在しているのでtrueを返します。

一方、searchFruits2にはfruitsに存在しない”fig”が含まれているため、falseを返します。

○サンプルコード6：大文字小文字を区別しない検索

TypeScriptのincludes関数を使う際、大文字と小文字を区別することがデフォルトです。しかし、大文字と小文字を区別しない検索をしたい場合もあるでしょう。

その際には、少し工夫する必要があります。

具体的には、検索対象となる文字列や配列の要素を一時的にすべて小文字や大文字に変換し、その上でincludes関数を利用する方法が考えられます。

その方法を用いたサンプルコードを紹介します。

// 文字列内での大文字小文字を区別しない検索の例
const sampleString = "TypeScriptは楽しい！";
const target = "typescript";
const isIncludes = sampleString.toLowerCase().includes(target.toLowerCase());
console.log(isIncludes);

このコードでは、まずsampleStringに代入された文字列をtoLowerCase関数を使ってすべて小文字に変換しています。

同様に、検索したい文字列targetも小文字に変換します。

その上でincludes関数を利用し、sampleStringにtargetが含まれているかどうかを確認しています。

このコードを実行すると、結果はtrueとなります。

もともとsampleStringの中には”TypeScript”という大文字小文字が混在した形で文字が存在しますが、両方を小文字に変換して検索しているため、正しくマッチすることができます。

同様の方法で、配列内の文字列に対しても大文字小文字を区別しない検索が行えます。

// 配列内での大文字小文字を区別しない検索の例
const sampleArray = ["JavaScript", "TypeScript", "Java"];
const targetItem = "typescript";
const isItemIncluded = sampleArray.some(item => item.toLowerCase().includes(targetItem.toLowerCase()));
console.log(isItemIncluded);

上記のコードでは、sampleArrayという配列の中にtargetItemが含まれているかどうかを確認しています。配列の各要素を小文字に変換してから、includes関数を用いて検索しています。

その結果、isItemIncludedにはtrueが格納され、targetItemがsampleArrayの中に存在することが確認できます。

応用例として、この方法を利用して、大文字小文字を区別しない検索機能を持つ関数を独自に定義することも可能です。

その際のサンプルコードは次のようになります。

function includesIgnoreCase(source: string, target: string): boolean {
    return source.toLowerCase().includes(target.toLowerCase());
}

const sample = "TypeScriptの学習";
const result = includesIgnoreCase(sample, "typescript");
console.log(result); // true

このincludesIgnoreCase関数は、2つの文字列を引数として受け取り、第1の文字列の中に第2の文字列が含まれているかどうかを大文字小文字を区別しないで判定します。

この関数を使えば、簡単に大文字小文字を区別しない検索が可能になります。

○サンプルコード7：特定のインデックスからの検索

TypeScriptで文字列や配列を扱う際、特定のインデックスから要素が存在するかを確認したいことがあります。

このような場合、includes関数を利用すると、指定したインデックスからの検索を行うことが可能です。

まず、基本的なincludes関数の使用方法を確認します。

// 文字列での検索
const str: string = "TypeScriptのincludes関数";
const resultStr: boolean = str.includes("includes", 10);

// 配列での検索
const arr: string[] = ["TypeScript", "includes", "関数"];
const resultArr: boolean = arr.includes("includes", 1);

このコードでは、文字列str内と配列arr内で、特定のインデックスから”includes”という文字列が存在するかどうかを検索しています。

具体的には、文字列strでは10番目のインデックスから、配列arrでは1番目のインデックスから、それぞれ検索を開始しています。

includes関数の第二引数に検索を開始するインデックスを指定することで、その位置からの検索が可能になります。

このコードを実行すると、resultStrはtrueとなります。

これは、文字列strの10番目のインデックスから”includes”という文字列が存在するからです。

一方、resultArrもtrueとなります。

これは、配列arrの1番目のインデックスに”includes”という文字列が存在するからです。

●注意点と対処法

TypeScriptにおけるincludes関数は非常に有用ですが、注意すべきポイントや落とし穴もあります。

今回は、これらの注意点とそれに対する対処法について、サンプルコードを交えて詳しく解説します。

○サンプルコード8：NaNの扱い

JavaScriptやTypeScriptにおいて、NaNは”Not a Number”の略であり、数値でないものを示す特殊な値です。

しかし、includes関数を使用する際、NaNの挙動は一般的な値とは異なります。

例として、配列にNaNが含まれているかどうかをチェックするケースを考えます。

const array = [1, 2, NaN, 4, 5];
const result = array.includes(NaN);
console.log(result); // true

このコードでは、配列arrayにNaNが含まれているかどうかをincludes関数でチェックしています。

この場合、includes関数はNaNを正しく検出でき、結果はtrueとなります。

しかし、次のような場合に注意が必要です。

const value1 = NaN;
const value2 = NaN;
console.log(value1 === value2); // false

このコードを実行すると、value1とvalue2が共にNaNであるにも関わらず、比較結果はfalseとなります。

これは、NaNの特性として、自身との比較でもfalseとなるためです。

○サンプルコード9：undefinedとnullの違い

JavaScriptやTypeScriptでは、undefinedとnullは似ているようで異なる2つの特殊な値です。

これらの違いを理解することは、特にincludes関数を使う際に重要になってきます。

undefinedは変数が宣言されているが、値がまだ割り当てられていないときのデフォルトの値です。

一方、nullは明示的に「値がない」ということを表すための値です。

この違いを明確にするためのサンプルコードを紹介します。

// TypeScriptの配列を作成
let sampleArray: (string | null | undefined)[] = ["apple", null, "orange", undefined];

// nullを含むか確認
let hasNull = sampleArray.includes(null);
console.log(hasNull);  // trueを返します。

// undefinedを含むか確認
let hasUndefined = sampleArray.includes(undefined);
console.log(hasUndefined);  // trueを返します。

このコードでは、文字列、null、およびundefinedを要素として持つ配列sampleArrayを作成しています。

その後、includes関数を使用して、配列がnullやundefinedを含むかどうかを確認しています。

このコードを実行すると、trueという結果が2回出力されます。

これは、sampleArrayがnullとundefinedの両方を含んでいるためです。

しかし、nullとundefinedは互換性がないため、それぞれを明示的に検索する必要があります。

たとえば、nullの位置をundefinedで検索しようとすると、結果はfalseになります。

また、このサンプルコードは、配列の要素としてのnullとundefinedの検出に特化していますが、オブジェクトのプロパティや関数の引数、返り値としてのnullやundefinedの検出も同じ考え方で行うことができます。

この違いを理解し、includes関数を使用する際に注意することで、意図しないバグを防ぐことができます。

●カスタマイズの方法

TypeScriptのincludes関数は、柔軟な検索機能を持ちますが、実際の開発シーンではさらに特定の要件に合わせてカスタマイズする必要があることも多いでしょう。

ここでは、includes関数をカスタマイズする方法について、具体的なサンプルコードを用いて解説します。

○サンプルコード10：includes関数のカスタマイズ

考えられるカスタマイズ例として、特定の文字列のリストから一部の文字を強調して検索したいというケースを考えます。

例えば、”apple”や”orange”のようなフルーツ名のリストから、”pp”や”or”などの部分文字列を検索して強調表示するというものです。

この要件を満たすためのサンプルコードを紹介します。

// 文字列の配列定義
const fruits = ["apple", "banana", "orange", "grape"];

// 強調表示を行うカスタマイズ関数
function highlightIncludes(list: string[], query: string): string[] {
    return list.map(item => {
        if (item.includes(query)) {
            return item.replace(query, `<strong>${query}</strong>`);
        }
        return item;
    });
}

// 実行
const result = highlightIncludes(fruits, "pp");
console.log(result);

このコードではhighlightIncludesという関数を使って、指定したクエリを含む文字列を強調表示しています。

具体的には、文字列の配列と検索クエリを引数として受け取り、配列内の各文字列に対してincludes関数を使って検索を行います。

もし検索クエリが文字列内に存在すれば、その部分を<strong>タグで囲んで強調します。

このコードを実行すると、”apple”の”pp”部分が強調された新しい配列が生成され、その結果がコンソールに表示されます。

具体的には、[“apple”, “banana”, “orange”, “grape”]という配列が出力されます。

○サンプルコード11：拡張関数の作成

TypeScriptには、JavaScriptに比べて多くの拡張性があります。

そのため、標準のincludes関数だけでなく、自分自身で拡張関数を作成することができます。

拡張関数とは、既存のクラスやオブジェクトに新しいメソッドを追加することです。

ここでは、TypeScriptでの拡張関数の作成方法について、具体的なサンプルコードとともに解説します。

まず、基本的な構造としては、既存の型に新しいメソッドを追加するための宣言を行います。

このとき、「declare」キーワードを使用します。

下記のサンプルコードは、Array型に新しいメソッド「myIncludes」を追加する例を表しています。

// Array型に新しいメソッド「myIncludes」を追加する拡張
declare global {
    interface Array<T> {
        myIncludes(value: T): boolean;
    }
}

// 新しいメソッド「myIncludes」の実装
Array.prototype.myIncludes = function<T>(value: T): boolean {
    return this.indexOf(value) !== -1;
}

// 実際に使用する例
const numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers.myIncludes(3));  // true
console.log(numbers.myIncludes(6));  // false

このコードでは、Array型に「myIncludes」という新しいメソッドを追加しています。

その後、Arrayのプロトタイプにそのメソッドの具体的な実装を追加しています。

この「myIncludes」メソッドは、指定した値が配列に存在するかどうかを返すものです。

実際に配列「numbers」に「myIncludes」メソッドを適用しています。

結果として、3は配列に存在するためtrueが返り、6は存在しないためfalseが返ります。

●さらなる活用のヒント

includes関数はTypeScriptにおいて非常に便利な機能を持っています。

基本的な活用法や注意点、カスタマイズ方法などをすでに解説しましたが、さらなる応用方法についても知ることで、プログラミングの幅を広げることができます。

ここでは、他の関数との連携に焦点を当てて、さらなる活用のヒントをお伝えします。

○サンプルコード12：他の関数との連携

まずは、includes関数を他の関数と連携させる方法について見てみましょう。

例えば、配列の要素をフィルタリングする際に、特定の値が含まれる要素のみを取得したい場合などに、includes関数を使用することで簡単に実装することができます。

const data = ["apple", "orange", "banana", "grape", "pineapple"];
const keywords = ["apple", "banana"];

const filteredData = data.filter(item => keywords.includes(item));

console.log(filteredData); // ["apple", "banana"]

このコードでは、dataという配列の中からkeywords配列に含まれる要素のみをフィルタリングしています。

Array.prototype.filterメソッドと組み合わせることで、簡単に特定のキーワードを持つ要素のみを取得することができます。

このコードを実行すると、コンソールには["apple", "banana"]と表示されます。

つまり、keywords配列に含まれる”apple”と”banana”のみが取得された結果が得られます。

○サンプルコード13：非同期処理との組み合わせ

TypeScriptの非同期処理を考える際、Promiseやasync/awaitなどの手段が一般的に取り上げられます。

一方で、TypeScriptにおけるincludes関数は、配列や文字列に特定の要素や文字列が存在するかどうかを調べるのに使用します。

では、これらの非同期処理とincludes関数を組み合わせる場合、どのように実装すれば良いのでしょうか？

非同期に取得したデータの配列でincludes関数を使うサンプルコードを紹介します。

// 非同期でデータを取得する関数
const fetchData = async (): Promise<string[]> => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(['apple', 'banana', 'cherry']);
    }, 1000);
  });
};

// 非同期で取得したデータに特定のフルーツが含まれているか確認する関数
const checkFruitInData = async (fruit: string) => {
  const data = await fetchData();
  if (data.includes(fruit)) {
    return `データに${fruit}が含まれています。`;
  } else {
    return `データに${fruit}は含まれていません。`;
  }
};

// 実行例
checkFruitInData('apple').then(console.log); // データにappleが含まれています。
checkFruitInData('grape').then(console.log); // データにgrapeは含まれていません。

このコードでは、fetchData関数が非同期でデータを取得しています。

その取得したデータに対して、checkFruitInData関数で指定したフルーツが含まれているかどうかを確認しています。

includes関数はdata配列に対して実行され、特定のフルーツが存在するかどうかを判断します。

このコードを実行すると、1秒後にデータが取得され、その後すぐにデータの中に指定したフルーツが存在するかの結果がコンソールに表示されます。

具体的には、’apple’を引数として渡すと「データにappleが含まれています。」と表示され、’grape’を引数として渡すと「データにgrapeは含まれていません。」と表示されます。

○サンプルコード14：エラーハンドリング

TypeScriptにおけるincludes関数の利用は、非常に便利ですが、場合によってはエラーを引き起こす可能性があります。

これは、特に初心者がプログラムを作成している時に、よく見られる問題点の1つとなります。

そこで、ここでは、includes関数を使った際のエラーハンドリングの方法を、具体的なサンプルコードとともに徹底的に解説します。

まず、基本的なエラーハンドリングの例として、存在しない配列やオブジェクトに対してincludes関数を実行しようとした場合のエラーを捉える方法を見てみましょう。

// このコードでは、未定義の配列に対してincludes関数を使用しています。
try {
    if (undefinedArray.includes("test")) {
        console.log("testは配列内に存在します");
    } else {
        console.log("testは配列内に存在しません");
    }
} catch (error) {
    console.log("エラーが発生しました: ", error.message);
}

このコードを実行すると、”エラーが発生しました: Cannot read property ‘includes’ of undefined”というメッセージが出力されます。

これは、undefinedArrayが未定義のため、includes関数を実行することができないというエラーメッセージです。

このように、try-catch構文を使うことで、予期しないエラーが発生した場合でも、プログラムがクラッシュすることなく、適切なエラーメッセージをユーザーに提供することが可能となります。

さらに、もし特定のエラーに対して独自の処理を行いたい場合は、エラーオブジェクトの内容を調べて条件分岐を行うこともできます。

例えば、TypeErrorを検出した場合に特定の処理を行うことなどが考えられます。

応用例として、TypeErrorが発生した場合のみ、特定のメッセージを表示する方法を見てみましょう。

// このコードでは、TypeErrorが発生した場合のみ特定の処理を行っています。
try {
    if (undefinedArray.includes("test")) {
        console.log("testは配列内に存在します");
    }
} catch (error) {
    if (error instanceof TypeError) {
        console.log("型のエラーが発生しました。正しい型のデータを指定してください。");
    } else {
        console.log("予期しないエラーが発生しました: ", error.message);
    }
}

このコードを実行すると、”型のエラーが発生しました。正しい型のデータを指定してください。”というメッセージが出力されます。

○サンプルコード15：外部ライブラリとの組み合わせ

TypeScriptでの開発を進める中で、多数の外部ライブラリやフレームワークを使用する機会が増えてきます。

これらのライブラリとTypeScriptのincludes関数を組み合わせることで、非常に便利な機能を実現することができます。

今回は、有名なデータ操作ライブラリであるlodashとの組み合わせを例に、includes関数の活用方法をご紹介します。

まず、lodashをプロジェクトにインストールします。

// コマンドラインで実行
npm install lodash

TypeScriptのファイル内で、lodashとincludes関数を組み合わせて使用する方法を紹介します。

import _ from 'lodash';

// lodashを使ってデータを変形
const data = _.map([1, 2, 3], (n) => `item-${n}`);
console.log(data); // ['item-1', 'item-2', 'item-3']

// includes関数を使って特定の文字列が配列内に存在するか確認
const result = data.includes('item-2');
console.log(result); // true

このコードでは、lodashのmap関数を使って、数値の配列を文字列の配列に変換しています。

そして、変換された配列の中に特定の文字列が存在するかどうかを、includes関数で確認しています。

このコードを実行すると、まずlodashを使用してデータが変形され、結果として['item-1', 'item-2', 'item-3']という配列が得られます。

その後、includes関数で'item-2'という文字列が配列内に存在するか確認します。

この文字列は配列内に存在するため、最終的な結果としてtrueが出力されます。

○サンプルコード16：パフォーマンスの向上

TypeScriptでのプログラムのパフォーマンス向上は、特に大規模なプロジェクトやデータ処理が重要なアプリケーションを作成する際に欠かせないテーマです。

特に、includes関数を使ってデータの検索を行う際、効率的に処理を進めることが求められます。

今回は、includes関数を使用しつつ、パフォーマンスを向上させる方法を取り上げます。

このコードでは、大きな配列の中から特定の文字列を検索する際のパフォーマンスを向上させる方法を紹介しています。

具体的には、includes関数を単純に使用するだけでなく、適切なアルゴリズムやデータ構造を活用することで、検索時間を短縮します。

// 大量の文字列を持つデモ用の配列
const largeArray: string[] = Array(100000).fill("").map((_, i) => `data${i}`);

// 単純なincludes関数を使った検索
const simpleSearch = (query: string): boolean => {
    return largeArray.includes(query);
};

// 二分探索を用いた検索
const binarySearch = (arr: string[], query: string): boolean => {
    let low = 0;
    let high = arr.length - 1;

    while (low <= high) {
        const mid = Math.floor((low + high) / 2);
        if (arr[mid] === query) return true;
        if (arr[mid] < query) {
            low = mid + 1;
        } else {
            high = mid - 1;
        }
    }

    return false;
};

// 二分探索を使った検索の実行
const advancedSearch = (query: string): boolean => {
    const sortedArray = [...largeArray].sort();
    return binarySearch(sortedArray, query);
};

このコードを実行すると、simpleSearch関数を用いた場合、配列の全要素を走査するため、データ量が増えると検索時間が増加します。

一方、advancedSearch関数では、ソート済みの配列に対して二分探索を行うため、検索時間が大幅に短縮されます。

つまり、大量のデータに対してincludes関数を使用する際は、データの前処理や適切なアルゴリズムの選択が重要であることが分かります。

具体的には、二分探索のような効率的なアルゴリズムを併用することで、検索の高速化を実現できます。

○サンプルコード17：より高度なカスタマイズ

TypeScriptを使ってのコーディングにおいて、標準的なincludes関数だけでは限界があります。

例えば、ある特定の条件を満たすオブジェクトの配列から特定のオブジェクトを検索したい場合、独自のカスタマイズが必要となる場面が考えられます。

今回はそのような高度なカスタマイズの方法について詳しく見ていきましょう。

まず、次のサンプルコードをご覧ください。

type Student = {
    id: number;
    name: string;
    age: number;
    score: number;
};

let students: Student[] = [
    { id: 1, name: "太郎", age: 20, score: 80 },
    { id: 2, name: "花子", age: 19, score: 90 },
    { id: 3, name: "次郎", age: 21, score: 85 },
];

function includesStudentByScore(students: Student[], minScore: number): boolean {
    for (let student of students) {
        if (student.score >= minScore) {
            return true;
        }
    }
    return false;
}

console.log(includesStudentByScore(students, 85));  // true

このコードでは、学生のオブジェクトを格納した配列から、特定のスコア以上の学生が存在するかを調べるincludesStudentByScore関数を定義しています。

この関数は、指定されたスコア以上の学生が配列内に1人でも存在すればtrueを、存在しなければfalseを返します。

具体的には、for文を使って配列studentsの各学生を1つずつ取り出し、その学生のスコアが指定されたminScore以上であればtrueを返すようにしています。

もし全ての学生のスコアがminScore未満であれば、for文の処理が終わった後にfalseを返すようになっています。

このコードを実行すると、includesStudentByScore(students, 85)という関数呼び出しの結果、trueが出力されます。

これは、配列studentsの中にスコアが85点以上の学生（次郎）が存在するためです。