JS
ループ
初級読み方：ループ｜英語：Loop
同じ処理を繰り返すことで、for 文や while 文で書くよ。
やさしい説明
ループとは、同じ処理を繰り返す仕組みです。「100回同じことを書く」代わりに、ループで「100回繰り返す」と書けます。
学校の掃除当番表を作るとき、30人分の名前を1つずつ処理するのがループです。配列の全要素に対して処理を行うときに特に便利です。
JavaScriptでは for、while、forEach、for...of などの書き方があります。
具体例・使い方
// for文: 回数が決まっているとき
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
// while文: 条件が満たされる間繰り返す
let count = 0;
while (count < 3) {
console.log(count); // 0, 1, 2
count++;
}
// 配列をforEachで処理
const names = ["太郎", "花子", "次郎"];
names.forEach(name => {
console.log(`こんにちは、${name}さん`);
});ループの種類と使い分け
- for — 繰り返し回数が決まっているとき。インデックス（番号）が必要なとき
- while — 条件が満たされる間繰り返すとき。回数が不定のとき
- forEach — 配列の全要素を順番に処理するとき（途中で止められない）
- for...of — 配列・文字列などのイテラブルを順番に処理するとき（break可能）
- for...in — オブジェクトのキーを順番に処理するとき
// for...of: 配列をシンプルに処理（break可能）
const fruits = ["りんご", "バナナ", "みかん"];
for (const fruit of fruits) {
console.log(fruit);
if (fruit === "バナナ") break; // 途中で止められる
}
// for...in: オブジェクトのキーを処理
const user = { name: "太郎", age: 15 };
for (const key in user) {
console.log(key, user[key]); // name 太郎 / age 15
}配列の処理では forEach より for...of を好む開発者も多いです。break（途中停止）や continue（スキップ）が使えるためです。
いつ使う？
- APIから取得したユーザー一覧を1件ずつ表示するとき
- 配列内の全商品の価格を合計するとき
- カウントダウンタイマーなど一定回数の繰り返し
- 文字列の各文字を1つずつ処理するとき
間違いやすいポイント
❌ 無限ループを作ってしまう
終了条件を満たさないループは永遠に実行され、ブラウザがフリーズします。ループの終了条件と変数の更新を必ず確認しましょう。
// ❌ iが増えないので永遠に終わらない
for (let i = 0; i < 10; ) { console.log(i); }
// ✅ i++ で毎回インクリメントする
for (let i = 0; i < 10; i++) { console.log(i); }❌ forEach内でbreakしようとする
forEach は途中で止められません。ループを途中で抜けたい場合は for...of と break を組み合わせましょう。
よくある疑問
Q: 無限ループになったら？
A: ブラウザのタブを閉じるか、開発者ツールでスクリプトを停止します。for文のi++やwhile文の条件更新を確認しましょう。
Q: for文とforEachの違いは？
A: for文は汎用的、forEachは配列専用で書き方がシンプルです。breakで途中終了したいならfor文、単純に全要素を処理するならforEachが便利です。
Q: for...ofとfor...inの違いは？
A: for...ofは配列の「値」を取得、for...inはオブジェクトの「キー」を取得します。配列にはfor...ofを使いましょう。
関連用語
📖 関連レッスン
レッスンを見る →