繰り返し処理の基本

for文・while文を使って、同じ処理を何度も実行してみよう

1. 繰り返しとは

プログラムでは、同じような処理を何度も行いたいことがあります。例えば、1から100までの数字を表示したい場合、次のように書くのは大変です。

document.write(1);
document.write(2);
document.write(3);
document.write(4);
// これを100まで書くのは大変

このようなときに使うのが 繰り返し処理 です。

繰り返し処理を使うと、同じ命令を何度も自動で実行できます。

2. for文の基本

回数がある程度決まっている繰り返しには、 for文 を使うことが多いです。

for(let i = 1; i <= 10; i = i + 1){
    document.write(i + "<br>");
}

このプログラムは、1から10までの数字を順番に表示します。

for文の形

for(初期値; 条件; 更新){
    繰り返したい処理
}

部分	意味	例
初期値	繰り返し用の変数を用意する	let i = 1
条件	繰り返しを続ける条件	i <= 10
更新	1回終わるごとに変数を変化させる	i = i + 1

i は繰り返し用の変数です。よく i という名前が使われます。

3. カウントダウン

繰り返しでは、数を増やすだけでなく、減らすこともできます。

for(let i = 100; i >= 0; i = i - 1){
    document.write(i + "<br>");
}

これは100から0まで、1ずつ減らしながら表示するプログラムです。

4. 合計を求める

1から1000までの和を求める場合は、合計を保存する変数を用意します。

let sum = 0;

for(let i = 1; i <= 1000; i = i + 1){
    sum = sum + i;
}

document.write(sum);

sum = sum + i; は、「今までの合計に i を足して、もう一度 sum に入れる」という意味です。

5. if文と組み合わせる

繰り返しの中で条件分岐を使うと、特定の場合だけ処理を変えられます。

for(let i = 1; i <= 100; i = i + 1){
    if(i % 2 === 0){
        document.write(i + " は偶数<br>");
    }
}

% は余りを求める記号です。

i % 3 === 0 は「i を 3 で割った余りが 0」つまり「3で割り切れる」という意味です。

6. while文の基本

while文は、条件が成り立っている間、処理を繰り返します。

let i = 1;

while(i <= 10){
    document.write(i + "<br>");
    i = i + 1;
}

これはfor文で書いた次のプログラムと同じ意味です。

for(let i = 1; i <= 10; i = i + 1){
    document.write(i + "<br>");
}

回数がはっきりしているときは for文、条件が続く間くり返したいときは while文、と考えると分かりやすいです。

7. 入力された値を使う

テキストボックスに入力された値を使うには、 document.getElementById() を使います。

let n = Number(document.getElementById("num").value);

入力された値は最初は文字列として扱われるので、 Number() で数値に変換します。

8. break文

繰り返しの途中で処理をやめたいときは、 break; を使います。

for(let i = 1; i <= 10; i = i + 1){
    if(i === 5){
        break;
    }

    document.write(i + "<br>");
}

この場合、5になった時点で繰り返しが終了します。

確認問題

ここまで学んだ for文・while文を使って、次の問題に挑戦してみましょう。

while文を使って1から10まで表示しなさい。

let i = 1;

while(i <= 10){
    document.write(i + "<br>");
    i = i + 1;
}

テキストボックスに入力された数までの和を求めなさい。

<input type="text" id="num">
<button onclick="q2()">実行</button>

<script>
function q2(){
    let n = Number(document.getElementById("num").value);
    let sum = 0;

    for(let i = 1; i <= n; i = i + 1){
        sum = sum + i;
    }

    alert(sum);
}
</script>

入力された数の約数の個数を求めなさい。

<input type="text" id="num">
<button onclick="q3()">実行</button>

<script>
function q3(){
    let n = Number(document.getElementById("num").value);
    let count = 0;

    for(let i = 1; i <= n; i = i + 1){
        if(n % i === 0){
            count = count + 1;
        }
    }

    alert(count);
}
</script>