初心者でもわかる！JavaScriptのfor文で繰り返し処理をマスターしよう

プログラミングを学び始めたばかりの方にとって、「繰り返し処理」はとても重要な基礎スキルです。
中でもJavaScriptで最も基本的な繰り返し構文が「for文」です。
for文を使えば、同じ処理を何度も自動的に繰り返すことができ、効率の良いコードを書くことができます。

この記事では、for文の基本的な構文から、よく使われるパターン、注意点までを丁寧に解説します。
初心者の方にもわかりやすいように、サンプルコードを交えながらご紹介していきます。

for文とは何か？

JavaScriptにおけるfor文は、ある処理を繰り返すための構文です。
たとえば、「1から10までの数字を順番に出力する」といった処理に使われます。

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

このコードは、「変数iを1から始めて、10になるまで1ずつ増やしながら、console.log(i)を繰り返す」処理です。
たった1行で、10回の処理を自動化しています。

for文の基本構文を理解しよう

for文の基本的な形は、以下のようになっています。

for (初期化; 条件式; 更新処理) {
  繰り返す処理
}

それぞれの意味を説明します。

  • 初期化：繰り返しに使う変数を初期化（例：let i = 0）
  • 条件式：繰り返す条件（例：i < 5）
  • 更新処理：繰り返すたびに変数をどう変えるか（例：i++）

たとえば：

for (let i = 0; i < 5; i++) {
  console.log("こんにちは");
}

このコードは、「こんにちは」を5回表示します。

よくあるfor文の使い方

配列の要素を順番に処理する

配列とfor文は非常に相性が良いです。配列の中身を1つずつ取り出して処理するのに便利です。

const fruits = ["りんご", "バナナ", "ぶどう"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

fruits.lengthを使うことで、配列の要素数に合わせた繰り返しができます。

逆順で繰り返す

ときには、後ろから順に処理したいときもあります。

for (let i = 4; i >= 0; i--) {
  console.log(i);
}

このコードは、4から0までを逆にカウントダウンします。

ネストしたfor文（2重ループ）

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

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`i=${i}, j=${j}`);
  }
}

このような2重ループは、表のようなデータを扱うときに使われます。

for文を使うときの注意点

無限ループに注意

条件式が常に真になっていると、ループが止まらずに「無限ループ」になります。

for (let i = 0; i >= 0; i++) {
  console.log(i); // 無限に出力される
}

終了条件を必ず正しく設定しましょう。

インデックスの境界に注意

配列を扱うとき、インデックス（添字）が配列の範囲外になるとエラーの原因になります。

const items = ["A", "B", "C"];
for (let i = 0; i <= items.length; i++) {
  console.log(items[i]); // 最後のループでundefinedが出る
}

i < items.lengthと書くようにしましょう。

for文以外の繰り返し方法と比較

JavaScriptには他にも繰り返し構文があります。

for…of文

配列の要素だけを扱いたいなら、for…ofが便利です。

const colors = ["赤", "青", "緑"];

for (const color of colors) {
  console.log(color);
}

インデックスが不要な場合は、こちらの方が読みやすいです。

forEachメソッド

配列に対してforEachを使うこともできます。

const numbers = [1, 2, 3];

numbers.forEach(function (num) {
  console.log(num);
});

アロー関数も使えます。

numbers.forEach(num => console.log(num));

ただし、breakやcontinueは使えません。

for文を使った簡単なミニプロジェクト

最後に、for文を使った簡単な実例をご紹介します。

例1：九九の表を表示する

for (let i = 1; i <= 9; i++) {
  let row = "";
  for (let j = 1; j <= 9; j++) {
    row += `${i * j}\t`;
  }
  console.log(row);
}

タブ区切りで九九の表が出力されます。

例2：1〜100までの数値で、3の倍数のときだけ「Fizz」を表示

for (let i = 1; i <= 100; i++) {
  if (i % 3 === 0) {
    console.log("Fizz");
  } else {
    console.log(i);
  }
}

このような簡単なゲーム的な出力もfor文で実現できます。

まとめ

JavaScriptのfor文は、最も基本的かつ重要な繰り返し構文です。
初心者の方はまずこのfor文をしっかり使いこなせるようになることで、プログラミングの基礎が身につきます。

ポイントは以下のとおりです：

  • for文の構文を正しく理解する
  • 配列と一緒に使う方法を覚える
  • 無限ループに注意する
  • 必要に応じてfor…ofやforEachと使い分ける

練習を重ねることで、自然にfor文を使いこなせるようになります。ぜひ、自分でもいろいろなfor文を試してみてください！

タイトルとURLをコピーしました