魔法使いの命令数

「魔法使いの命令数」

ミッション：変数で繰り返す回数を管理して、数字を変えるだけで出てくる個数が変わる装置をつくろう！

コードを写そう

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

<button id="btn">召喚</button>
<div id="stage"></div>

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

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

let count = 5;

btn.addEventListener('click', function() {
  for (let i = 0; i < count; i++) {
    const emoji = document.createElement('span');
    emoji.textContent = '⚡';
    stage.appendChild(emoji);
  }
});

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

コードを読み解こう

変数を for 文の条件に使う

「繰り返しの呪文」「絵文字の軍団」では、繰り返す回数を直接 5 や 10 と書いていました。

for (let i = 0; i < 5; i++) {   // 5 を直接書いていた

今回は count という変数に回数を入れて、for 文の条件に使っています。

let count = 5;

for (let i = 0; i < count; i++) {  // 変数 count を使う

こうすることで、count の数字を1箇所変えるだけで出てくる個数を変えられます。

なぜこの書き方が便利なのか

もし同じプログラムの中で繰り返す回数を何度も使いたくなったとき、直接 5 と書いていると全部の箇所を変える必要があります。変数にまとめておくと、変える場所が1箇所で済みます。

改造しよう

ミッション：count の数字を変えよう

let count = 5;  ← ここを変える

5 を別の数字に変えて、出てくる個数が変わることを確認してください。

自己チェック

• [ ] ボタンを押すと⚡が5個現れる
• [ ] count の数字を変えると出てくる個数が変わる
• [ ] for 文の条件に変数を使っている