3.7 コンソールでモンスターを倒せ！　《繰り返し(while)、代入演算子》　【JavaScript超入門】

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。

jsstudy.hatenablog.com

3.7　繰り返し　while
for文とwhile文の違い
- while文のカウンター
- 無限ループに気をつけて！
代入演算子
まとめ

3.7　繰り返し　while

(p.102)

前節ではfor文を使用しました。この実習ではもうひとつの繰り返し、while文を使用します。

whileの意味

whileの意味 - 英和辞典 Weblio辞書

発音記号・読み方 /(h)wάɪl(米国英語), wάɪl(英国英語)/

接続詞

…する間，…するうち，…と同時に

【用法】「動作や状態の継続している時間[期間]」を表わす副詞節をつくる; while の節中に進行形が多く用いられる;

We kept watch while they slept. 彼らが眠っている間私たちは見張りをした.

whileは「～する間」を意味し、発音はカタカナで書くと「ワイル」です。

アメリカ英語では、「(ホ)ワイル」（ホは弱い発音）とも発音するようです。

構文

developer.mozilla.org

while 文は、テスト条件が true に評価される間、指定された文を実行するループを作成します。
条件は文を実行する前に評価されます。

while (条件) {
  条件がtrueの間実行される文
}

サンプルコード

「index.html」というファイルを作り、以下の内容を書きます。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3-07_while</title>
</head>
<body>
    <h1>コンソールでモンスターを倒せ！</h1>
    <h2>繰り返しの回数をカウントする</h2>
    <p>戦闘の状況はコンソールでチェック！</p>
    <script>
        var enemy = 100;
        var attack;
        var count = 0;
        window.alert('戦闘スタート！');

        while (enemy > 0) {
            attack = Math.floor(Math.random() * 30) + 1;
            console.log('モンスターに' + attack + 'のダメージ！');
            enemy -= attack;
            count++;
        }
        
        console.log(count + '回でモンスターを倒した！');
    </script>
</body>
</html>

実行結果

「index.html」をChromeで開いて、コンソール画面を出します。

以下のような実行結果になりました。

f:id:jsstudy:20170422075925p:plain

「while」文によって、変数enemy（モンスターの体力）が0以上の間、攻撃（enemy -= attack; で減らす）が繰り返し実行されていることが分かります。

for文とwhile文の違い

その違いとは、「繰り返しの回数が初めから決まっているかどうか」です。

for文は、繰り返しの回数があらかじめ確定しているときに使いやすい
while文は、繰り返しの回数があらかじめ確定していないときに使いやすい

while文のカウンター

while文で、繰り返しの回数をカウントしたい場合は、カウンターの変数を別途用意しておきます。

→ whileのループを繰り返すたびに、カウントアップ（+1）すればOK

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3-07_while</title>
</head>
<body>
    <h1>繰り返しの回数をカウントする</h1>
    <script>
        var sum = 0; // 合計値
        var count = 0; // カウンター
        while (sum < 100) {
            count++; // カウントアップ
            sum = sum + count; // 加算
        }
        window.alert(count + '回繰り返し。合計値は' + sum);
    </script>
</body>
</html>
</html>

14回繰り返し。合計値は105

無限ループに気をつけて！

(p.108)

for文もwhile文も、条件式がtrueになるかぎり、延々と繰り返しを実行し続けます。

もし、プログラムを打ち間違えるか考え違いをして、常にtrueにしかならない条件式を書いてしまうと大変です。

繰り返し処理が止まらなくなるため、ブラウザが一切の反応を受けつけなくなることがあります。

ブラウザが反応しなくなったときは、強制終了するしかありません。

代入演算子

developer.mozilla.org

通常の演算を短縮した代入演算子があり、以下の表に示します。

名称	短縮表記した演算子	意味
代入	`x = y`	`x = y`
加算代入	`x += y`	`x = x + y`
減算代入	`x -= y`	`x = x - y`
乗算代入	`x *= y`	`x = x * y`
除算代入	`x /= y`	`x = x / y`
剰余代入	`x %= y`	`x = x % y`