Javascriptを学んでみようという人をターゲットに、JavaScriptの基本を解説していきたいと思います。

他の言語（特にJava等のオブジェクト指向言語）は少しでもかじったことがあるけど、JavaScriptはまだ･･･って人を想定しています。
前回（JavaScript　超入門(6) 制御構文　分岐）で三つの三大構造のうち分岐の記述方法ついて説明しました。
今回は反復（繰り返し）処理の記述構文について確認していきます。

反復

for文

for文は主に特定回数繰り返し処理を行いたい場合に用います。
構文は次のようになります。

for (初期化式; 条件式; 継続処理式 ) {
  繰り返し処理
}

初期化式→条件式→繰り返し処理→継続処理式→条件式→繰り返し処理→継続処理式→条件式･･･の順で評価されます。

for (var i = 0; i < 10 ; i++) {
    document.body.innerHTML += i;
}

このように初期化式でカウンタを用意してループをまわすことが多いです。

またJavaScriptの場合、カンマを用いて複数式を記述することもできます。

for (var i = 0, j = 0; i < 10 ; i++, j++) {
    document.body.innerHTML += i + j;
}

for..in文

for..in文は配列やオブジェクトの全ての要素に対してアクセスしたい時に用います。

for (仮変数 in 配列またはオブジェクト) {
  繰り返し処理
}

var user = {name: 'tech', age: 15}
for (var i in user) {
  document.body.innerHTML += ( i + user[i]);
}

一見他の言語でのforeach（拡張for文）にも見えますが、仮変数に入る値は要素の値ではなく、
あくまでインデックスだという点に注意してください。

while文

for文は主に回数を指定して繰り返し処理を行いたい場合に用いますが、回数を指定せずに条件を満たす間処理を行いたい場合もあります。
そのようなときはwhile文を用います。

while (条件式) {
  繰り返し処理
}

条件式がtrueを満たす限りブロック内の処理を実行し続けます。

var num = 0;
while (num < 10) {
  num += 1;
}
document.body.innerHTML = num;

条件式num < 20がtrueを返す間処理を繰り返します。 while文によく似た構文としてdo..while文もあります。 [js] do { document.body.innerHTML = '必ず一回は実行される'; } while (false); [/js] whileの後の条件式がtrueを返す間、doブロックの処理が繰り返し実行されます。 while文の場合はループ開始前から条件がfalseだと一回も処理が実行されません。 do..while文の場合はdo以下aの処理が最低一回は実行されます。 上記では条件式にfalseを与えていますが、「必ず一回は実行される」という文字列は表示されます。 二者の違いに注意しておいてください。

breakとcontinue

反復処理の途中で、あるタイミングでループを強制的に抜け出す方法があります。
それがbreak文です。
次のようにループ内にbreakを記述するとその時点で反復処理を終了します。

var sum = 0;
for (var i = 0; i < 10 ; i++) {
    sum += i;
    if (sum > 20) {
      break;
    }
    document.body.innerHTML += sum + " ";
}

breakはif文で条件を指定して用いることが多いです。

ループ自体は継続しつつ、ブロック内の処理を途中で終了して次に進みたい時に用いるのがcontinue文です。

for (var i = 0; i < 10 ; i++) {
    if (i % 2 === 0) {
      continue;
    }
    document.body.innerHTML += i;
}

breka同様if文と組み合わせます。
上のサンプルではiが2で割り切れるとき、処理を中断します。結果、13579と表示されます。

以上、反復の構文について説明しました。

極端なことを言ってしまえば、分岐と反復をおさえた時点で大抵のプログラムは組めます。
あとはより規模の大きなアプリケーションを作る上で無駄がなく、読みやすいコードを書く方法を覚えていくことになります。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載