JavaScriptのループ構文は、配列やオブジェクトの要素を繰り返し処理する際に欠かせない基本技術です。
中でもfor文をはじめ、forEach・for...of・for...inといった多様なループ手段が用意されており、それぞれに適した使い方があります。しかし、初心者のうちは構文の違いや使い分けに戸惑うことも少なくありません。
この記事では、JavaScriptのループ構文の基礎から応用までを体系的に解説し、配列処理の実践力を高めるための具体例とベストプラクティスを紹介します。
目次
1.JavaScriptの「for文」とは？
JavaScriptを学び始めたばかりの方にとって、最初の関門となるのが「繰り返し処理」、いわゆるループの仕組みです。その中でもfor文は、最も基本的かつ多用途なループ構文として広く使われています。本章ではfor文の構文や活用シーン、他のループ構文と比較した際の強みについて、初心者にもわかりやすく解説します。
for文の基本構文
JavaScriptのfor文は、繰り返し処理（ループ）を実行するための基本構文です。繰り返し回数が明確な場合に最もよく使われます。
for文は初期化・条件判定・更新処理の3つを明示的に記述できるため、処理の流れが理解しやすく、柔軟な繰り返し制御が可能です。これにより配列やリストの要素を順に処理したり、回数指定のループを実装したりと、多くの場面で利用されています。
以下は、配列の要素を順に出力するfor文の基本例です。
const fruits = ['りんご', 'バナナ', 'オレンジ'];
console.log(fruits[i]); } |
このようにiを0から始めてfruits.length未満の間ループを継続し、1ずつ加算していくことで、配列のすべての要素を順に出力できます。
for文は、処理の回数が決まっている場面や、インデックスを明示的に操作したい場合に最も適したループ構文です。JavaScriptの基礎を学ぶ上で、まずはこのfor文を正確に理解し、使えるようになることが重要です。
なぜfor文を使うのか
for文は、回数を明示して反復処理を行いたい場面で最も適しています。
繰り返し回数が明確であったり、インデックスを操作しながら処理を進めたい場合、for文を使うことで柔軟な制御が可能となります。また、複雑な条件判定や多重ループにも対応できます。
例えば、配列の要素を偶数番目だけ取り出したい場合、for文が役立ちます。
const scores = [80, 90, 70, 85, 60]; for (let i = 0; i < scores.length; i += 2) { console.log(scores[i]); // 80, 70, 60 } |
for文は単なる繰り返しにとどまらず、「どこから・どこまで・どのように」繰り返すかを自在に設計できる強力なツールです。
回数指定やカウンタ制御に適している理由
for文は、繰り返し回数を精密に制御したい場合に最も適した構文です。
初期化・条件・増減を個別に指定できるため何回処理を繰り返すか、どのようにカウントを進めるかを自由に設定できます。これは他のループ構文（forEachやfor...of）では実現しにくい柔軟性です。
以下のコードでは、5回だけループ処理を実行し、奇数回のみ出力しています。
for (let i = 1; i <= 5; i++) { if (i % 2 === 1) { console.log(`奇数：${i}`); } } |
ループ回数を厳密に指定したり、条件によって処理を分岐させたりしたい場合、for文は非常に有用な構文です。
2.JavaScriptで配列をfor文で処理する方法
配列は複数のデータをひとまとまりで管理・処理できる、JavaScriptにおける重要なデータ構造の一つです。その配列の各要素に対して同じ処理を繰り返す際に活躍するのがfor文です。本章ではfor文を使った配列の基本的な操作方法からインデックスの活用、実装時に注意すべきポイントまで、初学者にもわかりやすく整理して解説します。
配列に値を格納してfor文で取り出す
for文を使えば、配列の要素を順番に取り出して処理することが簡単にできます。
JavaScriptの配列には順序があり、インデックス（添字）を指定することで個々の要素にアクセスできます。for文は、このインデックスを操作するのに最適なループ構文です。
const colors = ['赤', '青', '緑'];
console.log(colors[i]); } |
このコードでは、配列 colors に格納された3つの文字列を、インデックスを使って順番に出力しています。
配列に格納されたデータを1つずつ処理したい場合、for文はシンプルかつ強力な方法です。
配列のインデックスと値を同時に扱う方法
for文を使えば、配列の「値」だけでなく「インデックス」も同時に扱うことができます。
for文では、カウンタ変数（例：i）を明示的に管理できるため、要素の位置を使った条件分岐や処理が可能です。これは、forEach構文などにはない利点です。
const names = ['佐藤', '鈴木', '高橋'];
console.log(`${i}番目は${names[i]}さんです`); }
0番目は佐藤さんです 1番目は鈴木さんです 2番目は高橋さんです |
インデックスを活用することで、単なる値の出力だけでなく、位置情報を使った柔軟な処理が可能になります。
for文での配列操作における注意点
for文で配列を処理する際は、ループ条件に使うlengthをあらかじめ変数に保存するなど、処理効率や安全性を高める工夫が重要です。
ループのたびにarray.lengthを毎回評価すると、処理効率が悪化する恐れがあります。また、配列の長さが処理中に変更されると、思わぬバグにつながる可能性があります。
const items = ['A', 'B', 'C', 'D']; const len = items.length;
console.log(items[i]); } |
このように、事前にlengthを変数に代入しておくことで、可読性とパフォーマンスを向上させることができます。
for文で配列を扱う際は、処理の効率性や可読性、安全性を意識した書き方を心がけることが大切です。
関連記事
JavaScript配列完全ガイド｜初期化・追加・操作から配列操作・連想配列まで徹底解説
3.forEach文とは？for文との違いを比較
JavaScriptには複数のループ構文があり、用途に応じた使い分けが求められます。その中でもforEachは、配列に特化したメソッドとして、多くの場面で活用されています。本章ではforEachの基本構文と使い方を解説するとともに、for文との機能的な違いや、それぞれが適しているケース・適していないケースについて比較検討します。
forEachの基本構文と使い方
forEachは配列の各要素に対して順に処理を行うためのメソッドで、可読性が高く、記述も簡潔です。
forEachは、関数（コールバック）を使って要素ごとの処理を定義します。インデックスを意識せずに値のみを扱いたいときに有効で、コードの簡素化に貢献します。
なお、forEachのコールバック関数は、第2引数としてインデックス、第3引数として配列自体も受け取ることができます。
const fruits = ['りんご', 'みかん', 'バナナ'];
console.log(fruit); }); |
あるいは、アロー関数を用いてより簡潔に書くことも可能です。
fruits.forEach(fruit => console.log(fruit)); |
forEachは、シンプルに配列の値を処理したい場面において、直感的でわかりやすい構文です。
forとforEachの処理の違い
forEachは記述の簡潔さに優れますが、処理の柔軟性ではforに劣る面があります。
for文はループの開始点・終了条件・更新処理を自由に設定できるのに対し、forEachは配列全体を一律に処理することに特化しており、中断（breakやcontinue）ができません。
forEachでは途中で処理を抜けることができません。
const numbers = [1, 2, 3, 4, 5];
if (num === 3) return; // ループ自体は止まらず、次に進んでしまう console.log(num); }); |
この場合、returnは関数スコープ内の処理終了を意味するだけで、ループ自体は継続されます。
細かい制御が必要な場合はfor文、単純な処理であればforEach、と使い分けることが重要です。
forEachが向いているケース・向いていないケース
forEachは「全要素に一様な処理を適用」する場合に最適であり、「途中で処理を止めたい」「非同期処理を伴う」ようなケースには向いていません。
forEachは配列すべての要素に対して順に処理を行う前提で動作します。中断やスキップができないため、条件に応じた処理の流れを制御したい場合には適しません。また、awaitなどの非同期処理も期待通りに機能しないことがあります。
以下のようなケースでは、for文の方が適切です。
const values = [10, 20, 30, 40, 50];
if (values[i] === 30) break; // 30で処理を中断できる console.log(values[i]); } |
forEachは用途が限定されるメソッドです。処理の流れに柔軟性が求められる場合は、for文や他のループ構文を選ぶべきです。
関連記事
【JavaScript】each()を代替するforEach文の使い方｜アロー関数とfor文の比較解説
4.for...of構文とは？配列処理での使い方
JavaScriptでは、配列や文字列などの反復可能なオブジェクトを扱う際に、for...of構文が有効です。インデックス管理を必要とせず、値そのものに直接アクセスできる点が特徴であり、コードの簡素化と可読性の向上に寄与します。本章ではfor...ofの基本構文から、他のループ構文との比較、さらに実務での活用シーンまでを詳しく解説します。
for...ofの基本構文と例
for...of構文は配列や文字列、Map・Setなどの反復可能オブジェクトをシンプルに扱えるループ構文です。
for...ofは値そのものを順番に取り出して処理できるため、インデックス管理が不要で、読みやすくエラーも起きにくいコードが書けます。
const animals = ['犬', '猫', '鳥'];
console.log(animal); }
犬 猫 鳥 |
インデックスを使わず配列の値だけを処理したい場合には、for...of構文が簡潔かつ安全です。
for...ofとfor文・forEachとの比較
for...ofはforやforEachと比べて、可読性・簡潔さ・安全性のバランスに優れた構文です。
for：柔軟だが冗長になりやすい
forEach：中断不可・非同期に弱い
for...of：記述が簡潔で、break/continueも使用可能、async/awaitとの併用も可能
ただしインデックスを使いたい場合はforを、配列以外のオブジェクトを扱いたい場合はfor...inを選ぶ必要があります。
const items = ['A', 'B', 'C'];
console.log(`${index}: ${item}`); });
|
値の処理に特化するならfor...ofが最適ですが、用途に応じた使い分けが重要です。
for...ofが活きるユースケースとは
for...ofは配列や文字列、Set・Mapなどを「値ベース」で反復処理したいときに最適です。
インデックス操作や中断処理の必要がなければ、for...ofによりコードをシンプルに保つことができます。特に、DOM要素のNodeListや文字列などの反復処理に有効です。
const message = 'HELLO';
console.log(char); } // 結果：H E L L O |
また、Mapとの組み合わせも強力です。
const userMap = new Map([ ['id', 123], ['name', 'Tanaka'] ]);
console.log(`${key}: ${value}`); } |
インデックスが不要な繰り返し処理では、for...ofを使うことで記述の簡潔化と可読性の向上が期待できます。
関連記事
JavaScriptの使い方【入門】基本構文や簡単なプログラム例を初心者向けに解説
5.for...in構文の特徴と注意点
JavaScriptには複数のループ構文がありますが、その中でもfor...inはオブジェクトのプロパティを効率的に列挙するために使われる構文です。一見すると配列にも使えそうに思えますが、実は配列との相性は良くなく、誤った使い方をすると思わぬ不具合を引き起こすことがあります。本章ではfor...inの基本的な使い方と対象、配列には不向きである理由、そしてオブジェクト処理における適切な活用法について詳しく解説します。
for...inの基本構文と対象
for...in構文は、オブジェクトのプロパティ名（キー）を列挙するために用いられるループ構文です。
JavaScriptにおけるfor...inは、オブジェクトのプロパティを動的に処理したいときに便利であり、キーの取得を簡単に実現できます。配列のように順序を意識せず、キーと値のペアを扱う場面で役立ちます。
const user = { name: '佐藤', age: 30, job: 'エンジニア' };
console.log(`${key}: ${user[key]}`); }
name: 佐藤 age: 30 job: エンジニア |
オブジェクトの各プロパティを動的に処理したい場合、for...inはシンプルかつ有効な選択肢です。
配列に使うべきではない理由
for...inは配列の処理には適していません。使用すると予期しない結果を招く可能性があります。
for...inは配列のインデックス順を保証せず、また、プロトタイプで継承されたプロパティまで列挙してしまうことがあります。これにより、意図しない値が処理されるリスクがあります。
const colors = ['赤', '青', '緑'];
console.log(key); // → 0, 1, 2, customProp（予期しない結果） } |
配列に対してfor...inを使用すると、順序や内容が崩れる恐れがあるため、配列処理にはforやfor...ofを使用すべきです。
for...inの主な用途
for...inの最も適した用途は、オブジェクトのプロパティ列挙です。
オブジェクトのキーを順に処理し、対応する値にアクセスする場合for...inによってすべてのプロパティを簡潔に走査できます。また、プロパティの有無をチェックしながら処理することも可能です。
const settings = { theme: 'dark', fontSize: 14, showSidebar: true };
if (settings.hasOwnProperty(key)) { console.log(`${key} = ${settings[key]}`); } } |
このように、hasOwnProperty()を併用することで、オブジェクト自身が持つプロパティのみを対象とする安全な処理が行えます。
オブジェクトの構造を動的に扱いたいときは、for...in構文が最も適しており、適切なフィルタリングを行うことで実用性が高まります。
6.JavaScriptのfor文から抜ける方法と制御構文
ループ処理ではすべての繰り返しを最後まで実行するとは限らず、特定の条件で中断したり、一部の処理をスキップしたりすることが必要な場面があります。JavaScriptのfor文ではこうした制御を実現するために、breakやcontinue・returnといった文を活用します。本章では、それぞれの制御構文の基本的な使い方と具体例、注意すべき挙動の違いについて解説します。
breakによるループの中断
break文を使うことで、特定の条件に達した時点でfor文のループ処理を即座に終了できます。
通常、for文は条件式がfalseになるまで継続しますが、breakを使えばループ途中で強制的に抜けることができ、無駄な処理を回避できます。
const numbers = [10, 20, 30, 40, 50];
if (numbers[i] === 30) { break; } console.log(numbers[i]); }
10 20 |
必要な処理だけを行い、不要なループを避けたい場合は、break文の活用が効果的です。
continueでスキップ処理を実装
continue文は、特定の条件に一致した場合にその1回のループ処理をスキップし、次の繰り返しに進めます。
条件によって特定の処理を回避したいとき、if文との組み合わせでcontinueを使えば、コードの可読性と効率を両立できます。
for (let i = 1; i <= 5; i++) { if (i % 2 === 0) { continue; } console.log(i); }
1 3 5 |
特定の条件で処理を飛ばしたい場合、continueを使えばループ構造を壊さずに対応可能です。
returnや例外処理での制御の違い
returnは関数全体を終了させる命令であり、for文の中で使うとループだけでなく関数そのものの処理も終了してしまいます。
ループの中で関数全体の処理を終えたいケースではreturnが有効ですが、単にループを抜けたいだけの場合はbreakやcontinueを使うべきです。また、try-catch構文を使った例外処理もループ制御に活用できますが、通常はエラーハンドリングに限定すべきです。
function checkArray(arr) { for (let i = 0; i < arr.length; i++) { if (arr[i] < 0) { return '負の値を検出'; } } return 'すべて正の値'; }
|
ループ内での制御は、目的に応じてbreak・continue・returnを適切に使い分けることで、意図通りの動作を実現できます。
関連記事
JavaScriptでのsleep実装する方法とは？setTimeout・Promise・awaitによる一時停止方法を解説
7.for文をより安全に書くためのベストプラクティス
for文は強力な繰り返し処理手段である一方で、使い方によってはパフォーマンスの低下やバグの温床となるリスクも抱えています。変数のスコープや配列の長さの扱い、処理のネスト構造などは、初心者がつまずきやすいポイントです。本章では、for文を安全かつ効率的に記述するための実践的な工夫やコーディングの指針を解説します。
letとvarの違いとスコープの理解
for文のカウンタ変数にはletを使うのが安全です。varではスコープの違いにより予期しない動作を招く可能性があります。
varは関数スコープであるのに対し、letはブロックスコープを持ちます。そのため、for文のブロック内だけで有効にしたい変数は、letを使うことでスコープの誤認識や値の上書きを防ぐことができます。
for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // 結果: 3, 3, 3
setTimeout(() => console.log(j), 100); } // 結果: 0, 1, 2 |
lengthのキャッシュや逆順ループの活用
配列のlengthを事前に変数にキャッシュしたり、必要に応じて逆順にループ処理を行うことで、パフォーマンスと安定性が向上します。
ループごとにarray.lengthを再評価すると、不要なコストがかかります。特に大規模な配列ではパフォーマンスに影響することがあります。また、逆順ループは、末尾の要素から安全に削除しながら処理する場面で役立ちます。
const items = ['A', 'B', 'C', 'D']; const len = items.length;
console.log(items[i]); }
console.log(`逆順: ${items[i]}`); } |
少しの工夫で、パフォーマンスや処理の正確性を大きく向上させることができます。
ネストの回避と可読性向上の工夫
for文のネスト（入れ子構造）は、必要最小限に抑え、処理の分離や関数化によって可読性を維持することが重要です。
ネストが深くなると、コードが読みにくくなり、保守性が低下します。処理を小さな関数に切り出すことで、意図が明確になり、再利用性も高まります。
// 悪い例（ネストが深い） for (let i = 0; i < outer.length; i++) { for (let j = 0; j < inner.length; j++) { if (condition) { // 複雑な処理 } } }
function processPair(outerItem, innerItem) { if (condition) { // 処理内容 } }
for (let j = 0; j < inner.length; j++) { processPair(outer[i], inner[j]); } } |
for文を使う際は、構造の簡素化と処理の分離を意識することで、保守性の高いコードを実現できます。
8.まとめ
JavaScriptのループ処理は、目的や対象に応じて最適な構文を使い分けることが重要です。
for文・forEach・for...of・for...inといった各構文には、それぞれ得意な用途や特性があります。単純に繰り返すだけではなく「処理の中断が必要か」「インデックスが必要か」「対象が配列かオブジェクトか」などの条件によって、適切な構文を選ぶことが、安全で読みやすく、意図通りに動作するコードを実現するために欠かせません。
本記事が皆様にとって少しでもお役に立てますと幸いです。
「フリーランスボード」は、数多くのフリーランスエージェントが掲載するITフリーランスエンジニア・ITフリーランス向けの案件・求人を一括検索できるサイトです。
開発環境、職種、単価、稼働形態、稼働日数など様々な条件から、あなたに最適なフリーランス案件・求人を簡単に見つけることができます。
単価アップを目指す方や、自分の得意なスキルを活かせる案件に参画したい方は、ぜひ「フリーランスボード」をご利用ください。
自身に最適なフリーランスエージェントを探したい方はこちらよりご確認いただけます。