JavaScriptの繰り返し処理を理解するための第一歩は「for文」です。しかし、プログラミング初心者にとっては「構文が難しそう」「エラーばかり出てしまう」と挫折しそうになるポイントでもあります。
この記事では、基本的なfor文の使い方から応用例までをわかりやすく解説します。具体例やサンプルコードを交えながら、繰り返し処理をしっかりマスターしましょう！
はじめに：JavaScriptのfor文とは
どのような時にfor文を使うのか
プログラミングを学び始めると、「同じ処理を何度も繰り返したい」と感じる場面に出会います。
- 大量のデータを1つずつ処理したい
- 例）リストに保存された商品を順番に表示する。
- 同じ操作を繰り返し行いたい
- 例）ユーザーの入力を繰り返し検証する。
- 計算を繰り返す必要がある
- 例）1から100までの合計を求める。
これらの課題を解決するのが、JavaScriptのfor文です。繰り返し処理を効率的に実現するための強力なツールで、少ないコード量で複雑な処理をこなせます。
for文の基本概念
JavaScriptのfor文は、繰り返し処理を行うための最も基本的な構文です。
例えば、1から5までの数字を順に出力する場合、for文を使えば数行で実現できます。
繰り返し処理の重要性
繰り返し処理をマスターすると、以下のようなメリットがあります。
- 手作業では大変な処理を短時間で実現できる。
- 繰り返しコードを書く手間が省け、プログラムが効率的になる。
- コードの見通しが良くなり、メンテナンスがしやすい。
例：
// 1から5までの数を順に出力
for (let i = 1; i <= 5; i++) {
console.log(i);
}
出力結果：
1
2
3
4
5
このコードは以下のように動作します。
- 初期化：let i = 1でカウンター i を1に設定。
- 条件チェック：i <= 5が真ならループ内の処理を実行。
- 処理の実行：console.log(i)で現在の値を出力。
- 更新：i++でカウンターを1つ進める。
これを条件が満たされなくなるまで繰り返します。
基本構文を理解しよう：for文の使い方
for文は、決まったルールで繰り返し動作する自動車工場のロボットアームのようなものです。
一度条件を設定すれば、効率的に同じ作業を繰り返すことができます。
for文の構文
for文は以下の形式で書かれます。
for (初期化; 条件式; 増減式) {
// 繰り返し実行する処理
}
- 初期化：繰り返しを開始する前に1回だけ実行する処理。カウンターの初期値を設定。
- 条件式：繰り返しを続ける条件。この条件がtrueの間、ループを実行。
- 増減式：1回のループが終わった後に実行される処理。通常はカウンターを増減する。
基本の例：1から10までの出力
以下の例では、1から10までの数を順に出力します。
for (let i = 1; i <= 10; i++) {
console.log(i);
}
解説：
- 初期化：let i = 1でカウント変数を1に設定。
- 条件式：i <= 10がtrueの間、ループ内の処理を実行。
- 増減式：i++でカウント変数iを1ずつ増やす。
出力結果：
1
2
3
4
5
6
7
8
9
10
配列とfor文：実用的な活用例
配列の要素を順に処理する
配列に保存されたデータを1つずつ処理したいとき、for文が役立ちます。
例えば、フルーツのリストを順番に表示する場合は以下の通りです。
例：
let fruits = [“りんご”, “バナナ”, “みかん”];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
解説：
- i = 0：配列の最初の要素から処理を開始。
- i < fruits.length：配列の要素数（3）より小さい間、処理を繰り返す。
- fruits[i]：現在のインデックスにある要素を取得。
出力結果：
りんご
バナナ
みかん
配列の要素を合計する
以下の例では、数値が保存された配列の合計を求めます。
let numbers = [10, 20, 30, 40, 50];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log(“合計：”, sum);
解説：
- sum += numbers[i]で、各要素の値をsumに足し込む。
- 最後に合計を出力。
出力結果：
合計： 150
for文の応用：ネストや条件分岐の書き方
for文のネスト（入れ子）
for文の中にさらにfor文を入れることで、多次元のデータや複雑な処理に対応できます。
例：九九の表示
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= 9; j++) {
console.log(`${i} × ${j} = ${i * j}`);
}
}
解説：
- 外側のfor文で掛けられる数（1〜9）を指定。
- 内側のfor文で掛ける数（1〜9）を指定。
条件分岐を組み合わせる
for文とif文を組み合わせて、条件に応じた処理を行えます。
例：偶数だけを出力する
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
console.log(i);
}
}
解説：
- i % 2 === 0はiが偶数のときにtrueを返す。
出力結果：
2
4
6
8
10
初心者がつまずきやすいポイントと解決策
無限ループの回避
問題：条件式が常にtrueの場合、ループが終了しません。
for (let i = 0; i >= 0; i++) {
console.log(i);
}
解決策：条件式が適切に終了するよう設定しましょう。
for (let i = 0; i < 5; i++) {
console.log(i);
}
配列のインデックスのズレによるエラー
配列のインデックスは0から始まるため、意図しない値が出力されてしまうことがあります。
間違い：
// 配列のインデックスのズレによるエラー
// 間違い：インデックスを1から始めているため、undefinedが出力される
let arr = [“A”, “B”, “C”];
console.log(“– 間違い例 –“);
for (let i = 1; i <= arr.length; i++) {
console.log(arr[i]); // arr[3] は undefined
}
出力結果：
B
C
undefined
正解：
// 正解：インデックスを0から始め、条件をi < arr.lengthに設定
console.log(“– 正解例 –“);
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 正しい順序で配列の全要素を出力
}
出力結果：
A
B
C
まとめ：for文をマスターして次のステップへ
JavaScriptのfor文を使いこなすことで、繰り返し処理が効率的に書けるようになります。
基本構文、配列の操作、ネストや条件分岐といった内容をしっかり学び、実践で使えるスキルを身につけましょう。
今後は、forEachやmapなどの高階関数を学ぶことで、さらに効率的なコードが書けるようになります。
継続的に学習し、プログラミングのスキルを高めていきましょう。