読者です 読者をやめる 読者になる 読者になる

JavaScript勉強会

JavaScriptの学習日記

3.7 コンソールでモンスターを倒せ! 《繰り返し(while)、代入演算子》 【読書メモ】

JavaScriptの学習メモ。

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

 

jsstudy.hatenablog.com

 

 

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

 

と呼ばれています。

sum = sum + count;
sum += count;

この2つの式は同じ計算になります。

 

代入演算子を使うと、

  • 入力する文字数を減らせる
  • 入力ミスを減らせる

というメリットがあります。

逆に言えば、大したメリットでもないので、慣れないうちはわざわざ使わなくてもOK

 

まとめ

  • 繰り返し回数が確定しているときは、for文でOK
  • 繰り返し回数が確定していないときは、while文でOK
  • 無限ループにならないように条件を注意!
  • 加算代入演算子「+=」なども使うと、コーディングがちょっと楽になる?