JavaScriptのfor文の書き方を基本から応用まで紹介

JavaScriptを使って効率的なプログラミングを行うためには、繰り返し処理を自由自在に操ることが欠かせません。

2026年現在のモダンなJavaScript開発において、for文は最も基礎的かつ強力な制御構造の一つとして君臨しています。

データの配列を処理したり、特定の回数だけ処理を繰り返したりといった場面で、適切なループ処理を選択することはコードの可読性やパフォーマンスに直結します。

この記事では、JavaScriptにおけるfor文の基本的な書き方から、現場で役立つ応用的なテクニックまでを詳しく紹介します。

初心者の方でも理解しやすいように、各構文の特徴や使い分けのポイントを具体例とともに解説していきます。

JavaScriptにおけるfor文の基本構造

まずは、最も古くから使われている標準的なfor文の書き方を確認していきましょう。

この構文は「初期化式」「条件式」「変化式」の3つの要素で構成されています。

// 基本的なfor文の例
for (let i = 0; i < 5; i++) {
    console.log(i + "回目のループです");
}

0回目のループです
1回目のループです
2回目のループです
3回目のループです
4回目のループです

初期化式・条件式・変化式の役割

初期化式であるlet i = 0は、ループが始まる前に一度だけ実行され、カウンタ変数を準備します。

条件式のi < 5は、各ループの開始前に評価され、この結果が真（true）である限り処理が継続されます。

変化式のi++は、ループ内の処理が終わるたびに実行され、カウンタ変数の値を更新します。

これら3つの要素を適切に設定することで、意図した回数だけ正確に処理を繰り返すことが可能になります。

無限ループの回避と注意点

条件式が常に真を返すように設定してしまうと、プログラムが終了しない「無限ループ」に陥る危険があります。

無限ループが発生するとブラウザの動作が停止したり、システムのリソースを過剰に消費したりするため注意が必要です。

必ず条件式がいつか偽（false）になるように設計することを意識してください。

配列の処理に最適なfor…of文

配列の要素を一つずつ取り出して処理する場合、2026年の開発現場ではfor...of文が主流となっています。

従来のfor文よりも簡潔に記述でき、インデックスの管理を意識する必要がないため、バグが混入しにくいというメリットがあります。

// 配列を扱うfor...of文
const fruits = ["りんご", "バナナ", "オレンジ"];

for (const fruit of fruits) {
    console.log("果物名: " + fruit);
}

果物名: りんご
果物名: バナナ
果物名: オレンジ

for…of文のメリット

この構文の最大の特徴は、コードの可読性が非常に高い点にあります。

配列の長さを取得したり、インデックスを使って要素にアクセスしたりする手間が省けます。

また、カウンタ変数の書き間違いによるエラーを防ぐことができるため、安全なコーディングが可能です。

MapやSetへの応用

for...of文は配列だけでなく、MapやSetといった他の反復可能なオブジェクト（Iterable）にも使用できます。

これにより、複雑なデータ構造であっても統一された書き方でループ処理を記述できます。

オブジェクトのプロパティを走査するfor…in文

オブジェクト（連想配列）のキー（プロパティ名）を順番に取り出すには、for...in文を使用します。

これは配列用ではなく、主にオブジェクトの構造を調査したり、動的に値を操作したりする場合に適しています。

// オブジェクトを扱うfor...in文
const user = {
    name: "田中",
    age: 25,
    role: "エンジニア"
};

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

name: 田中
age: 25
role: エンジニア

for…in文の使用上の注意

for…in文はオブジェクトのプロトタイプに含まれる継承されたプロパティも列挙してしまう可能性があります。

意図しないプロパティの取得を防ぐためには、Object.keys()やObject.entries()との併用を検討してください。

配列に対してfor...inを使うと、インデックスが文字列として取得されるため、配列のループには推奨されません。

ループの制御：breakとcontinue

特定の条件を満たしたときにループを中断したり、特定の回だけ処理をスキップしたり制御が必要な場合があります。

JavaScriptには、そのためのキーワードとしてbreakとcontinueが用意されています。

break文による強制終了

breakを使用すると、ループの条件式が真であっても、その時点でループを完全に終了させます。

大量のデータから特定の要素を見つけた瞬間に処理を打ち切りたい場合などに非常に有効です。

// 特定の数字を見つけたら終了
for (let i = 1; i <= 10; i++) {
    if (i === 6) {
        console.log("6が見つかったので終了します");
        break;
    }
    console.log(i);
}

1
2
3
4
5
6が見つかったので終了します

continue文によるスキップ

continueを使用すると、現在のループ回の残りの処理を飛ばして、次のイテレーション（繰り返し）へ進みます。

特定の条件に合致するデータだけを除外して処理を続けたい場面で重宝します。

// 偶数のときだけ処理をスキップ
for (let i = 1; i <= 5; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i + "は奇数です");
}

1は奇数です
3は奇数です
5は奇数です

2026年の応用テクニック：非同期ループ

現代のJavaScript開発では、API通信やファイルの読み書きなど、非同期処理を伴うループが頻出します。

非同期データを順番に処理するためには、for await...of構文を活用することが標準となっています。

// 非同期処理を伴うループ
async function processItems(items) {
    for (const item of items) {
        // 各アイテムを非同期で処理（擬似的な例）
        const result = await someAsyncFunction(item);
        console.log(result);
    }
}

非同期ループのポイント

通常のforEachメソッド内ではawaitを期待通りに動作させることが難しいため、for...ofが選ばれます。

逐次処理を行いたい場合はfor文、並列処理を行いたい場合はPromise.allという使い分けが重要です。

非同期ループを正しく使いこなすことで、ユーザー体験を損なわないスムーズなアプリケーションを構築できます。

ループ手法の比較と使い分け

JavaScriptには多くのループ手法があるため、状況に応じて最適なものを選択する必要があります。

以下の表に、主要なループ手法の特徴と用途をまとめました。

パフォーマンスに関する考察

非常に大規模な配列（数百万要素など）を扱う場合、標準的なfor文が最も高速に動作する傾向があります。

しかし、近年のJavaScriptエンジンは高度に最適化されており、通常のアプリケーション開発においてfor...ofの速度が問題になることは稀です。

まずは「可読性」を優先してコードを書き、パフォーマンスがボトルネックになった段階で最適化を検討するのが良いでしょう。

まとめ

JavaScriptのfor文は、単純な繰り返しから複雑な非同期処理までをカバーする非常に奥の深い機能です。

基本となる標準的なfor文の仕組みを理解した上で、for...ofやfor...inといった便利な構文を使い分けることが、プロフェッショナルなコードへの第一歩となります。

特に、2026年の開発環境においては、コードの明瞭さと非同期処理への対応が強く求められます。

今回紹介したテクニックを日々のコーディングに取り入れ、より効率的でバグの少ないプログラムを目指しましょう。

繰り返し処理のマスターは、JavaScriptマスターへの道において避けては通れない重要なステップです。