第8章　ループ

# **ループ**
***

プログラミングにおいて、```同じ処理を繰り返す```ために同じコードを繰り返し書く必要はありません。 ループを使い、反復処理として同じ処理を繰り返
し実行できます。

<br>

## **1.for文**
for文は```繰り返す範囲```を指定した反復処理を書くことができます。
```
for (初期化式; 継続条件式; 増減式) {
    繰り返す実行する文;
}
```
(1)初期化式でカウント変数を初期化する代入式（最初の1回だけ実行される）

(2)継続条件式の評価結果がtrueなら処理を続け、falseなら終了（1回分の繰り返し処理の最初に毎回実行される）

(3)繰り返す実行する文を実行(継続条件式 の評価結果がtrueなら、実行される）

(4)増減式でカウント変数の値を増減させる計算式（1回分の繰り返し処理の最後に毎回実行される）

(5)ステップ(2)へ戻る

<br>

#### **例**
[sample8-1.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        for (var i = 1; i <= 10; i++) {
            document.write(i + "回繰り返し文です。<br>");
        }
    </script>
</body>
</html>
```
#### **実行結果**
1回繰り返し文です。  
2回繰り返し文です。  
3回繰り返し文です。  
4回繰り返し文です。  
5回繰り返し文です。  
6回繰り返し文です。  
7回繰り返し文です。  
8回繰り返し文です。  
9回繰り返し文です。  
10回繰り返し文です。

#### **例題の説明**
(1)変数iに１が代入される（初期化式）  
(2)iが10以下かどうか検証される（継続条件式）  
(3)iの値が画面に表示される  
(4)iに1加算される（増減式）  
(5)継続条件式の結果がfalseになるまで(2)～(4)を繰り返す

<br>

for文はカウントアップではなくカウントダウンすることも可能です。
#### **例**
[sample8-2.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        var a = 0;
        for (var i = 5; i >= 1; i--) {
            a++;
            document.write(a + "回繰り返し文です。" + "iの結果は"+ i + "<br>");
        }
    </script>
</body>
</html>
```
#### **実行結果**
1回目の繰り返し、iの結果は5です。  
2回目の繰り返し、iの結果は4です。  
3回目の繰り返し、iの結果は3です。  
4回目の繰り返し、iの結果は2です。  
5回目の繰り返し、iの結果は1です。

## **2.while文**
while文は```条件式```が```true```であるならば、反復処理を行います。
```
while (条件式) {
    実行する文;
}
```
while文の実行フローは次のようになります。 ```最初```から条件式がfalseである場合は、何も```実行せず```while文は終了します。

(1)条件式の評価結果がtrueなら処理を続け、falseなら終了

(2)実行する文を実行

(3)ステップ(1)へ戻る

次のコードではxの値が10未満であるなら、コンソールへ繰り返しログが出力されます。 また、実行する文にて、xの値を増やし条件式がfalseとなるようにしています。

#### **例**
[sample8-3.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        var i = 1;
        while (i < 10) {
           document.write(i + "回繰り返し文です。<br>");
            i += 1;
        }
    </script>
</body>
</html>
```
#### **実行結果**
1回繰り返し文です。   
2回繰り返し文です。  
3回繰り返し文です。  
4回繰り返し文です。  
5回繰り返し文です。  
6回繰り返し文です。  
7回繰り返し文です。  
8回繰り返し文です。  
9回繰り返し文です。  
<br>

#### **無限ループ**
反復処理を扱う際に、コードの書き間違いや条件式のミスなどから無限ループを引き起こしてしまう場合があります。
```
 var i = 1;
// 条件式が常にtrueになるため、無限ループする
while (i > 0) {
    document.write(i);
    i += 1;
}
```
<br><br>
## **3.do-while文**
do-while文はwhile文と殆ど同じですが実行順序が異なります。
```
do {
    実行する文;
} while (条件式);
```
do-while文の実行フローは次のようになります。

(1)実行する文を実行

(2)条件式 の評価結果がtrueなら処理を続け、falseなら終了

(3)ステップ(1)へ戻る

while文とは異なり、かならず最初に実行する文を処理します。
#### **例**
[sample8-4.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        var i = 1;
        do{
           document.write(i + "回繰り返し文です。<br>");
            i += 1;
        } while (i < 10)
    </script>
</body>
</html>
```
#### **実行結果**
1回繰り返し文です。  
2回繰り返し文です。  
3回繰り返し文です。  
4回繰り返し文です。  
5回繰り返し文です。  
6回繰り返し文です。  
7回繰り返し文です。  
8回繰り返し文です。  
9回繰り返し文です。

<br>

## **4.continueとbreak**
繰り返し文では、繰り返し処理から抜けるbreakと、 繰り返し処理の先頭に戻るcontinueというものがあります。

#### **例**
[sample8-5.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    <script>
        for (var i = 1; i <= 10; i++) {
            if (i == 3) continue;
            if (i == 7) break;
            document.write(i + "回目の繰り返しです！<br>");
        }
    </script>
</body>
</html>
```
#### **実行結果**
1回目の繰り返しです！  
2回目の繰り返しです！  
4回目の繰り返しです！  
5回目の繰り返しです！  
6回目の繰り返しです！

<br><br>
***

>**練習**
>>**問題**[ex8-1.html]

for文で1から20までの和を求めてください。

content

第8章 ループ

第8章　ループ