この記事で分かること
- 繰り返し処理(ループ)の基本概念
for文・for...in文の使い方と違いwhile文・do...while文の動作の違い- 回数指定のループと条件によるループの使い分け
- 実例で理解するループ処理の書き方
JavaScriptで同じ処理を繰り返したい場合は、for 文 と while 文 を使います。
for文:繰り返す回数が決まっているときwhile文:繰り返す回数が決まっていないときdo...while文:最低1回は処理を実行したいとき
指定回数だけ処理を繰り返す(for 文)
for 文は、次の3つの要素で構成されます。
for (初期値; 条件; 増減) {
処理;
}
- 初期値:カウンタ変数の初期設定
- 条件:
trueの間だけ処理を繰り返す - 増減:ループごとに変数を増減させる
例:1〜5 の数を順番に加算する
total = 0;
for (i = 1; i <= 5; i++) {
document.write(i + "回目<br>");
total = total + i;
document.write("合計:" + total + "<br>");
}
オブジェクトや配列の値を順番に処理する(for...in 文)
for...in 文は、オブジェクトや配列のすべてのプロパティ(キー)を順番に取り出して処理します。
for (key in navigator) {
val = navigator[key];
document.write(key + ":" + val + "<br>");
}
navigator の部分を window や screen に変えると、それぞれのオブジェクトのプロパティ一覧を取得できます。
条件が真の間、処理を繰り返す(while 文)
while 文は、条件が true の間だけ処理を繰り返します。
while (条件) {
処理;
}
例:名前が入力されるまで繰り返す
res = ""; // 初期値
while ((res == "") || (res == null)) {
res = prompt("名前を入力してください。", "");
}
document.write("ようこそ! <b>" + res + "</b>さん");
条件が最初から false の場合、while 文は一度も実行されません。
最低1回は処理を実行する(do...while 文)
do...while 文は、処理を実行した後に条件を判定します。
do {
処理;
} while (条件);
そのため、条件が false でも最低1回は必ず処理が実行されるのが特徴です。
例:名前が入力されるまで繰り返す(do...while)
do {
res = prompt("名前を入力してください。", "");
} while ((res == "") || (res == null));
document.write("ようこそ! <b>" + res + "</b>さん");
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
ループ処理は JavaScript の基礎であり、書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
for 文・while 文など、基本を丁寧に理解できます。
この本で解決できること:
for文・while文の基本構造を視覚的に理解できる- ループ処理の流れを図解で直感的に把握できる
- 初心者がつまずきやすい「条件式の変化」を理解できる
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
ループ処理の仕組みを深く理解し、実務レベルの基礎力を身につけられます。
この本で解決できること:
for/while/do...whileの動作原理を体系的に理解できる- 複雑なループ処理の組み立て方が身につく
- 実務で使える効率的なループの書き方を習得できる
動画で理解を深めたい方へ(Udemy講座)
ループ処理は実際の動きを動画で見ると理解が一気に深まります。
Udemy では初心者向けに丁寧に解説された講座が多数あります。
初心者のためのJavaScript 完全入門
for 文・while 文などの基礎を体系的に学べる人気講座です。
この講座で解決できること:
- ループ処理の動きを動画で直感的に理解できる
for文・while文の違いを実例で理解できる- 初心者が混乱しやすい「条件式の変化」を正しく理解できる
→ 初心者のためのJavaScript 完全入門(Udemy)
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、ループ処理の理解をさらに深めたい方に最適です。
この講座で解決できること:
- 複雑なループ処理のロジックを読み書きできるようになる
for...in/for...ofなど応用的なループ構文も理解できる- 実務で必要な効率的なループの書き方が身につく
体系的に学びたい方へ(スクールという選択肢)
独学の限界を感じやすいポイント
- ループ処理の条件式で混乱しやすい
- コードの意図が理解できない
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、つまずきやすい部分を丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
繰り返し処理に関するよくある質問(FAQ)
for と while はどう使い分ける?
回数が決まっているなら for、条件が変化するなら while が向いています。
for...in と for の違いは?
for...in はオブジェクトや配列のキーを順番に取り出すための構文です。
do...while はいつ使う?
最低1回は必ず処理を実行したい場合に使います。
無限ループを防ぐには?
条件式が必ず false になるように変数を更新することが重要です。
まとめ
for文:回数が決まっている繰り返しに使うfor...in文:オブジェクトや配列の全要素を処理するwhile文:条件がtrueの間だけ繰り返すdo...while文:最低1回は必ず処理が実行される