【JavaScript】JavaScriptの基礎復習4 forで繰り返し処理【簡単コピペ】

繰り返し処理といえば、for文なんて思考になるのはベーマガ世代の影響かもしれません。他にもdo～whileとかもありますが、考えていてパッと思いつくのがfor文だったりする僕です。というわけで、今回はJavaScriptでの繰り返し処理、forの復習をしていきたいと思います。

for文の書き方

JavaScriptでの書き方の例をあげてみましょう。

for(i=0; i<10; i++){
    繰り返し処理したい内容
}

まあ、こんな感じでしょうか。上の例では10回の繰り返しをする状態になっています。for文の簡単な解説っぽいものをしてみると

iという入れ物に0を入れる
iが10以下の場合は繰り返し処理をする
その繰り返し処理をする際にはiに1を加算する

という感じですね。ポイントは「10以下」と「1を加算」の部分。ここを変えることで繰り返す回数が変わってきます。また、iという入れ物じゃなくても問題はありません。aでもxyzでも。

問：1から10までの整数を合計は？

なんか小学生の問題みたいですよね。まあ、普通に足し算で考えるなら計算式は

1+2+3+4+5+6+7+8+9+10

これになるわけです。ではこれを繰り返し処理で書いてみましょう。1～10までひとつずつ数字が増えていくわけですから、先ほどのfor文の解説にも「iに1を加算する」って処理が使えそうですね。まず、それぞれ入れ物を用意してみます。

合計した計算結果は入れ物「x」に
1～10の数字は入れ物「a」に

var a = 1;
var x = 0;

これで入れ物の用意はOK。次に繰り返し処理です。もちろんここではforを使います。

for(i=0; i<10; i++){
}

さて、あとは10回繰り返す処理を書いていきましょう。どういう処理を10回繰り返せば問題の答えになるのか？　それを考えます。

aに毎回1を加算すると1,2,3,4,5,6…と数字が増えていくはず
aの値を毎回xに足し算してあげれば1+2+3+4+5+6…という計算式と同じ結果が得られるはず

こんな感じでしょうか。ではこれを実際にプログラムに落とし込んでみると

for(i=0; i<10; i++){
    x = x + a;
    a = a + 1;
}

これで処理の中身としては出来ているはずです。ちなみに式の順番は「x」が先で「a」が後です。これを逆にしてしまうと…まあ、それは自分の目で確認してみるといいかもですね。最後に、結果を表示させてみましょう。これはこれまでやってきた表示をさせる処理を応用すればできそうですよね。ということで

var out = document.getElementById('ele');
out.innerHTML = x;

これにhtmlでdivタグのID名eleを用意してあげれば表示できますね。ここまでの処理をまとめてコードにしてみると

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JavaScript</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div id="ele"></div>
    <script>
        var a = 1;
        var x = 0;
        for (i=0; i<10; i++) {
            x = x + a;
            a = a + 1;
        }
        var out = document.getElementById('ele');
        out.innerHTML = x;
    </script>
</body>
</html>

結果は？

55になりましたね。正解です。

改造：問題文を表示してみる

55だけが表示されていても、なんとなく寂しいので問題文も表示させてみましょう。htmlをいじってもいいのですが、せっかくなのでJavaScriptでやってみます。入れ物を用意して、innerHTMLで表示させる方法でいいでしょう。

問題文は「問：1から10までの整数を合計は？」var q = “問：1から10までの整数を合計は？”;

var br = "";
(中略)
out.innerHTML = q + br;
out.innerHTML += x;

それっぽくなりました！

改造：計算式も表示してみる

テストの答えとしては正解ですが、計算式が書いてあるとよりそれっぽく見えると思いませんか？　ということで計算式も表示させてみましょう。どういう風に処理していくかを考えてみると

「1+2+3+4+…+8+9+10=」という文字を表示させたい
- 1～10の数字はaで実行処理できている
- 新たに入れ物を用意して、aの数字と「+」の文字を追加しながら入れていくことで実現できそう
- 最後に「=」と合計の答えを追加してあげるとの忘れないようにする
- out.innerHTML += x; を削除する（上で答えも表示させているので重複するから）

こんな感じでしょうか。ではこれをコードにしてみましょう。

var s = "";
（中略）
s += a + "+";
（中略）
s += " = " + x;
（中略）
out.innerHTML += s;

バッチリですね！

まとめそして全コードアンド問題

今回はfor文でした。計算式なども含めて、処理の仕方を覚えてしまえば手軽に繰り返し処理ができるようになると思います。最後に今回のコードを載せておきますので、コピペしてためしてみてくださいね！

さて、ここで改良をしておきたいと思います。「x = x + a」や「a = a + 1」などはもっと短い書き方ができます。

x = x + a;
a = a + 1;

次のように書き換え可能です

x += a;
a++;

「+=」は前にも出てきました。xにaを追加するという書き方。「++」はfor文の中に出てきた表現でしたね。1加算するという場合には、このような書き方ができます。覚えておいて損はないでしょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JavaScript</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div id="ele"></div>
    <script>
        var q = "問：1から10までの整数を合計は？";
        var br = "<br>"
        var s = "";
        var a = 1;
        var x = 0;
        for (i=0; i<10; i++) {
            x += a;
            s += a + "+";
            a++;
        }
        var out = document.getElementById('ele');
        s += " = " + x;
        out.innerHTML = q + br;
        out.innerHTML += s;
    </script>
</body>
</html>

そして、最後に問題。自力でやってみてくださいね。

【実はｆｏｒ文のiを使うことでaの入れ物を使わないでも同じ結果を出すことができます。どう改良すればいいでしょうか？】

ではでは。