基礎から学ぶJavaScript入門 90日コース | JavaScriptを動かして慣れる－ Day 9：繰り返し処理 for

90日で身につけるJavaScript

2026.08.25

Day 9：for文で「同じ処理を繰り返す」感覚をつかむ
for文の基本構造を理解する
1. for文は「スタート・ゴール・一歩ずつ」をまとめた仕組み
カウンターという考え方
1. カウンター変数とは何か
実践1：1〜100まで表示する
1. まずは「何をしたいか」を言葉で整理する
2. コンソールに 1〜100 を表示するコード
3. 重要ポイントの深掘り
実践2：偶数だけ表示する
1. 偶数とは何かを確認する
2. 1〜100の中から偶数だけを表示するコード
3. 重要ポイントの深掘り
偶数だけ表示する別の書き方（ステップを変える）
1. この書き方のポイント
Day 9 前半の練習テンプレート
Day 9 前半のまとめ
Day 9：for文（後半）で「繰り返しを設計する力」を育てる
for文を「3つのパーツ」に分けて考える
1. for文の3要素をもう一度整理する
実践1：1〜100まで表示を「設計目線」で分解する
1. Step 1：まずは素直な実装
2. Step 2：オフバイワン（1つずれるミス）を意識する
3. Step 3：開始値・終了条件・更新を意識して設計する
実践2：偶数だけ表示を「複数の書き方」で比較する
1. 書き方1：すべての数を回して条件で絞る
2. 書き方2：最初から偶数だけを回す
3. 2つの書き方を比較してみる
よくあるミスとその避け方（オフバイワン対策）
1. ミス例1：終了条件を間違える
2. ミス例2：更新を忘れる
Day 9 後半の練習テンプレート
Day 9 後半のまとめ
Day 9：for文で九九表を作るミニ課題に挑戦する
九九表を「プログラムの目線」で分解してみる
1. 九九表の構造を言葉で整理する
2. 繰り返し処理としての九九表
for文とカウンターの復習
1. for文の基本構造
Step 1：まずは「1の段」だけを作ってみる
1. 1の段を表示するコード例
2. ここでの重要ポイント
Step 2：段を変えられるようにする
1. 段を変えられるコード例
2. ここでの重要ポイント
Step 3：二重のfor文で九九表を完成させる
1. 九九表をコンソールに表示する基本コード
2. 二重のfor文の流れをイメージする
Step 4：九九表を「表形式」で表示してみる（応用）
1. 九九表をHTMLの表として表示するテンプレート
2. ここでの重要ポイント
九九表ミニ課題の設計を振り返る
1. カウンターの役割を明確にする
2. 繰り返しの考え方を整理する
Day 9 ミニ課題のまとめ

Day 9：for文で「同じ処理を繰り返す」感覚をつかむ

Day 9では、プログラミングの中でもとても重要な考え方である 「繰り返し処理」を学びます。その代表的な仕組みが for 文です。

ここでは、

for文の基本構造
カウンターという考え方
繰り返しのイメージを頭の中で描くこと

を押さえたうえで、

1〜100まで表示する
偶数だけ表示する

という具体的な例を通して、初心者向けにかみ砕いて解説していきます。

for文の基本構造を理解する

for文は「スタート・ゴール・一歩ずつ」をまとめた仕組み

for 文は、ざっくり言うと次の3つをまとめて書くための仕組みです。

スタート地点（初期化）
ゴール条件（繰り返しを続けるかどうか）
一歩ずつ進める処理（増減）

基本構造は次のようになります。

javascript

for (初期化; 条件; 更新) {
  // 繰り返したい処理
}

例えば、「1から10までの数字を表示したい」という場合は、こう書きます。

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

JavaScript

ここでの意味を分解すると次のようになります。

let i = 1; → カウンター変数 i を 1 からスタートさせる（初期化）
i <= 10; → i が 10 以下の間は、繰り返しを続ける（条件）
i++ → 繰り返しのたびに i を 1 ずつ増やす（更新）
{ console.log(i); } → 今の i の値を表示する（繰り返したい処理）

カウンターという考え方

カウンター変数とは何か

for 文の中でよく使われる i や j といった変数は、カウンター変数と呼ばれます。これは、「今、何回目の繰り返しなのか」「今、どの数字を扱っているのか」を表すための変数です。

例えば、

for (let i = 1; i <= 5; i++) {
  console.log('今の i の値は：', i);
}

for (let i = 1; i <= 5; i++) {
  console.log('今の i の値は：', i);
}

JavaScript

と書くと、i は次のように変化します。

1回目：i = 1
2回目：i = 2
3回目：i = 3
4回目：i = 4
5回目：i = 5

この「カウンターが少しずつ変化していく様子」をイメージできると、for文の動きがぐっと理解しやすくなります。

実践1：1〜100まで表示する

まずは「何をしたいか」を言葉で整理する

「1〜100まで表示する」というのは、次のように言い換えられます。

1からスタートして
100になるまで
1ずつ増やしながら
毎回その数字を表示する

これは、まさに for 文の出番です。

コンソールに 1〜100 を表示するコード

ブラウザのコンソールに 1〜100 を表示するシンプルな例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 前半：1〜100まで表示（for文）</title>
</head>
<body>
  <h1>1〜100まで表示する（for文の基本）</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // for文を使って 1 から 100 までの数字を表示します
    // i はカウンター変数です
    for (let i = 1; i <= 100; i++) {
      console.log(i); // 現在の i の値をコンソールに表示します
    }

    console.log('1〜100までの表示が完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

let i = 1; → カウンター i を 1 からスタートさせています。
i <= 100; → i が 100 以下の間、繰り返しを続けます。 i が 101 になった時点で、条件が false になり、繰り返しが終了します。
i++ → 繰り返しのたびに i を 1 ずつ増やします。 i = i + 1; と同じ意味ですが、i++ のほうがよく使われます。
console.log(i); → 今の i の値を表示する処理です。この部分が「繰り返したい処理」にあたります。

実践2：偶数だけ表示する

偶数とは何かを確認する

偶数とは、「2で割ったときに余りが 0 になる数」です。

JavaScriptでは、余りを求める演算子 % を使って、偶数かどうかを判定できます。

if (i % 2 === 0) {
  // i は偶数
}

if (i % 2 === 0) {
  // i は偶数
}

JavaScript

i % 2 は「i を 2 で割ったときの余り」を表します。
余りが 0 なら、i は偶数です。

1〜100の中から偶数だけを表示するコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 前半：偶数だけ表示（for文）</title>
</head>
<body>
  <h1>1〜100の中から偶数だけ表示する</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 1 から 100 までの数字のうち、偶数だけを表示します
    for (let i = 1; i <= 100; i++) {
      // i を 2 で割ったときの余りが 0 なら偶数です
      if (i % 2 === 0) {
        console.log(i); // 偶数だけを表示します
      }
    }

    console.log('1〜100の偶数の表示が完了しました。');
  </script>
</body>
</html>

重要ポイントの深掘り

for (let i = 1; i <= 100; i++) → 1〜100までの数字を順番に扱うための繰り返しです。
if (i % 2 === 0) → 「i を 2 で割った余りが 0かどうか」をチェックしています。余りが 0なら偶数なので、そのときだけ console.log(i); を実行します。
console.log(i); が if の中にあるため、偶数のときだけ表示されるようになっています。

偶数だけ表示する別の書き方（ステップを変える）

偶数だけを表示するには、もうひとつの考え方があります。

最初から偶数だけをカウンターにする → 2からスタートして、2ずつ増やしていく

<script>
  // 2 から 100 までの偶数を表示します
  for (let i = 2; i <= 100; i += 2) {
    console.log(i); // i は常に偶数です
  }

  console.log('2〜100の偶数の表示が完了しました。');
</script>

この書き方のポイント

let i = 2; → カウンターを「最初から偶数」にしています。
i += 2; → 繰り返しのたびに i を 2 ずつ増やしています。 i = i + 2; と同じ意味です。
if 文を使わなくても、常に偶数だけが表示されるようになっています。

どちらの書き方も正解ですが、「すべての数を回しながら条件で絞る」か、「最初から偶数だけを回す」かという考え方の違いを意識しておくと、後々のアルゴリズム設計にも役立ちます。

Day 9 前半の練習テンプレート

最後に、Day 9前半の内容をまとめた練習用テンプレートを示します。このファイルを保存してブラウザで開くと、1〜100表示と偶数表示の両方を試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 前半：for文練習テンプレート</title>
</head>
<body>
  <h1>Day 9 前半：for文の基本練習</h1>
  <p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>

  <script>
    console.log('--- 1〜100まで表示 ---');

    // 1 から 100 までの数字を表示します
    for (let i = 1; i <= 100; i++) {
      console.log(i);
    }

    console.log('1〜100までの表示が完了しました。');

    console.log('--- 1〜100の偶数だけ表示（if を使う方法） ---');

    // 1 から 100 までの数字のうち、偶数だけを表示します（条件で絞る方法）
    for (let i = 1; i <= 100; i++) {
      if (i % 2 === 0) {
        console.log(i);
      }
    }

    console.log('1〜100の偶数（条件で絞る方法）の表示が完了しました。');

    console.log('--- 2〜100の偶数だけ表示（ステップを変える方法） ---');

    // 2 から 100 までの偶数を表示します（最初から偶数だけを回す方法）
    for (let i = 2; i <= 100; i += 2) {
      console.log(i);
    }

    console.log('2〜100の偶数（ステップを変える方法）の表示が完了しました。');
  </script>
</body>
</html>

Day 9 前半のまとめ

Day 9前半では、次のことを学びました。

for (初期化; 条件; 更新) という基本構造と、それぞれの役割
カウンター変数 i を使って、「今どの段階にいるか」を表現する考え方
1〜100まで表示することで、「繰り返し処理の流れ」を体験したこと
偶数だけ表示する2つの方法（条件で絞る／ステップを変える）を通して、「どう回すか」「どこで絞るか」を考える力の入り口に触れたこと

ここまでのコードを自分で書き換えながら試してみると、 for文の動きがだんだん「感覚として」つかめてきます。カウンターの初期値や条件、更新の仕方を変えながら、「どんな動きになるか」を遊ぶように試してみるのがおすすめです。

Day 9：for文（後半）で「繰り返しを設計する力」を育てる

Day 9後半では、前半で学んだ for文・カウンター・繰り返しの考え方を、もう一歩深く掘り下げていきます。単に「書ける」だけでなく、どこからどこまでを、どんなステップで回すのかを意識して設計できるようになることが目標です。

ここでは、

1〜100まで表示する処理を「設計目線」で分解する
偶数だけ表示する処理を、複数の書き方で比較する
よくあるミス（オフバイワン）を避ける考え方を身につける

という流れで、初心者向けにかみ砕いて解説していきます。

for文を「3つのパーツ」に分けて考える

for文の3要素をもう一度整理する

for 文は、次の3つの要素から成り立っています。

for (初期化; 条件; 更新) {
  // 繰り返したい処理
}

for (初期化; 条件; 更新) {
  // 繰り返したい処理
}

JavaScript

これを「繰り返しの設計」という視点で見ると、こう言い換えられます。

初期化：どこから始めるか
条件：どこまで続けるか
更新：1回ごとにどう進めるか

例えば、1〜100まで表示する場合はこうです。

for (let i = 1; i <= 100; i++) {
  console.log(i);
}

for (let i = 1; i <= 100; i++) {
  console.log(i);
}

JavaScript

初期化：let i = 1; → 1から始める
条件：i <= 100; → 100以下の間は続ける
更新：i++ → 毎回1ずつ増やす

この3つを「自分で決めている」という感覚を持てると、for文がぐっと扱いやすくなります。

実践1：1〜100まで表示を「設計目線」で分解する

Step 1：まずは素直な実装

前半で書いたコードをもう一度見てみます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 後半：1〜100まで表示（for文）</title>
</head>
<body>
  <h1>1〜100まで表示する（for文の復習）</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 1 から 100 までの数字を表示します
    for (let i = 1; i <= 100; i++) {
      console.log(i); // 現在の i の値をコンソールに表示します
    }

    console.log('1〜100までの表示が完了しました。');
  </script>
</body>
</html>

Step 2：オフバイワン（1つずれるミス）を意識する

繰り返し処理でよくあるミスが、オフバイワン（1つずれる）です。

例えば、次のように書いてしまうことがあります。

for (let i = 1; i < 100; i++) {
  console.log(i);
}

for (let i = 1; i < 100; i++) {
  console.log(i);
}

JavaScript

この場合、表示されるのは 1〜99 で、100が表示されません。条件を i <= 100 にするか、i < 101 にするかを、意識して選ぶ必要があるということです。

Step 3：開始値・終了条件・更新を意識して設計する

1〜100まで表示したいときに、次のようなバリエーションも考えられます。

// パターンA：1から始めて、100以下の間続ける
for (let i = 1; i <= 100; i++) {
  console.log(i);
}

// パターンB：0から始めて、100未満の間続ける（+1して表示）
for (let i = 0; i < 100; i++) {
  console.log(i + 1);
}

// パターンA：1から始めて、100以下の間続ける
for (let i = 1; i <= 100; i++) {
  console.log(i);
}

// パターンB：0から始めて、100未満の間続ける（+1して表示）
for (let i = 0; i < 100; i++) {
  console.log(i + 1);
}

JavaScript

どちらも「1〜100」を表示しますが、カウンターの意味が違うことに注目してください。

パターンA：カウンター i が「そのまま表示する値」になっている
パターンB：カウンター i は「0〜99のインデックス」で、表示するときに +1 している

配列やインデックスを扱う場面では、パターンBのような考え方がよく出てきます。このように、「カウンターが何を表しているか」を意識して設計するのが、後半の大事なポイントです。

実践2：偶数だけ表示を「複数の書き方」で比較する

書き方1：すべての数を回して条件で絞る

まずは前半で扱った「条件で絞る」書き方です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 後半：偶数だけ表示（条件で絞る）</title>
</head>
<body>
  <h1>1〜100の中から偶数だけ表示する（条件で絞る方法）</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 1 から 100 までの数字のうち、偶数だけを表示します
    for (let i = 1; i <= 100; i++) {
      // i を 2 で割ったときの余りが 0 なら偶数です
      if (i % 2 === 0) {
        console.log(i); // 偶数だけを表示します
      }
    }

    console.log('1〜100の偶数（条件で絞る方法）の表示が完了しました。');
  </script>
</body>
</html>

この書き方の特徴

1〜100のすべての数を「一度は見る」ことになります。
偶数かどうかを if (i % 2 === 0) で判定し、条件に合うものだけ表示します。
「まず全部回してから、条件でフィルタする」という考え方です。

書き方2：最初から偶数だけを回す

次に、「最初から偶数だけをカウンターにする」書き方です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 後半：偶数だけ表示（ステップを変える）</title>
</head>
<body>
  <h1>2〜100の偶数だけ表示する（ステップを変える方法）</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 2 から 100 までの偶数を表示します
    for (let i = 2; i <= 100; i += 2) {
      console.log(i); // i は常に偶数です
    }

    console.log('2〜100の偶数（ステップを変える方法）の表示が完了しました。');
  </script>
</body>
</html>

この書き方の特徴

カウンター i を「2からスタート」させています。
更新部分を i += 2 にすることで、常に偶数だけを回しています。
if 文による条件チェックが不要になります。

2つの書き方を比較してみる

条件で絞る方法：

メリット：
- 「まず全部回してから条件で選ぶ」というシンプルな考え方で書けます。
- 条件を変えるだけで、奇数や3の倍数などにも応用しやすいです。
デメリット：
- 不要な数（奇数）も一度はチェックすることになります。

ステップを変える方法：

メリット：
- 最初から偶数だけを回すので、無駄なチェックがありません。
- if 文が不要で、コードがすっきりします。
デメリット：
- 「どこから始めて、どれくらいずつ進めるか」を意識して設計する必要があります。

どちらが「正解」というわけではなく、 「どう回すか」「どこで絞るか」を自分で選べるようになることが、Day 9後半の大事なゴールです。

よくあるミスとその避け方（オフバイワン対策）

ミス例1：終了条件を間違える

for (let i = 1; i < 100; i++) {
  console.log(i); // 1〜99までしか表示されない
}

for (let i = 1; i < 100; i++) {
  console.log(i); // 1〜99までしか表示されない
}

JavaScript

「100まで表示したい」のに、i < 100 と書いてしまうと、100が含まれません。
対策として、「含めたい最大値」を意識して、<= を使うか、< 最大値+1 と書く癖をつけるとよいです。

ミス例2：更新を忘れる

for (let i = 1; i <= 100; ) {
  console.log(i);
  // i++ を書き忘れると、i がずっと 1 のままになり、無限ループになります
}

for (let i = 1; i <= 100; ) {
  console.log(i);
  // i++ を書き忘れると、i がずっと 1 のままになり、無限ループになります
}

JavaScript

更新部分（i++）を書き忘れると、条件がずっと true のままになり、処理が終わりません。
対策として、「初期化・条件・更新」の3つをセットで意識する習慣をつけることが大切です。

Day 9 後半の練習テンプレート

最後に、Day 9後半の内容をまとめた練習用テンプレートを示します。このファイルを保存してブラウザで開くと、1〜100表示と偶数表示の2パターンを比較しながら試せます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 後半：for文実践テンプレート</title>
</head>
<body>
  <h1>Day 9 後半：for文の設計練習</h1>
  <p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>

  <script>
    console.log('--- 1〜100まで表示（基本） ---');

    // 1 から 100 までの数字を表示します
    for (let i = 1; i <= 100; i++) {
      console.log(i);
    }

    console.log('1〜100までの表示が完了しました。');

    console.log('--- 1〜100の偶数だけ表示（条件で絞る方法） ---');

    // 1 から 100 までの数字のうち、偶数だけを表示します（条件で絞る方法）
    for (let i = 1; i <= 100; i++) {
      if (i % 2 === 0) {
        console.log(i);
      }
    }

    console.log('1〜100の偶数（条件で絞る方法）の表示が完了しました。');

    console.log('--- 2〜100の偶数だけ表示（ステップを変える方法） ---');

    // 2 から 100 までの偶数を表示します（最初から偶数だけを回す方法）
    for (let i = 2; i <= 100; i += 2) {
      console.log(i);
    }

    console.log('2〜100の偶数（ステップを変える方法）の表示が完了しました。');
  </script>
</body>
</html>

Day 9 後半のまとめ

Day 9後半では、次のことを意識して学びました。

for (初期化; 条件; 更新) を「どこから・どこまで・どう進めるか」という設計として捉えること
1〜100まで表示する処理を通して、オフバイワン（1つずれるミス）を意識すること
偶数だけ表示する2つの方法（条件で絞る／ステップを変える）を比較し、「どう回すか」「どこで絞るか」を自分で選べるようになること

このあたりがしっかりイメージできるようになると、 for文は「怖いもの」ではなく、「自分で設計できる道具」に変わっていきます。カウンターの初期値・条件・更新を少しずつ変えながら、「どんな動きになるか」を試してみると、繰り返し処理の感覚がどんどん育っていきます。

Day 9：for文で九九表を作るミニ課題に挑戦する

Day 9のミニ課題では、for文を使って九九表を作ることに挑戦します。九九表は、プログラミング初心者が「繰り返し処理」と「カウンター」の考え方を深く理解するのに、とても良い題材です。特に、二重のfor文（ネストした繰り返し）を体験できるので、繰り返し処理の一段上のステップに進むことができます。

ここでは、ステップバイステップで九九表の仕組みを考えながら、例題・コード例・テンプレートを交えて、初心者向けにかみ砕いて説明していきます。

九九表を「プログラムの目線」で分解してみる

九九表の構造を言葉で整理する

まず、九九表をプログラム的な視点で眺めてみます。

九九表は、次のような掛け算の一覧です。

1の段：1×1, 1×2, 1×3, …, 1×9
2の段：2×1, 2×2, 2×3, …, 2×9
…
9の段：9×1, 9×2, 9×3, …, 9×9

これをもう少し抽象的に言うと、

「段」：1〜9
「掛ける数」：1〜9

の組み合わせで、 「段 × 掛ける数」 をすべて計算して表示する、という構造になっています。

繰り返し処理としての九九表

プログラムで九九表を作るときは、次のように考えます。

段（1〜9）を繰り返す
各段ごとに、掛ける数（1〜9）を繰り返す
そのたびに「段 × 掛ける数」を計算して表示する

つまり、繰り返しの中に繰り返しがある構造です。これが、二重のfor文（ネストしたfor文）の出番になります。

for文とカウンターの復習

for文の基本構造

for文は、次の3つの要素から成り立っています。

for (初期化; 条件; 更新) {
  // 繰り返したい処理
}

for (初期化; 条件; 更新) {
  // 繰り返したい処理
}

JavaScript

初期化：どこから始めるか
条件：どこまで続けるか
更新：1回ごとにどう進めるか

例えば、「1から10まで表示する」ならこう書きます。

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

JavaScript

ここでの i は、カウンター変数です。「今、何回目の繰り返しなのか」「今、どの数字を扱っているのか」を表します。

九九表では、このカウンターを 2つ使います。

段を表すカウンター（例：dan）
掛ける数を表すカウンター（例：i）

Step 1：まずは「1の段」だけを作ってみる

いきなり九九表全部を作るのではなく、まずは 1の段だけを作って、繰り返しの感覚をつかんでいきます。

1の段を表示するコード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 ミニ課題：1の段を表示する</title>
</head>
<body>
  <h1>1の段を表示する（for文の練習）</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 1の段（1×1〜1×9）を表示します
    // i は「掛ける数」を表すカウンター変数です
    for (let i = 1; i <= 9; i++) {
      // テンプレートリテラルを使って、わかりやすい形で表示します
      console.log(`1 × ${i} = ${1 * i}`);
    }

    console.log('1の段の表示が完了しました。');
  </script>
</body>
</html>

ここでの重要ポイント

for (let i = 1; i <= 9; i++) → i が 1〜9まで変化します。
console.log(1 × ${i} = ${1 * i}); → 「1×i＝計算結果」という形で表示しています。
この時点では、「段」は固定で 1 です。 → 段を変えられるようにするのが次のステップです。

Step 2：段を変えられるようにする

次に、「段」を変えられるようにしてみます。例えば、3の段を表示したい場合はこう書きます。

段を変えられるコード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 ミニ課題：任意の段を表示する</title>
</head>
<body>
  <h1>任意の段を表示する（for文＋カウンター）</h1>
  <p>ブラウザのコンソールを開いて、結果を確認してください。</p>

  <script>
    // 表示したい段を変数で指定します
    const dan = 3; // 例：3の段

    // 掛ける数を表すカウンター変数 i を 1〜9で回します
    for (let i = 1; i <= 9; i++) {
      console.log(`${dan} × ${i} = ${dan * i}`);
    }

    console.log(`${dan}の段の表示が完了しました。`);
  </script>
</body>
</html>

ここでの重要ポイント

const dan = 3; → 段を変数として扱うことで、あとから値を変えやすくしています。
dan を変えるだけで、2の段・4の段なども簡単に表示できます。
「段 × 掛ける数」という構造が、コードの中に見えてきます。

Step 3：二重のfor文で九九表を完成させる

ここからが本番です。九九表は、「段」と「掛ける数」の二重構造なので、for文を 入れ子（ネスト） にして書きます。

九九表をコンソールに表示する基本コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 ミニ課題：九九表をコンソールに表示する</title>
</head>
<body>
  <h1>九九表を作る（for文の二重ループ）</h1>
  <p>ブラウザのコンソールを開いて、九九表を確認してください。</p>

  <script>
    console.log('--- 九九表 ---');

    // 外側の for文：段（1〜9）を回します
    for (let dan = 1; dan <= 9; dan++) {
      console.log(`【${dan}の段】`); // 段の見出しを表示します

      // 内側の for文：掛ける数（1〜9）を回します
      for (let i = 1; i <= 9; i++) {
        // dan × i の結果を表示します
        console.log(`${dan} × ${i} = ${dan * i}`);
      }

      console.log(''); // 段ごとに空行を入れて見やすくします
    }

    console.log('--- 九九表の表示が完了しました ---');
  </script>
</body>
</html>

二重のfor文の流れをイメージする

このコードは、次のような流れで動きます。

dan = 1 のとき
- i = 1〜9 が順番に変化し、1×1〜1×9が表示される
dan = 2 のとき
- i = 1〜9 が順番に変化し、2×1〜2×9が表示される
dan = 3 のとき
- i = 1〜9 が順番に変化し、3×1〜3×9が表示される …
dan = 9 のとき
- i = 1〜9 が順番に変化し、9×1〜9×9が表示される

外側のfor文が1回まわるごとに、内側のfor文が9回まわるという構造になっています。これが、九九表の「段 × 掛ける数」という二重構造そのものです。

Step 4：九九表を「表形式」で表示してみる（応用）

コンソールに1行ずつ表示するだけでも十分ですが、少し応用として、ブラウザ画面に「表」として九九表を表示してみます。

九九表をHTMLの表として表示するテンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 9 ミニ課題：九九表をHTMLで表示する</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #333;
      padding: 4px 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>九九表をHTMLの表として表示する</h1>

  <!-- 九九表を表示するためのテーブル -->
  <table id="kukuTable">
    <thead>
      <tr>
        <th>段＼掛ける数</th>
        <!-- 掛ける数のヘッダー（1〜9） -->
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
      </tr>
    </thead>
    <tbody>
      <!-- ここに JavaScript で九九表の行を追加します -->
    </tbody>
  </table>

  <script>
    // 九九表を表示するテーブル要素を取得します
    const kukuTableBody = document.querySelector('#kukuTable tbody');

    // 段（1〜9）を回す外側の for文
    for (let dan = 1; dan <= 9; dan++) {
      // tr（行）要素を作成します
      const row = document.createElement('tr');

      // 段の見出しセル（th）を作成します
      const danHeaderCell = document.createElement('th');
      danHeaderCell.textContent = `${dan}の段`;
      row.appendChild(danHeaderCell);

      // 掛ける数（1〜9）を回す内側の for文
      for (let i = 1; i <= 9; i++) {
        const cell = document.createElement('td');
        cell.textContent = dan * i; // 結果だけを表示します（例：2×3なら6）
        row.appendChild(cell);
      }

      // 完成した行をテーブル本体に追加します
      kukuTableBody.appendChild(row);
    }
  </script>
</body>
</html>

ここでの重要ポイント

コンソール表示から一歩進んで、「画面に表として表示する」ことで、 for文が実際のUI生成にも使えることを体験できます。
外側のfor文で行（段）を作り、内側のfor文で列（掛ける数）を埋めていく構造になっています。
「段 × 掛ける数」という二重構造が、HTMLの「行 × 列」という構造ときれいに対応しています。

九九表ミニ課題の設計を振り返る

カウンターの役割を明確にする

九九表では、カウンター変数の役割がとても重要です。

dan：段（1〜9）を表すカウンター
i：掛ける数（1〜9）を表すカウンター

このように、「カウンターが何を意味しているか」を意識して名前をつけることで、コードの読みやすさと理解しやすさが大きく向上します。

繰り返しの考え方を整理する

九九表を作るときの繰り返しの考え方は、次のように整理できます。

段を 1〜9 まで繰り返す
各段ごとに、掛ける数を 1〜9 まで繰り返す
そのたびに「段 × 掛ける数」を計算して表示する

これは、「外側の繰り返しの中に、内側の繰り返しがある」という構造です。この構造を理解できると、配列の処理や二次元データの処理など、より複雑なプログラムにも応用しやすくなります。

Day 9 ミニ課題のまとめ

Day 9のミニ課題「九九表を作る」を通して、次のことを学びました。

for文の基本構造（初期化・条件・更新）とカウンターの役割
段と掛ける数という二重構造を、二重のfor文（ネストしたfor文）で表現する方法
コンソール表示だけでなく、HTMLの表として九九表を表示する応用例

九九表は、繰り返し処理の理解を一段深めてくれる、とても良い題材です。段や掛ける数の範囲を変えたり、結果に色をつけたり、「特定の条件を満たすマスだけ強調する」など、少しずつ機能を足していくことで、 for文と繰り返しの考え方が、さらにしっかり身についていきます。

@lifehacker

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。「覚える」ではなく「使える」ようになるプログラミング学習。

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、Web制作、例題や多くのサンプルコードで実践的な使い方などを、日本一詳しくわかりやすく解説するサイト。
更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

2026年8月
月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Day 9：for文で「同じ処理を繰り返す」感覚をつかむ

for文の基本構造を理解する

for文は「スタート・ゴール・一歩ずつ」をまとめた仕組み

カウンターという考え方

カウンター変数とは何か

実践1：1〜100まで表示する

まずは「何をしたいか」を言葉で整理する

コンソールに 1〜100 を表示するコード

重要ポイントの深掘り

実践2：偶数だけ表示する

偶数とは何かを確認する

1〜100の中から偶数だけを表示するコード

重要ポイントの深掘り

偶数だけ表示する別の書き方（ステップを変える）

この書き方のポイント

Day 9 前半の練習テンプレート

Day 9 前半のまとめ

Day 9：for文（後半）で「繰り返しを設計する力」を育てる

for文を「3つのパーツ」に分けて考える

for文の3要素をもう一度整理する

実践1：1〜100まで表示を「設計目線」で分解する

Step 1：まずは素直な実装

Step 2：オフバイワン（1つずれるミス）を意識する

Step 3：開始値・終了条件・更新を意識して設計する

実践2：偶数だけ表示を「複数の書き方」で比較する

書き方1：すべての数を回して条件で絞る

この書き方の特徴

書き方2：最初から偶数だけを回す

この書き方の特徴

2つの書き方を比較してみる

よくあるミスとその避け方（オフバイワン対策）

ミス例1：終了条件を間違える

ミス例2：更新を忘れる

Day 9 後半の練習テンプレート

Day 9 後半のまとめ

Day 9：for文で九九表を作るミニ課題に挑戦する

九九表を「プログラムの目線」で分解してみる

九九表の構造を言葉で整理する

繰り返し処理としての九九表

for文とカウンターの復習

for文の基本構造

Step 1：まずは「1の段」だけを作ってみる

1の段を表示するコード例

ここでの重要ポイント

Step 2：段を変えられるようにする

段を変えられるコード例

ここでの重要ポイント

Step 3：二重のfor文で九九表を完成させる

九九表をコンソールに表示する基本コード

二重のfor文の流れをイメージする

Step 4：九九表を「表形式」で表示してみる（応用）

九九表をHTMLの表として表示するテンプレート

ここでの重要ポイント

九九表ミニ課題の設計を振り返る

カウンターの役割を明確にする

繰り返しの考え方を整理する

Day 9 ミニ課題のまとめ

広告ブロッカーが検出されました