JavaScript for ループ
for ループ（For Loop）を使用すると、コードブロックを複数回実行できます。これは、特定の操作を繰り返し実行するタスクにおいて非常に基本的な要素です。
1. for ループの基本
for ステートメントは、3 つのオプションのエクスプレッション（式）を使用してループを作成します。
1.1 構文（Syntax）
for (式 1; 式 2; 式 3) {
// 実行されるコードブロック
}- 式 1 は、コードブロックの実行前に（一度だけ）実行されます。
- 式 2 は、コードブロックを実行するための条件を定義します。
- 式 3 は、コードブロックが実行された後に（毎回）実行されます。
1.2 実装例
for (let i = 0; i < 5; i++) {
text += "数値は " + i + "<br>";
}上記の例の説明：
- 式 1 で、ループが始まる前に変数を設定します (
let i = 0)。 - 式 2 で、ループが動作する条件を定義します (
iが5未満である必要があります)。 - 式 3 で、コードブロックが実行されるたびに値を増加させます (
i++)。
2. 配列の走査（実戦的な例）
for ループを使用して、cars 配列から車の名前を取得する例です。
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let len = cars.length;
let text = "";
for (let i = 0; i < len; i++) {
text += cars[i];
}3. 式 1（式 1）の活用法
式 1 は通常、ループ内で使用する変数を初期化するために使用されます (let i = 0)。
- この式はオプション（任意）です。
- ループが始まる前に値が設定されている場合は、省略することができます。
3.1 式 1 を省略する例
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let len = cars.length;
let i = 2; // ループの外で初期化
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}4. 式 2（式 2）の活用法
式 2 は、初期変数の条件を評価するために使用されます (i < len)。
- この式もオプションです。
- この式が
falseを返すと、ループは終了します。 - 注意： 式 2 を省略する場合は、ループ内に必ず
breakを用意する必要があります。そうしないとループが終了せず、ブラウザがクラッシュする原因となります。
5. 式 3（式 3）の活用法
式 3 は、初期変数の値を更新（インクリメントなど）します (i++)。
- この式もオプションです。
- デクリメント (
i--) や、大幅な増加 (i = i + 15) など、あらゆる計算が可能です。 - ループ内部で値を更新する場合は、この式を省略できます。
5.1 式 3 を省略する例
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let len = cars.length;
let i = 0;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++; // ループ内でインクリメント
}6. ループのスコープ（Loop Scope）
ループ内で var を使用するか、let を使用するかで挙動が大きく異なります。
6.1 var を使用した場合
var i = 5;
for (var i = 0; i < 10; i++) {
// 何らかの処理
}
// ここで i は 10 になりますvar を使用すると、ループ内で宣言された変数がループの外側にある変数を再宣言してしまいます。
6.2 let を使用した場合
let i = 5;
for (let i = 0; i < 10; i++) {
// 何らかの処理
}
// ここで i は 5 のままですlet を使用してループ内で変数 i を宣言した場合、その変数はループ内部でのみ有効（ブロックスコープ）となり、外部の変数には影響を与えません。モダンな開発では、予期せぬバグを防ぐために let の使用が推奨されます。