【JavaScript】for文の書き方まとめ：種類ごとの使い分けと注意点を解説

2026年5月6日2026年5月8日

制御構文

JavaScriptにおけるプログラミングにおいて、繰り返し処理は最も基本的かつ頻繁に使用されるロジックの一つです。

データのリストを順番に処理したり、特定の条件を満たすまで同じ動作を繰り返したりする場合、ループ処理の理解は不可欠です。

2026年現在のモダンな開発現場では、従来のfor文に加えて、より宣言的で読みやすい構文が一般的に利用されています。

本記事では、基本的な書き方から高度な使い分け、そして実務で役立つ注意点までを詳しく解説します。

目次 [ close ]

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

JavaScriptでアプリケーションを開発する際、サーバーから取得したJSONデータの配列を処理したり、UIコンポーネントを動的に生成したりする場面で、必ずといっていいほどループ処理が登場します。

かつては単純な数値添字（インデックス）を用いたfor文が主流でしたが、言語の進化とともに「何をしたいか」を直感的に記述できる構文が増えてきました。

適切なループ構文を選択することは、単にコードを短くするだけでなく、バグの抑制や実行パフォーマンスの最適化、さらにはチーム開発におけるコードの可読性向上に直結します。

基本のfor文（カウンタ変数方式）

最も古くから存在し、かつ現在でも強力な柔軟性を持つのが、カウンタ変数を使用した伝統的なfor文です。

基本構文と仕組み

この構文は、初期化式、条件式、更新式の3つの要素で構成されます。

JavaScript

// 基本的なfor文の例
for (let i = 0; i < 5; i++) {
  console.log(`現在のカウント: ${i}`);
}

実行結果

現在のカウント: 0
現在のカウント: 1
現在のカウント: 2
現在のカウント: 3
現在のカウント: 4

上記のコードでは、まず let i = 0 で変数 i を初期化します。

次に i < 5 という条件が評価され、真（true）であればブロック内の処理が実行されます。

処理が終わると i++ によって値が更新され、再び条件判定に戻ります。

カウンタ方式のメリットとデメリット

この方式の最大の特徴は、「ループの進行を細かく制御できる」点にあります。

特徴	内容
柔軟なステップ	`i += 2` のように1飛ばしでループさせることが可能
逆順処理	`let i = arr.length - 1; i >= 0; i--` で後ろから処理できる
早期終了	`break` や `continue` との相性が良い

一方で、記述量が多くなりがちで、無限ループ（条件式がいつまでも偽にならない状態）やオフバイワン・エラー（ループ回数が1回多い、または少ない）といった単純なミスを誘発しやすいというデメリットもあります。

配列の反復に最適な for…of 文

ES6（ES2015）で導入されたfor...of文は、配列や文字列といった「反復可能（Iterable）オブジェクト」を処理するために設計された構文です。

for…of の書き方

配列の要素を一つずつ直接取り出すことができるため、カウンタ変数を使って要素にアクセスする手間が省けます。

JavaScript

const frameworkList = ["React", "Vue", "Svelte", "Next.js"];

for (const framework of frameworkList) {
  console.log(`推奨フレームワーク: ${framework}`);
}

実行結果

推奨フレームワーク: React
推奨フレームワーク: Vue
推奨フレームワーク: Svelte
推奨フレームワーク: Next.js

この構文の利点は、コードが非常にシンプルになることです。

配列の長さを意識する必要がなく、意図しないインデックス操作によるエラーを未然に防ぐことができます。

インデックスが必要な場合：entries() メソッド

「値だけでなく、現在のインデックス番号も知りたい」という場合は、entries() メソッドと分割代入を組み合わせるのがスマートな解決策です。

JavaScript

const colors = ["Red", "Green", "Blue"];

for (const [index, color] of colors.entries()) {
  console.log(`${index + 1}番目の色は ${color} です`);
}

実行結果

1番目の色は Red です
2番目の色は Green です
3番目の色は Blue です

このように、for...of は現代のJavaScriptにおいて、配列ループの第一選択肢となります。

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

for...in文は、オブジェクトの「列挙可能なプロパティ」をループするために使用されます。

配列に対しても使用可能ですが、基本的には配列のループに使用してはいけません。

オブジェクトでの利用例

JavaScript

const user = {
  id: 1,
  name: "田中太郎",
  role: "Admin"
};

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

実行結果

id: 1
name: 田中太郎
role: Admin

for…in 使用時の注意点

for...in文には、いくつかの注意すべき仕様があります。

継承されたプロパティ: オブジェクトのプロトタイプチェーン上にある親要素のプロパティまで列挙してしまう可能性があります。
順序の保証: 多くの環境で定義順に実行されますが、仕様上、厳密な実行順序は保証されていません。
配列への使用禁止: 配列に使用すると、インデックスが「数値」ではなく「文字列」として扱われ、予期せぬ動作やパフォーマンス低下を招きます。

モダンな開発では、オブジェクトのキーを配列として取得する Object.keys() や、値を取得する Object.values() を for...of と組み合わせて使う手法が多く採用されています。

配列メソッド forEach との比較

for文と並んでよく使われるのが、配列の組み込みメソッドである forEach です。

forEach の特徴

JavaScript

const numbers = [10, 20, 30];

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

forEach は関数型の書き方を提供し、スコープが各ループ内に閉じているため安全です。

しかし、for文と比較して決定的な違いが2点あります。

中断ができない: forEach の内部で break や return を使ってループ全体を途中で抜けることはできません。
非同期処理（async/await）との相性: forEach 内で await を使用しても、ループは待機せずに次々と実行されてしまいます。直列で非同期処理を行いたい場合は、必ず for...of を使用してください。

ループの制御：break と continue

処理を効率化するためには、不要なループをスキップしたり中断したりする制御命令を使いこなす必要があります。

break によるループの中断

特定の条件に合致した時点で、それ以降の処理を行わずにループを完全に終了させます。

JavaScript

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

for (const item of items) {
  if (item === 4) {
    console.log("4を見つけたので終了します");
    break; 
  }
  console.log(item);
}

実行結果

1
2
3
4を見つけたので終了します

continue による現在の回のスキップ

現在の回だけ処理を飛ばし、次のループの回（イテレーション）へ進みます。

JavaScript

for (let i = 0; i < 5; i++) {
  if (i % 2 === 0) {
    continue; // 偶数の場合はスキップ
  }
  console.log(`奇数: ${i}`);
}

実行結果

奇数: 1
奇数: 3

これらの制御命令を活用することで、無駄な計算リソースの消費を抑え、スマートなプログラムを構築できます。

【2026年最新】実務での使い分け指針

2026年現在、JavaScriptエンジン（V8等）の最適化が進んでいるため、通常のループにおいて極端な速度差が出ることは少なくなりました。

そのため、選択基準は「可読性」と「目的」にシフトしています。

以下の表に、シーン別の最適な選択肢をまとめました。

使用シーン	推奨される構文	理由
配列を単純に順番に処理したい	`for...of`	最も読みやすく、ミスが少ないため
インデックスを使って複雑な操作をする	`for (let i = ...)`	柔軟なインデックス操作が必要なため
非同期処理（API通信等）を1つずつ順番に行いたい	`for...of` + `await`	直列実行を確実に制御できる唯一の方法
オブジェクトの全プロパティを確認したい	`for...in` または `Object.entries()`	オブジェクト走査に適している
配列の要素を加工して新しい配列を作りたい	`map()`	ループではなく配列メソッドの方が意図が伝わる

特に、実務では「ループを回して何かを探す」場合には find、「条件に合うものだけ抽出する」場合には filter といった、用途に特化した配列メソッドを優先的に検討しましょう。

それらに当てはまらない、あるいは制御が必要な場合に初めて for 文が登場します。

パフォーマンスと注意点

数百万件規模の巨大なデータを扱う場合、まれにカウンタ変数形式の for 文が最速になるケースがあります。

しかし、ほとんどのウェブアプリケーション開発においては、その差は無視できるレベルです。

それよりも注意すべきは、ループ内での重い処理です。

例えば、ループのたびにDOM操作（HTMLの書き換え）を行ったり、ループ内で大きな関数を生成したりすると、ブラウザの動作が重くなる原因となります。

JavaScript

// 悪い例：ループのたびにDOMにアクセス
for (const data of largeArray) {
  document.getElementById("list").innerHTML += `<li>${data}</li>`;
}

// 良い例：文字列を組み立てて一度だけ反映
let htmlString = "";
for (const data of largeArray) {
  htmlString += `<li>${data}</li>`;
}
document.getElementById("list").innerHTML = htmlString;

このように、ループ自体の書き方だけでなく、その「中身で何をしているか」に気を配ることが、プロフェッショナルなコードへの第一歩です。