現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

【JavaScript入門】繰り返し処理の使い方|初心者向けにfor文・while文・do…while文をわかりやすく解説

投稿日:2019年4月15日 更新日:

この記事で分かること

  • 繰り返し処理(ループ)の基本概念
  • for 文・for...in 文の使い方と違い
  • while 文・do...while 文の動作の違い
  • 回数指定のループと条件によるループの使い分け
  • 実例で理解するループ処理の書き方

JavaScriptで同じ処理を繰り返したい場合は、forwhile を使います。

  • 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 の部分を windowscreen に変えると、それぞれのオブジェクトのプロパティ一覧を取得できます。

条件が真の間、処理を繰り返す(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 など応用的なループ構文も理解できる
  • 実務で必要な効率的なループの書き方が身につく

超JavaScript 完全ガイド 2026(Udemy)

体系的に学びたい方へ(スクールという選択肢)

独学の限界を感じやすいポイント

  • ループ処理の条件式で混乱しやすい
  • コードの意図が理解できない
  • コードレビューを受ける機会がない
  • 学習の順番に自信が持てない

スクールでは、プロの講師が学習ロードマップを作成し、つまずきやすい部分を丁寧にサポートしてくれます。

無料相談で得られるメリット

  • あなたのレベルに合わせた学習計画を作成
  • 独学でつまずきやすい部分を事前に把握
  • 学習方法の改善点をプロがアドバイス
  • エンジニア転職を視野に入れたキャリア相談も可能

DMM WEBCAMP 学習コース(無料相談はこちら)



繰り返し処理に関するよくある質問(FAQ)

Q1

forwhile はどう使い分ける?

A

回数が決まっているなら for、条件が変化するなら while が向いています。

Q2

for...infor の違いは?

A

for...in はオブジェクトや配列のキーを順番に取り出すための構文です。

Q3

do...while はいつ使う?

A

最低1回は必ず処理を実行したい場合に使います。

Q4

無限ループを防ぐには?

A

条件式が必ず false になるように変数を更新することが重要です。



まとめ

  • for 文:回数が決まっている繰り返しに使う
  • for...in 文:オブジェクトや配列の全要素を処理する
  • while 文:条件が true の間だけ繰り返す
  • do...while 文:最低1回は必ず処理が実行される



関連記事

【JavaScript入門】scriptタグの使い方|初心者向けにHTMLへの書き方をわかりやすく解説

2019/04/02   -基礎

この記事で分かること script タグの基本的な書き方 head と body のどちらに書くべきか 外部ファイル(.js)の読み込み方法 defer / async の違いと使い分け 初心者がつま …

【JavaScript入門】breakとcontinueの使い方|初心者向けにループ制御の基本をわかりやすく解説

2019/04/16   -基礎

この記事で分かること break と continue の基本的な役割 ループ処理(for / while / do…while)での使い方 switch 文での break の重要性 処理を途中 …

【JavaScript入門】関数の基本|定義方法・引数・return・呼び出し方を初心者向けに解説

2019/04/18   -基礎

この記事で分かること 関数とは何か(役割とメリット) 関数の定義方法(function の基本構文) 引数の使い方と複数引数の扱い方 return で値を返す仕組み イベント(onload / onc …

【JavaScript入門】変数の使い方|初心者向けに宣言方法・命名規則・スコープをわかりやすく解説

2019/04/12   -基礎

この記事で分かること JavaScriptの変数とは何か 変数の宣言方法(var の基本) 初期値の代入と複数宣言の書き方 変数名の命名規則と注意点 ローカル変数とグローバル変数の違い スコープ(有効 …

【JavaScript入門】Content-Script-Typeとは?|初心者向けに歴史的仕様と現代の正しい書き方をわかりやすく解説

2019/04/05   -基礎

この記事で分かること Content-Script-Type とは何か(歴史的背景) デフォルトのスクリプト言語を指定する仕組み MIMEタイプ(text/javascript など)の意味 HTML …

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。

レンタルサーバー エックスサーバー

-基礎

執筆者: