先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで同じことを何回もくり返したいときって、どう書けばいいんですか？」

先生

「そんなときにはfor文というループ構文を使うのが便利ですよ。」

生徒

「for文ってよく聞くけど、難しそうで手が出せません…」

先生

「大丈夫です。今回はJavaScriptのfor文の基本構文から丁寧に解説しますね！」

1. JavaScriptのfor文とは？

for文は、プログラムの中で同じ処理を指定した回数くり返したいときに使います。たとえば「1から10までの数字を表示したい」といったときに便利です。

「ループ処理」とも呼ばれており、for文はその代表的な書き方のひとつです。

2. for文の基本構文

JavaScriptのfor文は次のように書きます。


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

それぞれの意味は以下の通りです。

初期値：カウントを始める最初の数字
条件式：この条件が成り立つ間くり返す
更新処理：カウントの増やし方

3. 実際にfor文を使ってみよう

たとえば、「0から4までの数字を表示したい」ときのfor文はこうなります。


for (let i = 0; i < 5; i++) {
  console.log(i);
}

このプログラムの実行結果は次のようになります。

ここではiという変数を使って数字を1つずつ増やしています。iは「index（インデックス）」の略で、よく使われる変数名です。

4. for文の各部分を詳しく解説

先ほどのfor文を細かく見てみましょう。

let i = 0; → くり返しのスタートを0に設定
i < 5; → iが5より小さい間だけループ
i++; → ループごとにiを1ずつ増やす

つまり、0から始まり、1ずつ増えて、iが5未満（0〜4）の間だけくり返す、という意味になります。

5. for文で文字をくり返す

数字だけでなく、文字をくり返すこともできます。たとえば「こんにちは」を5回表示したい場合はこう書きます。


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


こんにちは
こんにちは
こんにちは
こんにちは
こんにちは

このように、for文を使えば、同じ処理を何回でも簡単にくり返せます。

6. for文で変化のあるメッセージを出す

iの値を使えば、くり返すたびに変化するメッセージを作れます。


for (let i = 1; i <= 3; i++) {
  console.log("第" + i + "回目のあいさつです。");
}


第1回目のあいさつです。
第2回目のあいさつです。
第3回目のあいさつです。

このように、ループごとに違うメッセージを出すこともできて、とても便利です。

7. for文で偶数や奇数を表示する

数を2ずつ増やせば、偶数だけを表示することができます。


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

逆に、奇数を表示したい場合はi = 1から始めて、同じようにi += 2とします。

8. 間違えやすいポイントに注意しよう

for文でよくあるミスのひとつが、終了条件やカウントアップを忘れることです。次のように書き忘れると無限ループになることがあります。


for (let i = 0; i < 5;) {
  console.log(i);
}

i++がないとiが増えず、i < 5のままループが止まりません。パソコンがフリーズしたようになるので注意が必要です。

9. for文を使うときのポイントまとめ

JavaScriptのfor文は、回数が決まっているくり返し処理にぴったりの構文です。初期値・条件式・更新処理の3つの要素を正しく理解して使いましょう。

小さな例から始めて、慣れてきたら少しずつ応用していくのがおすすめです。

JavaScriptのfor文の書き方を初心者向けにやさしく解説