TypeScriptのfor文はどう使い分ける？for…ofからforEachまで最適なループ処理を解説

2026年5月10日

制御構文

TypeScriptを用いたアプリケーション開発において、データの集合を効率的に処理する「ループ構文」の選択は非常に重要です。

2026年現在のモダンな開発環境では、コードの可読性だけでなく、型安全性や非同期処理との親和性も考慮する必要があります。

JavaScriptから受け継いだ伝統的なfor文から、TypeScriptの強力な型推論を活かした反復処理まで、その選択肢は多岐にわたります。

本記事では、実務で頻繁に使用される各ループ構文の特徴を整理し、どのようなシーンでどの構文を選択すべきか、具体的なコード例を交えて解説します。

目次 [ close ]

TypeScriptにおけるループ処理の重要性

TypeScriptでプログラムを記述する際、反復処理はデータの変換やフィルタリング、UIのレンダリングなど、あらゆる場面で登場します。

適切なループ構文を選択することは、単にコードを短く書くだけでなく、実行時のエラーを未然に防ぎ、チーム開発におけるメンテナンス性を高めることに直結します。

特にTypeScriptでは、ループ内で扱う変数の型が正しく推論されるかどうかが、開発体験を大きく左右します。

例えば、配列の要素がundefinedになる可能性がある場合、型安全なループを使用していれば、コンパイル時にそのリスクを検知できます。

2026年現在のランタイム（Node.js 24やBun 2.0など）では、ループのパフォーマンス差は以前よりも縮まっていますが、依然として構文ごとの挙動の違いを理解しておくことは不可欠です。

基本のfor文（インデックスによる制御）

最も伝統的なfor文は、カウンタ変数を使用してループの回数を厳密に制御する手法です。

インデックス番号を直接操作できるため、特定の要素を飛ばしたり、逆順にループを回したりする場合に最適です。

基本構文と特徴

基本的なfor文は、初期化、条件式、増分式の3つのセクションで構成されます。

TypeScript

const languages: string[] = ["TypeScript", "JavaScript", "Rust"];

for (let i = 0; i < languages.length; i++) {
    // インデックスを使用して要素にアクセス
    console.log(`Index ${i}: ${languages[i]}`);
}

実行結果

Index 0: TypeScript
Index 1: JavaScript
Index 2: Rust

この構文の最大のメリットは、ループの制御が自由自在であるという点にあります。

例えば、2つ飛ばしで要素を処理したり、ループの途中でインデックスを操作したりすることも可能です。

TypeScriptにおける注意点

ただし、TypeScriptでこのfor文を使用する場合、インデックスによるアクセスは必ずしも安全ではありません。

languages[i]という記述は、TypeScriptの設定によってはundefinedの可能性を無視してしまいます。

厳密な型チェックを行う環境では、noUncheckedIndexedAccessオプションを有効にすることが推奨されます。

このオプションを有効にすると、インデックスアクセスの結果が自動的に「型 | undefined」となり、より安全なコード記述が求められます。

for…of文（モダンな配列ループの標準）

現在のTypeScript開発において、配列の全要素を走査する際の第一選択肢となるのがfor…of文です。

ES6で導入されたこの構文は、イテラブル（反復可能）なオブジェクトに対して直感的に記述できます。

簡潔な記述と型推論

for...of文を使用すると、インデックスを意識することなく、各要素を直接変数として取り出すことができます。

TypeScript

const prices: number[] = [100, 200, 300];

for (const price of prices) {
    // priceは自動的にnumber型として推論される
    console.log(price * 1.1);
}

このように、インデックスの管理が不要になるため、オフバイワンエラー（ループ回数が1回ずれるミス）を防ぐことができます。

また、constを使用してループ変数を宣言できるため、ループ内での意図しない再代入を防ぐ効果もあります。

インデックスが必要な場合の解決策

for...ofを使用しながらインデックスも取得したい場合は、entries()メソッドを併用します。

TypeScript

const users: string[] = ["Alice", "Bob", "Charlie"];

for (const [index, user] of users.entries()) {
    console.log(`${index}: ${user}`);
}

この書き方は、分割代入を活用することで非常に見通しの良いコードになります。

TypeScriptはこの場合も、indexをnumber、userをstringとして正しく型推論してくれます。

Array.prototype.forEach（メソッドベースの反復）

forEachは配列のメソッドとして提供されており、関数型のスタイルでループを記述できます。

多くのJavaScript開発者に親しまれてきた手法ですが、TypeScriptにおいても特定の場面で有用です。

forEachの書き方と特徴

コールバック関数を引数に取るため、既存の関数をそのまま渡すことができる点が魅力です。

TypeScript

const logs: string[] = ["Error", "Warning", "Info"];

logs.forEach((log, index) => {
    console.log(`${index}: ${log}`);
});

forEachの大きな特徴は、「何に対して処理を行うか」がメソッド名によって明確になることです。

メソッドチェーンの途中で使用することはできませんが、一連の処理の最後に副作用を実行する際に適しています。

forEachの欠点と制約

しかし、forEachには「breakやcontinueが使えない」という重大な制約があります。

途中でループを抜け出したい場合は、for...of文やsome()、every()といった他のメソッドを検討する必要があります。

また、後述する非同期処理（async/await）との相性が非常に悪い点にも注意が必要です。

for…in文（オブジェクトのプロパティ走査）

for...in文は、オブジェクトのプロパティ名を列挙するための構文です。

配列に対しても使用できますが、配列のループにfor…inを使用することはTypeScriptでは推奨されません。

オブジェクトでの使用例

オブジェクトのすべてのキーに対して処理を行いたい場合に利用します。

TypeScript

const userSettings = {
    theme: "dark",
    notifications: true,
    fontSize: 14
};

for (const key in userSettings) {
    console.log(`${key}: ${userSettings[key as keyof typeof userSettings]}`);
}

TypeScriptでは、keyが単なるstring型として推論されてしまうため、オブジェクトの値にアクセスする際にはas keyof typeofによる型アサーションが必要になるケースが多いです。

配列での使用を避ける理由

配列にfor...inを使用すると、インデックスが数値ではなく文字列として渡されます。

また、配列のプロトタイプに追加された独自のプロパティまで走査の対象に含まれてしまうリスクがあります。

したがって、配列のループには必ずfor…ofか通常のfor文を選択するようにしましょう。

非同期処理とループの使い分け

2026年のWeb開発では、APIリクエストやデータベース操作など、ループ内で非同期処理を行う機会が増えています。

ここで構文の選択を誤ると、予期せぬ実行順序やパフォーマンスの低下を招きます。

for…of内でのawait

ループ内で一つずつ順番に非同期処理を完了させたい場合、for...of文が最適です。

TypeScript

async function processOrders(orderIds: string[]) {
    for (const id of orderIds) {
        // 一つ前の処理が終わるのを待ってから次に進む
        const result = await fetchOrder(id);
        console.log(result);
    }
}

この書き方は、処理の順序を保証したい場合に非常に強力です。

forEachとasyncの罠

一方で、forEachの中でawaitを使用すると、期待通りに動作しません。

forEachはコールバック関数の完了を待たずに次の要素へ進んでしまうため、すべての非同期処理がほぼ同時に開始され、その終了を待機することもできません。

並列で処理を行いたい場合は、mapメソッドとPromise.allを組み合わせる手法が一般的です。

for await…of（非同期イテレータ）

ストリームデータや非同期ジェネレータを扱う場合は、for await...of文を使用します。

TypeScript

async function consumeStream(reader: ReadableStreamDefaultReader) {
    // 非同期的に流れてくるデータを逐次処理
    for await (const chunk of reader) {
        processChunk(chunk);
    }
}

これは、大規模なデータ処理やリアルタイム通信を行うアプリケーションで重宝される構文です。

TypeScriptにおける型安全なループのテクニック

TypeScriptの真価を発揮させるためには、ループ内での型定義にも工夫が必要です。

ここでは、より安全にループを回すための応用的なテクニックを紹介します。

Object.entriesによる型安全な走査

オブジェクトをループする場合、for...inよりもObject.entries()とfor...ofの組み合わせが型安全です。

TypeScript

type Config = { [key: string]: string | number };
const config: Config = { api: "https://api.example.com", timeout: 5000 };

for (const [key, value] of Object.entries(config)) {
    // keyはstring, valueはstring | numberとして安全に扱える
    console.log(`${key} is ${value}`);
}

ただし、デフォルトではObject.entriesのキーはstring型として扱われます。

特定のユニオン型としてキーを扱いたい場合は、ジェネリクスを活用したユーティリティ関数を作成するのも一つの手です。

ReadonlyArrayによる不変性の確保

ループ内で配列を誤って変更しないようにするには、引数の型にReadonlyArrayを指定します。

TypeScript

function displayList(items: ReadonlyArray<string>) {
    for (const item of items) {
        // items.push("new") などの操作はコンパイルエラーになる
        console.log(item);
    }
}

これにより、ループ処理は「読み取り専用」であることが保証され、バグの混入を防ぐことができます。

ループ構文の比較まとめ

ここまで紹介した各ループ構文の特徴を、以下の表にまとめました。

構文	主な用途	break/continue	非同期(await)	備考
for文	インデックス制御、特殊な反復	可能	対応	最も柔軟だが記述が冗長
for…of文	配列・イテラブルの全走査	可能	対応	モダンな開発の標準
forEach	簡潔な副作用の実行	不可	不適合	関数型スタイル、中断不可
for…in文	オブジェクトのキー走査	可能	対応	配列には使用禁止
for await…of	非同期ストリームの処理	可能	必須	Node.jsストリームなどで活用