JavaScript for文・while文とは？繰り返し処理を初心者向けにわかりやすく解説【第4講】

今回のゴール

前回は条件分岐（if文）について学びました。

JavaScript if文の使い方｜条件分岐を初心者向けにわかりやすく解説【第3講】

今回はfor文・while文を使った繰り返し処理を学びます。

同じ処理を何度も自動で実行できるようになることが今回のゴールです。

JavaScriptの繰り返し処理とは？

プログラムでは、同じ処理を何度も実行したい場面がよくあります。

たとえば、4の段を表示する場合を考えてみましょう。

console.log(4);
console.log(8);
console.log(12);
console.log(16);
console.log(20);
console.log(24);
console.log(28);
console.log(32);
console.log(36);

このように毎回書くこともできますが、回数が増えると大変です。

そこで使うのが繰り返し処理（ループ）です。

for文とは？

for文は、決まった回数だけ繰り返したいときによく使います。

for文の基本構文

for (初期値; 条件式; 増減) {
  処理;
}

4の段を表示する例

for (let count = 1; count <= 9; count++) {
  console.log(4 * count);
}

実行結果

4
8
12
16
20
24
28
32
36

count++ の意味

count++ は count に1加えるという意味です。

count = count + 1;

と同じ意味になります。

0から始めるfor文

JavaScriptでは0から数え始める場面も多くあります。

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

この場合、0〜9まで表示されます。

偶数だけ表示する方法

方法① 計算して表示

for (let count = 1; count <= 5; count++) {
  console.log(2 * count);
}

方法② if文で判定する

for (let count = 1; count <= 10; count++) {
  if (count % 2 === 0) {
    console.log(count);
  }
}

%は余りを求める演算子です。

count % 2 === 0 は「2で割り切れる＝偶数」という意味です。

while文とは？

while文は、条件が成立している間、繰り返し処理を続けます。

while文の基本構文

while (条件式) {
  処理;
}

4の段を表示する例

let count = 1;

while (count <= 9) {
  console.log(4 * count);
  count++;
}

count が9以下の間、処理が繰り返されます。

注意点

count++を書き忘れると、条件がずっと成立し続けてしまい、無限ループになる可能性があります。

breakとは？

break は繰り返し処理を途中で終了します。

for (let count = 1; count <= 10; count++) {
  if (count === 5) {
    break;
  }

  console.log(count);
}

実行結果

1
2
3
4

continueとは？

continue はその回の処理だけスキップして次へ進みます。

for (let count = 1; count <= 10; count++) {
  if (count === 5) {
    continue;
  }

  console.log(count);
}

実行結果

1
2
3
4
6
7
8
9
10

演習問題

• 九九の2の段をfor文で表示する
• 1〜10の偶数だけ表示する
• 1〜20の3の倍数だけ表示する

まとめ

• for文は回数が決まっている繰り返しに向いている
• while文は条件が成立している間繰り返す
• break は途中終了
• continue はその回だけスキップ

次に学ぶおすすめ記事

JavaScript 関数とは？functionの使い方を初心者向けにわかりやすく解説【第5講】