総合 ゲーム 画像動画

【ゼロからはじめるプログラミング】JavaScript学習 #11

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

 

  1. 変数iについて知ろう。
  2. ループにif文を追加してみよう。
  3. 練習問題を解いてみよう。

 

 

変数iについて知ろう。

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

 

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

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

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

 

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

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)
変更前:0
変更後:3
変更前:4
変更後:7
変更前:8
変更後:11
ループ後:12

 

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 + "は奇数です。")
  }
}
1*1は奇数です。
2*2は偶数です。
3*3は奇数です。
// 中略
10*10は偶数です。

 

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

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

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

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

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

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

 

 

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

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

 

  1. n*n*nの結果と結果が偶数か奇数かをコンソールに表示するforループを作りnが1~10の場合を表示させなさい。
  2. nが1~5の場合のforループを作りn*nの結果と結果に応じた文字を表示させなさい。
    • n*nが10以下の偶数の場合はコンソールにAと表示させなさい。
    • n*nが10以下の奇数の場合はコンソールにBと表示させなさい。
    • n*nが10より上の偶数の場合はコンソールにCと表示させなさい。
    • n*nが10より上の奇数の場合はコンソールにDと表示させなさい。

 

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

1は奇数
8は偶数
27は奇数
64は偶数
125は奇数
216は偶数
343は奇数
512は偶数
729は奇数
1000は偶数
1B
4A
9B
16C
25D

 

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

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

コメントを残す。

メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。URLを含むコメントは承認待ちになります。