for ループで合計を求める｜コードで実践

このレッスンで分かること

for (let i = 1; i <= n; i++) で 1 から n まで繰り返せます

初期化 / 条件 / 更新をセミコロン ; で区切る

最小例は let total = 0; for (let i = 1; i <= n; i++) total += i; return total;

for ループで合計を求めるとは

for 文の 3 つの式（初期化・条件・更新）を学び、1 から n までの合計を求める関数を書いてみよう。

for ループは「決まった回数」だけ繰り返す道具

プログラムを書いていると「同じ処理を 10 回繰り返したい」「1 から 100 まで足したい」といった場面がしょっちゅう出てきます。そのたびに result = result + 1; result = result + 2; ... と手で並べるのは現実的ではありません。そこで登場するのが繰り返し構文、その中でも今回は JavaScript の代表的なループ for 文を学んでいきます。

JavaScript の繰り返し構文には主に for while do-while for-of for-in の 5 種類があります。その中でも for 文は「5 回繰り返す」「1 から n まで足す」のように 回数が決まっている ループに最も向いています。Web フロントエンドでも Node.js でも、回数決め打ちのループはまず for を考える、というのが慣習です。

試しに、1 から 5 までを足し算する処理を for なしで書くとこうなります。

JavaScript

function sumWithoutFor() {
  let total = 0;
  total += 1;
  total += 2;
  total += 3;
  total += 4;
  total += 5;
  return total;
}

5 までならまだ書けますが、これが 100 回、1000 回になったら破綻します。for 文を使えば、同じ処理を 3 行で書けます。

JavaScript

function sumWithFor(n) {
  let total = 0;
  for (let i = 1; i <= n; i++) {
    total += i;
  }
  return total;
}

「同じ形のことを繰り返す」をコンパクトに表現できる、これが for 文の魅力です。

for 文の文法と 3 つの式

JavaScript の for 文の基本形は次のとおりです。

JavaScript

for (初期化; 条件; 更新) {
  // 繰り返したい処理
}

丸カッコの中には、セミコロン ; で区切られた 3 つの式が並びます。それぞれの役目は次の通りです。

式	タイミング	例
初期化	ループ開始前 1 回	`let i = 1`
条件	毎回ループ前に評価	`i <= n`
更新	本体実行後に評価	`i++`

さきほどの for (let i = 1; i <= n; i++) を 3 つに分けると、let i = 1 が初期化、i <= n が条件、i++ が更新です。これで i は 1, 2, 3, ..., n と進み、n + 1 になった瞬間に i <= n が false になってループを抜けます。

3 つの式を 必ずセミコロンで区切る のが for 文のお作法です。カンマで区切ったり、セミコロンを忘れたりすると SyntaxError になります。区切り文字が違うだけで構文として成立しないので、最初は意識して入力しましょう。

let と var の違いに注意

for のループ変数は let で宣言しましょう。古いコードを読むと var を使っている例も見ますが、var は ブロックスコープを持たない ため、ループ外でも i が残ってしまいます。

JavaScript

for (var i = 0; i < 3; i++) {}
console.log(i); // 3 が出力されてしまう

一方、let を使えばループの中だけで i が有効になります。

JavaScript

for (let i = 0; i < 3; i++) {}
// ここで i を使うとエラー

モダンな JavaScript では var は使わず、let か const を使うのが鉄則です。

実行フローを図で追ってみる

for (let i = 1; i <= 3; i++) が回るときの流れは次の通りです。

diagram (will load when visible)

図の流れを順序リストで書き直すと、次の通りです。

初期化 let i = 1 を実行する (ループ前に 1 度だけ)
条件 i <= 3 を評価する
真であれば本体 total += i を実行する
更新 i++ を実行する
条件評価 (2) に戻る
偽になったらループを抜ける

「初期化は最初の 1 回だけ」「条件 → 本体 → 更新 → 条件 → ...」とぐるぐる回っていく流れがイメージできるはずです。条件が false になった瞬間にループを抜ける、というのが大事なポイントです。

よくある間違い

for 文を使い始めるとき、初心者がほぼ全員ハマる落とし穴が 3 つあります。先に知っておけば回避できます。

区切り文字をカンマにしてしまう — for (let i = 0, i < 10, i++) のようにカンマで区切るのは間違いで、正しくはセミコロン ; です。Python から来た人は for i in range(10): の感覚で書きがちなので要注意です
条件と更新を逆にして無限ループ — for (let i = 0; i < 10; i--) のように更新が逆向きだと i が永遠に増えないので、ループが終わりません。ブラウザがフリーズしたり、Node.js でプロセスを強制終了する羽目になります
< と <= を取り違える — for (let i = 1; i < n; i++) だと n が含まれず、for (let i = 1; i <= n; i++) だと n まで含まれます。1 から数えるか 0 から数えるかで境界条件が変わるので、紙に小さい値で書き出して確認するのがコツです

無限ループは初心者にとっての最初の関門です。ブラウザのタブが固まって慌てた経験は、プログラマなら誰しも一度は通ります。chotdekiru の JavaScript Playground のように実行時間制限のある環境で練習しておくと、本番でも被害を最小限にできます。

もうひとつ、ループ変数の名前にも文化があります。慣習的に i が使われ、これは index の頭文字です。JavaScript だけでなく C Java Python などほぼすべての言語で共通の文化なので、見たら「ああ、ループのカウンタね」と一瞬で読めるようになります。

この章のポイント

ここまでの要点 for (初期化; 条件; 更新) の 3 つをセミコロンで区切る。ループ変数は let で宣言。<= n と < n の境界を意識する。

やってみよう

それでは今回の課題に取り組みましょう。やることは次の通りです。

sumTo(n) 関数の中身を埋める
for 文を使って 1 から n までの整数の合計を計算する
sumTo(5) が 15、sumTo(10) が 55、sumTo(1) が 1 になるかを確認する

ヒントとして、total のような合計用変数を 0 で初期化し、for ループの中で total += i のように累積していくとシンプルに書けます。return で合計を返すのを忘れないようにしましょう。

余裕があれば、sumTo(0) や sumTo(-1) のような境界ケースで何が返るかも考えてみてください。今回のテストでは扱いませんが、実務では「想定外の入力で何が起きるか」を考える癖が役立ちます。

このレッスンで for 文の骨格が分かれば、次は while 文や for-of 文、ネストしたループへと進んでいけます。手を動かして、for の 3 つの式が指のリズムに馴染むまで何回も書いてみましょう。

よくある質問

Q. for と while はどう使い分けますか？

A. 繰り返し回数や対象が決まっているなら for（リスト・range など）が読みやすく、終了条件が動的に決まるなら while を使います。例えば「100 回繰り返す」は for i in range(100):、「ユーザー入力が q になるまで」は while True + break が向いています。

Q. ループの途中で抜けたいときは？

A. break を使うとそのループを即座に終了します。次の周回に進みたいだけなら continue を使い、現在の処理だけスキップします。break / continue は読み手にとってジャンプ先が見えにくいため、関数化して return で抜けると意図が伝わりやすくなります。

Q. インデックスも一緒に取りたい場合は？

A. Python なら for i, v in enumerate(items):、JavaScript なら items.forEach((v, i) => ...) のようにインデックスを同時に取り出せます。手動で i = 0; i += 1 と書くと off-by-one のミスを誘発しやすいので、言語の標準機能を使うのが安全です。

次のレッスン

次は while でカウントダウン で、for 文の 3 つの式（初期化・条件・更新）を学び、1 から n までの合計を求める関数を書いてみようを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

for で合計の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. for で合計とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

for ループで合計を求める

for ループは「決まった回数」だけ繰り返す道具

for 文の文法と 3 つの式

let と var の違いに注意

実行フローを図で追ってみる

よくある間違い

やってみよう

よくある質問

Q. for と while はどう使い分けますか？

Q. ループの途中で抜けたいときは？

Q. インデックスも一緒に取りたい場合は？

次のレッスン

要件

入出力例

ヒント

メモ