TypeScriptにおけるforループの基本的な使い方と応用例

TypeScriptでのforループは、プログラムの繰り返し処理を効率的に行うための基本的な構文です。JavaScriptの拡張であるTypeScriptでも、同様にforループは頻繁に使用され、データの操作や反復処理に欠かせないものとなっています。本記事では、TypeScriptにおけるforループの基本的な使い方を詳しく説明し、さらに応用的な活用方法についても触れていきます。初心者の方でも理解しやすいように、各種ループの使い分けや具体例を交えながら進めていきます。

forループとは？

forループとは、プログラム内で同じ処理を繰り返し実行するための制御構文です。TypeScriptでも、この構文を使うことで、特定の回数や条件に従って処理を繰り返すことができます。forループは、初期化、条件判定、ループ内処理、そして更新の4つの要素で構成されます。これにより、配列やオブジェクトの要素を順番に処理したり、特定の条件が満たされるまでコードを実行することが可能です。

forループの基本構文

TypeScriptにおけるforループの基本構文は、JavaScriptと同じ形式で書かれます。以下がその標準的な構文です：

for (初期化; 条件; 更新) {
    // 繰り返し実行されるコード
}

• 初期化: ループが開始される前に一度だけ実行され、カウンター変数などが設定されます。
• 条件: 各ループが始まる前に評価され、この条件がtrueの間だけループが実行されます。
• 更新: 各ループの最後に実行され、カウンター変数などの値を更新します。

例えば、1から5までの数字をコンソールに出力する簡単なforループの例は次の通りです：

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

この構文は、繰り返し処理を行いたい時に非常に便利で、簡潔かつ柔軟な処理が可能です。

for…ofループの使い方

TypeScriptのfor...ofループは、配列やイテラブルオブジェクト（文字列や配列など）の要素を順に取り出して処理を行うための構文です。従来のforループよりも直感的で読みやすいため、特に配列の処理に向いています。

for (変数 of イテラブルオブジェクト) {
    // 繰り返し実行されるコード
}

例えば、配列内の要素を順に出力するコードは以下のようになります：

let fruits = ["apple", "banana", "cherry"];

for (let fruit of fruits) {
    console.log(fruit);
}

このコードでは、fruitsという配列の各要素が順番にfruit変数に代入され、console.logで表示されます。for...ofループは、配列や文字列のような反復可能なオブジェクトに対してシンプルかつ効率的な方法を提供し、特に値そのものを操作したい場合に有用です。

for…inループの使い方

TypeScriptのfor...inループは、オブジェクトのプロパティや配列のインデックスを繰り返し処理するための構文です。for...inは配列やオブジェクトのキー（プロパティ名やインデックス）を順に取り出して処理します。

for (プロパティ in オブジェクト) {
    // プロパティに対して繰り返し処理を行うコード
}

例えば、オブジェクトのプロパティ名を順に出力するコードは以下のようになります：

let car = {
    brand: "Toyota",
    model: "Corolla",
    year: 2020
};

for (let key in car) {
    console.log(key + ": " + car[key]);
}

このコードでは、carオブジェクトの各プロパティ名がkeyに代入され、対応する値と一緒に出力されます。

一方、配列に対してfor...inループを使うと、インデックス（配列の要素番号）が取得されます：

let numbers = [10, 20, 30];

for (let index in numbers) {
    console.log(index + ": " + numbers[index]);
}

このコードでは、配列numbersの各インデックスがindexに代入され、それに対応する要素の値が出力されます。for...inはオブジェクトのプロパティを扱いたい場合に特に有効ですが、配列の要素を処理する場合にはfor...ofの方が適している場合もあります。

break文とcontinue文の活用

break文とcontinue文は、ループの実行を制御するための重要な構文です。これらを活用することで、ループ内での処理を柔軟に制御することができます。

break文の使い方

break文は、ループを途中で終了させるために使います。指定された条件が成立した場合にループを強制的に終了し、ループ外のコードへ制御が移ります。

例えば、1から10までの数字をループで処理し、5に達した時点でループを終了させるコードは以下の通りです：

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}

このコードでは、iが5になるとbreak文が実行され、ループが終了します。したがって、1から4までの数字のみが出力されます。

continue文の使い方

continue文は、現在の反復処理をスキップし、次のループの反復に進むために使用します。continueが実行されると、それ以降の処理を飛ばして、次のループに移行します。

次の例では、1から10までの数字をループで処理し、偶数の数字はスキップするコードを示します：

for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i);
}

このコードでは、iが偶数のときcontinue文が実行され、その数字は出力されずに次のループに進みます。したがって、奇数のみが出力されます。

break文とcontinue文を使うことで、ループの流れを効率的に制御でき、より柔軟なコードを書くことが可能になります。

多重forループの実装

多重forループとは、forループの中にさらに別のforループを入れ子状にすることで、複雑な繰り返し処理を実現する方法です。この構造は、二次元配列の操作や表形式のデータ処理に非常に有用です。内側のループが外側のループの各反復ごとに完全に実行されるため、外側と内側で別々の条件や操作を実行できます。

二次元配列の操作例

次の例では、二次元配列を使って、多重forループによって配列の各要素を順番に出力する方法を示します：

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
        console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
    }
}

このコードでは、外側のループが行を担当し、内側のループが列を担当しています。matrixという二次元配列の各要素がconsole.logで出力され、以下のような結果が得られます：

matrix[0][0] = 1
matrix[0][1] = 2
matrix[0][2] = 3
matrix[1][0] = 4
matrix[1][1] = 5
matrix[1][2] = 6
matrix[2][0] = 7
matrix[2][1] = 8
matrix[2][2] = 9

多重forループの応用例

次に、多重forループを使って掛け算の九九表を生成する例を紹介します。これは、多重forループの実践的な使い方の一つです。

for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= 9; j++) {
        console.log(`${i} × ${j} = ${i * j}`);
    }
}

この例では、iが1から9まで変化する外側のループに対して、jも同じく1から9まで変化する内側のループが入れ子になっています。結果として、1から9までの掛け算表が生成されます。

多重forループは、特に複雑なデータ構造や複数の条件を処理する場合に強力なツールとなりますが、ループのネストが深くなるとコードの可読性が低下するため、必要に応じて適切に使用することが重要です。

forループを使った配列操作

forループを使って配列の要素を操作するのは、プログラミングにおいてよく使われる基本的な方法です。TypeScriptでは、forループを使用することで、配列の各要素に対して任意の操作を簡単に実行できます。ここでは、配列を操作するいくつかの実用的な例を紹介します。

配列の全要素を処理する例

次の例では、配列の全要素をforループで順に取得し、各要素をコンソールに出力します：

let numbers = [10, 20, 30, 40, 50];

for (let i = 0; i < numbers.length; i++) {
    console.log(`Element at index ${i}: ${numbers[i]}`);
}

このコードでは、numbers配列の各要素にアクセスし、それぞれの要素が順番に表示されます。iがインデックスとして使用され、配列の長さに基づいてループが制御されています。

配列内の要素の合計を計算する例

forループを使って配列内の全要素の合計を計算する方法を次に示します：

let sum = 0;
let numbers = [10, 20, 30, 40, 50];

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log(`Total sum: ${sum}`);

このコードでは、sum変数に各要素の値が加算されていき、最終的に配列の要素の合計値が計算されます。このようにforループを使うことで、配列の要素に対して複数の操作を一度に行うことが可能です。

配列内の条件に基づいたフィルタリング

次に、forループを使って、配列内の特定の条件を満たす要素だけを抽出する方法を示します。以下のコードは、配列内の偶数の値だけを新しい配列に追加します：

let numbers = [10, 15, 20, 25, 30];
let evenNumbers: number[] = [];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        evenNumbers.push(numbers[i]);
    }
}

console.log(`Even numbers: ${evenNumbers}`);

この例では、if条件によって偶数であるかどうかを判定し、偶数であれば新しい配列evenNumbersに追加しています。forループを使えば、このように配列の要素に対するフィルタリングも簡単に実行できます。

forループで配列を逆順に処理する例

配列の要素を逆順に処理したい場合、forループを使って逆順で繰り返し処理を行うことができます：

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

for (let i = numbers.length - 1; i >= 0; i--) {
    console.log(numbers[i]);
}

このコードでは、インデックスをnumbers.length - 1からスタートさせ、0に向かってループを進めることで、配列を逆順に処理しています。

以上のように、forループを使えば配列内のデータを自由に操作でき、基本的な反復処理から複雑なフィルタリングや操作まで幅広く応用できます。

forループと関数の組み合わせ

forループは、関数と組み合わせることでさらに強力なツールとなります。関数の中でforループを使うことで、繰り返し処理を汎用的に実装したり、柔軟に再利用可能なコードを書くことが可能です。ここでは、forループと関数を組み合わせた具体的な例を見ていきます。

配列の要素を倍にする関数

次の例では、配列の全要素を2倍にする関数をforループで実装します。この関数は配列を引数として受け取り、すべての要素を倍にした新しい配列を返します。

function doubleArrayElements(arr: number[]): number[] {
    let doubledArray: number[] = [];
    for (let i = 0; i < arr.length; i++) {
        doubledArray.push(arr[i] * 2);
    }
    return doubledArray;
}

let numbers = [1, 2, 3, 4, 5];
let doubled = doubleArrayElements(numbers);
console.log(doubled);

このコードでは、doubleArrayElementsという関数の中にforループが組み込まれています。配列の各要素を倍にし、その結果を新しい配列として返しています。関数とforループを組み合わせることで、再利用可能で明確な処理を作成することができます。

条件に応じた処理を行う関数

次に、特定の条件に基づいて配列内の要素を操作する関数を見てみます。この例では、配列の要素が偶数の場合に2倍にし、それ以外はそのまま返す処理を行う関数を実装します。

function processArray(arr: number[]): number[] {
    let resultArray: number[] = [];
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] % 2 === 0) {
            resultArray.push(arr[i] * 2);
        } else {
            resultArray.push(arr[i]);
        }
    }
    return resultArray;
}

let numbers = [1, 2, 3, 4, 5];
let processed = processArray(numbers);
console.log(processed);

この関数では、配列の要素が偶数かどうかをif文で確認し、偶数の場合は2倍にして新しい配列に追加しています。関数内でforループを使うことで、柔軟な処理を簡単に実装でき、条件に応じた操作を一貫して行うことができます。

ネストされたループと関数の組み合わせ

forループと関数をさらに応用して、ネストされたループの処理を関数で行うことも可能です。次の例では、二次元配列を受け取り、各行の要素をすべて合計する関数を作成します。

function sumMatrix(matrix: number[][]): number[] {
    let rowSums: number[] = [];
    for (let i = 0; i < matrix.length; i++) {
        let sum = 0;
        for (let j = 0; j < matrix[i].length; j++) {
            sum += matrix[i][j];
        }
        rowSums.push(sum);
    }
    return rowSums;
}

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

let sums = sumMatrix(matrix);
console.log(sums);

この例では、二次元配列（行列）を受け取り、各行の合計を計算する関数sumMatrixをforループで実装しています。外側のループが行を、内側のループが列を処理し、行の合計を計算して新しい配列に追加しています。

forループと関数を組み合わせることで、再利用可能で柔軟な処理が可能になります。これにより、配列や行列などのデータを効率的に操作でき、コードの可読性とメンテナンス性が向上します。

forループを使った演習問題

forループの理解を深めるために、いくつかの演習問題を通して実践的なスキルを磨きましょう。以下の問題に取り組むことで、forループの基本的な使い方や応用力を養うことができます。

問題1: 配列内の最大値を見つける

次の配列の中から最大の値をforループを使って見つける関数を実装してください。

let numbers = [45, 3, 89, 29, 10, 42];

function findMax(arr: number[]): number {
    let max = arr[0];
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    return max;
}

console.log(findMax(numbers));

この問題では、最初の要素を初期の最大値として設定し、forループで各要素をチェックして、最大値を更新していくことが求められます。

問題2: 逆順に配列を出力する

配列の要素をforループを使って逆順に出力する関数を実装してください。

let words = ["apple", "banana", "cherry", "date"];

function printReverse(arr: string[]): void {
    for (let i = arr.length - 1; i >= 0; i--) {
        console.log(arr[i]);
    }
}

printReverse(words);

この問題では、配列を最後の要素から最初の要素まで逆順に処理するため、インデックスを逆にカウントする必要があります。

問題3: 奇数と偶数を分ける

次の配列の中から、奇数と偶数を別々の配列に分けるforループを使った関数を実装してください。

let numbers = [10, 15, 20, 25, 30, 35];

function separateOddEven(arr: number[]): {odd: number[], even: number[]} {
    let odd: number[] = [];
    let even: number[] = [];
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] % 2 === 0) {
            even.push(arr[i]);
        } else {
            odd.push(arr[i]);
        }
    }
    return { odd, even };
}

let result = separateOddEven(numbers);
console.log("Odd numbers: ", result.odd);
console.log("Even numbers: ", result.even);

この問題では、forループと条件文を使って、配列の要素が偶数か奇数かを判定し、それぞれ別の配列に分類することが求められます。

問題4: 文字列のカウント

文字列の中に特定の文字がいくつ含まれているかをカウントする関数をforループを使って実装してください。

let text = "TypeScript is great";

function countCharacter(str: string, char: string): number {
    let count = 0;
    for (let i = 0; i < str.length; i++) {
        if (str[i] === char) {
            count++;
        }
    }
    return count;
}

console.log(countCharacter(text, "t"));

この問題では、文字列の各文字をforループで順番に調べ、特定の文字と一致した場合にカウンターを増やしていく処理を実装します。

問題5: 連続する数の積を計算する

1から指定された数までの連続する整数の積を計算する関数をforループで実装してください。これは、階乗を計算する関数に似ています。

function factorial(n: number): number {
    let product = 1;
    for (let i = 1; i <= n; i++) {
        product *= i;
    }
    return product;
}

console.log(factorial(5)); // 120

この問題では、nまでの連続した整数の積を計算するため、forループで順次掛け算を行います。最初に1を初期値として設定し、ループ内で更新していきます。

これらの演習問題に取り組むことで、forループの基本的な使い方をしっかりと身につけることができます。繰り返し処理を理解し、さまざまな場面で応用できるスキルを身につけましょう。

よくあるエラーとその対処法

forループを使用する際には、いくつかの一般的なエラーが発生することがあります。これらのエラーは初心者によく見られますが、原因を理解し適切な対処法を知ることで、簡単に解決できます。ここでは、forループで発生しやすいエラーとその修正方法を紹介します。

無限ループ

無限ループは、forループが終了条件に達しないため、永遠にループし続けるエラーです。無限ループは、通常、ループの終了条件やカウンターの更新に誤りがあると発生します。

例:

for (let i = 0; i >= 0; i++) {
    console.log(i);
}

この例では、iが常に0以上であるため、ループは終了条件に達することなく永遠に実行されます。

対処法:
終了条件が正しく設定されているか、またカウンターが適切に更新されているかを確認してください。正しい例は以下の通りです：

for (let i = 0; i < 10; i++) {
    console.log(i);
}

配列のインデックス範囲外アクセス

配列を操作する際に、forループのインデックスが配列の範囲外にアクセスしてしまうと、エラーや予期しない結果が発生します。

例:

let numbers = [1, 2, 3];
for (let i = 0; i <= numbers.length; i++) {
    console.log(numbers[i]);  // 最後のループでundefinedが出力される
}

この例では、i <= numbers.lengthと指定しているため、最後のインデックスは範囲外（undefined）になります。

対処法:
インデックスの範囲が適切かどうかを確認しましょう。正しい例は以下の通りです：

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

誤った初期化や終了条件

初期化や終了条件が正しく設定されていない場合、ループが期待通りに動作しません。特にi++やi--の更新がないと、無限ループの原因になります。

例:

for (let i = 10; i > 0; i++) {
    console.log(i);
}

この例では、iが減少していないため、無限ループが発生します。

対処法:
ループ変数が適切に更新されているかを確認し、正しい方向に変化しているかチェックしましょう。

タイプミスや変数のスコープの誤り

変数のスコープやタイプミスもよくある問題です。letやconstを適切に使わずに変数を宣言すると、意図しないスコープや予期しない動作が発生する可能性があります。

例:

for (i = 0; i < 5; i++) {
    console.log(i);
}

この例では、letを使わずに変数iを宣言しているため、意図せずにグローバル変数になってしまう可能性があります。

対処法:
変数を必ずletやconstで宣言し、スコープの問題が発生しないようにしましょう。正しい例は以下の通りです：

for (let i = 0; i < 5; i++) {
    console.log(i);
}

これらの一般的なエラーとその対処法を理解することで、forループを安全に、かつ効率的に利用できるようになります。問題が発生した場合には、コードのロジックや条件を見直し、修正を行いましょう。

まとめ

本記事では、TypeScriptにおけるforループの基本的な使い方から、さまざまな応用例、そしてよくあるエラーの対処法までを解説しました。forループは、繰り返し処理を行う上で非常に重要な構文であり、特に配列やオブジェクトを扱う際に強力なツールとなります。基本構文を押さえつつ、for...ofやfor...inといったバリエーション、さらにはbreakやcontinueによる制御方法も理解しておくと、より柔軟で効率的なコードが書けるようになります。