【6日でできるJavaScript入門】繰り返し処理②

　複雑な繰り返し処理を実現するために、JavaScriptではループの中にループを入れ子にする多重ループが利用できます。本記事「繰り返し処理②」では、二重ループの仕組みと、その応用例として表の自動生成—特に九九の表や動的な料金表の作成—を解説します。

１．二重ループの繰り返し処理

　二重ループは、外側の for 文の1回ごとに内側の for 文が一連の処理を行う構造です。以下の例では、外側ループを5回、内側ループを10回に設定しています。

for (let i = 1; i <= 5; i++) {
  // 処理A（計5回）
  for (let j = 1; j <= 10; j++) {
    // 処理B（計50回）
  }
  // 処理C（計5回）
}
項目説明
外側ループ (i)i = 1 から i <= 5 （計5回実行）
内側ループ (j)j = 1 から j <= 10 （iあたり10回実行）
処理Bの実行回数5 × 10 = 50回

コード解説

  • 外側の i は1〜5 変更し、処理A/Cは5回ずつ実行
  • 内側の j は1〜10 に変更し、処理Bは50回実行
  • 多重ループの総実行回数は外側×内側

２．多重ループを使った表の作成

JavaScriptと多重ループで HTML <table> を動的に生成するパターンです。

2.1. ヘッダー行の生成

<table>
  <thead id="t_head"></thead>
  <tbody id="t_body"></tbody>
</table>
<script>
function createHeader() {
  let row = '<tr><th></th>';
  for (let j = 1; j <= 9; j++) {
    row += `<th>${j}</th>`;
  }
  row += '</tr>';
  document.getElementById('t_head')
          .insertAdjacentHTML('beforeend', row);
}
</script>

コード解説

  • <th></th>: 空のコーナーセル
  • j=1〜9 の見出しセルをループで連結
  • insertAdjacentHTML で <thead> に挿入

2.2. 本文行の生成

function createBody() {
  for (let i = 1; i <= 9; i++) {
    let row = `<tr><th>${i}</th>`;
    for (let j = 1; j <= 9; j++) {
      row += `<td>${i * j}</td>`;
    }
    row += '</tr>';
    document.getElementById('t_body')
            .insertAdjacentHTML('beforeend', row);
  }
}

コード解説

  • 外側 i=1〜9 で行を9行生成
  • 内側 j=1〜9 で各セルに掛け算結果を表示
  • 動的に <tbody> を構築

３．九九の表の作成サンプル

ファイル名： lesson13-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔢 九九の表を作ろう</title>
  <style>
    table{border-collapse:collapse;}
    th, td{border:1px solid #000; padding:4px; text-align:center;}
    th{background:#99CCCC;}
  </style>
</head>
<body onload="createTable()">
  <h1>🔢 九九の表</h1>
  <table>
    <thead id="t_head"></thead>
    <tbody id="t_body"></tbody>
  </table>
  <script>
    function createTable() {
      // ヘッダー
      let head = '<tr><th></th>';
      for (let j = 1; j <= 9; j++) head += `<th>${j}</th>`;
      head += '</tr>';
      document.getElementById('t_head').insertAdjacentHTML('beforeend', head);
      // 本文
      for (let i = 1; i <= 9; i++) {
        let row = `<tr><th>${i}</th>`;
        for (let j = 1; j <= 9; j++) {
          row += `<td>${i * j}</td>`;
        }
        row += '</tr>';
        document.getElementById('t_body')
                .insertAdjacentHTML('beforeend', row);
      }
    }
  </script>
</body>
</html>

ブラウザの出力例

ページロードで自動的に 9×9 の九九表が完成

４．演習：週間スケジュール表の作成

　以下の配列を使い、二重ループで「週間スケジュール表」を生成してみましょう。配列には時間帯ごとの予定を事前に定義し、その内容をセルに反映します。

let days = ['月','火','水','木','金'];
let times = ['午前','午後','夜'];
let schedule = [
  ['会議','開発','レビュー','ミーティング','報告'],
  ['コード作成','ランチ','テスト','設計','ドキュメント'],
  ['懇親会','セミナー','自由時間','保守','整理整頓']
];
  • ヘッダー行は曜日（days[j] を j=0〜4 で表示）
  • 左端の行ヘッダーは時間帯（times[i] を i=0〜2 で表示）
  • 本文セルは schedule[i][j] の値を表示
  • for を二重にネストして動的生成

完成例

月火水木金
午前会議開発レビューミーティング報告
午後コード作成ランチテスト設計ドキュメント
夜懇親会セミナー自由時間保守整理整頓

ファイル名： lesson13-2.html

　事前定義した配列から「週間スケジュール表」を動的に生成するサンプルHTMLです。ページ読み込み時に自動で表が作られ、days×times の2次元配列 schedule の内容がセルに反映されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📅 週間スケジュール表</title>
  <style>
    table { border-collapse: collapse; width: 100%; }
    th, td {
      width: 90px;
      border: 1px solid #444;
      padding: 8px;
      text-align: center;
    }
    th { background-color: #99CCCC; }
    caption {
      caption-side: top;
      font-size: 1.2em;
      margin-bottom: 8px;
    }
  </style>
</head>
<body onload="createSchedule()">
  <h1>📅 週間スケジュール表</h1>
  <table>
    <caption>今週の予定</caption>
    <thead id="t_head"></thead>
    <tbody id="t_body"></tbody>
  </table>

  <script>
    // 曜日と時間帯、そして各セルの予定を定義
    const days     = ['月', '火', '水', '木', '金'];
    const times    = ['午前', '午後', '夜'];
    const schedule = [
      ['会議',     '開発',     'レビュー',    'ミーティング', '報告'],
      ['コード作成','ランチ',   'テスト',      '設計',        'ドキュメント'],
      ['懇親会',   'セミナー', '自由時間',    '保守',        '整理整頓']
    ];

    function createSchedule() {
      // --- ヘッダー行の生成 ---
      let headHTML = '<tr><th></th>';
      for (let j = 0; j < days.length; j++) {
        headHTML += `<th>${days[j]}</th>`;
      }
      headHTML += '</tr>';
      document.getElementById('t_head')
              .insertAdjacentHTML('beforeend', headHTML);

      // --- 本文行の生成 ---
      for (let i = 0; i < times.length; i++) {
        let rowHTML = `<tr><th>${times[i]}</th>`;
        for (let j = 0; j < days.length; j++) {
          rowHTML += `<td>${schedule[i][j]}</td>`;
        }
        rowHTML += '</tr>';
        document.getElementById('t_body')
                .insertAdjacentHTML('beforeend', rowHTML);
      }
    }
  </script>
</body>
</html>

ブラウザの出力例

ポイント解説

  • thead・tbody: ヘッダーと本文を分けて取得、操作します。
  • 二重ループ
    ・外側 for (i) で時間帯（行）を
    ・内側 for (j) で曜日（列）を回し、セルを動的生成します。
  • insertAdjacentHTML('beforeend', …): 既存要素の末尾に行・セルを追加。
  • 配列の長さを動的に参照することで、データ数が変わってもコードを書き換えずに対応可能です。

　このプログラムをベースに、ユーザーから予定を入力させたり、色分けを行ったりと、さらにインタラクティブな機能を追加してみてください！

まとめ

　二重ループであらかじめ用意した2次元配列の要素をHTML表に反映する方法を学びました。次は、ユーザー入力を取り込み、動的に予定を編集できるインターフェースを作成してみましょう。

　二重ループを配列と組み合わせることで、曜日×時間帯のような規則的な表を簡潔に生成できることを学びました。次のステップでは、ユーザー入力を反映する動的なテーブル更新に進みましょう。

　二重ループと insertAdjacentHTML を組み合わせることで、規則的な表をコードで生成できることを学びました。この手法は、セル数やデータが増えても自動対応できるため、大量データの表示や動的ページ作成に非常に有用です。次回は for…of や while 文など他のループも試してみましょう。