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

　同じ処理を何度も記述するのではなく、繰り返し処理を使って効率的にプログラムを記述しましょう。ここでは、JavaScriptの for 文を使った基本的なループ処理から、配列の要素を動的に操作する応用例までを解説します。

１．繰り返し処理とは？

　繰り返し処理（ループ）は、同一の命令セットを複数回自動実行させる仕組みです。 for 文では以下の3つを指定します。

要素	説明
初期化	カウンタ変数の初期値を設定（例：`let i = 1`）
継続条件	条件が真の間、繰り返しを継続（例：`i <= 5`）
更新	1ループごとの変化量（例：`i++` や `i += 2`）

1.1. 実行イメージ

i:1 → 処理 → i→2 → 処理 → … → i:5 → 処理 → i→6 → 条件False → 終了

1.2. 利点

コードの可読性・保守性向上
手作業で繰り返すミスを防止

２．for文の記述方法

for (初期化; 継続条件; 更新) { … } の形式でループを記述します。

for (初期化; 継続条件; 更新) { … }

構文要素	例	説明
初期化	`let i = 1`	ループ開始時に一度だけ実行
継続条件	`i <= 5`	ループ継続判定（真なら中身実行）
更新	`i++`	各ループ後に実行

2.1. サンプルHTML： 1〜5を出力

ファイル名： lesson12-1.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔁 数字ループ</title></head>
<body>
  <h1>🔢 1から5まで出力</h1>
  <ul id="nums"></ul>
  <button onclick="showNums()">表示</button>
  <script>
    function showNums() {
      const ul = document.getElementById('nums');
      for (let i = 1; i <= 5; i++) {
        ul.insertAdjacentHTML('beforeend', `<li>${i}</li>`);
      }
    }
  </script>
</body>
</html>

ブラウザの出力例

ボタン押下で 1〜5 のリストが表示される。

３．比較演算子

ループの継続条件に用いる主な比較演算子

演算子	意味	例
`<`	より小さい	`i < 5`
`<=`	以下	`i <= 5`
`>`	より大きい	`i > 0`
`>=`	以上	`i >= 0`
`==`, `===`	等しい	`i === 3`

注意： < と <= の違いでループ回数が変わることに留意

４．繰り返し処理の例

複数のデータをまとめて処理する実用例を紹介します。

4.1. 1〜100の合計を計算

ファイル名： lesson12-2.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>➕ 合計計算</title></head>
<body>
  <h1>🔢 1〜100合計</h1>
  <button onclick="sum100()">計算</button>
  <script>
    function sum100() {
      let total = 0;
      for (let i = 1; i <= 100; i++) {
        total += i;
      }
      alert('1〜100の合計は ' + total + ' です');
    }
  </script>
</body>
</html>

ブラウザの出力例

５．繰り返し処理による要素の追加

配列データをループでWebページに反映する例です。

5.1. サンプルHTML：ツアー日程の動的追加

ファイル名： lesson12-3.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🗾 ツアー切替</title></head>
<body>
  <h1>🗾 ツアー日程</h1>
  <ul id="schedule">
    <li>仙台（10/2）</li>
    <li>東京（10/4）</li>
    <li>横浜（10/6）</li>
    <li>新潟（10/8）</li>
  </ul>
  <button onclick="addWest()">西日本ツアー表示</button>
  <script>
    const west = ['大阪（10/12）','京都（10/14）','神戸（10/16）','広島（10/18）'];
    function addWest() {
      const ul = document.getElementById('schedule');
      for (let i = 0; i < west.length; i++) {
        ul.insertAdjacentHTML('beforeend', `<li>${west[i]}</li>`);
      }
    }
  </script>
</body>
</html>

ブラウザの出力例

ボタン1回押下で東日本→西日本ツアーが順に追加されます。

まとめ

ここでは、

for 文の基本構造
比較演算子の役割
数値集計や配列をループで画面に出力する例

を学びました。次は 多重ループ の構文に進みましょう。

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