【JavaScript 入門講座】繰返文（for文）
[JavaScript 入門講座]繰返文（for文）
繰り返し文の一つ、for文を学習する。
for文の構造
for文は「繰り返し文」と言われる。 同じプログラムを何度も繰り返し実行する時に利用する。 では、for文の構造を見よう。
for ( var i = 0 ; i < [回数] ; i++ ) {
プログラム
}
for文の構造である。細かい点は、気にしなくても良い（プログラマーは気にしない）。 繰り返し何度も実行するプログラムを、「プログラム」の部分に記述する。 for文が実行すると、繰り返し「プログラム」が実行する。
for文に[回数]という部分がある。ここにfor文を繰り返す回数を記載する。 例えば、[回数]の部分に「3」を記述すると、 「プログラム」と書かれた部分が3回実行する（for文が3回実行する）。
forブロック for文の中括弧で囲まれた部分
for文の中括弧で囲まれた部分をforブロックと言う。
for ( var i = 0 ; i < [回数] ; i++ ) {
[forブロック]
}
繰り返し実行するプログラムを、 forブロックの中に記述する。
文字を3つ表示するプログラム
001<script>
002
003var count = 1 ;
004
005for ( var i = 0 ; i < 3 ; i ++ ) {
006
007 alert ( "Hello" + count ) ;
008
009 count++;
010}
011
012</script>
002
003var count = 1 ;
004
005for ( var i = 0 ; i < 3 ; i ++ ) {
006
007 alert ( "Hello" + count ) ;
008
009 count++;
010}
011
012</script>
プログラムを実行すると、「Hello1」「Hello2」「Hello3」の順番で表示する。
プログラムを解説する。 3行目で、変数countを宣言して「1」を代入する。 5行目からfor文が始まる。forブロックは5行目から10行目である。 forブロックを何回繰り返すだろうか？ for文の[回数]の部分に「3」と記載されている。 つまり、forブロック内のプログラムが3回実行する。 forブロックのプログラムは、7行目と9行目である。 この2行のプログラムが3回実行する。 では、forブロック内に入ろう。
alert ( "Hello" + count ) ;
このプログラムが実行する。 文字列「Hello」と変数countを文字列結合する。 変数countの値は「1」である。
alert ( "Hello" + 1 ) ;
二つの値が文字列結合して、「Hello1」と表示する。 9行目で変数countをインクリメントする。インクリメントは重要である。
インクリメント
変数++;
インクリメント：値を「1」加算
インクリメントとは、変数の中に入っている値に、「1」加算する事である。 いま、変数countの値は「1」である。 変数countをインクリメントすると、 値が1加算されて「2」になる。
以上が、forブロックの処理である。 forブロックは3回実行する。今、1回目が終わった。 では、最初に戻る。
003var count = 1 ;
004
005for ( var i = 0 ; i < 3 ; i ++ ) {
006
007 alert ( "Hello" + count ) ;
008
009 count++;
010}
004
005for ( var i = 0 ; i < 3 ; i ++ ) {
006
007 alert ( "Hello" + count ) ;
008
009 count++;
010}
再び、7行目が実行する。 7行目で文字列「Hello」と変数countの値を文字列結合する。 変数countの値は、先ほどインクリメントしたので、「2」である。 7行目が実行すると、「Hello2」と表示する。 9行目で変数countをインクリメントする。変数countの値は「2」から「3」になる。 以上で、for文2回目が終了する。
最後のfor文繰り返しを解説する。 7行目で文字列「Hello」と変数countの値を文字列結合する。 変数countの値は、先ほどインクリメントしたので、「3」である。 7行目が実行すると、「Hello3」と表示する。 9行目で変数countをインクリメントする。変数countの値は「3」から「4」になる。 以上にてfor文が終了する。
for文とif文を組み合わせたプログラム
for文とif文を組み合わせたサンプルを見る。
001<script>
002var count = 1 ;
003
004for ( var i = 0 ; i < 3 ; i ++ ) {
005
006 if ( count == 2 ) {
007 alert ( count ) ;
008 }
009 count ++ ;
010}
011
012</script>
002var count = 1 ;
003
004for ( var i = 0 ; i < 3 ; i ++ ) {
005
006 if ( count == 2 ) {
007 alert ( count ) ;
008 }
009 count ++ ;
010}
011
012</script>
このプログラムを実行すると、「2」と表示する。
2行目で変数countを宣言して、「1」を代入する。 4行目からfor文が始まる。for文は「3」回繰り返す。
まず、for文一回目を見える。 6行目でif文が実行する。変数countの値は「1」である。
002var count = 1 ;
003
004for ( var i = 0 ; i < 3 ; i ++ ) {
005
006 if ( 1 == 2 ) {
007 alert ( count ) ;
008 }
009 count ++ ;
010}
003
004for ( var i = 0 ; i < 3 ; i ++ ) {
005
006 if ( 1 == 2 ) {
007 alert ( count ) ;
008 }
009 count ++ ;
010}
6行目でif文の条件式を確認する。「false」である。つまり、ifブロックは実行しない。 以上で、if文全体の処理が終了する。9行目で変数countがインクリメントして、 「1」から「2」になる。以上で、for文1回目が終了する。
for文2回目の処理を見る。6行目でif文が実行する。変数countの値は「2」である。
002var count = 1 ;
003
004for ( var i = 0 ; i < 3 ; i ++ ) {
005
006 if ( 2 == 2 ) {
007 alert ( count ) ;
008 }
009 count ++ ;
010}
003
004for ( var i = 0 ; i < 3 ; i ++ ) {
005
006 if ( 2 == 2 ) {
007 alert ( count ) ;
008 }
009 count ++ ;
010}
6行目でif文の条件式を確認する。「true」である。つまり、ifブロックが実行する。 7行目が実行して、「2」と表示する。 以上にてif文全体の処理が終了する。9行目で変数countがインクリメントして、 「2」から「3」になる。 以上で、for文2回目が終了する。
for文3回目（最後）。6行目でif文が実行する。変数countの値は「3」である。
002var count = 1 ;
003
004for ( var i = 0 ; i < 3 ; i ++ ) {
005
006 if ( 3 == 2 ) {
007 alert ( count ) ;
008 }
009 count ++ ;
010}
003
004for ( var i = 0 ; i < 3 ; i ++ ) {
005
006 if ( 3 == 2 ) {
007 alert ( count ) ;
008 }
009 count ++ ;
010}
6行目でif文の条件式を確認する。「false」である。つまり、ifブロックは実行しない。 以上にてif文全体の処理が終了する。9行目で変数countがインクリメントして、 「3」から「4」になる。 for文が3回繰り返されたので、for文が終了する。 そして、プログラムも終了する。
倍数を探すプログラム
1から10の間で3の倍数を探すプログラムである。
001<script>
002var count = 1 ;
003
004for ( var i = 0 ; i < 10 ; i ++ ) {
005
006 var mod = count % 3 ;
007
008 if ( mod == 0 ) {
009 alert ( count ) ;
010 }
011 count++ ;
012}
013
014</script>
002var count = 1 ;
003
004for ( var i = 0 ; i < 10 ; i ++ ) {
005
006 var mod = count % 3 ;
007
008 if ( mod == 0 ) {
009 alert ( count ) ;
010 }
011 count++ ;
012}
013
014</script>
プログラムを実行すると、 「3」、 「6」、 「9」 と表示する。
3の倍数を表示するプログラムである。 2行目で変数countを宣言して、1を代入する。 4行目からfor文が始まる。 for文の繰り返し回数は「10回」である。
| 回数 | countの値 | count % 3 | modの値 | ifの条件式 | countの値 |
| 1回目 | 1 | 1 % 3 | 1 | 1 == 0 | 2 |
for文1回目の処理内容である。まず6行目で、 「 count % 3 」の計算結果を変数modへ代入している。 変数countの値は「1」なので、「 1 % 3 = 0 余り 1 」となる。 この余り「1」の部分が変数modへ代入される。 8行目のif文の条件式で、変数modが0かどうか確認する。 「1」は「0」ではないので「false」となり、ifブロックは実行しない。 11行目で変数countをインクリメントする。変数countの値は「1」から「2」になる。 以上が、for文1回目の処理である。
004for ( var i = 0 ; i < 10 ; i ++ ) {
005
006 var mod = count % 3 ;
007
008 if ( mod == 0 ) {
009 alert ( count ) ;
010 }
011 count++ ;
012}
005
006 var mod = count % 3 ;
007
008 if ( mod == 0 ) {
009 alert ( count ) ;
010 }
011 count++ ;
012}
| 回数 | countの値 | count % 3 | modの値 | ifの条件式 | countの値 |
| 2回目 | 2 | 2 % 3 | 2 | 2 == 0 | 3 |
for文2回目の処理内容である。まず6行目で、 「 count % 3 」の計算結果を変数modへ代入する。 変数countの値は「2」なので、「 2 % 3 = 0 余り 2 」となる。 この余り「2」の部分が変数modへ代入される。 8行目のif文の条件式で、変数modが0かどうか確認する。 「2」は「0」ではないので「false」となり、ifブロックは実行しない。 11行目で変数countをインクリメントする。変数countの値は「2」から「3」になる。 以上が、for文2回目の処理である。
004for ( var i = 0 ; i < 10 ; i ++ ) {
005
006 var mod = count % 3 ;
007
008 if ( mod == 0 ) {
009 alert ( count ) ;
010 }
011 count++ ;
012}
005
006 var mod = count % 3 ;
007
008 if ( mod == 0 ) {
009 alert ( count ) ;
010 }
011 count++ ;
012}
| 回数 | countの値 | count % 3 | modの値 | ifの条件式 | countの値 |
| 3回目 | 3 | 3 % 3 | 0 | 0 == 0 | 4 |
for文3回目の処理内容である。まず6行目で、 「 count % 3 」の計算結果を変数modへ代入する。 変数countの値は「3」なので、「 3 % 3 = 1 余り 0 」となる。 この余り「0」の部分が変数modへ代入される。 8行目のif文の条件式で、変数modが0かどうか確認する。 「 0 == 0 」なので「true」となり、ifブロックが実行する。 9行目で変数countの値「3」が表示する。以上でifブロックは終了である。 引き続きforブロックが実行する。 11行目で変数countをインクリメントする。変数countの値は「3」から「4」になる。 以上が、for文3回目の処理である。 では、プログラムの動きをダイジェストでお送りする。
| 回数 | countの値 | count % 3 | modの値 | ifの条件式 | 表示 | countの値 |
| 1回目 | 1 | 1 % 3 | 1 | 1 == 0 | - | 2 |
| 2回目 | 2 | 2 % 3 | 2 | 2 == 0 | - | 3 |
| 3回目 | 3 | 3 % 3 | 0 | 0 == 0 | 3 | 4 |
| 4回目 | 4 | 4 % 3 | 1 | 1 == 0 | - | 5 |
| 5回目 | 5 | 5 % 3 | 2 | 2 == 0 | - | 6 |
| 6回目 | 6 | 6 % 3 | 0 | 0 == 0 | 6 | 7 |
| 7回目 | 7 | 7 % 3 | 1 | 1 == 0 | - | 8 |
| 8回目 | 8 | 8 % 3 | 2 | 2 == 0 | - | 9 |
| 9回目 | 9 | 9 % 3 | 0 | 0 == 0 | 9 | 10 |
| 10回目 | 10 | 10 % 3 | 1 | 1 == 0 | - | 11 |
このように、「3」「6」「9」が表示してプログラムが終了する。
まとめ
for ( var i = 0 ; i < [回数] ; i++ ) {
プログラム
}
