その中でもif文を中心に解説していきました。
1.入力
2.出力
3.分岐
4.繰り返し
今回解説するのは、この最後に書かれている繰り返しです。
定められた事を、指定された回数繰り返します。
同じ様な処理を、何度も行うのではなく、繰り返し処理をする事で、少ない記述で大量の処理を行う事が可能です。
1.for文で繰り返し
繰り返し処理は、for文が有名です。基本的な文法は、以下の通りです。
for(カウンターを定義 ; 繰り返す条件 ; カウンターの処理){
処理
}
for文は繰り返す回数を上手くコントロールしなくてはなりません。
「カウンターを定義」、「繰り返す条件」、「カウンターの処理」の三つで繰り返す回数を調整します。
ひとまず、以下の様なコードを書いてみます。
for(count; count<3; count++){
console.log("繰り返し");
}
コンソールの画面に、文字が3回表示されるはずです。
ただ、「繰り返し」という同じ文字を3回出力しているので、以下の画像の様に表示されます。3行「繰り返し」という文字が出る訳でありません。
では、なぜ3回表示されるかを解説していきます。
for文に限らず、プログラムは、一瞬で処理されてしまうので、なぜ動いているかを把握するのが難しいです。
そこで、なるべくイメージがしやすい様に、処理される順番に解説していきます。
(1)まず最初の行で、変数countに対して、数値の0を代入しています。そして、その変数をfor文で使うカウンターにしています。
(2)次に「繰り返す条件」を調べます。今は、変数countに0が代入されています。よって、
「count < 3」は成り立つ事がわかります。
(3)(2)で、繰り返す条件がtrueだったので、{}の中の処理を実行します。ここで、1回めの出力が発生しています。
(4)処理が終わったら、カウンターの処理を行います。「++」は初めて出てきましたが、「インクリメント」と言って、「1を足す」という意味です。
つまり、変数countに1を足しています。
この時点で、最初は0が代入されていた変数countには、1が入っています。
(5)繰り返す条件を再度チェックします。今の時点でcountには1が入っています。よって、「count < 3」は成り立ちます。
(6)条件が成り立つ（true）ので、処理を実行します。ここで、2回めの出力が実行されています。
(7)また、countに1を足します。この時点で変数countには2が代入されています。
(9)繰り返す条件が成り立ったので、処理を実行します。ここで3回めの出力をしています。
(10).countに1を足します。この時点で、countは3になっています。
(11)繰り返す条件を確認します。今回はcountは3になっています。よって、「contt < 3」は、成り立ちません。（false）
(12)一つ前の処理で、繰り返す条件が成り立たなかったので、処理はせずにfor文の処理を終えます。
この様に、3回出力するfor文ですが、12工程がものすごいスピードで実行される事で動いています。
2.一般的なfor文の書き方
前の例では、繰り返す回数をコントロールするために、変数countを使いました。文法上、まったく問題ないのですが、慣習は少し違います。
前の例と全く同じ動きをするfor文を、もう少し慣習に寄せた形で書いてみます。
for(var i = 0; i<3; i++){
console.log("繰り返し");
}
この様に、カウンター用の変数は、iを使う事が多いです。そして、for文の中で定義しつつ0を代入する事が多いです。
この変数名にする理由は、特になく、単なる慣習です。
3.配列の中身を出力
繰り返し処理は、配列と相性が良いです。配列の中にあるデータを全て出力します。
配列の出力方法は、以下のURLより参照してください。
https://otsutome.blogspot.com/2019/10/javascriptjquery-2.html
//配列を定義
var hairetu = ["鈴木さん","田中さん","佐藤さん"];
for(var i = 0; i<3; i++){
//配列を出力
}
さて、ここで、どうやって配列を出力すれば良いかを考えます。
以下の様に書いてみると、配列全体が3回出力されてしまいます。
for(var i = 0; i<3; i++){
console.log(hairetu);
}
/*
->「array(3)」、もしくは、「(3) ["鈴木さん", "田中さん", "佐藤さん"]」が3回出力される。
*/これだと、やりたい事とは少し違います。配列全体を出力するのではなく、中身を出したいです。
なので、console.log(hairetu[数字]);この様な形で出力する必要があります。
では、以下の様にしてみます。
for(var i = 0; i<3; i++){
console.log(hairetu[0]);
}
//->鈴木さんが3回表示される
今度は、配列の中の一つのデータを取り出す事が出来ましたが、3回とも鈴木さんだけが表示される様になりました。
今回求められるのは、繰り返し処理の1回ごとに、処理の内容を変えるという事です。
1回目は、
console.log(hairetu[0]);
2回目は、
console.log(hairetu[1]);
3回目は、
console.log(hairetu[2]);
この様に、出力する内容を変える必要があります。
では、どうしたら出来るでしょうか。
こういった処理を行うときは、カウンターとしてセットした、変数iを使うのが一般的です。
変数iは、「1.for文で繰り返し」で、処理の流れを一つ一つ書きましたが、繰り返し処理が実行される毎に、1足されていきます。
よって、以下の様に記述します。
for(var i = 0; i<3; i++){
console.log(hairetu[i]);
}
//>鈴木さん、田中さん、佐藤さんが順番に出力される
このコードの場合、
1回目は、
console.log(hairetu[i]);
//iは、0が代入されている
2回目は、
console.log(hairetu[i]);
//iは、1が代入されている
3回目は、
console.log(hairetu[i]);
//iは、2が代入されている。
こういう状態になり、配列の中にあるデータを順番に取り出す事が出来ます。
また、「i<3」の部分ですが、「3」の意味は配列の中にあるデータの個数です。
よってここは、配列のデータの数を出力できる、lengthを使うと便利です。
for(var i = 0; i<hairetu.length; i++){
console.log(hairetu[i]);
}
こうすると、後で配列の中身が増えたとしても、変わらずに全て出力されます。
4.まとめ
繰り返し処理は、わずかなコードで、大量の処理を行うので、初学者の方は何が起こっているのかわからなくなりがちです。ゆっくり考えつつコードを書く様にしていきましょう。
for文は、if文同様よく使う処理ですので、何度も書いて覚えていきましょう。
