JavaScript勉強会

JavaScriptの学習日記

3.6 1枚、2枚、3枚…と出力する　《繰り返し(for)、インクリメント演算子、文字列連結》　【JavaScript超入門】

JavaScript 読書メモ

JavaScriptの学習メモ。

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

 

jsstudy.hatenablog.com

 

 

3.6　繰り返し　for

(p.95)

この実習では「繰り返し」を紹介します。

繰り返しとは、同じような処理をひたすらコンピュータにさせることで、JavaScriptにはそのための文法が用意されています。

繰り返しにはいくつかの方法がありますが、今回はそのうちのひとつ、for文を使用します。

 

サンプルコード

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

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3-06_for</title>
</head>
<body>
    <h1>1枚、2枚、3枚…と出力する</h1>
    <p>コンソールを開いてください。</p>
    <script>
        for (var i = 1; i <= 10; i++) {
            console.log(i + '枚');
        }
    </script>
</body>
</html>

 

実行結果

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

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

f:id:jsstudy:20170417184858p:plain

 

「for」文によって、作業が10回繰り返されていることが分かりました。

 

繰り返しのfor文

for文は、指定した回数だけ、{ ～ } 内に書かれた処理を繰り返し実行します。

繰り返し回数の指定は、forに続く()の中で行っています。

for文の()内には、

  1. 初期化
  2. 繰り返し条件
  3. 実行後の処理

の３つをセミコロン「;」で区切ってこの順番で書きます。

 

for (var i = 1; i <= 10; i = i + 1) {
    console.log(i);
}
  1. 初期化：　var i = 1;
  2. 繰り返し条件：　i <= 10;
  3. 実行後の処理：　i = i + 1
  4. 実行内容 ：　console.log(i);

 

for文の詳細は、以下のページで説明されています。

developer.mozilla.org

 

インクリメント（増加）とデクリメント（減少）の演算子

「i = i + 1」は「i++」と書くこともできます。

この「++」という記号は、インクリメント演算子といいます。

 

i = i + 1

は

i++

と同じ。

 

developer.mozilla.org

 

インクリメントとデクリメント

接尾/接頭辞のインクリメント演算子と接尾/接頭辞のデクリメント演算子です。

  • A++　　接尾辞インクリメント演算子
  • A--　　接尾辞デクリメント演算子
  • ++A　　接頭辞インクリメント演算子
  • --A　　接頭辞デクリメント演算子

 

「++」の位置は、変数「i」の

  • 前に書く方法「++i」　（前置）
  • 後に書く方法「i++」　（後置）

の2種類が用意されており、ちょっとだけ動作に違いがあります。

 

qiita.com

 

++iは返り値としてインクリメント後の値を返す

i = 1;
j = ++i;
(i is 2, j is 2)


i++は返り値としてインクリメント前の値を返す

i = 1;
j = i++;
(i is 2, j is 1)

 

上記の例で、変数「j」の値に注目してください。

j = ++i; の場合は、iを増加(iは2)させた後、jにi（iは2）を代入してます。

j = i++; の場合は、jにi（iは1）を代入した後、iを増加(iは2)させてます。

どちらも結果的に、iは増加されてiが2になるのですが、増加と評価の時期に違いがあります。

 

  • 前置（++i）は、先に増加（++）→次に評価（i）の順番なので、i=2と評価される
  • 後置（i++）は、先に評価（i）→次に増加（++）の順番なので、i=1と評価される

評価されたときの値が代入に使われています。

見た目の位置で、増加と評価のタイミングを覚えましょう。

慣れない間は、インクリメント演算子を使わないで「i = i + 1;」と書いた方が無難です。

 

デクリメント演算子の「--」も同様の動作をします。

「++」や「--」は、慣れると短く書けるので便利ですが、使い方を間違えるとバグの原因になるので気をつけましょう。

（短く書けるって言ったって、そんな大差ないじゃん？）

 

インクリメント演算子の注意点

  • 代入を伴わない　for文の「実行後の処理」のように、増加させたいだけ
  • 代入を伴う　j = ++1;のように、増加と代入を同時に行う場合は増加と評価のタイミングを考慮

→代入を伴わない場合は、気軽に使ってOK

 

サンプルコード

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3-06_increment</title>
</head>
<body>
    <h1>インクリメント（増加）とデクリメント（減少）の演算子</h1>
    <p>コンソールを開いてください。</p>
    <script>
        var i;
        var j;

        //++iは返り値としてインクリメント後の値を返す
        i = 1;
        j = ++i;
        console.log('i=' + i);
        console.log('j=' + j);
        // (i is 2, j is 2)

        //i++は返り値としてインクリメント前の値を返す
        i = 1;
        j = i++;
        console.log('i=' + i);
        console.log('j=' + j);
        // (i is 2, j is 1)
    </script>
</body>
</html>

 

実行結果

f:id:jsstudy:20170417193016p:plain

変数「j」の値を見ると、増加と評価のタイミングに違いがあることが分かります。

 

文字列連結

「+」には、数字と数字を足し合わせる機能があります。

「+」には、文字列と文字列をくっつけて、新しい文字列を作る機能もあります。

文字列と文字列をくっつける処理を「文字列連結」といいます。

 

developer.mozilla.org

 

加算 (+)

加算演算子は数値の合計または文字列の連結を行います。

 

// Number + Number -> addition
1 + 2 // 3

 

// String + String -> concatenation
"foo" + "bar" // "foobar"

 

まとめ

  • 回数を指定して繰り返すときは「for」文を使えばOK
  • for文では、「i = i + 1」を「i++」と書いてOK（2文字節約できるｗ）
  • 文字列連結は「+」でOK

 

 

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)