繰り返し構文のwhile/for

どのような時に繰り返し処理が必要なのかがわかり、whileとforを使った繰り返し処理を理解できるようになる / while/forとif文を使った処理を記述できるようになる

目次

1. なぜJavaScriptを学ぶのか

2. 初めてのJavaScript

3. 演算子や制御構文はなんのためにあるのか

4. 四則演算の演算子と変数

5. 数値と条件分岐を使って簡単なプログラムを書いてみよう

6. 繰り返し構文のwhile/for

7. JavaScriptの関数とは

8. デバッグに慣れよう

9. 簡単なイベントを実行してみよう

＊上記のリンクにアクセスすることで、続きをディープロ Learningsで確認できます。

ゴール

• どのような時に繰り返し処理が必要なのかがわかり、whileとforを使った繰り返し処理を理解できるようになる
• while/forとif文を使った処理を記述できるようになる

繰り返し処理のwhile

アルゴリズムを実装するプログラミングの中で、条件分岐と同じくらいよく使われるのが繰り返し処理です。
以前、卵焼きを作る例を出しましたが、この例も”卵の数が100になるまで同じ処理を繰り返す”という繰り返し処理が入っていました。
繰り返しにもさまざまな実装方法がありますが、ここではwhileの使い方を学びましょう。

whileを使った繰り返し構文の基本

whileを使った、繰り返し構文の例を確認します。構文は以下のとおりです。

while ("条件") {
  "条件式が正しい間実行したい処理";
}

whileの後の()の中に条件式を記述し、そのあとの{}の中に実行したい処理を記述します。
条件式の評価が正しい間はその処理を繰り返します。

[sample.js]

let num = 1; // 変数numに1を代入する
while(num < 5) {
// 値が5以上になると条件式(num < 5)がfalseになり、処理が終了する
  console.log(num);
  num = num + 1; //繰り返しごとに変数numに1を加算
}

実行結果

1
2
3
4

次にbreak文を使い、途中で繰り返し処理を抜ける実装をします。breakを記述すると、その時点で繰り返し処理を抜けることができます。
先ほどのプログラムをbreakで止めてみましょう。

[sample.js]

let num = 1;
while(num < 5) {
  console.log(num);
  break;
  num = num + 1;
}

実行結果

1

一回目のconsole.log(num);のあとのbreakで繰り返し処理を抜けたため、1を出力して終了しました。
今度は変数numが3になった時点で、繰り返し処理を抜ける条件文を追加します。

[sample.js]

let num = 1;
while(num < 5) {
  // ここから処理を追加
  if(num == 3) {
    console.log(num);
    break;
  }
  // ここまで処理を追加
  console.log(num);
  num = num + 1;
}

実行結果

1
2
3

forを使った繰り返し構文の基本

whileの他にも繰り返し構文があります。while文を簡潔に記述できるforを使った繰り返し構文の例を確認しましょう。構文は以下のとおりです。

for ("初期化式"; "条件式"; "更新式") {
  "条件式が正しい間実行したい処理"
}

forの後の()の中に初期化式(最初の代入)、条件式(正しい間は処理を繰り返す条件)、更新式（繰り返し処理が終わるごとに行う処理）をまとめて記述することができます。for文の場合は、()の中はこのようにセミコロンで区切って改行せずに続けて記述するのが一般的です(最後の更新式のみ、後に続かないのでセミコロンを記述しません)。
先ほどwhileを使って作ったプログラムをforを使って書き換えてみます。

whileの例

let num = 1;
while(num < 5) {
  console.log(num);
  num = num + 1;
}

forの例

for(let num = 1; num < 5; num = num + 1) {
// 初期化式; 条件式; 更新式
  console.log(num);
}

コードをまとめて記述することができました。
このように、変数をはじめに初期化し、繰り返しごとにその変数を変化させるような繰り返し処理の場合はfor文が多く用いられます。

まとめ

• 一定の条件を満たす間、処理を繰り返したいときは、繰り返し処理をする必要がある。
• while(条件){処理}の中に処理を記述することで、条件にあてはまる間、その処理を繰り返すことができる。
• forを使用すると、初期化・条件・更新をまとめて記述できる。

関連記事

次回：7. JavaScriptの関数とは

前回：5. 数値と条件分岐を使って簡単なプログラムを書いてみよう

＊上記のリンクにアクセスすることで、続きをディープロ Learningsで確認できます。