【JavaScript超入門コース】11.繰り返し｜同じ処理を何度も実行できます【プログラミング初心者向け入門講座】

はじめに

こんにちは。キノコードです。
「【5分レッスン】JavaScript超入門コース#11 反復」について説明します。

繰り返しとは？

レッスン4「プログラムの基本構造」で説明しましたが、プログラムの基本的な動きは「順次」「分岐」「繰り返し」の3つです。
繰り返しとは、決まった回数や条件を満たしてれば、同じ処理を実行するプログラム構造です。

for文

繰り返しの代表例がfor文です。
for文は、条件を満たしていれば、同じ処理をぐるぐる繰り返します。
そして、条件を満たさなくなったタイミングで、繰り返しがおわります。
例えば、for文で同じ処理を5回繰り返したい場合で考えてみます。
どうやったら5回をカウントできるでしょうか。
例えば、「1」からスタートして、1ずつ増やしていき「5」で終われば、5回です。
例えば、「0」からスタートして、1ずつ増やしていき「4」で終われば、これも5回です。
そういった処理をJavaScriptのfor文で書いていきます。
JavaScript でのfor文のきまりをみていきましょう。

for (スタート値; 継続条件; 増減式){
　繰り返し中に実行する処理;
}

まず、forと書き、変数を書きます。
ここで定義した変数のことをカウンタ変数といいます。
カウンタ変数は、英語の「index」「integer」の頭文字「 i 」が使われることが多いです。
カウンタ変数の後に、「in」を書いて繰り返しの「範囲」または「配列」を記述します。
配列を使ったfor文は、このレッスンの最後の方で説明するので、今は「範囲」を使った書き方を説明します。
繰り返しの範囲を指定する場合は、スタートさせる値を書き、ドットを2つ、そして、終わらせる値を記述します。
スタートさせる値とは、0から1ずつ増やして4で終わる例でいうと、0です。
スタート値に0を書きましょう。
終わらせる値とは、例えば、0から1ずつ増やして4で終わる例でいうと、4です。
したがって、終わらせる値のところに、4を書きます。
次に、doを記述します。ちなみに、doは省略することができます。このレッスンでは省略していきます。
次の行に、繰り返し実行したい処理を記述して、その次の行に、endを記述します。
for文では、endまでの処理が終わったら、一番上に戻り、次の処理を実行するか判定します。
判定の結果、OKであれば、次のループをします。対して判定の結果、NGであればループが終了します。
コードを書いてみましょう。

  for(var i = 0; i <= 4; i ++) {
    console.log(i);
  }

どんなコードを書くか説明します。0からスタートして4まで繰り返し。カウンタ変数を表示させてiが変化する様子がみれるコードを記述します。
ここで0からスタートして4まで繰り返すを記述します。
iが変化する様子がみれるように、iを表示させてみましょう。
実行してみます。
「0」から「4」までが表示されました

break

次に、break文についてです。
break文は、ある条件にあてはまったとき、繰り返し処理を終了させることができます。
例えば、「0」からスタートさせて、1ずつ増やしていき、「3」になったら繰り返しを終了するといったときです。
コードを書いてみます。

  for(var i = 0; i <= 4; i ++) {
    if(i == 3) {
      break;
    }
    console.log(i);
  }

ここで、iが3にになったときに、breakする記述をします。
「3」でループを抜けるので、「0」から「2」まで表示されるはずです。
実行します。
「0」から「2」までが表示されました。

contine

次に、contine文についてです。
contine文は、繰り返し処理で、ある条件にあてはまったときにその処理をスキップしたい場合に使います。
例えば、「0」からスタートさせて、1ずつ増やしていったとき、「3」になったら「3」をスキップさせるという場合です。
コードを書いてみます。

  for(var i = 0; i <= 4; i ++) {
    if(i == 3) {
      continue;
    }
    console.log(i);
  }

if文でiが3にになったときに、処理をスキップさせるcontineを記述をします。
「3」をスキップするので、「0」「1」「2」「4」が表示されるはずです。
実行してみます。
「0」「1」「2」「4」が表示されました。

for文のネスト

for文の中にfor文を入れることもできます。
あるものの中に、それと同じ種類のものが入っている構造のことをネストといいます。
for文の中にfor文が入っている構造のことをfor文のネストといいます。
外側の繰り返しのカウンタ変数は「i」で、0から2まで回し、内側の繰り返しのカウンタ変数は「j」で、0から2まで回すという例で考えてみます。
外側のループの1周目の時に、内側のループが0から2までまわります。内側のループがまわりきったら、外側のループが2周目に入ります。
コードを書いてみましょう。

  for(var i = 0; i <= 2; i ++) {
    for(var j = 0; j <= 2; j ++) {
      console.log( i + "-" + j );
    }
  }

iとjの変化がわかるように、「i、ハイフン、j」表示させてみましょう。
例えば、0-1,0-2,1-0,1-1といったように表示させたいのですが、整数と文字列であるハイフンはくっつけることができません。
そこで、整数が代入されるiとjを文字列に変換して、ハイフンとくっつけましょう。整数を文字列に変換するにはto_s(ツゥー/アンダースコア/エス)メソッドを使います。これでiとjをハイフンとくっつけることができます。
実行してみましょう。
iが0周目のときに、jが0から2までまわり、次にiが1周目の動きになる予想通りの結果となりました。

for文で配列内を参照

最後にfor文を使って配列の中身を表示させてみましょう。
これまで繰り返しの範囲を書いていましたが、今回は配列をそのまま書きましょう。
そうすると、配列の値が最初から1つずつが変数に格納されていきます。
コードを書いてみましょう。

  var arr = [2,4,6,8,10];

  for(var i = 0; i <= 4; i ++) {
    console.log(arr[i]);
  }

arrという変数に「2,4,6,8,10」の配列を代入。
「2」から「10」までの偶数が表示されるはずです。
実行してみましょう
2, 4, 6, 8, 10が表示されました。

  var arr = [2,4,6,8,10];
  var sum = 0;

  for(var i = 0; i <= 4; i ++) {
    sum += arr[i];
  }
  console.log(sum);

これにsumという変数を使って足し上げていくこともできます。
まず、sumという変数を定義して、0を代入します。
そして、演算子のレッスンで説明した、配列の値を複合代入演算子を使って足し上げていきます。
表示させてみましょう。
足し算ができています。

確認問題

それでは確認問題です。
for文で1から10まで1ずつ増やしていく繰り返しを記述します。
そして、if文を使い、3になったらスキップ、7になったらfor文がおわる記述をしましょう。
また、その動きがわかるように、カウンタ変数を表示させましょう。
動画をとめて記述してみてください。

for(var i = 1; i <= 10; i ++) {
  if(i == 3) {
    continue;
  } else if(i == 7) {
    break;
  } else {
    console.log(i);
  }
}

それでは回答です。
まずfor文で1から10まで回しましょう。
そして、if分で3の場合にcontine、else ifで7になったらbreakする記述をしましょう。
また3でも7でもない場合はカウンタ変数を表示させたいので、elseのところでiを表示させましょう。
それでは実行してみましょう。
3はスキップされ、6で終わる実行結果になりました。
予想通りの結果です。