コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

JavaScript Forループ

ループは、コードブロックを何度も実行するために使用されます。

JavaScriptのループ

ループは便利であり、同じコードを何度も異なる値で実行したい場合に使用されます。

これは、配列を操作する場合に特に便利です:

次のように書かずに:


text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

次のように書くことができます:


for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

異なる種類のループ

JavaScriptは異なる種類のループをサポートしています:

  • for – 指定された回数だけコードブロックをループします
  • for/in – オブジェクトのプロパティをループします
  • for/of – イテラブルオブジェクトの値をループします
  • while – 指定された条件がtrueの間、コードブロックをループします
  • do/while – 指定された条件がtrueの間、コードブロックをループします（最低1回は実行されます）

Forループ

for文は、3つのオプションの式でループを作成します:


for (expression 1; expression 2; expression 3) {
  // 実行するコードブロック
}

Expression 1は、コードブロックの実行前に1度だけ実行されます。

Expression 2は、ループの実行条件を定義します。

Expression 3は、コードブロックの実行後に毎回実行されます。

例


for (let i = 0; i < 5; i++) {
  text += "数値は " + i + "<br>";
}

上記の例から、以下を読み取ることができます:

  • Expression 1は、ループが開始する前に変数を設定します（let i = 0）。
  • Expression 2は、ループが実行される条件を定義します（iは5未満である必要があります）。
  • Expression 3は、コードブロックが実行された後に値を増やします（i++）。

Expression 1

通常、Expression 1ではループで使用する変数を初期化します（let i = 0）。

これは常に必要なわけではありません。JavaScriptでは問題ありません。Expression 1はオプションです。

Expression 1で多くの値を初期化することができます（カンマで区切って）:


for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

また、Expression 1を省略することもできます（ループが開始する前に値が設定されている場合など）:


let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Expression 2

通常、Expression 2は初期変数の条件を評価するために使用されます。

これは常に必要なわけではありません。JavaScriptでは問題ありません。Expression 2もオプションです。

Expression 2がtrueを返す場合、ループは再び開始されます。falseを返す場合、ループは終了します。

Expression 2を省略する場合、ループ内にbreak文を提供する必要があります。そうしないと、ループが終了しません。これによりブラウザがクラッシュします。

Expression 3

通常、Expression 3は初期変数の値を増加させます。

これは常に必要なわけではありません。JavaScriptでは問題ありません。Expression 3もオプションです。

Expression 3は、負の増加（i–）、正の増加（i = i + 15）、その他何でも行うことができます。

Expression 3も省略することができます（ループ内で値を増加させる場合など）:


let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

ループのスコープ

ループ内でvarを使用する場合:


var i = 5;

for (var i = 0; i < 10; i++) {
  // 何らかのコード
}

// ここではiは10です

ループ内でletを使用する場合:


let i = 5;

for (let i = 0; i < 10; i++) {
  // 何らかのコード
}

// ここではiは5です

最初の例ではvarを使用し、ループ内で宣言された変数はループ外の変数を再宣言します。

2番目の例ではletを使用し、ループ内で宣言された変数はループ外の変数を再宣言しません。

ループ内でletを使用して変数iを宣言する場合、その変数はループ内でのみ見えます。