ゼロからはじめるプログラミング講座の第二十四回です。前回に続いてfor文を使ったループを解説していきます。

変数iについて知ろう。

for文内で使われる変数iにいろいろ手を加えて動作を見てみましょう。

for(var m=0; m<5; m++){
  console.log(m)
}

まず変数名をmに変えてみました。これは問題ないですね。iである必要はありません。

しかしループで使う変数名はiにするのがメジャーなのでiを使いましょう。

i = 100
for(var i=0; i<2; i++){
  console.log("ループ内のiは" + i + "です。")
}
console.log(i)

for文で初期化する変数はグローバル変数を上書きしてしまいます。forブロックでは特別なスコープが効かないからです。グローバル変数を上書きしたくない場合はfor文をまるごと関数内に入れましょう。

for文から抜けたあとの変数iは2になっています。

ループ内処理は2回しか行われていません。

一回目はi=0です。

二回目はi=1です。

ループから出たあとはi=2になっています。この結果は納得できますか？{}内の処理が行われた後にインクリメント(+1)されて、次の条件確認が行われているのです。

条件確認を行ったところiが2なのでi<2;ではfalse偽となりループが終了しました。

そしてループを出た後のコンソールにはi=2が入っていたというわけです。

for(var i=0; i<10; i++){
  console.log("変更前:" + i)
  i += 3;
  console.log("変更後:" + i)
}
console.log("ループ後:" + i)

i=0から始まり{}内でi += 3で3足された後にi++されます。

i=4が条件を満たしているのでまたi+3された後にi++されます。

i=8が条件を満たしているのでまたi+3された後にi++されます。

i=12となり条件を満たしていないのでループから抜けます。

どうですか？この動作をきちんと理解できればループ処理を理解したと言えます。

ループにif文を追加してみよう。

ループにif文で条件分岐をすることでさらに複雑な処理ができるようになります。

n*nが奇数なのか偶数なのかをn=1からn=10まで調べる処理を書いてみます。

for(var i=1; i<=10; i++){
  var a = i * i
  if(a % 2 == 0){
    console.log(i + "*" + i + "は偶数です。")
  }else{
    console.log(i + "*" + i + "は奇数です。")
  }
}

まずvar i=1;で1から開始させます。

条件はi<=10;で10以下ならとします。10より小さいならではありません。

i * iの結果を変数aに入れます。

if文で変数aが偶数か奇数かを判定させます。a%2はaを2で割った余りです。

2で割った余りが0なら偶数なので偶数ですと表示させます。

2で割った余りが0以外ならfalse偽の場合の処理で奇数ですと表示させます。

練習問題を解いてみよう。

for文とif文を使えるようになったのでさっそく練習問題を解いてみましょう。

正解するとこうなります。

解答例はこうです。（マウスオーバーで表示）

for(var i=1; i<=10; i++){
  var a = i*i*i
  if(i%2 == 0){
    console.log(a + "は偶数")
  }else{
    console.log(a + "は奇数")
  }
}

for(var i=1; i<=5; i++){
  var a = i * i
  if(a <= 10 && a%2 == 0){
    console.log(a + "A")
  }else if(a <= 10 && a%2 != 0){ // a%2 == 1でも良い
    console.log(a + "B")
  }else if(a > 10 && a%2 == 0){
    console.log(a + "C")
  }else if(a > 10 && a%2 != 0){
    console.log(a + "D")
  }
}

全問正解しましたか？else if文や「&&」のことは忘れていませんでしたか？この解答以外にも同じ結果が得られる方法はいくつもあります。

お疲れ様でした。次回は練習問題の2問目をもう少し追加解説してからループ内ループの解説をしたいと思います。

次も頑張って記事を作るのでチャレンジしてください！

JavaScript #1/#2/#3/#4/#5/#6/#7/#8/#9/#10/#11/#12/#13/#14/#15/#16/#17/#18/#19/#20