Web 制作のノウハウ JavaScript

【Javascript】繰り返し処理

今回は、Javascriptの繰り返し処理について解説したいと思います。

繰り返し処理は決まった回数や条件を満たしている間、同じ処理を繰り返し行う場合に使う構文です。

JavaScript では繰り返し処理に使用できるものとして while文やfor 文などが用意されています。

while文

while 文では括弧()の中に記述した条件式が true を返す間、繰り返し処理を行います。
書式は次の通りです。

while (条件式){
  実行する文1;
  実行する文2; ・・・
}

繰り返し実行する文が 1 つだけの場合は、ブロックを表す {} を省略することができます。

while (条件式)
  実行する文;

while 文は指定した条件が満たされなくなるまで回数に制限なく繰り返しを行う場合に利用されます。

do...while文

do while 文では while 文と同じく条件式が true を返すあいだ繰り返し処理を行う点は同じですが、必ず 1 回は繰り返し処理が実行される点が異なります。

do...while 文では括弧()の中に記述した条件式が true を返す間、繰り返し処理を行います。書式は次の通りです。

do{
  実行する文1;
  実行する文2;  ...
}while (条件式);

繰り返し実行する文が 1 つだけの場合には、ブロックを表す {} を省略することができます。

do
  実行する文;
while (条件式);
※ while の最後にセミコロン(;)が必要です。

for文

for 文では指定した回数だけ繰り返し処理を行うことができます。書式は次の通りです。

for (初期化式; 条件式; 変化式){
  実行する文1;
  実行する文2;  ...
}

繰り返し実行する文が 1 つだけの場合にはブロックを表す {} を省略することができます。

for (初期化式; 条件式; 変化式)
  実行する文;

例)以下はfor文のか記述方法の例です。

for (let i = 0; i < 2; i++){
  console.log("i = " + i);
}
console.log('END');

以下が処理の解説になります。

-- 繰り返し処理 1 回目 --
1)初期化式で変数 i に 0 が代入される
2)条件式 i < 2 が true
3)console.log("i = " + i); が実行される
4)変化式 i++ が実行されて変数 i の値が 1 となる

-- 繰り返し処理 2 回目 --
5) 条件式 i < 2 が true
6) console.log("i = " + i); が実行される
7) 変化式 i++ が実行されて変数 i の値が 2 となる

-- 繰り返し処理 3 回目 --
8) 条件式 i < 2 が false
9) for 文の実行が終了し次の処理へ

10)console.log('END'); が実行される ーーー以上

今回は、Javascriptの繰り返し処理について解説しました。

-Web 制作のノウハウ, JavaScript