JavaScriptでプログラミングを行う際、ループ処理（繰り返し処理）は非常に重要な基本テクニックです。
配列やオブジェクト、HTML要素など、さまざまなデータに対して効率よく同じ処理を繰り返すために、for文やwhile文、forEach、for...ofなど多彩な方法が用意されています。
本記事では、それぞれのループ構文の使い方や特徴、実際のサンプルコードを交えながら、初心者にも分かりやすく解説します。
基本のループ構文
forループ
標準的なカウンタベースのループ。
以下のforループは、変数iが0から始まり、i < 5の条件を満たすまでループを繰り返します。
iの値は毎回1ずつ増加し、結果として0, 1, 2, 3, 4がコンソールに出力されます。
forループは、繰り返し回数が予めわかっている場合に最適です。
Copyをクリックするとコピーできます。
for (let i = 0; i < 5; i++) { console.log(i);}forループを途中で抜ける方法
forループの実行中に特定の条件で処理を中断したい場合、break文を使用します。
以下の例では、変数iが3になった時点でループを終了します。
break文は、ループ内の処理を即座に中断し、ループの外側の処理に移行します。
Copyをクリックするとコピーできます。
for (let i = 0; i < 5; i++) { if (i === 3) { break; } console.log(i);}また、continue文を使用すると、現在の繰り返しをスキップして次の繰り返しに進むことができます。
以下の例では、iが2の場合はスキップして次の繰り返しに進みます。
Copyをクリックするとコピーできます。
for (let i = 0; i < 5; i++) { if (i === 2) { continue; } console.log(i);}whileループ
条件が満たさなくなるまで繰り返すループ。
以下のwhileループは、条件i < 5がtrueである限り、ループが実行されます。
iが0からスタートし、毎回i++で値を1増やし、条件を満たさなくなるとループが終了します。
forループに似ていますが、条件が事前に決まっていない場合にも使いやすいです。
Copyをクリックするとコピーできます。
let i = 0;while (i < 5) { console.log(i); i++;}whileループを途中で抜ける方法
whileループでもbreak文を使用して、特定の条件でループを終了することができます。
以下の例では、変数iが3になった時点でループを終了します。
break文は、ループ内の処理を即座に中断し、ループの外側の処理に移行します。
Copyをクリックするとコピーできます。
let i = 0;while (i < 5) { if (i === 3) { break; } console.log(i); i++;}また、continue文を使用すると、現在の繰り返しをスキップして次の繰り返しに進むことができます。
以下の例では、iが2の場合はスキップして次の繰り返しに進みます。
Copyをクリックするとコピーできます。
let i = 0;while (i < 5) { i++; if (i === 2) { continue; } console.log(i);}配列のループ
JavaScriptでは、配列を扱うために多くのループ方法が提供されています。
forで配列のループ
配列のインデックスを使った基本的なループ方法。
以下のforループは、配列arrの長さ（arr.length）を使って、各要素にアクセスしています。
配列のインデックスを直接利用するため、配列の特定の範囲や位置にアクセスする際に便利です。
Copyをクリックするとコピーできます。
const arr = [1, 2, 3, 4, 5];for (let i = 0; i < arr.length; i++) { console.log(arr[i]);}forEachメソッドで配列のループ
forEachは配列のメソッドで、引数に関数を渡し、各要素に対してその関数を実行します。
以下は、配列arrの各要素がconsole.logで出力されます。
配列をループする際に最も簡潔に書ける方法の1つです。
Copyをクリックするとコピーできます。
const arr = [1, 2, 3, 4, 5];arr.forEach(num => { console.log(num);});forEachメソッドを途中で抜ける方法
forEachメソッドでは、通常のforループのようにbreak文を使用して途中で抜けることができません。
代わりに、以下のような方法で途中で処理を終了することができます。
Copyをクリックするとコピーできます。
const arr = [1, 2, 3, 4, 5];let shouldBreak = false;arr.forEach(num => { if (shouldBreak) return; if (num === 3) { shouldBreak = true; return; } console.log(num);});この例では、shouldBreakというフラグ変数を使用して、特定の条件（この場合はnum === 3）でループを終了するようにしています。
forEachメソッドで途中で抜ける必要がある場合は、代わりにfor...ofループやforループを使用することをお勧めします。
これらのループではbreak文が使えるため、より直感的に処理を制御できます。
for...ofで配列のループ
for...ofループは、配列のインデックスではなく、要素そのものにアクセスします。
以下は、配列の各要素numをループし、その値がコンソールに出力されます。
要素を直接操作したいときに直感的に使える構文です。
Copyをクリックするとコピーできます。
const arr = [1, 2, 3, 4, 5];for (const num of arr) { console.log(num);}for...ofループを途中で抜ける方法
for...ofループでは、break文を使用して途中でループを終了することができます。
以下の例では、配列の要素が3になった時点でループを終了します。
break文は、ループ内の処理を即座に中断し、ループの外側の処理に移行します。
Copyをクリックするとコピーできます。
const arr = [1, 2, 3, 4, 5];for (const num of arr) { if (num === 3) { break; } console.log(num);}また、continue文を使用すると、現在の繰り返しをスキップして次の繰り返しに進むことができます。
以下の例では、numが2の場合はスキップして次の繰り返しに進みます。
Copyをクリックするとコピーできます。
const arr = [1, 2, 3, 4, 5];for (const num of arr) { if (num === 2) { continue; } console.log(num);}mapメソッド
mapは、配列の各要素を変換して新しい配列を生成するメソッドです。
以下は、配列の各要素を2倍にした新しい配列doubledを返しています。
元の配列は変更されず、変換後のデータが必要なときに使われます。
今まで解説したループ処理とは異なりますが、各要素に対して同じ処理を実行したいときに便利です。
Copyをクリックするとコピーできます。
const arr = [1, 2, 3, 4, 5];const doubled = arr.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8, 10]オブジェクト(連想配列)のループ
for...inでオブジェクトのループ
for...inループは、オブジェクトの各プロパティ名（キー）に対してループします。
以下はオブジェクトobjのキーと対応する値がコンソールに出力されます。
オブジェクトのプロパティに対して操作を行う場合に有効です。
Copyをクリックするとコピーできます。
const obj = {a: 1, b: 2, c: 3};for (const key in obj) { console.log(`${key}: ${obj[key]}`);}Object.keysでオブジェクトのループ
Object.keysは、オブジェクトのすべてのキーを配列として取得するメソッドです。
その配列に対してforEachを使い、各キーに対する処理を行います。
以下はキーとその値を出力しています。
Copyをクリックするとコピーできます。
const obj = {a: 1, b: 2, c: 3};Object.keys(obj).forEach(key => { console.log(`${key}: ${obj[key]}`);});Object.entriesでオブジェクトのループ
Object.entriesは、オブジェクトのキーと値をペアにした配列を返します。
for...ofを使ってそのペアをループし、キーと値を同時に操作するのに便利です。
以下はキーとその値を出力しています。
Copyをクリックするとコピーできます。
const obj = {a: 1, b: 2, c: 3};for (const [key, value] of Object.entries(obj)) { console.log(`${key}: ${value}`);}HTMLオブジェクトのループ
JavaScriptでは、DOM操作を通じてHTML要素を操作できます。
複数の要素に対して同じ処理を行いたい場合、ループを使って効率的に処理することが可能です。
getElementsByClassNameとforを使ったループ
以下のループでは、指定したクラス名example-classを持つすべての要素のテキストカラーを赤に変更しています。
getElementsByClassNameはHTMLCollectionを返し、配列のようにforループで操作できます。
Copyをクリックするとコピーできます。
const elements = document.getElementsByClassName('example-class');for (let i = 0; i < elements.length; i++) { elements[i].style.color = 'red';}querySelectorAllとforEachを使ったループ
以下は、指定したクラス名example-classを持つすべての要素のテキストカラーを赤に変更しています。
querySelectorAllはNodeListを返し、forEachを使って各要素を簡単に操作できます。
Copyをクリックするとコピーできます。
const elements = document.querySelectorAll('.example-class');elements.forEach(element => { element.style.color = 'red';});childrenとforを使ったループ
特定の親要素のすべての子要素に対して操作を行います。
以下は、parentというIDを持つ要素のすべての子要素（children）に対して、ループを実行しています。
各子要素のテキスト内容（textContent）が「子要素 1」「子要素 2」といった形式に書き換えられています。
特定の親要素内の全ての子要素に対して操作を行いたい場合に便利な方法です。
Copyをクリックするとコピーできます。
const parentElement = document.getElementById('parent');const childElements = parentElement.children;for (let i = 0; i < childElements.length; i++) { childElements[i].textContent = `子要素 ${i + 1}`;}【応用】非同期処理のループ
forループとawaitを使用して非同期処理を1つずつ実行
forEach内ではawaitが使えないため、forループで処理するのが有効です。
以下はfetchData1の結果が1秒後に出力され、その後にfetchData2（2秒後）、最後にfetchData3（3秒後）と、順番に処理されます。
Copyをクリックするとコピーできます。
// 非同期関数function fetchData1() { return new Promise(resolve => setTimeout(() => resolve('Data 1'), 1000));}function fetchData2() { return new Promise(resolve => setTimeout(() => resolve('Data 2'), 2000));}function fetchData3() { return new Promise(resolve => setTimeout(() => resolve('Data 3'), 3000));}// 1つずつ順番に処理するasync function processSequentially() { const promises = [fetchData1(), fetchData2(), fetchData3()]; for (const promise of promises) { const result = await promise; console.log(result); }}processSequentially();Promise.allとawaitを使用して非同期処理を並列に実行
以下はfetchData1, fetchData2, fetchData3が並列に実行され、それぞれの処理が完了した後にresults.forEachで結果を1つずつコンソールに表示します。
Copyをクリックするとコピーできます。
// 非同期関数function fetchData1() { return new Promise(resolve => setTimeout(() => resolve('Data 1'), 1000));}function fetchData2() { return new Promise(resolve => setTimeout(() => resolve('Data 2'), 2000));}function fetchData3() { return new Promise(resolve => setTimeout(() => resolve('Data 3'), 3000));}// 並列で実行するasync function processConcurrently() { const promises = [fetchData1(), fetchData2(), fetchData3()]; const results = await Promise.all(promises); results.forEach(result => console.log(result));}processConcurrently();まとめ
JavaScriptには、for文・while文・forEach・for...of・for...in・mapなど、さまざまなループ処理の方法があります。
配列やオブジェクト、HTML要素など、扱うデータや目的に応じて最適なループ構文を選ぶことで、コードをよりシンプルかつ効率的に記述できます。
それぞれの特徴や使いどころを理解し、実際の開発で使い分けられるようになりましょう。