レッスン4：繰り返し処理
🎯 このレッスンで学ぶこと
- forループで処理を繰り返せます。
- 配列を作って複数のデータをまとめられます。
- 配列のインデックスで要素を取得できます。
- 配列とforを組み合わせて全要素を処理できます。
📖 前回の復習（レッスン3）
if (条件) { }で条件が true のときだけ処理を実行するelse ifで複数の条件、elseでそれ以外の処理を書く- 比較演算子
===・!==・>・<で条件を作る
📖 導入 — 同じ処理を何度も書くのは大変！
「こんにちは」を10回表示したいとき、console.log("こんにちは") を10行書くのは大変ですよね。こういうときに使うのが 繰り返し処理（ループ） です。同じ処理を何度でも自動で繰り返してくれます。
📝 1. for ループの基本
for文は 3つの部分 で構成されています。1つずつ見ていきましょう。
for (let i = 0; i < 5; i++) {
console.log(i);
}
// → 0, 1, 2, 3, 4 と表示される3つの部分を分解して理解しよう
for (①初期化; ②条件; ③更新) の3つの部分はそれぞれ役割が違います。
let i = 0（初期化） — カウンターを0からスタートさせる。最初に1回だけ実行されるi < 5（条件） — この条件が true の間、繰り返し続ける。false になったらループ終了i++（更新） — 1回処理するたびに i を1増やす。これがないと永遠に終わらない
| 部分 | 例 | 意味 |
|---|---|---|
| 最初に1回実行 | let i = 0 | カウンター変数 i を0からスタート |
| 繰り返す条件 | i < 5 | i が5より小さい間は繰り返す |
| 1回ごとに実行 | i++ | 1回処理するたびに i を1増やす |
i++ は i = i + 1 の省略形です。「今の i に1を足して、i に戻す」という意味です。
i < 5 なら、i が 5 になった瞬間にループを抜けます。
ループの動きを追ってみよう
for (let i = 0; i < 3; i++) の場合:
- i = 0 → 条件 0 < 3 は true → 処理実行 → i++ で i = 1
- i = 1 → 条件 1 < 3 は true → 処理実行 → i++ で i = 2
- i = 2 → 条件 2 < 3 は true → 処理実行 → i++ で i = 3
- i = 3 → 条件 3 < 3 は false → ループ終了！
▶ プレビュー
📝 2. 配列：複数のデータをまとめる
配列とは？
配列は [ と ] で囲み、データをカンマで区切ります。複数のデータを1つの変数にまとめて管理できます。
const foods = ["ラーメン", "カレー", "寿司"];
console.log(foods[0]); // → ラーメン
console.log(foods[1]); // → カレー
console.log(foods[2]); // → 寿司
console.log(foods.length); // → 3（要素の数）foods[0]、2番目は foods[1] です。「1番目 = インデックス0」と覚えましょう。
配列.length で要素の数を取得できます。要素が3つなら length は 3 ですが、最後のインデックスは 2（= length - 1）です。
📝 3. for文 + 配列の組み合わせ
配列の全要素を順番に処理する
for文と配列を組み合わせると、全要素を自動で処理できます。
const foods = ["ラーメン", "カレー", "寿司"];
for (let i = 0; i < foods.length; i++) {
console.log(foods[i]);
}
// → ラーメン → カレー → 寿司foods.length を条件に使うと、配列の要素数が変わっても自動で対応できます。
i <= foods.length は間違い！ 要素が3つの配列で i <= 3 にすると、存在しない foods[3] にアクセスして undefined になります。必ず i < foods.length を使いましょう。
配列の合計を求める例
const scores = [80, 90, 70, 85];
let total = 0;
for (let i = 0; i < scores.length; i++) {
total = total + scores[i];
}
console.log("合計: " + total); // → 合計: 325▶ プレビュー
💻 やってみよう！
このレッスンから、JavaScriptを別ファイル（js-lesson4.js）に書きます。
- VS Codeで
my-practiceフォルダを開く - 新しいファイルを2つ作る：
js-lesson4.htmlとjs-lesson4.js（2つのファイルは必ず同じフォルダに置いてください） js-lesson4.htmlに以下のHTMLを書くjs-lesson4.jsに以下のJavaScriptを書くjs-lesson4.htmlをダブルクリックしてブラウザで確認する
好きな食べ物リストをページに表示します。
<h1>好きな食べ物リスト</h1>
<ul id="food-list"></ul>
<script src="js-lesson4.js"></script>const foods = ["ラーメン", "カレー", "寿司", "ピザ", "うどん"];
const ul = document.getElementById("food-list");
for (let i = 0; i < foods.length; i++) {
const li = document.createElement("li");
li.textContent = foods[i];
ul.appendChild(li);
}💡 document.getElementById("food-list") は、HTMLの id="food-list" がついた要素を取得する命令です。document.createElement や appendChild はDOMを操作するメソッドです。これらは「こういうことができる」と知っておくだけでOKです。詳しくはレッスン6で学びます。foods 配列に好きな食べ物を追加して、リストが増えることを確認してみましょう！
✅ このように表示されれば成功です：
🚀 発展：forEach を使う方法
配列の全要素を処理するとき、forEach を使うと for 文より短く書けます。
const foods = ["ラーメン", "カレー", "寿司"];
// for文
for (let i = 0; i < foods.length; i++) {
console.log(foods[i]);
}
// forEach（同じ意味・短く書ける）
foods.forEach(food => console.log(food));⚠️ よくあるミス
for (let i = 0; i < 5; ) のように3つ目の部分を忘れると、i がずっと0のまま終わりません。ブラウザが固まったら、タブを閉じてコードを確認しましょう。
foods[1] は2番目の要素です。1番目を取りたいときは foods[0] と書きます。
要素が3つの配列で
i <= foods.length と書くと、存在しない foods[3] にアクセスして undefined が表示されます。i < foods.length を使いましょう。
📌 まとめ
- ✅
for (let i = 0; i < 回数; i++)で処理を繰り返す - ✅ 配列は
["A", "B", "C"]の形で複数のデータをまとめる - ✅ 配列のインデックスは 0から 始まる
- ✅
配列.lengthで要素数を取得できる - ✅ 配列と
forを組み合わせると全要素を順番に処理できる
🚀 次のレッスンへ
次のレッスンでは、処理をまとめて再利用できる「関数」を学びます！
このレッスンは役に立ちましたか？
フィードバックありがとうございます！
📖 このレッスンの用語
⚠️ よくあるエラー
- Permission denied (publickey) — SSH鍵が設定されていない
- TypeError: Assignment to constant variable — constで宣言した変数に再代入している
- ReferenceError: Cannot access before initialization — let/constの宣言前にアクセスしている