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

生徒

「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文について、その基本構造から具体的な活用方法、そして初心者が陥りやすい注意点までを詳しく見てきました。プログラミングにおいて「繰り返し処理（ループ）」は、最も基本的かつ強力な武器の一つです。同じ作業を何度も手動で記述するのではなく、コンピュータに命令を出して自動化することで、コードの可読性は飛躍的に向上し、ミスを減らすことができます。

JavaScriptの繰り返し処理をマスターするためのポイント

JavaScriptでプログラムを書く際、for文を使いこなすための鍵は「3つの要素」を論理的に組み立てることにあります。以下の要素を意識して、どのようなループを作りたいかを整理してみましょう。

初期化式： カウンタ変数（主に i など）をどこからスタートさせるか。
条件式： いつまで処理を続けるか（この条件が false になると終了）。
更新式： 1回処理が終わるごとに、変数をどのように変化させるか。

実践的なサンプルコード：配列との組み合わせ

実務やアプリ開発で最も多いfor文の使い方は、配列（データのリスト）の中身を順番に取り出す処理です。以下のコードは、プログラミング学習でよく使われる典型的な例です。


const fruits = ["りんご", "バナナ", "オレンジ", "メロン", "イチゴ"];

for (let i = 0; i < fruits.length; i++) {
    console.log("箱の中身は：" + fruits[i]);
}

実行結果は以下のようになります。


箱の中身は：りんご
箱の中身は：バナナ
箱の中身は：オレンジ
箱の中身は：メロン
箱の中身は：イチゴ

このように、fruits.length（配列の長さ）を条件式に使うことで、データが何個あっても柔軟に対応できるコードが書けます。これはWebサイトの制作において、ニュース一覧を表示したり、商品リストを並べたりする際に必須となるテクニックです。

応用：計算処理への活用

for文は、数値の集計にも威力を発揮します。例えば、1から100までの数字をすべて合計する処理も、わずか数行で記述可能です。


let total = 0;
for (let i = 1; i <= 100; i++) {
    total += i;
}
console.log("1から100までの合計値は：" + total);

実行結果は以下の通りです。


1から100までの合計値は：5050

手計算では時間がかかることも、JavaScriptのループを使えば一瞬で終わります。このように、規則性のある処理を効率化するのがプログラミングの醍醐味と言えるでしょう。

より高度な繰り返し処理へ

JavaScriptには、今回学んだ標準的なfor文のほかにも、配列に特化したforEachメソッドや、オブジェクトのプロパティを回すfor...in、配列の要素を直接取り出すfor...ofなど、便利な書き方がたくさん存在します。まずは基本のfor文を指に馴染ませて、仕組みをしっかり理解すること。それが、ReactやVue.jsといったモダンなフレームワーク、さらにはTypeScriptのような厳密な型を持つ言語へのステップアップに繋がります。

先生と生徒の振り返り会話

生徒

「先生、まとめまで読んでみて、for文の使い道がすごく具体的にイメージできました！特に配列と組み合わせる方法は、実際のWebサイトでもよく見かけそうですね。」

先生

「その通りです。ショッピングサイトの商品一覧や、SNSの投稿リストなんかも、裏側ではこういった繰り返し処理が動いているんですよ。」

生徒

「さっきの合計値を出すプログラムも驚きました。100回も足し算を書かなくて済むなんて、プログラミングって本当に効率的ですね。でも、やっぱり無限ループだけは怖いです……。」

先生

「ははは、最初は誰でも一度はやってしまうものです。もしブラウザが固まったら、タブを閉じるか開発者ツールで停止させれば大丈夫。恐れずにコードを書いて、実行結果を確認する癖をつけましょう。」

生徒

「はい！まずは基本のfor (let i = 0; i < 回数; i++)の形を暗記するくらい打ち込んでみます。条件式を少し変えるだけで、偶数だけ出したり、逆順にカウントダウンしたりできるのも面白いですね。」

先生