for文で繰り返し処理を学ぼう

学習の目標

本章では、以下の内容を学習します。

for文の基本的な構文と動作原理を理解する
カウンター変数を使った繰り返し処理の書き方を習得する
配列と組み合わせた要素の順次処理方法を学ぶ
breakとcontinueを使ったループ制御方法を身につける

はじめに

これまで学んできた条件分岐では、状況に応じて処理を切り替えることができました。また、プログラムを書いていると「同じ処理を何度も繰り返したい」という場面もよく出てきます。

例えば、「1から10まで数字を表示する」「配列の全ての要素を処理する」といった場合です。このような繰り返し処理を効率的に行うために、JavaScriptではfor文が用意されています。

for文の基本的な書き方

for文の基本的な構文は以下のとおりです。

for (初期化; 条件; 更新) {
  // 繰り返し実行される処理
}

実際にコードを書いて試してみましょう。まずはHTMLファイルを作成してください。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>for文を学ぼう</title>
</head>
<body>
  <h1>for文を学ぼう</h1>
  <script src="script.js"></script>
</body>
</html>

script.js

for (let i = 1; i <= 5; i++) {
  console.log(`${i}回目の処理です`);
}

console.log('繰り返し処理終了');

HTMLファイルをブラウザで開いて、開発者ツールのコンソールを確認してみてください。以下のような結果が表示されるはずです。

1回目の処理です
2回目の処理です
3回目の処理です
4回目の処理です
5回目の処理です
繰り返し処理終了

このfor文では、iという変数を1から始めて、5以下の間は処理を繰り返し、毎回iを1ずつ増やしています。また、条件が満たされなくなると繰り返しが終了し、次の処理に進みます。

for文の仕組みを詳しく見てみよう

for文の各部分がどのような役割を果たしているか確認してみましょう。

for (let i = 0; i < 3; i++) {
  console.log(`現在のiの値: ${i}`);
}

実行結果：

現在のiの値: 0
現在のiの値: 1
現在のiの値: 2

この例では以下の順序で処理が行われています：

初期化: let i = 0 でカウンター変数iを0で初期化
条件チェック: i < 3 が真かどうか確認
処理実行: 条件が真なら、波括弧内の処理を実行
更新: i++ でiの値を1増加
条件チェック: 再びi < 3をチェック
条件が偽になるまで3〜5を繰り返し

異なるカウンター設定を試してみよう

カウンターの初期値や増加量を変更することで、様々な繰り返しパターンを作れます。

// 10から1まで逆順にカウント
for (let i = 10; i >= 1; i--) {
  console.log(`カウントダウン: ${i}`);
}

console.log('発射！');

実行結果：

カウントダウン: 10
カウントダウン: 9
カウントダウン: 8
カウントダウン: 7
カウントダウン: 6
カウントダウン: 5
カウントダウン: 4
カウントダウン: 3
カウントダウン: 2
カウントダウン: 1
発射！

また、2ずつ増加させることもできます。

// 偶数だけを表示
for (let i = 2; i <= 10; i += 2) {
  console.log(`偶数: ${i}`);
}

実行結果：

偶数: 2
偶数: 4
偶数: 6
偶数: 8
偶数: 10

i += 2 は i = i + 2 と同じ意味で、iの値を2ずつ増やしています。

配列とfor文を組み合わせよう

for文は配列の要素を順番に処理する際にもよく使われます。

const fruits = ['りんご', 'バナナ', 'オレンジ', 'ぶどう'];

for (let i = 0; i < fruits.length; i++) {
  console.log(`${i + 1}番目の果物: ${fruits[i]}`);
}

実行結果：

1番目の果物: りんご
2番目の果物: バナナ
3番目の果物: オレンジ
4番目の果物: ぶどう

ここではfruits.lengthを使って配列の要素数を取得し、すべての要素を順番に処理しています。また、配列のインデックスは0から始まるため、iも0から開始しています。

ネストした（入れ子の）for文

for文の中に別のfor文を書くこともできます。これをネストしたfor文と呼びます。

for (let i = 1; i <= 3; i++) {
  console.log(`外側のループ: ${i}回目`);

  for (let j = 1; j <= 2; j++) {
    console.log(`  内側のループ: ${j}回目`);
  }
}

console.log('すべてのループ終了');

実行結果：

外側のループ: 1回目
  内側のループ: 1回目
  内側のループ: 2回目
外側のループ: 2回目
  内側のループ: 1回目
  内側のループ: 2回目
外側のループ: 3回目
  内側のループ: 1回目
  内側のループ: 2回目
すべてのループ終了

外側のループが1回実行されるたびに、内側のループが完全に実行されます。また、このパターンは二次元的なデータを処理する際などに役立ちます。

breakとcontinueで制御しよう

繰り返し処理を途中で終了したり、スキップしたりすることもできます。

break文で途中終了

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    console.log('6になったので終了します');
    break;
  }
  console.log(`現在の数字: ${i}`);
}

console.log('ループ終了');

実行結果：

現在の数字: 1
現在の数字: 2
現在の数字: 3
現在の数字: 4
現在の数字: 5
6になったので終了します
ループ終了

break文を使うことで、条件に関係なくループを途中で終了できます。

continue文で処理をスキップ

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    console.log('3はスキップします');
    continue;
  }
  console.log(`処理する数字: ${i}`);
}

console.log('ループ終了');

実行結果：

処理する数字: 1
処理する数字: 2
3はスキップします
処理する数字: 4
処理する数字: 5
ループ終了

continue文を使うと、その回の処理をスキップして次の繰り返しに進みます。また、ループ自体は継続されます。

計算処理にfor文を活用しよう

for文を使って、累積的な計算を行うこともできます。

// 1から10までの合計を計算
let sum = 0;

for (let i = 1; i <= 10; i++) {
  sum += i;
  console.log(`${i}まで足すと: ${sum}`);
}

console.log(`最終的な合計: ${sum}`);

実行結果：

1まで足すと: 1
2まで足すと: 3
3まで足すと: 6
4まで足すと: 10
5まで足すと: 15
6まで足すと: 21
7まで足すと: 28
8まで足すと: 36
9まで足すと: 45
10まで足すと: 55
最終的な合計: 55

この例では、sumという変数を使って各回の計算結果を蓄積しています。また、毎回の処理で前回までの合計に現在のiの値を加算しています。

まとめ

この章では、for文を使った繰り返し処理について学びました。また、カウンターを使った基本的な繰り返しから、配列との組み合わせ、ネストしたループまで様々なパターンを確認しました。

for文を使うことで、同じ処理を効率的に何度も実行できるようになります。さらに、breakやcontinueを使ってループの流れを制御することも可能です。次の章では、while文を使った別の繰り返し処理について学んでいきましょう。

学習の目標

はじめに

for文の基本的な書き方

for文の仕組みを詳しく見てみよう

異なるカウンター設定を試してみよう

配列とfor文を組み合わせよう

ネストした（入れ子の）for文

breakとcontinueで制御しよう

break文で途中終了

continue文で処理をスキップ

計算処理にfor文を活用しよう

まとめ

Starterプランでより詳しく学習