4WEB講師のお勤め日記WEB講師による、技術系メモブログです。HTMLやCSS、Javascriptといったコードはもちろん、デザインの標準ソフトであるPhotoshopやIllustratorの使い方も解説していきます。現役エンジニア兼デザイナーの備忘録ブログです。4前回は、条件分岐について解説しました。その中でもif文を中心に解説していきました。今回は、繰り返し処理の解説です。以前の記事で、プログラムは4つの事しかしていないと書きました。1.入力2.出力3.分岐4.繰り返し今回解説するのは、この最後に書かれている繰り返しです。定められた事を、指定された回数繰り返します。同じ様な処理を、何度も行うのではなく、繰り返し処理をする事で、少ない記述で大量の処理を行う事が可能です。1.for文で繰り返し繰り返し処理は、for文が有名です。基本的な文法は、以下の通りです。カウンターの処理){処理}for文は繰り返す回数を上手くコントロールしなくてはなりません。「カウンターを定義」、「繰り返す条件」、「カウンターの処理」の三つで繰り返す回数を調整します。以下の様なコードを書いてみます。count++){console.log("繰り返し");}コンソールの画面に、文字が3回表示されるはずです。「繰り返し」という同じ文字を3回出力しているので、以下の画像の様に表示されます。3行「繰り返し」という文字が出る訳でありません。3回表示されるかを解説していきます。for文に限らず、プログラムは、一瞬で処理されてしまうので、なぜ動いているかを把握するのが難しいです。そこで、なるべくイメージがしやすい様に、処理される順番に解説していきます。(1)まず最初の行で、変数countに対して、数値の0を代入しています。その変数をfor文で使うカウンターにしています。(2)次に「繰り返す条件」を調べます。今は、変数countに0が代入されています。3」は成り立つ事がわかります。(3)(2)で、繰り返す条件がtrueだったので、{}の中の処理を実行します。ここで、1回めの出力が発生しています。(4)処理が終わったら、カウンターの処理を行います。「++」は初めて出てきましたが、「インクリメント」と言って、「1を足す」という意味です。変数countに1を足しています。この時点で、最初は0が代入されていた変数countには、1が入っています。(5)繰り返す条件を再度チェックします。今の時点でcountには1が入っています。(6)条件が成り立つ(true)ので、処理を実行します。ここで、2回めの出力が実行されています。(7)また、countに1を足します。この時点で変数countには2が代入されています。(8)繰り返す条件を確認します。今の時点で、変数countには2が代入されています。3」は、成り立ちます。(9)繰り返す条件が成り立ったので、処理を実行します。ここで3回めの出力をしています。(10).countに1を足します。この時点で、countは3になっています。(11)繰り返す条件を確認します。今回はcountは3になっています。3」は、成り立ちません。(false)(12)一つ前の処理で、繰り返す条件が成り立たなかったので、処理はせずにfor文の処理を終えます。この様に、3回出力するfor文ですが、12工程がものすごいスピードで実行される事で動いています。前の例では、繰り返す回数をコントロールするために、変数countを使いました。文法上、まったく問題ないのですが、慣習は少し違います。前の例と全く同じ動きをするfor文を、もう少し慣習に寄せた形で書いてみます。i++){console.log("繰り返し");}この様に、カウンター用の変数は、iを使う事が多いです。for文の中で定義しつつ0を代入する事が多いです。この変数名にする理由は、特になく、単なる慣習です。繰り返し処理は、配列と相性が良いです。配列の中にあるデータを全て出力します。配列の出力方法は、以下のURLより参照してください。i++){//配列を出力}さて、ここで、どうやって配列を出力すれば良いかを考えます。以下の様に書いてみると、配列全体が3回出力されてしまいます。"佐藤さん"]」が3回出力される。*/これだと、やりたい事とは少し違います。配列全体を出力するのではなく、中身を出したいです。console.log(hairetu[数字]);この様な形で出力する必要があります。以下の様にしてみます。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足されていきます。よって、以下の様に記述します。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を使うと便利です。i++){console.log(hairetu[i]);}こうすると、後で配列の中身が増えたとしても、変わらずに全て出力されます。4.まとめ繰り返し処理は、わずかなコードで、大量の処理を行うので、初学者の方は何が起こっているのかわからなくなりがちです。考えつつコードを書く様にしていきましょう。for文は、if文同様よく使う処理ですので、何度も書いて覚えていきましょう。