JavaScript

【JavaScript】繰り返し(第7回)

繰り返しについての学習をします。

準備をしよう

下のURLをクリックして、「paiza.IO」を開いてください。
https://paiza.io/ja/projects/new

学習内容

繰り返しとは

繰り返しとは、プログラミングの基本処理の1つで、同じ処理を繰り返すことです。

同じ処理を何度も書いて実行させるのは効率が悪いです。プログラミングでは、繰り返しという処理を使うことで、コンピュータに同じことを何度も実行させることができます。

回数を指定して繰り返す、何かの条件が満ちるまで繰り返す、など繰り返しのパターンがいくつかあり、それによって、構文も異なります。

ここでは、代表的なJavascriptの繰り返しを紹介します。

while文

ある条件が満ちるまで繰り返すものです。

イメージ

ある処理に入る前に「Yes?」と聞かれ、Yesなら処理を再度実行、Noならそこで終了、という動作をします。

書き方

以下のように書きます。

  1. whileの隣の( )を「条件式」と呼びます。これは、真偽値(trueかfalseになるもの)が返る式です。※直接「true」と入れると、無限ループになる
  2. 「繰り返す処理」は、条件式がtrueになる間は、ずっと繰り返されます。条件式がfalseになったら繰り返しを終了します。

具体的に見ていきましょう。

  1. 変数「num」をもともと1で初期化しておきます。条件式は「num <= 5」なので、numが5まではtrueになり続けるので、繰り返しを継続します。
  2. 「繰り返す処理」は、numの中身を表示するのと、numを1上げています。これで繰り返すたびに、numが1ずつ増えていきます。
練習

paiza.IOに、以下のコードを入れて下さい。

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

※ 「num++」は、「num = num + 1」と同じ意味です。1だけ加算します。

実行結果

コードを実行してみましょう。

1
2
3
4
5

for文

回数を指定して繰り返すものです。

イメージ

単純に、指定回数まで繰り返す、という動作をします。

書き方

以下のように書きます。

  1. 「初期化」では、for内で使う変数を初期化します。最初に1度だけ実行されます。
  2. 「条件式」では、while文と同じように、真偽値が返る式が入り、trueなら繰り返す、falseなら終了、となります。「繰り返す処理」が終わるごとに実行されます。
  3. 「増減」では、1.の変数を増減します。while文では、繰り返し処理内で行いましたが、for文では、ここで行います。これも「繰り返す処理」が終わるごとに実行されるもので、2.の判定が終わった後に実行されます。

具体的に見ていきましょう。

  1. 変数「i」(慣習的にiを変数名に使います)を1で初期化しています。
  2. 「i <= 5」は、iが5まではtrueになり続けるので、繰り返しが続きます。「i <= 〇」の「〇」の数が、実質的に繰り返しの回数となります。
  3. 「i++」は、「i = i + 1」と同じ意味です。つまり「i」を1つ加算しています。
練習

paiza.IOに、以下のコードを入れて下さい。

for(let i = 1; i <= 5; i++) {
    console.log(i)
}
実行結果

コードを実行してみましょう。

1
2
3
4
5

コード全体

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

console.log("=========")

for(let i = 1; i <= 5; i++) {
    console.log(i)
}
実行結果
1
2
3
4
5
=========
1
2
3
4
5

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

まとめ

以上になります。今回は繰り返しについてお伝えしました。

while文とfor文はJavaScriptの基本構文です。概念と使い方を理解したら、どんどん自分で書いてみてください。自然と身についていきます。

タイトルとURLをコピーしました