アフィテク

アフィ収入月10万円以下の初心者を対象に『アフィリエイトで稼ぐテクニック』を発信!

膨大な処理をサクッと処理!繰り返し(ループ)構文(while文、for文)とは?【JavaScript入門】

      2015/12/21

今回は繰り返し(ループ)構文を解説します。繰り返し構文を使うことで手動では行えない膨大な処理が可能になります。繰り返し構文にはwhile文とfor文があり、いずれも条件を満たす間のみ繰り返し処理されます。

while文とは

while文の構文はif文とほぼ同じなので簡単です。

var count = 0;

while(count < 5){

 alert(count);

 count++;
}

この例では変数countが5より小さい間、alertでcountを出力するというものです。if文と異なるのはブロックの終端まできたら、再び先頭に移動するということです。そこで条件を満たした場合は再び処理を行います。

count++;という記述がありますが、インクリメントといいます。インクリメントとは自身に1を足して自身に代入する処理つまりcount = count + 1;と同等の意味を成します。また、対になる動作にデクリメントがあります。count–;と記述すればcountの値が1ずつ減っていきます。

var count = 0;

do{

 alert(count);

 count++;

}while(count < 5);

上記の例は、do-while文といってwhile文とは条件を評価するタイミングが異なります。while文は処理を行う前に評価し、do-while文は処理を行ってから評価を行います。つまりdo-whileは必ず1回は処理を行うこととなります。

for文とは

for文はwhile文よりも使用頻度が高いと思いますが、少し式の指定方法が特殊です。

for(var count = 0; count < 5; count++){

 alert(count);

}

while文のサンプルと全く同じ挙動するサンプルですが、while文と比べブロック内外の記述が非常にシンプルです。その代わり式が複雑になっています。for文の式は次のような意味合いを持ちます。

for(初期化式 ; 条件式 ; 変化式){}

  • 初期化式ループに入る際1回だけ評価(処理)される式です。
  • 条件式ループ毎に評価される式です。この条件を満たす限り処理を繰り返します。
  • 変化式主にカウント用の変数を増減させます。あえて「主に」と言ったのには理由があって、変化式はあくまでforブロックの先頭に戻った際に評価される式なので用途は変数の増減だけに限りません。上記のサンプルは下記のように置き換えることが可能です。
for(var count = 0; count < 5; count++, alert(count));

カンマで区切ることで複数の処理を行えます。しかし、可読性を考えると上記のような書き方はお勧めしません(笑)

繰り返し文から脱出するには?

様々なプログラムを書いていると特定の条件を満たす場合ループを脱出したいケースがあるかと思います。そんな時は下記のようにbreak文を使います。

for(var count = 0; count < 5; count++){

	if(count == 2){
		break;
	}

}

上記の例ではcountが2になったときにfor文から脱出します。countが3以降の場合は実行されません。では、countが2の時だけ処理をしないようにするにはどうすればよいでしょうか?

for(var count = 0; count < 5; count++){

	if(count == 2){
		continue;
	}

}

break文がcontinue文に置き換わりました。continue文はループ1回分をキャンセルします。

繰り返し構文を使う際、気を付けなければならないことがあります。無限ループです。プログラム未経験の人でも耳にしたことがあるでしょう。これらの例では変数countの値を増やしていくことで必ずループから抜けるタイミングが存在しますが、ここをミスすると無限ループ(フリーズ)に陥ります。細心の注意を払いましょう。

ここまで、変数関数条件分岐、ループと学習してきましたが、これでJavaScriptの基本部分はクリアです。これらの基本概念がしっかり身に付いていれば、新しい概念を覚えることもさほど苦ではないでしょう。あとはひたすらプログラムを書き自分の手足のように扱えるようにしましょう。

 - Web制作テクニック , , ,