指定した回数だけ処理を繰り返す（JavaScript入門）

「3回ジャンプして！」「10回ありがとうって言ってみよう！」

——こういう“回数が決まっている”繰り返しを、プログラムではどう書くでしょう？

この記事では、JavaScriptで“指定した回数だけ”処理を繰り返す方法を、やさしく解説します。

はじめに結論、そして使い分け、つまずきポイント、練習問題まで、これだけ読めばバッチリです！

いちばん基本はfor文

const n = 5;                 // 5回くり返したい
for (let i = 0; i < n; i++) {
  console.log(i, "回目");
}

• i = 0（スタート）
• i < n（ゴールの条件。nに到達する前まで）
• i++（1回ごとにiを1増やす）

ポイント

「0から始めて、n未満まで」が鉄板パターン。とりあえず迷ったらコレを使おう。

繰り返しの基本語彙（ミニ辞書）

作って学べるHTML＋JavaScriptの基本 ～ HTML Living Standard対応 [ WINGSプロジェクト 山内 直 ]

created by Rinker

¥2,420 (2025/09/23 01:01:16時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

代表的な書き方を“目的別”にざっくり比較

1. for文をくわしく

1-1. 0始まりのカウントアップ

const n = 3;
for (let i = 0; i < n; i++) {
  console.log(i); 　　　　　　// 0, 1, 2
}

• 回数はn回
• 表示される値は0,1,2（3は含まれない）

1-2. 1始まりにしたいとき

const n = 3;
for (let i = 1; i <= n; i++) {
  console.log(i); 　　　　　// 1, 2, 3
}

• 条件を<= nに変えるのを忘れない！

1-3. 2ずつ増やす／逆向き

// 2ずつ
for (let i = 0; i < 10; i += 2) {
  console.log(i); 　　　　// 0,2,4,6,8
}

// 逆向き（カウントダウン）
for (let i = 5; i > 0; i--) {
  console.log(i);　　　　 // 5,4,3,2,1
}

2. while と do…while も知っておこう

改訂3版JavaScript本格入門 [ 山田 祥寛 ]

created by Rinker

¥3,520 (2025/09/23 01:01:16時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

2-1. while（条件を先にチェック）

let i = 0;
const n = 3;
while (i < n) {
  console.log(i);
  i++;              // ←これを忘れると永遠ループ！終わらなくなるので注意！！
}

2-2. do…while（少なくとも1回は動く）

let i = 0;
const n = 0;
do {
  console.log("ここは1回は動くよ");
  i++;
} while (i < n);

• n = 0でも1回は実行されるのが特徴。

3. “配列で回す”発想（少し発展）

配列を「n個分だけ用意して、上から順に回す」テクニックです。
配列系のメソッド（forEach, map）に慣れるきっかけにもなります。

const n = 5;
Array.from({ length: n }).forEach((_, i) => {
  console.log(i); // 0,1,2,3,4
});

• Array.from({length:n}) は n個の“空箱”を作るイメージ。
• 引数の_は「使わない値」のお約束の書き方。

応用：配列を作ってから加工

const squares = Array.from({ length: 5 }, (_, i) => i * i);
console.log(squares); // [0,1,4,9,16]

4. 文字や図形を“n回”並べたい（お楽しみ）

文字列なら .repeat(n) が超便利！

console.log("★".repeat(5)); // ★★★★★

カンタンな“階段”を作る：

const n = 5;
for (let i = 1; i <= n; i++) {
  console.log("★".repeat(i));
}

/*
★
★★
★★★
★★★★
★★★★★
*/

関連

Webサイトにおける動きの必要性とは？

5. よくあるつまずき（オフバイワンはこう防ぐ）

3ステップでしっかり学ぶ　JavaScript入門 ［改訂第3版］ [ 大津 真 ]

created by Rinker

¥2,750 (2025/09/22 11:01:09時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

安全に数値化する関数の例：

function toSafeCount(value) {
  const n = Number(value);
  if (!Number.isFinite(n) || n < 0) return 0;
  return Math.floor(n); // 小数は切り下げ
}

6. 子どもも使える“レシピ集”

レシピA：ありがとうを n 回言う

function sayThanks(n) {
  n = toSafeCount(n);
  for (let i = 0; i < n; i++) {
    console.log(`ありがとう！(${i + 1}回目)`);
  }
}

sayThanks(3);

レシピB：1～n の合計を求める

function sumTo(n) {
  n = toSafeCount(n);
  let total = 0;
  for (let i = 1; i <= n; i++) {
    total += i;
  }
  return total;
}

console.log(sumTo(5)); // 15

レシピC：偶数だけ n 個ひろう

function firstNEvens(n) {
  n = toSafeCount(n);
  const result = [];
  for (let i = 0; i < n; i++) {
    result.push(i * 2);
  }
  return result;
}

console.log(firstNEvens(5)); // [0,2,4,6,8]

レシピD：九九（n 段だけ）

function kuku(n) {
  n = toSafeCount(n);
  for (let dan = 1; dan <= n; dan++) {
    let line = "";
    for (let i = 1; i <= 9; i++) {
      line += `${dan*i}\t`;
    }
    console.log(`${dan}の段:`, line);
  }
}

kuku(3);

7. UIでよくある“n回”パターン

JavaScript 第7版 [ David Flanagan ]

created by Rinker

¥5,060 (2025/09/23 01:01:16時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

例：リトライ（失敗しても最大3回まで試す）

async function fetchWithRetry(url, maxTry = 3) {
  for (let t = 1; t <= maxTry; t++) {
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error("HTTP " + res.status);
      return await res.json();
    } catch (e) {
      console.warn(`${t}回目失敗:`, e.message);
      if (t === maxTry) throw e; // もうダメ
    }
  }
}

8. “配列を作ってから回す”はなぜ便利？

• 表示（レンダリング）で「n個のカードを並べる」など、“数ぶんの箱”をまず作る発想が使いやすい
• map/forEachなど“配列メソッド”に乗っかれるので、読みやすく柔らかいコードになりやすい

const cards = Array.from({ length: 4 }, (_, i) => ({
  id: i,
  title: `カード${i + 1}`,
}));

cards.forEach(c => console.log(c.title));

9. ミニテスト（手を動かして理解を固定！）

1. 星を逆三角形にする
   出力例（n=5）

★★★★★
★★★★
★★★
★★
★

ヒント：外側はfor (let i=n; i>=1; i--)

2. 3の倍数だけ“ピン！”
   1～nまで数え、3の倍数のときだけ「ピン！」と表示しよう。
   ヒント：if (i % 3 === 0)
3. n回のサイコロ合計
   Math.floor(Math.random()*6)+1で1～6を作れるよ。
4. タイマー風
   nから0までカウントダウンして、最後に「発射！」。
   ヒント：for (let i=n; i>=0; i--)

10. 使い方の“型”を丸暗記しよう（チート表）

11. 小さな実用例：プログレスバー（テキスト版）

function progressBar(percent) {
  // percent: 0～100
  const total = 20; // バーの長さ
  const filled = Math.round((percent / 100) * total);
  const bar = "■".repeat(filled) + "□".repeat(total - filled);
  return `[${bar}] ${percent}%`;
}

for (let p = 0; p <= 100; p += 10) {
  console.log(progressBar(p));
}

12. まとめ（これだけ覚えればOK！）

• 回数ループの基本形は for (let i = 0; i < n; i++)
• 1始まりなら for (let i = 1; i <= n; i++)
• while/do…whileは動きが見えやすい場面で。
• 配列アプローチ（Array.from, forEach, map）はUIやデータ生成で便利。
• オフバイワン（1回多い/少ない）に気をつけて！
• 回数は0以上の整数で扱うとトラブルが減る。

おまけ：入力をもらって n 回動かす（ブラウザで試せる）

<button id="run">3回あいさつ</button>
<script>
  document.getElementById('run').addEventListener('click', () => {
    const n = 3; // ここを好きな回数に
    for (let i = 1; i <= n; i++) {
      alert(`こんにちは！(${i}回目)`);
    }
  });
</script>

「指定した回数だけ処理を繰り返す」は、ゲームでもWebページでも、いたるところで使います。
まずは基本形を手に覚えさせる→配列で発展の順で練習してみてください。

作りながら学ぶWebプログラミング実践入門 一冊で理解するHTML、CSS、JavaScript、Node.js [ 掌田津耶乃 ]

created by Rinker

¥2,948 (2025/09/22 11:01:09時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

あせて読みたい

関連

JavaScriptのif文を基礎から丁寧に解説（if / else if / else）

関連

【初心者向け】JavaScriptの定数ってなに？変数との違いと使いどころをわかりやすく解説！