繰り返し | rendan.dev

繰り返しとは

繰り返し処理（ループ）は、同じ処理を何度も実行したい場合に使います。
JavaScriptには、繰り返しを行うためのいくつかのループ構文があります。

for文

for文は、指定した回数だけ繰り返し処理を行いたいときに使います。
繰り返しの回数が明確に決まっている場合に便利です。
主に配列の各要素に処理を行いたい時に使用します。

基本構文

for( 初期値; 条件式; 増減式 ){
		// カッコ内の条件に合致した時の処理
}

例：0から9までの数字を表示する

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

for文は以下のような流れで処理が行われます。

初期値で変数の宣言
条件式の判定がtrueなら次のステップへ、falseなら終了
繰り返し実行したいコードを実行
増減式で変数を更新
ステップ2へ戻る

インクリメント演算子とデクリメント演算子

インクリメント演算子とデクリメント演算子は、JavaScriptで数値を増減させるための便利な演算子です。
それぞれ、値を1増やす、または値を1減らすために使用します。

インクリメント演算子（++）

インクリメント演算子は、数値の値を1増やします。
演算子を変数の前か後ろに置くかで動作が少し異なりますが、今は i++（後置）のを使えば良いです。

i++

デクリメント演算子（--）

デクリメント演算子は、数値の値を1減らします。
これも演算子を変数の前か後ろに置くかで動作が少し異なりますが、今は i--（後置）のを使えば良いです。

i--

その他の代入演算子

JavaScriptには、変数に値を代入するための演算子がいくつかあります。
代入演算子は、基本的な代入を行うものだけでなく、演算結果を変数にそのまま代入する複合代入演算子もあります。
これにより、コードを短く、効率的に書くことができます。

基本の代入演算子（=）

最も基本的な代入演算子です。右辺の値を左辺の変数に代入します。

var x = 5;  // xに5を代入

加算代入（+=）

左辺の変数に、右辺の値を加えて、結果を左辺の変数に代入します。

var x = 10;
x += 5;  // x = x + 5 と同じ意味。結果は x = 15

減算代入（-=）

左辺の変数から右辺の値を引いて、その結果を左辺の変数に代入します。

var x = 10;
x -= 3;  // x = x - 3 と同じ意味。結果は x = 7

配列をfor文で処理する

配列はfor文を使うことで、配列の要素を1つずつ取り出して処理することができます。

var fruits = ['apple', 'banana', 'orange'];

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

この例では、i の値が 0 から始まり、fruits.length（配列の要素数）までループが続き、fruits[i] で順に要素を取り出して表示します。

while文

while文は、指定した条件が true の間、繰り返し処理を行うためのループ構文です。
for文とは異なり、繰り返し回数が事前に決まっていない場合や、特定の条件が満たされるまで処理を続けたい場合に便利です。

基本構文

while (条件式) {
	// 条件が true の間に繰り返す処理
}

例：1から5までの数字を表示する

var i = 1;

while (i <= 5) {
	console.log(i);
	i++;  // iを1ずつ増やす
}

while文は以下のような流れで処理が行われます。

条件式の判定がtrueなら次のステップへ、falseなら終了
繰り返し実行したいコードを実行
ステップ1へ戻る

while 文は、最初に条件式を評価し、その結果が true であればブロック内の処理を実行します。
条件式が false になると、ループを終了します。
カウンタ（変数 i など）をループ内で適切に更新しないと、無限ループになることがあるので注意が必要です。

do〜while文

do〜while文は、少なくとも1回は処理を実行してから、条件をチェックし、その条件が true の間はループを繰り返す構文です。
while 文と似ていますが、while 文が最初に条件をチェックしてからループを実行するのに対し、do...while 文は先に処理を実行してから条件を評価します。

do {
	// 繰り返したい処理
} while (条件式);

do ブロック内の処理が最初に実行されます。
while の条件式が true であれば、処理が再度実行されます。
条件が false になるとループが終了します。

break文とcontinue文

break文とcontinue文は、JavaScriptのループ制御文で、ループの流れを制御するために使用されます。

break文

break文は、ループを完全に終了させるために使用されます。
break文が実行されると、ループの残りの部分がスキップされ、ループの外の次のコードが実行されます。

例

for( var i = 0;  i < array.length; i++ ){
	if( i === 3 ){
		break;
		// 1が3の時に終了
	}
}

continue文

continue文は、現在の反復処理をスキップし、次の反復処理に進むために使用されます。 continue文が実行されると、その後のコードは実行されずにループの次の反復処理に移ります。

例

for( var i = 0;  i < array.length; i++ ){
	if( i === 3 ){
		continue;
		// 1が3の時のみスキップ
	}
}

無限ループについて

無限ループとは、ループの終了条件が満たされず、プログラムが永久に続いてしまう状態を指します。
通常、意図しない無限ループはプログラムのバグの原因となり、プログラムが応答しなくなることがあります。
繰り返し構文を使う際は、無限ループにならないように注意しましょう。

例：無限ループ

この例では、i >= 0 が常に true であるため、ループは永遠に続きます。

var i = 0;

while (i >= 0) {  // 条件が常にtrue
	console.log(i);
	i++;  // iは増え続けるため、ループが終わらない
}

例：カウンタの更新がない場合の無限ループ

この例では、i がループの条件内で更新されないため、ループが終了しません。

for (var i = 0; i < 10; ) {  // i が更新されない
	console.log(i);
}