🚀 プログラミング学習

レッスン4：繰り返し処理

📖 導入 — 同じ処理を何度も書くのは大変！

「こんにちは」を10回表示したいとき、console.log("こんにちは") を10行書くのは大変ですよね。こういうときに使うのが 繰り返し処理（ループ） です。同じ処理を何度でも自動で繰り返してくれます。

📝 for ループと配列

for ループの構造

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// → 0, 1, 2, 3, 4 と表示される
部分例意味
最初に1回実行let i = 0カウンター変数 i を0からスタート
繰り返す条件i < 5i が5より小さい間は繰り返す
1回ごとに実行i++1回処理するたびに i を1増やす

💡 i++ は i = i + 1 と同じ意味です。

配列：複数のデータをまとめる

配列は [ と ] で囲み、データをカンマで区切ります。インデックス（番号）は 0から 始まります。

const foods = ["ラーメン", "カレー", "寿司"];

console.log(foods[0]);      // → ラーメン
console.log(foods.length);  // → 3

配列と for の組み合わせ

const foods = ["ラーメン", "カレー", "寿司"];

for (let i = 0; i < foods.length; i++) {
  console.log(foods[i]);
}
// → ラーメン → カレー → 寿司

foods.length を条件に使うと、配列の要素数が変わっても自動で対応できます。

💻 やってみよう！

好きな食べ物リストをページに表示します。

<h1>好きな食べ物リスト</h1>
<ul id="food-list"></ul>
<script src="script.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.createElement や appendChild はDOMを操作するメソッドです。詳しくはレッスン6で学びます。foods 配列に好きな食べ物を追加して、リストが増えることを確認してみましょう！

📌 まとめ

🚀 次のレッスンへ

次のレッスンでは、処理をまとめて再利用できる「関数」を学びます！

🔍 もっと調べてみよう：「JavaScript for文 配列 使い方」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！
← JavaScriptコース一覧に戻る