【TypeScript】配列の要素のループ、取得、検索、存在チェック方法を徹底解説！

はじめに

プログラミングにおいて、データの検索や取得は頻繁に行われる操作です。TypeScriptを使っている場合、配列内の要素を検索・取得するには、いくつかの便利なメソッドが用意されています。

この記事では、find、filter、findIndex、indexOf、includesなどのメソッドを用いた、TypeScriptにおける配列からの要素の検索と取得方法について、引数や戻り値を含め詳しく解説していきます。各メソッドの具体的な使用例を示しながら、読者の疑問や悩みに答えていきます。

サルモリ

パソコンをいじっているサルモリさんがこう言います。「配列からのデータ検索って、意外と知らないコツがあるんだよ。一緒に見ていこう！」

アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、TypeScriptの世界が変わる

特定の要素の検索：findメソッド

findメソッドは、配列内で最初に条件を満たす要素を見つけ出し、その要素を返します。条件に合う要素が見つからない場合、undefinedを返します。このメソッドは、特にオブジェクトの配列を扱う際に便利です。

ソースコード例

interface Person {
    name: string;
    age: number;
}

let people: Person[] = [
    { name: "Alice", age: 30 },
    { name: "Bob", age: 25 },
    { name: "Charlie", age: 28 }
];

let result = people.find(person => person.age < 29);

interface Person {

age: number;

}

let people: Person[] = [

{ name: "Alice", age: 30 },

{ name: "Bob", age: 25 },

{ name: "Charlie", age: 28 }

];

let result = people.find(person => person.age < 29);

出力結果:

 出力結果
{ name: "Bob", age: 25 }

findメソッドは、配列を先頭から順に検索し、最初に条件person.age < 29を満たすBobを見つけ出しています。

サルモリ

「findは特定の条件を満たす最初の要素だけをピックアップしてくれるんだね。めっちゃ便利！」

条件に合う全要素の取得：filterメソッド

filterメソッドは、指定した条件に一致するすべての要素を含む新しい配列を作成します。このメソッドは、特定の条件に合致する要素を抽出したい場合に最適です。

ソースコード例

interface Person {
    name: string;
    age: number;
}

let people: Person[] = [
    { name: "Alice", age: 30 },
    { name: "Bob", age: 25 },
    { name: "Charlie", age: 28 }
];
let filteredPeople = people.filter(person => person.age > 26);

interface Person {

age: number;

}

let people: Person[] = [

{ name: "Alice", age: 30 },

{ name: "Bob", age: 25 },

{ name: "Charlie", age: 28 }

];

let filteredPeople = people.filter(person => person.age > 26);

出力結果:

 出力結果
[{ name: "Alice", age: 30 }, { name: "Charlie", age: 28 }]

この例では、年齢が26歳よりも大きいすべての人を抽出しています。

サルモリ

「filterは条件に合う全要素を取り出すのに使うんだ。データセットから特定のデータを選び出すときに役立ちそうだね！」

要素のインデックスの検索：findIndexメソッド

findIndexメソッドは、配列内で条件を満たす最初の要素のインデックスを返します。条件を満たす要素が存在しない場合は、-1を返します。これは、要素自体ではなく、その位置を知りたい場合に便利です。

ソースコード例

interface Person {
    name: string;
    age: number;
}

let people: Person[] = [
    { name: "Alice", age: 30 },
    { name: "Bob", age: 25 },
    { name: "Charlie", age: 28 }
];
let index = people.findIndex(person => person.name === "Charlie");

interface Person {

age: number;

}

let people: Person[] = [

{ name: "Alice", age: 30 },

{ name: "Bob", age: 25 },

{ name: "Charlie", age: 28 }

];

let index = people.findIndex(person => person.name === "Charlie");

出力結果:

 出力結果
2

Charlieは配列の3番目の要素であるため、そのインデックス2が返されます（配列のインデックスは0から始まります）。

サルモリ

「findIndexで要素の位置がサッとわかるから、削除や置換の操作がしやすくなるね！」

配列内の要素のインデックス検索：indexOfメソッド

indexOfメソッドは、指定された要素が配列内で最初に見つかったインデックスを返します。要素が見つからない場合は-1を返します。このメソッドは主にプリミティブ値（数値、文字列など）の検索に適しています。

ソースコード例

let colors: string[] = ["red", "green", "blue", "yellow"];
let index = colors.indexOf("blue");

1 2	let colors: string[] = ["red", "green", "blue", "yellow"]; let index = colors.indexOf("blue");

出力結果:

 出力結果
2

indexOfメソッドにより、"blue"が配列colorsの3番目の要素（インデックスは2）であることが確認できます。

サルモリ

「indexOfは特にシンプルなデータをサッと見つけるときに使うんだね。覚えておくと便利だよ！」

配列内の要素の存在チェック：includesメソッド

includesメソッドは、配列が特定の要素を含んでいるかどうかを確認するために使用します。含んでいる場合はtrueを、含んでいない場合はfalseを返します。このメソッドは、特定の値の存在を確認するだけであり、その位置は重要ではありません。

ソースコード例

let colors: string[] = ["red", "green", "blue", "yellow"];
let includesBlue = colors.includes("blue");
let includesPink = colors.includes("pink");

let colors: string[] = ["red", "green", "blue", "yellow"];

let includesBlue = colors.includes("blue");

let includesPink = colors.includes("pink");

出力結果:

 出力結果
true
false

includesメソッドにより、colors配列が"blue"を含み、"pink"を含まないことが確認できます。

サルモリ

「includesで簡単に要素が配列に含まれてるかチェックできるんだ。if文と組み合わせるともっと便利になりそうだね！」

配列内の要素を全て取得：forEachメソッド

Array.prototype.forEachメソッドは、配列の各要素に対して指定されたアクションを実行するために使用されます。コールバック関数を引数として取り、配列の各要素に対してその関数を一度ずつ実行します。

以下の例では、numbers配列の各要素をconsole.logで出力しています。

サルモリ

forEachは、関数型プログラミングの考え方に基づいていて、とても便利だよ！

ソースコード例

class Program {
    public static main(): void {
        const numbers = [1, 2, 3, 4, 5];
        numbers.forEach(number => {
            console.log(number);
        });
    }
}
Program.main();

class Program {

public static main(): void {

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

numbers.forEach(number => {

console.log(number);

});

}

Program.main();

 出力結果
1
2
3
4
5

配列とfor文を組み合わせて全ての要素を取得する方法

配列の全ての要素を取得し、それぞれに対して何らかの操作を行いたい場合、for文を使用するのが最も基本的で直接的なアプローチです。

for文を使うことで、配列のインデックスを順番に増加させながら、配列の長さに達するまで各要素にアクセスできます。

この方法は、配列の各要素を一つずつ確認したい場合や、配列の内容を変更する必要がある場合に特に有効です。

また、複数の配列にまたがる操作や、インデックスを使用して特定の条件に基づいた複雑な処理を行いたい場合にも適しています。

以下の例では、numbers配列内の全ての数字を取得し、それぞれを2倍にしてコンソールに出力しています。このシンプルな例を通じて、for文の基本的な使い方と配列の効果的な組み合わせ方を理解しましょう。

サルモリ

for文を使えば、配列の全ての要素をコントロールできるんだね！

ソースコード例

class Program {
    public static main(): void {
        const numbers = [1, 2, 3, 4, 5];
        for (let i = 0; i < numbers.length; i++) {
            console.log(numbers[i] * 2);
        }
    }
}
Program.main();

class Program {

public static main(): void {

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

for (let i = 0; i < numbers.length; i++) {

console.log(numbers[i] * 2);

}

Program.main();

 出力結果
2
4
6
8
10

このようにfor文を使うことで、配列の全要素に対する操作を簡単に実行できます。

ループを利用することで、コードの量を減らし、読みやすさを向上させることができるのです。

複雑なデータ構造の検索

配列が複雑なオブジェクトを含む場合、findやfilterメソッドが特に有効です。これらのメソッドを使うことで、オブジェクトの特定のプロパティに基づいた検索を行うことができます。

複数の条件での検索：filterメソッドの応用

例えば、名前が"Alice"または年齢が25歳以上の人物をすべて検索したい場合、以下のようにfilterメソッドを使用できます。

ソースコード例

interface Person {
    name: string;
    age: number;
}

let people: Person[] = [
    { name: "Alice", age: 30 },
    { name: "Bob", age: 25 },
    { name: "Charlie", age: 28 }
];
let result = people.filter(person => person.name === "Alice" || person.age >= 25);

interface Person {

age: number;

}

let people: Person[] = [

{ name: "Alice", age: 30 },

{ name: "Bob", age: 25 },

{ name: "Charlie", age: 28 }

];

let result = people.filter(person => person.name === "Alice" || person.age >= 25);

出力結果:

 出力結果
[{ name: "Alice", age: 30 }, { name: "Bob", age: 25 }, { name: "Charlie", age: 28 }]

この例では、複数の条件を組み合わせて検索を行い、条件に合致するすべての人物を配列として取得しています。

ジェネリックを使用した配列の検索と取得

ジェネリックを使用することで、TypeScriptはあらゆる型に対応した柔軟な配列操作を可能にします。ジェネリック配列における要素の検索と取得には、型安全性を保ちながらも、findやfilterなどのメソッドを用いることができます。

ジェネリック配列でのfindメソッドの使用例

例えば、以下のように異なる型の要素を持つジェネリック配列があるとします。この配列から特定の条件を満たす要素を検索するには、findメソッドを使うことができます。

ソースコード例

type MixedTypes = number | string | boolean;
let items: MixedTypes[] = [1, "two", true, 2, "three", false];

// 文字列の要素を検索
let foundItem = items.find(item => typeof item === "string");

type MixedTypes = number | string | boolean;

let items: MixedTypes[] = [1, "two", true, 2, "three", false];

// 文字列の要素を検索

let foundItem = items.find(item => typeof item === "string");

出力結果:

 出力結果
"two"

この例では、findメソッドを使用して配列itemsから最初に見つかった文字列型の要素"two"を取得しています。

ジェネリック配列でのfilterメソッドの使用例

同様に、filterメソッドを使用して、特定の型の要素すべてを取得することもできます。

ソースコード例

type MixedTypes = number | string | boolean;
let items: MixedTypes[] = [1, "two", true, 2, "three", false];
// 数値の要素すべてを取得
let numberItems = items.filter(item => typeof item === "number");

type MixedTypes = number | string | boolean;

let items: MixedTypes[] = [1, "two", true, 2, "three", false];

// 数値の要素すべてを取得

let numberItems = items.filter(item => typeof item === "number");

出力結果:

 出力結果
[1, 2]

この方法により、items配列から数値型の要素1と2を取得することができます。

ジェネリックを使用した配列の操作では、これらのメソッドを活用することで、様々な型のデータを柔軟に扱うことが可能です。

型安全性を保ちつつ、効率的なデータ検索と取得を実現するために、これらのメソッドを適切に使い分けることが重要です。

こちらもCHECK

: 【TypeScript】配列操作、配列の基本的な使い方を徹底解説！

Typescriptでの配列の使い方完全ガイドこの記事では、Typescriptを使った配列の基本から応用までを網羅的に解説します。配列はプログラミングにおいて非常によく使われるデータ構造の一つで ...

続きを見る

まとめ

TypeScriptで配列から要素を効率的に検索・取得する方法には多種多様な手法が存在します。find、filter、findIndex、indexOf、includesメソッドを適切に使い分けることで、様々なシナリオでのデータ操作が可能になります。

最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！

サルモリ

最後まで読んでくれてありがとう！！

【TypeScript】配列の要素のループ、取得、検索、存在チェック方法を徹底解説！

はじめに

特定の要素の検索：findメソッド

条件に合う全要素の取得：filterメソッド

要素のインデックスの検索：findIndexメソッド

配列内の要素のインデックス検索：indexOfメソッド

配列内の要素の存在チェック：includesメソッド

配列内の要素を全て取得：forEachメソッド

配列とfor文を組み合わせて全ての要素を取得する方法

複雑なデータ構造の検索

複数の条件での検索：filterメソッドの応用

ジェネリックを使用した配列の検索と取得

ジェネリック配列でのfindメソッドの使用例

ジェネリック配列でのfilterメソッドの使用例

【TypeScript】配列操作、配列の基本的な使い方を徹底解説！

まとめ

Ads Blocker Detected!!!