TypeScriptで繰り返し処理！10選の初心者でもわかる実例付き！

はじめに
●TypeScriptの繰り返しとは
●TypeScriptの繰り返し処理の応用例
●注意点と対処法
- ○無限ループの発生とその防止方法
- ○パフォーマンスの最適化のヒント
  - ❶不要な計算を避ける
  - ❷適切な繰り返し方法を選択する
●カスタマイズ方法
- ○繰り返し処理のカスタム関数の作成
まとめ

はじめに

近年、多くの開発者たちがTypeScriptの利用を始めています。

TypeScriptはJavaScriptのスーパーセットとして知られており、型の安全性を追加したり、大規模開発に役立つ多くの特徴を持っています。

しかし、基本的なプログラミングの概念、例えば「繰り返し処理」は、JavaScriptと大差なく行えます。

この記事では、TypeScriptにおける繰り返し処理の方法を10のサンプルコードを交えて初心者向けに詳細に説明します。

繰り返し処理は、同じ動作を複数回繰り返すためのコードを書く際に必要となるものです。

例えば、配列の中の各要素に対して同じ操作をしたい、あるいは特定の条件が満たされるまで何かの動作を繰り返したいといった場合に使用されます。

このガイドを読むことで、TypeScriptでの繰り返し処理の基本から応用までを網羅的に学ぶことができるでしょう。

また、注意点やカスタマイズ方法なども交えて解説していきますので、TypeScriptを使って効率的な開発を行いたい方はぜひ最後までお読みください。

●TypeScriptの繰り返しとは

TypeScriptは、JavaScriptのスーパーセットとして知られており、静的型チェックの機能が追加されています。

そのため、JavaScriptと同様の繰り返し処理構文を使用することができます。

繰り返し処理は、特定の条件下でコードを何度も実行する手法です。

例として、配列の要素を一つずつ取り出して処理する、特定の条件を満たすまでコードを実行し続けるなどがあります。

○基本の繰り返し処理概念

繰り返し処理にはいくつかのパターンがありますが、主に次の5つの基本的な繰り返し構文をTypeScriptで使用することができます。

forループ：あらかじめ繰り返す回数を指定して実行する。
forEach：配列の各要素を順番に取り出して実行する。
for…of：配列や文字列などの反復可能オブジェクトから要素を一つずつ取り出して実行する。
for…in：オブジェクトのプロパティを順番に取り出して実行する。
whileとdo…while：特定の条件を満たす間、または一度実行した後に条件を満たす間、コードを繰り返し実行する。

○サンプルコード1：基本的なforループ

このコードでは、forループを使用して0から4までの数字をコンソールに出力するコードを表しています。こ

の例では、初期化式、条件式、更新式の3つを使用して繰り返しの条件を設定しています。

for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4の順に出力される
}

上記のコードを実行すると、コンソールには0から4までの数字が順番に表示されます。

○サンプルコード2：forEachの使い方

このコードでは、配列の各要素に対して操作を行うためのforEachメソッドを使用しています。

この例では、配列の各要素をコンソールに出力しています。

const fruits = ['りんご', 'ばなな', 'みかん'];
fruits.forEach(fruit => {
    console.log(fruit);
});

上記のコードを実行すると、コンソールには「りんご」「ばなな」「みかん」という配列の要素が順番に表示されます。

○サンプルコード3：for…ofを用いた配列の繰り返し

TypeScriptでの配列の取り扱いにはさまざまな手法が存在しますが、最も直感的に要素にアクセスできるのがfor...of文です。

for...ofを使用することで、配列の各要素を順番に取り出し、処理を行うことが可能となります。

このコードではfor...ofを使って配列の要素を1つずつ取り出し、コンソールに出力するコードを表しています。

この例では文字列の配列を作成し、各要素を順番にコンソールに出力しています。

const fruits: string[] = ['apple', 'orange', 'banana', 'grape'];

// for...ofを用いて配列の要素を順にコンソール出力する
for (let fruit of fruits) {
    console.log(fruit);  // コンソールに各果物の名前を出力
}

上述のコードを実行すると、コンソールには次のように配列の要素が順番に表示されます。

apple
orange
banana
grape

for...of文の利点は、配列の要素に直接アクセスできる点にあります。

配列のインデックスを気にすることなく、各要素を直接取り扱うことができるため、コードの読みやすさやメンテナンス性が向上します。

さらに、この手法は配列だけでなく、iterableなオブジェクトにも適用可能です。

つまり、MapやSetなどのデータ構造にも同じ手法でアクセスすることができるのです。

しかし、インデックスが必要な場合や、要素以外の情報（例：現在の要素の次の要素など）を取得したい場合は、for...ofだけでは難しい場面もあります。

そのような状況では他のループ処理や、配列のメソッドを併用することで解決策を模索することが求められます。

例として、配列の各要素とそのインデックスを同時に取得したい場合には、forEachメソッドやfor文とlengthプロパティを利用する方法が考えられます。

○サンプルコード4：for…inを使ったオブジェクトの繰り返し

TypeScriptで繰り返し処理を行う方法は多々存在しますが、特にオブジェクトのプロパティに対して繰り返し処理を行いたい場合、for...inループが非常に有用です。

ここでは、for...inを用いてオブジェクトの各プロパティを順番に取得し、その値を操作する基本的な方法を解説します。

このコードでは、for...inループを使ってオブジェクトのプロパティ名を取得し、それを用いてプロパティの値を表示しています。

この例では、オブジェクトのキーを取得して、キーに紐づく値を出力しています。

const obj = {
    name: "山田太郎",
    age: 25,
    job: "エンジニア"
};

for (let key in obj) {
    if (obj.hasOwnProperty(key)) { // オブジェクト自身が持っているプロパティのみ対象とする
        console.log(`${key}: ${obj[key]}`); // こちらはキーと値を表示
    }
}

上記のコードを実行すると、次のような出力を得られます。

山田太郎さんは、25歳で、エンジニアとして働いています。

ただし、for...inループを使用する際には注意が必要です。

継承されたプロパティもループの対象となってしまうため、オブジェクトが直接持っているプロパティだけを対象としたい場合は、hasOwnPropertyメソッドを使用して、そのプロパティがオブジェクト自体に存在するかどうかをチェックすることが推奨されます。

また、TypeScriptでfor...inループを使用する際の応用例として、オブジェクトのキーを特定の型として扱いたい場合が考えられます。

下記のコードは、オブジェクトのキーが文字列型であることを保証する一例です。

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

const person: Person = {
    name: "佐藤花子",
    age: 28,
    job: "デザイナー"
};

for (let key in person) {
    if (person.hasOwnProperty(key)) {
        let value = person[key as keyof Person]; // キーをPersonのキーとして型付け
        console.log(`${key}: ${value}`);
    }
}

この例では、keyofを用いて、オブジェクトのキーを特定の型として扱っています。

○サンプルコード5：whileループの活用

TypeScriptにおける「while」ループは、指定した条件式がtrueの間、ブロック内のコードを繰り返し実行します。

このループは、実行回数が事前に決まっていない場合や、特定の条件が満たされるまでループを続けたい場合に役立ちます。

このコードでは、whileを使って数字が10未満の場合に繰り返しを行うコードを表しています。

この例では、数字を1から開始して、10未満になるまで1ずつ加算していっています。

let number = 1;

while (number < 10) {
  console.log(number);  // 繰り返しのたびに数字を出力
  number++;             // 数字を1増やす
}

このコードを実行すると、コンソールに1から9までの数字が順番に出力されます。

すなわち、数字が10未満である間、コンソールに数字を出力し、その後、その数字を1増やす操作を繰り返しています。

注意として、whileループを使用する際は、無限ループにならないように注意が必要です。

上記の例で言えば、numberを増やす処理を忘れてしまうと、numberが常に10未満となり、ループが永遠に続いてしまいます。

さらなる応用例として、配列の要素を順番に取り出しながら特定の条件を満たすまで処理を続けるといった使い方も考えられます。

let values = [3, 7, 2, 9, 5];
let sum = 0;
let index = 0;

while (sum < 10 && index < values.length) {
  sum += values[index];
  index++;
}

console.log(`10を超えるまでの合計: ${sum}`);

このコードでは、配列valuesの要素を足し合わせていき、合計が10を超えたら処理を終了します。

実行すると、「10を超えるまでの合計」として、最初の3つの要素の合計値である12が出力されます。

○サンプルコード6：do…whileの特徴と使い方

TypeScriptやJavaScriptなど多くのプログラミング言語には、繰り返し処理を実現するための様々なループ構文が存在します。

ここでは、do...whileループに焦点を当て、その特徴や使い方を詳しく解説していきます。

do...whileループは、指定した条件が真である限り、特定のコードブロックを繰り返し実行するための構文です。

しかし、通常のwhileループとの主な違いは、最初にコードブロックが1回実行された後で条件を評価する点です。

そのため、条件が最初から偽であっても、コードブロックは少なくとも1回は実行されることが保証されます。

このコードではdo...whileを使って、指定した数値が10以下である間、その数値をコンソールに出力するコードを表しています。

この例では、数値を1から始めて、毎回インクリメントしながら10になるまでコンソールに出力しています。

let number = 1;

do {
    console.log(number); // 数値を出力
    number++;            // 数値を1増やす
} while (number <= 10);

上記のコードを実行すると、1から10までの数値が順番にコンソールに表示されます。

そして、numberが10を超えたタイミングでループから抜け出します。

このループのメリットは、条件に関係なく、最初の1回は必ず実行される点です。

これにより、ある操作を少なくとも1回は行いたい場合に非常に役立ちます。

また、do...whileループは、ユーザーからの入力を受け取るような場面で特に役立ちます。

例えば、不正な入力があった場合に、正しい入力がされるまで繰り返し入力を促すような場面で使用できます。

このコードでは、ユーザーからの数値入力を受け取り、その数値が5以上であればループを終了するコードを表しています。

この例では、prompt関数を用いてユーザーからの入力を受け取り、数値が5以上でない限り再度入力を促しています。

let userInput: number;

do {
    userInput = Number(prompt("5以上の数値を入力してください。"));
} while (userInput < 5);

console.log("正しい入力がされました:", userInput);

このコードを実行すると、ユーザーに5以上の数値の入力を求めるプロンプトが表示されます。

5未満の数値を入力すると、再度プロンプトが表示され、正しい数値を入力するまで繰り返されます。

正しい入力がされた場合、その数値がコンソールに表示されます。

●TypeScriptの繰り返し処理の応用例

TypeScriptにおける繰り返し処理は、基本的な使い方だけではなく、応用的な使い方も多岐にわたります。

ここでは、TypeScriptの繰り返し処理の応用例を4つの具体的なサンプルコードを通して紹介していきます。

初心者の方でも、これらの応用例を理解することで、より高度なプログラミングが可能となります。

○サンプルコード7：filterとmapを組み合わせた繰り返し

このコードでは、filterとmapを組み合わせて、特定の条件を満たす要素だけを取り出して、その要素を加工する例を表しています。

この例では、10未満の数値のみを取り出し、それらの数値を2倍にしています。

const numbers = [5, 12, 8, 130, 44];
const filteredNumbers = numbers.filter(num => num < 10).map(num => num * 2);

console.log(filteredNumbers); // [10, 16]

上記のコードを実行すると、filteredNumbersには10未満の5と8が2倍された10と16が格納されます。

○サンプルコード8：reduceを用いた配列の累積

このコードでは、reduceを使って、配列の要素を左から右に累積していく例を表しています。

この例では、配列内の数値の合計を計算しています。

const numbers = [5, 10, 15];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 30

上記のコードでは、5と10と15の合計である30が出力されます。

○サンプルコード9：async/awaitとfor…ofの組み合わせ

このコードでは、async/awaitをfor...ofと組み合わせて、非同期処理を含む繰り返し処理の例を表しています。

この例では、非同期関数getDataを使用してデータを取得しています。

const urls = ["url1", "url2", "url3"];

const getData = async (url: string) => {
  // ここでは模擬的にPromiseを返す
  return new Promise<string>((resolve) => {
    setTimeout(() => resolve(`data from ${url}`), 1000);
  });
};

const fetchData = async () => {
  for (const url of urls) {
    const data = await getData(url);
    console.log(data);
  }
};

fetchData(); // data from url1, data from url2, data from url3 の順に出力される

○サンプルコード10：繰り返し処理での例外処理

このコードでは、繰り返し処理の中で発生する例外を捉え、処理を続行する方法を表しています。

この例では、正しくないURLがある場合にエラーメッセージを出力して、次のURLの処理を行います。

const urls = ["url1", "invalidUrl", "url3"];

const getData = (url: string) => {
  if (url === "invalidUrl") {
    throw new Error("Invalid URL detected");
  }
  return `data from ${url}`;
};

for (const url of urls) {
  try {
    const data = getData(url);
    console.log(data);
  } catch (error) {
    console.log(error.message);
  }
}

上記のコードを実行すると、「data from url1」、「Invalid URL detected」、「data from url3」の順に出力されます。

●注意点と対処法

TypeScriptの繰り返し処理を活用する際に、気をつけるべきポイントや頻出するトラブルについて説明します。

繰り返し処理は非常に便利な機能ですが、間違った使い方をすると想定外の動作やエラーを引き起こすことがあります。

○無限ループの発生とその防止方法

繰り返し処理の中で最も注意すべきトピックの一つが、「無限ループ」の発生です。

無限ループとは、終了条件を満たすことなくループが続けられてしまう現象を指します。

これが発生すると、プログラムが応答しなくなったり、システムリソースを極端に消費することがあります。

このコードではwhileループを使って、無限ループの例を表しています。

この例では、iの値が減少せず、条件i < 5が常にtrueのままになるため、ループが終了することはありません。

let i = 0;

// 無限ループの例
while (i < 5) {
    console.log(i);
    // iの値を増やす処理がないため、ループが終わらない
}

このような無限ループを防ぐためには、次の点を確認しましょう。

ループの終了条件が適切かを確認する。
ループの中で変数の更新（例えばカウンタの増加）が行われているか確認する。
繰り返し処理の中身が短い場合やテスト時は、一時的にループの回数を少なくして実行してみる。

○パフォーマンスの最適化のヒント

繰り返し処理を多用する際には、特に大量のデータを扱う場合、パフォーマンスの低下が懸念されます。

効率の良い繰り返し処理を実現するためのヒントをいくつか紹介します。

❶不要な計算を避ける

繰り返し処理の中で不要な計算や操作を避けることで、パフォーマンスを向上させることができます。

このコードでは、配列の長さを毎回取得するのではなく、変数に保存して利用しています。

このようにして、不必要な計算を繰り返すことを避けることができます。

const arr = [1, 2, 3, 4, 5];
const length = arr.length; // 配列の長さを事前に取得

for (let i = 0; i < length; i++) {
    console.log(arr[i]);
}

上記のコードでは、5つの数字が順に表示されることになります。

❷適切な繰り返し方法を選択する

TypeScriptには、forループやforEach、for…ofなど、さまざまな繰り返し処理の方法が提供されています。

処理内容や目的に応じて、最も効率的な方法を選択することが重要です。

●カスタマイズ方法

TypeScriptを使用すると、繰り返し処理をカスタマイズして、特定の要件に合わせて処理を最適化することが可能です。

ここでは、TypeScriptを用いて繰り返し処理をカスタマイズする方法を、詳細なサンプルコードを交えてご紹介します。

○繰り返し処理のカスタム関数の作成

TypeScriptでは、独自の繰り返し処理を実装するためのカスタム関数を作成することができます。

例として、特定の条件を満たす要素のみを処理するカスタム関数を考えてみましょう。

このコードでは、配列内の数字が10以上である要素のみを取得するカスタム関数を表しています。

この例では、filter関数を使って条件を満たす要素を取得しています。

// カスタム関数の作成
function customFilter(arr: number[], threshold: number): number[] {
  return arr.filter(item => item >= threshold);
}

// 使用例
const numbers = [5, 10, 15, 20];
const result = customFilter(numbers, 10);
console.log(result);  // [10, 15, 20]

上記のサンプルコードでは、customFilter関数を使用して、numbers配列から10以上の要素のみを取得しています。

結果として、[10, 15, 20]という新しい配列が得られます。

このように、TypeScriptを使用すると、繰り返し処理を柔軟にカスタマイズすることができます。

具体的な要件や目的に応じて、最適な繰り返し処理を実装するためのカスタム関数を作成することで、コードの可読性や再利用性を向上させることが期待できます。

さらに、TypeScriptの静的型チェックの機能を活用することで、カスタム関数の安全性も高めることができます。

独自のロジックや処理を組み込む際には、この特徴を最大限に活用し、バグのリスクを低減させることが重要です。