Javascript【繰り返し文】とは何？初心者向け

Javascriptの「繰り返し文」
わかりそうで、わからないんですよね。
コードの書き方がね・・・。なんか特殊な気がしちゃって。

いやいや「繰り返し文」
ルールの関係性が分ったなら、難しいものではありません。

比較演算子

繰り返し文では「比較演算子」をよく使用します。
少し簡単に復習しておきます。
詳しくは【条件分岐】の項目で説明しています。

比較演算子

Javascriptの繰り返し処理「while文」とは？

Javascript繰り返し処理「while文」とは？
「条件式」があてはまる間、その処理を繰り返します。

Javascript繰り返し処理には「while文」を使います。
※whileの意味：「～の間」

Javascript繰り返し処理「while文」とは、条件式があてはまる間その処理を繰り返します。
なんの文句も言わずに繰り返してくれるのです。

仮にこれが人間なら文句の1つもでます。
途中で愚痴も聞かねばならないかもしれません。
パソコンさんの強みですね。

条件がずっと「true」ままなら、永遠に「繰り返し処理」が続いてしまいます。
→これを「無限ループ」と呼びます。パソコンが処理しきれずに止まってしまいます。無限ループについては後で説明します。

実際にコードを書いてみましょう。

letで「変数」を定義しています。
そして条件式は『number <= 100』
numberが100以下になるまではこの処理を実行して下さい。
ということです。

let number = 1;でnumberの中に数字の「１」を入れています。
その1が1回の処理で＋1されていきます。
それが100になるまで繰り返して＋1されていきます。

そして、「＋1」していくとう意味があるのが、

number += 1;

↑の表記です。

「number += 1;」
これがどういうことなのかと言うと、

number = number + 1；
を簡略化して書いたものです。

number = number + 1；

↓

number +=1；

めんどくさいな、簡略化なんてしなくていいじゃないかと思いませんか？
ただ実際、簡略化された形で多くのコードが書かれています。
もうすでに世の中に出回っているコードの多くが簡略して書かれています。
簡略化されたコードが読めないのは、仕事をする上で致命的です。

これはこういう書き方ができるんだなと覚えましょう。
いったん覚えてしまえば慣れます。
簡略化して記述できる。それはかっこいいのです。

※number +=1；は更に簡略化して表記することができます。
ごちゃごちゃしそうなので「for」文の時に説明。ページ以下にあり。

念のため、

number = number + 1；

↑意味も説明しておきます。

let number = 1;

「変数」を設定します。そして改めて、

number = number + 1；

「変数」に＋1をしています。
つまり「number」の中身が「2」になっているわけです。

処理が繰り返されるたびに、numberの中身が「＋1」されていく処理です。
そしてその処理は条件式「number <= 100」
numberの中身が100以下に増えるまで続くと言うことです。

実際に
console.log(number);
で表示させると瞬時に1～100までの数字が並びます。

Javascript「while文」の無限ループとは？

条件を満たすことなく永遠に処理が続いてしまうことです。
パソコン、止まってしまいます。再起動です。
無限ループは条件を定義していないため永遠に続くと思いがちですが違います。
条件を設定しているがゆえに、それを満たすことなく永遠に続いてしまうのです。

実際にコードを書いてみましょう。

どういうことかと言うと、
条件で「number <= 100」を指示したにも関わらず、
先ほどの条件下と同じ（変数の更新)
number += 1;を書き忘れたため、

numberがずっと「1」のままです。
2、3、4と増えていくことなく、ずっと1のままです。
そのため条件式「number <= 100」
100以下になるまで続けるという条件を満たせません。

console.log(number);
では、

1111111111111・・・・・・・・・
永遠に続くことになります。
これが「無限ループ」です。

Javascriptの繰り返し処理「for文」とは？

for文とはなんなのか？
while文をよりシンプルに書いたのもです。
for文の記述方法なら、「number += 1」の書き忘れが減り、
無限ループに陥ることを避ける事ができます。

；はセミコロン
※「変数の更新」の後に；にはいらない。

for文では、while文で書いてい条件式などを書く場所が変わります。
より見やすくなります。

let number = 1;

while(number <= 100){

　console.log(number);

number += 1;

}

↓

while文では縦に並んでいる「変数の定義；条件式；変数の更新」が
for文では1行目で（　）内に横一列で記述されています。
見やすくなりました。

for(let number = 1; number <= 100; number += 1){

　console.log(number);

}

for文では「変数の定義」「条件式」「変数の更新」の3つをはじめのカッコ内に書きます。カッコ内ではそれぞれを（;）セミコロンで区切ります。

そして更に、
「number += 1」は「number ++」を省略して書くことができます。
引き算の場合にも、「number ‐= 1」を「number –」と省略することができます。while文やfor文では簡略化されて書かれています。

「for文」の時だでなく「while文」でも使用可能です。上の「while文」説明時ではごちゃごちゃしそうだっため使用しませんでした。

実際に簡略化して書いてみましょう。
number += 1　→　number++

すっきりしたもんです。

何故「for文」を書く必要があるのか？

別に「while文」だけでいいと思いませんか？
なぜ見やすい「for文」を書く必要があるのか・・・。

見やすいと言うのがポイントです。
より複雑な処理に対応できるに「for文」は便利なのです。

「for文」の中に条件分岐の「if」文をいれたりするのです。

例えば
1から100の数字を出力してください。
そして5の倍数の時は「5の倍数です」と文字を出力してください。
そんなことを言い出したとしましょう。

ですがきっとある程度コードは書けると思います。

5の倍数という条件式をどう書いていいのか悩むところですね。
5の倍数と言うのは5で割って余りが0になるということです。

記述すると以下です。

number % 5 === 0

おおおっ～って思いますよね。その手があったか！

余りをとって条件式を定義することは多々あります。
パターンとして覚えてしまいましょう。

実際にコードを書いてみましょう。

実際にconsole.log(number);で表記される場合は、

１

２

３

４

5の倍数です

上記のように100までにある5の倍数の時、5の倍数です　と伝えてくれます。
プログラミングの便利さが少し見えてきましたね。