JS
ループ
初級読み方:ループ|英語:Loop
同じ処理を繰り返すことで、for 文や while 文で書くよ。いつ使う? 配列の全要素を表示したい、1から100まで合計したい、条件を満たすまで処理を続けたいときに使うよ。間違いやすいポイント: カウンタの更新を忘れると無限ループになってブラウザが固まるよ。for (let i = 0; i < 10; i++) の i++ を忘れないようにしよう。
やさしい説明
ループとは、同じ処理を繰り返す仕組みです。「100回同じことを書く」代わりに、ループで「100回繰り返す」と書けます。
学校の掃除当番表を作るとき、30人分の名前を1つずつ処理するのがループです。配列の全要素に対して処理を行うときに特に便利です。
JavaScriptでは for、while、forEach などの書き方があります。
具体例・使い方
// for文: 5回繰り返す
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
// 配列の全要素を処理
const names = ["太郎", "花子", "次郎"];
names.forEach(name => {
console.log(`こんにちは、${name}さん`);
}); いつ使う?
配列の全要素を表示する、APIから取得したデータを1件ずつ処理する、一定回数の繰り返し処理(カウントダウン等)に使います。
間違いやすいポイント
❌ 無限ループを作ってしまう
// ❌ iが増えないので永遠に終わらない
for (let i = 0; i < 10; ) { console.log(i); }
// ✅ i++ で毎回増やす
for (let i = 0; i < 10; i++) { console.log(i); } よくある疑問
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を使いましょう。
関連用語
📖 関連レッスン
レッスンを見る →