JavaScript 繰り返し処理

JavaScriptの繰り返し処理

主な繰り返し処理の制御文

for【ﾌｫｰ】文

for文は、指定した回数分、処理を繰り返し実行することができます。

まずは、「初期化式」で変数を初期化して、「条件式」でその変数を評価し、戻り値が真（true）の場合に命令文を実行し、実行後、「更新式」によってその変数を更新することを繰り返します。

for文の書式

for (初期化式;条件式;更新式;)
     命令文1;
【命令文が複数の場合は命令文を{}で囲んでブロック文にします。】
for(初期化式;条件式;更新式;){
     命令文1;
     命令文2;
　　　　 ・
　　　　 ・
}

for文のイメージ図

繰り返し処理で1~4の連番を表示するコード例

　var num = 1;
   for( var i = 0; i < 4; i++ ){
     document.write(num);
     num += 1;
   }

コードの解説

1行目【var num = 1;】
var【ﾊﾞｰ】キーワードを使用して、変数「num」を宣言し、代入演算子の「=」で1を代入します。

2行目【for( var i = 0; i < 4; i++ ){】
for文を使用して繰り返し処理を開始します。初期化式に、varキーワードを使用し、カウンター変数「i」を宣言して代入演算子の「=」で0を代入します。

条件式は、比較演算子の「<」で左辺の値が右辺の値より小さいを定義、つまりカウンター変数「i」が4よりも小さい間を定義します。

更新式は、インクリメント演算子の「++」を使用して、カウンター変数「i」の値を1増加させます。

3行目【document.write(num);】
document【ﾄﾞｷｭﾒﾝﾄ】オブジェクトのwrite【ﾗｲﾄ】メソッドを使用して、変数「num」に格納されている文字列を出力します。

4行目【num += 1;】
変数「num」に代入演算子の「+=」を使用して1を加算します。

実行結果

for of【ﾌｫｰｵﾌ】文

for of文は、配列などの複数ある値から1つずつ値を取り出して処理をしたい場合に使用します。

1つずつ値を取り出し、すべての値が取り出されるまで繰り返し処理を実行します。

for of文の書式

for( 取り出した値を格納する変数 of 値の集合 ){
　　　　命令文;
}

for of文のイメージ図

for of文のコード例

　var data = [1,2,3];
   for( var i of data ){
     document.write(i+"</br>");
   }

コードの解説

1行目【var data = [1,2,3];】
配列変数「data」に「1」「2」「3」の値を格納します。

2行目【for( var i of data ){】
for of文を使用して、配列変数「data」に格納されている値の数分（ここでは３回）変数「i」に値を順次代入して、処理を繰り返します。

3行目【document.write(i+”</br>”);】
document【ﾄﾞｷｭﾒﾝﾄ】オブジェクトのwrite【ﾗｲﾄ】メソッドを使用して、変数iの値と連結演算子の「+」で連結した改行タグを出力します。

実行結果

for in【ﾌｫｰｲﾝ】文

for in文は、指定されたオブジェクトに定義されているプロパティを参照しながらプロパティの数分の繰り返し処理を行います。

for in【ﾌｫｰｲﾝ】文の書式

for( プロパティ名を格納する変数 in オブジェクト){
     命令文;
}

for in文のイメージ図

for in文のコード例

var fruit = { "apple":200,"orange":100,"grape":300 };
      for (var i in fruit)
      document.write(i+",")

コードの解説

1行目【var fruit = { “apple”:200,”orange”:100,”grape”:300 };】
varキーワードを使用して連想配列変数「fruit」を宣言し、代入演算子「=」を使用して連想配列の要素のkey（データの名前）とvalue（データの値）を代入します。

2行目【for (var i in fruit)】
for in文を使用して連想配列オブジェクトの「fruit」に格納されているデータのプロパティ名を変数「i」に1つずつ代入してプロパティ名文繰り返し処理を実行します。

3行目【document.write(i+”,”)】
document【ﾄﾞｷｭﾒﾝﾄ】オブジェクトのwrite【ﾗｲﾄ】メソッドを使用して変数「i」に格納されている連想配列の各要素のkey（名前）を出力します。

実行結果

while【ﾎﾜｲﾙ】文

while文は、指定された条件が満たされている間処理が繰り返されます。

while文の書式

while( 条件式 ){
      命令文;
}

wile文のイメージ図

while文のコード例

 var i=0;
   while( i<20 ){
     document.write(i+",");
     i++;
   }

コードの解説

1行目【var i=0;】
varキーワードを使用して変数「i」を宣言し代入演算子の「=」で値「0」を代入します。

2行目【 while( i<20 ){】
while【ﾎﾜｲﾙ】文を使用して条件式に比較演算子「<」を使用し、変数「i」が20より小さい場合を条件式にします。

3行目【document.write(i+”,”);】
document【ﾄﾞｷｭﾒﾝﾄ】オブジェクトのwrite【ﾗｲﾄ】メソッドを使用して変数「i」に格納されている値と文字列を連結する連結演算子「+」を使用して文字列のカンマ「,」を出力します。

4行目【i ++;】
算術演算子のインクリメントを使用して変数「i」に「1」を加算します。

この式が無いと変数「i」の値が変化しないのでいつまでも条件式が成立してしまい無限ループ状態になります。

実行結果

do while【ﾄﾞｩﾎﾜｲﾙ】文

while文は、繰り返し処理のはじめに条件式があるため開始時点で条件式を満たさない場合は、処理を一度も行わずに終了します。

それに対して、do while文は、繰り返し処理の最後に条件式があるため条件式を満たしていない場合でも最低１回は命令文を実行します。

do while文の書式

do {
   命令文;
} while (条件式);

do while文のイメージ図

do while文のコード例

var i=20;
  do{
     document.write(i+",");
     i++;
   } while( i<20 );

実行結果

break【ﾌﾞﾚｰｸ】文

break文は、繰り返し処理を中断して条件式に関わらず、ループから抜ける場合に使用します。

break文に到達すると繰り返し処理を終了してしまうので一般的にはif【ｲﾌ】文（条件分岐）と組み合わせて使用します。

break文の書式

break;
break文はfor文やwhile文などの繰り返し処理の中でキーワードを記述するだけです。

break文のコード例

  var week = ["月","火","水","木","金","土","日"];
    var i = 0;
    while(true){
     if( week[i] == null)
     break;
        document.write( week[i++] + "</br>");
    }

コードの解説

1行目【 var week = [“月”,”火”,”水”,”木”,”金”,”土”,”日”];】
varキーワードを使用して配列変数「week」を宣言し、配列に各曜日の文字列を代入します。

2行目【var i = 0;】
varキーワードを使用して変数「i」を宣言し、数値の「0」を代入します。

3行目【while(true){】
while【ﾎﾜｲﾙ】文を使用して繰り返し処理を実行します。条件式にtrueを設定してループを終了させない無限ループ状態を設定します。

4行目【if( week[i] == null)】
if文（条件分岐）を使用して、配列変数「week」の添字（インデックス）がnull【ﾇﾙ】（何もない）と等しいときを定義します。

5行目【 break;】
4行目の条件分岐が成立したとき、break文でループから抜けます。

つまり配列変数の添字が何もなくなったとき[月0,火1,水2,木3,金4,土5,日6]なので、日6で4行目の条件が成立してbreak文が実行されます。

6行目【document.write( week[i++] + “</br>”);】
documentオブジェクトのwrite【ﾗｲﾄ】メソッドを使用して配列変数の添字を繰り返し処理の中でインクリメント「++」を使用して加算し、変数の値を出力して連結演算子「+」で連結した改行を表すbrダグを使用して改行を出力します。

実行結果

continue【ｺﾝﾃｨﾆｭｰ】文

continue文は処理を途中で中断し、再び繰り返しの先頭に戻って処理を継続します。

繰り返しの中でContinue文に到達した場合は、それ以降の命令文は実行されずに繰り返し処理の先頭へと処理が戻ります。

break文と同様に、一般的にはif文（条件分岐）と組み合わせて使用します。

continue文の書式

continue;
continue文はfor文やwhile文などの繰り返し処理の中で、キーワードを記述するだけです。

continue文のコード例

 for(var i = 0; i < 20; i++ ){
     if( i%2==1){
       continue;
     }
      document.write( i + "</br>");
    }

コードの説明

1行目【for(var i = 0; i < 20; i++ ){】
for文の繰り返し処理を実行します。

条件式はvarキーワードを使用して変数「i」を宣言し、数値の0を代入します。

比較演算子「＜」を使用して変数「i」は20より小さいを条件として定義します。

変数「i」にインクリメント「++」で繰り返し処理の中で1を加算します。

2行目【if( i%2==1){】
if文を使用して条件分岐を実行します。

条件式は算術演算子の「%」と比較演算子の「==」を使用して変数「i」/2の余りが1と等しいときを定義します。つまり、変数「i」の値が奇数のときを定義します。

3行目【 continue;】
2行目のif文（条件分岐）が成立したときにcontinue【ｺﾝﾃﾆｭｰ】文を実行して以降の処理を実行しないで繰り返し処理の先頭に戻ります。

4行目【 }】
if文のブロック文を閉じます。

5行目【 document.write( i + “</br>”);】
documentオブジェクトのwrite【ﾗｲﾄ】メソッドを使用して変数「i」に格納されている値と
連結演算子で連結した改行を表すbrタグを出力します。

6行目【 }】
for文のブロック文を閉じます。

実行結果

break文とcontinue文のイメージ図

以上で、JavaScriptの繰り返し処理についての解説を終了します。ありがとうございました。