繰り返しのループを
ゼロから復習しよう
プログラムは「同じ処理を何度も繰り返す」ことができます。この教材では インクリメント、for文、for of文、while文を順番に学び、最後に練習問題と理解度テストで確認します。
繰り返し処理の基本
繰り返し処理(ループ)は、「同じような処理を、決めた回数だけ何度も実行する」ための仕組みです。日常生活の「10回スクワットをする」という考え方と同じです。
ループを使わないと…
console.log("こんにちは"); console.log("こんにちは"); console.log("こんにちは"); console.log("こんにちは"); console.log("こんにちは");
同じ行を5回書くことになります。もし「100回」と言われたら、とても大変です。
ループを使うと
for (let i = 1; i <= 5; i++) { console.log("こんにちは"); }
たった3行で同じ結果になりました。回数を変えたいときは 5 の部分を書き換えるだけです。
ループの3つの種類
| 構文 | 得意なこと |
|---|---|
for | 「〇回繰り返す」と回数が決まっているとき |
for of | 配列などの中身を1つずつ取り出したいとき |
while | 「条件を満たす間ずっと」繰り返したいとき |
どのループも共通しているのは「条件が true の間だけ繰り返す」という点です。条件が false になった瞬間にループは終わります。
インクリメントとデクリメント
ループでは「何回目か」を数える変数(カウンター)をよく使います。その値を1ずつ増やしたり減らしたりするのが、インクリメントとデクリメントです。
| 書き方 | 読み方 | 意味 | 同じ意味の式 |
|---|---|---|---|
i++ | インクリメント | i を 1 増やす | i = i + 1 |
i-- | デクリメント | i を 1 減らす | i = i - 1 |
i += 2 | プラスイコール | i を 2 増やす | i = i + 2 |
i -= 3 | マイナスイコール | i を 3 減らす | i = i - 3 |
実際に動かしてみる
let count = 5; count++; console.log(count); count--; count--; console.log(count); count += 10; console.log(count);
変数の中身が 5 → 6 → 5 → 4 → 14 と、書いた順番に変化していきます。
i++ のように1行で単独に書く場合、++i と書いても結果は同じです。for文では i++ の形がよく使われるので、まずはこちらを覚えましょう。
値を書き換えるので、カウンター用の変数は let で宣言します。const で宣言した変数に ++ を使うとエラーになります。
例題
let stock = 3; stock--; console.log("残り: " + stock);
for文
for文は「決まった回数だけ繰り返す」ときにいちばんよく使う構文です。
基本の書き方
for (初期化; 条件; 更新) { // 繰り返したい処理 }
カッコの中は セミコロン( ; )で3つに区切られています。それぞれの役割は次のとおりです。
| 部分 | 例 | 役割 | 実行されるタイミング |
|---|---|---|---|
| 初期化 | let i = 1 | カウンター変数を用意する | 最初に1回だけ |
| 条件 | i <= 5 | 繰り返すかどうか判定する | 毎回、処理の前 |
| 更新 | i++ | カウンターの値を変える | 毎回、処理の後 |
具体例:1から5まで表示する
for (let i = 1; i <= 5; i++) { console.log(i); }
動きを順番に追うと、i が 1 のとき表示 → i++ で 2 になる → 条件 2 <= 5 は true なのでもう一度…と続き、i が 6 になった時点で条件が false になり、ループが終わります。
配列と組み合わせる
const fruits = ["りんご", "みかん", "ぶどう"]; for (let i = 0; i < fruits.length; i++) { console.log(i + "番目: " + fruits[i]); }
配列の番号(インデックス)は 0から始まるので、let i = 0 でスタートし、i < fruits.length(要素数より小さい間)を条件にします。
デクリメントで逆順にする
for (let i = 3; i >= 1; i--) { console.log(i); } console.log("スタート!");
大きい数から始めて i-- で減らし、条件を i >= 1 にすればカウントダウンになります。
更新の部分を間違えて i-- と書いてしまうと、i がいつまでも 5 以下のままで条件が false になりません。これを無限ループといい、ブラウザが固まる原因になります。「条件がいつ false になるか」を必ず確認しましょう。
例題
let total = 0; for (let i = 1; i <= 4; i++) { total += i; } console.log(total);
1 + 2 + 3 + 4 の合計が total に貯まっていきます。
for of文
for of文は、配列などの中身を1つずつ取り出して繰り返す構文です。番号(インデックス)を自分で管理しなくてよいのが特徴です。
基本の書き方
for (const 変数 of 配列) { // 取り出した要素を使う処理 }
「配列 の中から(of)1つずつ取り出して、変数に入れる」と読むと分かりやすいです。
具体例
const fruits = ["りんご", "みかん", "ぶどう"]; for (const fruit of fruits) { console.log(fruit); }
fruit という変数に、要素が先頭から順番に入ります。fruits[i] のような書き方が不要なので、コードがすっきりします。
for文と for of文 の比較
| 項目 | for文 | for of文 |
|---|---|---|
| 取り出せるもの | 番号(インデックス) | 中身(要素そのもの) |
| カウンターの管理 | 自分で書く | 自動 |
| 向いている場面 | 回数指定・番号が必要なとき | 配列の中身を全部使うとき |
for of は文字列にも使えます。for (const c of "abc") と書くと、1文字ずつ取り出せます。
似た名前に for in がありますが、こちらは中身ではなく番号(キー)が取り出されます。配列の中身を使いたいときは for of を使いましょう。
例題
const prices = [100, 250, 400]; let total = 0; for (const price of prices) { total += price; } console.log("合計: " + total);
while文
while文は「条件が true の間、ずっと繰り返す」構文です。何回繰り返すかあらかじめ決まっていないときに向いています。
基本の書き方
while (条件) { // 条件が true の間、繰り返される処理 }
if文とよく似た形ですが、if文が「1回だけ実行」なのに対し、while文は「条件が false になるまで何度も実行」します。
具体例
let i = 1; while (i <= 3) { console.log(i); i++; }
for文では3つの要素が1行にまとまっていましたが、while文では「初期化」を前に、「更新」を中に自分で書きます。この3つが揃っている点は for文と同じです。
もし i++ を書き忘れると、i はずっと 1 のままなので条件 i <= 3 が永遠に true になり、無限ループになります。while文を書いたら「条件が false になる日は来るか?」を必ず確認しましょう。
回数が決まっていない例
let money = 1000; while (money >= 300) { money -= 300; console.log("1個買った。残り" + money + "円"); }
「何個買えるか」は事前に分かりませんが、「300円以上ある間は買い続ける」という条件で表現できます。こうした場面が while文の得意分野です。
3つの使い分けまとめ
| こんなとき | 使う構文 |
|---|---|
| 「5回繰り返す」など回数が決まっている | for |
| 配列の中身を全部使いたい | for of |
| 終わる回数が分からない・条件次第 | while |
例題
let count = 3; while (count > 0) { console.log(count); count--; } console.log("終了");
練習問題
コードの続きをノートに書いてみましょう。解答は最後の「08 解答・解説」で確認できます。
// ここにfor文を書いてみよう
// ここにfor文を書いてみよう
const animals = ["いぬ", "ねこ", "うさぎ"]; // ここにfor of文を書いてみよう
let i = 1; let total = 0; // ここにwhile文を書いてみよう
理解度テスト
全6問です。正しいと思う選択肢に丸をつけましょう。解答は「08 解答・解説」にあります。
i++ はどんな意味ですか？- A. i を 1 増やす
- B. i を 1 減らす
- C. i を 2 倍にする
i++ の位置)は、いつ実行されますか？- A. 繰り返しが始まる前に1回だけ
- B. 1回分の処理が終わるたび
- C. ループが終わったあとに1回だけ
for (let i = 0; i < 3; i++) の中の処理は、何回実行されますか？- A. 2回
- B. 3回
- C. 4回
- A. for of文
- B. for in文
let i = 1; while (i <= 3) { console.log(i); i++; }- A. 1 2 3
- B. 1 2 3 4
- C. 何も表示されない
i++ など)を書き忘れると、どうなりますか？- A. 1回だけ実行されて終わる
- B. 無限ループになる
- C. エラーになって何も実行されない
解答・解説
練習問題の解答
for (let i = 1; i <= 10; i++) {
console.log(i);
}
1から始めたいので初期化は let i = 1、10まで表示したいので条件は i <= 10 にします。
for (let i = 5; i >= 1; i--) {
console.log(i);
}
逆順にするポイントは3つです。大きい数からスタートし、条件を >= にし、更新をデクリメント i-- にします。
for (const animal of animals) {
console.log(animal);
}
for of なら番号を管理する必要がなく、変数 animal に「いぬ」「ねこ」「うさぎ」が順番に入ります。
while (i <= 5) {
total += i;
i++;
}
console.log(total);
合計を貯める total += i と、カウンターを進める i++ の両方が必要です。i++ を忘れると無限ループになります。
理解度テストの解答
++ はインクリメントで、値を1増やします。i = i + 1 と同じ意味です。
更新の部分は、{ } の中の処理が1回終わるたびに実行されます。そのあと条件が再チェックされます。
i は 0 → 1 → 2 と変化して3回実行され、i が 3 になると条件 i < 3 が false になり終了します。
for of は要素そのものを取り出します。for in はキー(番号)を取り出すので用途が異なります。
i が 1・2・3 のときに表示され、4 になると条件 i <= 3 が false になってループが終わります。
条件がいつまでも true のままなので、繰り返しが終わらなくなります。これが無限ループです。