for 文を一言でいうと
for 文は、
「同じような処理を、決まった回数だけ繰り返すための仕組み」です。
たとえば「1〜10 までの数字を順番に表示したい」「配列の中身を先頭から順に処理したい」といったときに使います。
ここが重要です。
for 文は「回数や順番がはっきりしている繰り返し」に向いています。
「いつから始めて」「いつまでやって」「1 回ごとにどう変化させるか」を、自分で設計するイメージを持つと理解しやすくなります。
for 文の基本構文と「3 つの部品」
基本の形
いちばん基本的な書き方は次のとおりです。
for (初期化; 条件; 更新) {
// 繰り返したい処理
}
丸かっこの中にある「初期化」「条件」「更新」の 3 つが、for 文の心臓部です。
この 3 つが、ループ全体の「いつ始めて」「いつ終わるか」「1 回ごとにどう進めるか」を決めています。
それぞれの役割
初期化は、「ループ開始前に一度だけ実行する部分」です。
よくあるのは、let i = 0; のようにカウンター変数を用意する書き方です。
条件は、「ループを続けるかどうかを判断する式」です。
条件が true のあいだ、波かっこの中の処理が繰り返されます。
条件が false になった瞬間、ループは終了します。
更新は、「1 回ループが終わるたびに実行される部分」です。
たとえば i++ と書けば、毎回 i の値が 1 ずつ増えていきます。
ここが重要です。
for 文の丸かっこの中は、「カウンターの一生」を表しています。
初期化で「生まれ」、条件で「まだ続けていいか」をチェックされ、更新で「少し成長」する。
この繰り返しの仕組みを、自分でコントロールできるのが for 文です。
一番基本の例：1 から 5 まで数える for 文
コードと動き
まずは一番よく見るパターンから。
for (let i = 1; i <= 5; i++) {
console.log(i);
}
画面には、1 行ずつ
1
2
3
4
5
と表示されます。
実行の流れを「コマ送り」で見る
流れを順番に追うと、次のようになります。
1 回目
let i = 1;（初期化）で i が 1 になるi <= 5をチェック（1 <= 5 は true）- 波かっこの中が実行され、
console.log(1) i++が実行され、i は 2 になる
2 回目
i <= 5をチェック（2 <= 5 は true）- 波かっこの中で
console.log(2) i++で i は 3
同じ流れが i = 3, 4, 5 と続きます。
i が 6 になったタイミングで i <= 5 が false になるので、ループを抜けます。
ここが重要です。
for 文の「順番」は
初期化 → 条件チェック → 本体 → 更新 → 条件チェック → 本体 → 更新…
というサイクルです。
この流れを頭の中でイメージできると、for 文は怖くなくなります。
配列と for 文：インデックスで回す基本パターン
配列を先頭から順に処理する
配列の中身を先頭から順に処理するパターンは、for 文の超定番です。
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) {
console.log(i, fruits[i]);
}
このコードのポイントを分解します。
まず let i = 0; で、配列の最初の位置（インデックス 0）からスタートします。i < fruits.length という条件は、「i が配列の長さ未満のときだけ続ける」という意味です。
配列の長さが 3 なら、i の値が 0, 1, 2 のときだけループが実行されます。i++ によって、毎回インデックスが 1 ずつ進みます。
波かっこの中では、fruits[i] で配列の要素を取り出しています。
i が 0 のときは “apple”、1 のときは “banana”、2 のときは “orange” です。
インデックスと length のセットで覚える
配列を for で回すときは、
for (let i = 0; i < 配列.length; i++) {
配列[i] を使う
}
という型でほぼ覚えてしまって問題ありません。
ここが重要です。
配列のインデックスは「0 から始まって length – 1 で終わる」というルールです。
したがって、for の条件は「i < length」が基本形になります。i <= length と書いてしまうと 1 回多く回ってしまい、undefined を触ってエラーの原因になります。
break と continue を for 文で使う
break でループを途中で抜ける
for 文の中で「ある条件になったら、それ以降はもう回さなくていい」ということがあります。
そのときに使うのが break です。
for (let i = 1; i <= 10; i++) {
if (i === 5) {
break;
}
console.log(i);
}
このコードは 1, 2, 3, 4 までを表示したあと、i が 5 になったところで break によりループを終了します。
6〜10 は表示されません。
continue で「今回だけ」スキップする
ある値のときだけ処理を飛ばしたいときは continue を使います。
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue;
}
console.log(i);
}
この場合は 1, 2, 4, 5 が表示され、3 のときだけスキップされます。continue に到達した時点で、その周の残りの処理を飛ばして「次の i」へ進みます。
ここが重要です。
break は「ループ全体からの脱出」、continue は「この 1 回だけスキップして次へ」です。
どちらも for 文と組み合わせることで、「単に回す」だけでなく「どこまで／どこを回すか」を細かく制御できるようになります。
よくある間違いと注意点
無限ループになってしまうパターン
for 文の「更新」が正しく書かれていないと、条件がずっと true のままになり、無限ループになることがあります。
たとえば、次のコードは危険です（絶対にブラウザでそのまま実行しないでください）。
for (let i = 0; i < 10; ) {
console.log(i);
}
更新部分が空なので、i はずっと 0 のままです。i < 10 は永遠に true のままになり、止まりません。
必ず「条件がいつか false になるように」更新を書く必要があります。i++ で増やすのか、i-- で減らすのか、自分で設計してください。
インデックスの範囲ミス
配列を回すときに i <= array.length と書いてしまうミスは非常に多いです。
const arr = [10, 20, 30];
for (let i = 0; i <= arr.length; i++) {
console.log(arr[i]);
}
この場合、i が 3 になったときに arr[3] を読もうとして undefined になります。
正しくは i < arr.length です。
ここが重要です。
for 文を書くときは、「スタート値」「条件」「更新」が連携しているかを必ず確認してください。
ゴールに向かって少しずつ進んでいくイメージが持てれば、無限ループや範囲外アクセスの多くは防げます。
for 文を書くときに本当に意識してほしいこと
for 文は、「何回回すか」「どこからどこまで回すか」を自分で設計する道具です。
丸かっこの中の 3 つの部分（初期化・条件・更新）で、そのルールを決めています。
繰り返しの流れは
初期化 → 条件チェック → 本体 → 更新 → 条件チェック → 本体 → 更新…
というサイクルです。
この順番を頭の中で追いながら、自分で i の値の変化をたどってみてください。
配列を回す基本形は
「i = 0 で始めて」「i < length のあいだ」「毎回 i++」です。
この形をまずは体に染み込ませると、多くの for は迷わず書けるようになります。
break と continue を組み合わせると、「どこでやめるか」「どこだけ飛ばすか」も制御できます。
単に回すだけでなく、「回し方をデザインする」という感覚も少しずつ意識してみてください。
ここが重要です。
for 文は、「同じ処理を 10 回コピペしなくていいようにする」ためのものではありません。
“数の変化” を利用して、順番や回数をコントロールするための仕組み です。
今は小さな例でも、
「この i は何を意味する数字なのか？」
「どこからどこまで進めば用事が済むのか？」
を自分の言葉で説明しながら書いてみてください。
最後に、簡単な練習をいくつか挙げておきます。
- 1〜10 までの偶数だけを表示する for 文を書く（
if (i % 2 === 0)を使う）。 - 配列
["A", "B", "C", "D"]の要素を、インデックスと一緒に表示する for 文を書く。 for (let i = 10; i >= 1; i--)のように、10 から 1 へカウントダウンするループを書いて、流れを紙に書き出してみる。
自分の手で「数が変化していく様子」を追いかけると、for 文のリズムが身体感覚として分かってきます。
