繰り返しの呪文

「繰り返しの呪文」

ミッション：ボタンを押すと、★が5個いっきに現れる装置をつくろう！

コードを写そう

HTMLタブに下のコードを貼り付けてください。

html

<button id="btn">呼び出す</button>
<div id="stage"></div>

JSタブに下のコードを貼り付けてください。

const btn = document.querySelector('#btn');
const stage = document.querySelector('#stage');

btn.addEventListener('click', function() {
  for (let i = 0; i < 5; i++) {
    const star = document.createElement('p');
    star.textContent = '★';
    stage.appendChild(star);
  }
});

ボタンをクリックして、★が5個まとめて現れることを確認してください。

コードを読み解こう

`for` 文：同じ処理を繰り返す

「数を刻む石板」では createElement と appendChild を使って要素を1個追加しました。今回はその操作を 5回繰り返す ために for 文を使います。

for (let i = 0; i < 5; i++) {
  // ここに書いた処理が5回繰り返される
}

for 文は3つの部品で動いています。

部品	書き方	意味
初期値	`let i = 0`	「i という黒板を用意して 0 を書く」
条件	`i < 5`	「i が 5 より小さい間は続ける」
更新	`i++`	「1回終わるたびに i を 1 増やす」

この3つが組み合わさって、i = 0, 1, 2, 3, 4 の5回だけ中の処理が実行されます。

繰り返しの中で `createElement` する

for (let i = 0; i < 5; i++) {
  const star = document.createElement('p');
  star.textContent = '★';
  stage.appendChild(star);
}

「物体を召喚せよ」で学んだ「工作 → 文字を書く → 展示台に貼る」の3ステップが、for 文によって5回繰り返されます。1回のクリックで5個いっきに現れるのはこのためです。

改造しよう

ミッション①：★の数を変えよう

変える場所は1箇所だけです。

for (let i = 0; i < 5; i++) {  ← ここの「5」を変える

5 を好きな数字に変えてみましょう。

ミッション②：★以外の文字にしよう