【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！③

2020年9月6日2020年9月7日

前回の続きです。
引き続きマンガJavaScriptを読んでいて覚えたいことや気になったことをまとめていきます！

[blogcard url=”https://tsurupiyoblog.com/moriken-javascript-2″]

学習ロードマップはこちら

JavaScriptの学習方法

1. マンガJavaScript読む
2. 改訂新版JavaScript本格入門読む
3. Webページで使われているような部品をJSで作る(タブ、フォーム、ドロワーメニュー、スライドショー、オリジナルゲームを作る、検索ボックス、ページネーション)
4. APIリクエストで得たデータでコンテンツを作る

— フロントエンドエンジニア (@terrace_tech) June 30, 2020

マンガJavaScript第７話のまとめ

ループ処理

つるぴよ

同じことを何度も繰り返す処理のことを「ループ処理」というよ！今回は「for」文を学びます

＼「for」文で行う処理／
①実行回数を表す変数を用意する
②１回処理するごとに、その変数の値を１増やす
③指定の回数処理を行ったら、変数の値を確認する。
④指定の回数処理を行ったら、処理を終了する

例えば「つるぴよ」という単語を１０００回繰り返す処理を行うとします。
「◯回目：つるぴよ」という形で表示されるようにするなら以下のように書きます

<script>
      for (var i = 1; i <=1000; i++) {
        document.write(i + "回目:つるぴよ");
      }
 </script>

①「var i = 1;」→変数の初期化を行う
②「i <= 1000;」→条件式が「真」の間、「（）」内の処理を繰り返します。
③「i ++」→１回処理が終わるごとに変数「i」の値を「１ずつ」増やす。

ループ処理内での特殊な動作

つるぴよ

これから3つの命令について説明していきます！「break」「continue」「ラベル」

①「break」とは？

ループ処理を終わらせる時に使用する

<script>
   for(var i =0; i < 10; i++) {
     if(i==7) {
     // 変数が「i」が「7」ならループを抜ける
      document.write(i + "finish!<br>");
      break;
     }
     document.write(i + "<br>");
     }
</script>

結果
0
1
2
3
4
5
6
7finish!

②「continue」とは

ループ処理を終了して｢for(〜)」の行に戻る

<script>
      for(var i =0; i < 10; i++) { //*1
        if(i == 7) {
          // 変数「i」が「7」なら、
          // 「*2」以下を処理せず「＊1」に戻る
          document.write("skip!<br>");
          continue;
        }
       // *2
       document.write(i + "<br>");
      }
      </script>

結果
0
1
2
3
4
5
6
skip!
8
9

③「ラベル」とは

「ラベル」は「break」と「continue」と組み合わせて使います。
「for」が入れ子になっている時は「break」や「continue」は内側の「for」にきく

<script>
      for (var i =0; i < 10; i++) { //*1
       for(var j =0; j <10; j++) { //*2
        if(j == 7) {
          // 変数「j」が「7」なら
          // 「＊2」のループを抜ける
          document.write(i + "-" + j +"finish!<br>");
          break;
        }
        document.write(i + "-" + j + ",");
       }
      }
    </script>

結果
0-0,0-1,0-2,0-3,0-4,0-5,0-6,0-7finish!
1-0,1-1,1-2,1-3,1-4,1-5,1-6,1-7finish!
2-0,2-1,2-2,2-3,2-4,2-5,2-6,2-7finish!
3-0,3-1,3-2,3-3,3-4,3-5,3-6,3-7finish!
4-0,4-1,4-2,4-3,4-4,4-5,4-6,4-7finish!
5-0,5-1,5-2,5-3,5-4,5-5,5-6,5-7finish!
6-0,6-1,6-2,6-3,6-4,6-5,6-6,6-7finish!
7-0,7-1,7-2,7-3,7-4,7-5,7-6,7-7finish!
8-0,8-1,8-2,8-3,8-4,8-5,8-6,8-7finish!
9-0,9-1,9-2,9-3,9-4,9-5,9-6,9-7finish!

「for」文に「ラベル」をつけると、その「for」文を「break」や「continue」の対象にできる

<script>
      // 「＊1」の「for」文に
      // 「outer」という「ラベル」をつける
      outer:
      for(var i =0; i < 10; i++) { //*1
       for(var j =0; j < 10; j++) {  //*2
        if(j == 7) {
          // 変数「j」が「7」なら
          // 「outer」という「ラベル」がついた
          // 「*1」のループを抜ける
          document.write(i+"-"+j+"finish!<br>");
          break outer;
        }
        document.write(i+"-"+j+",");
       }
       }
    </script>

結果
0-0,0-1,0-2,0-3,0-4,0-5,0-6,0-7finish!

「//*2」は内部の「for」文にも関わらず「finish!」と出力した時点で処理が終了します。
理由は「outer」というラベルで指定した「for」文を「break」の対象として外側の「for」文を一気に抜けるからです。

「ラベル」の末尾は「：」（コロン）です！※「;」（セミコロン）ではないので注意！

その他のループ文

つるぴよ

「for」以外のループ文には①while②do whileがあるよ！
「for」との違いは「変数の初期化」と「変数の増減」を省略したような形になっているところです！

①while文の一例

<script>
     var i = 0;
     while(i < 10){
       document.write(i + "-");
       i++;
    }
</script>

結果
0-1-2-3-4-5-6-7-8-9-

②do while文の一例

<script>
     var i =0;
     do {
       document.write(i + ",");
       i++;
     } while(i < 10);
</script>

結果
0,1,2,3,4,5,6,7,8,9,

どちらも似たような結果が出たけど‥
結局違いはなんなの？？

ねこまる

つるぴよ

条件判断のタイミングが違うよ！

①while‥最初に条件判断をしてから、ループ内の処理をおこなう
②do while‥最後に条件判断をしてから、ループ内の処理をおこなう次のように場合は結果が変わってきます。

<script>
     var i =0;
     while(i >0) {
       document.write(i+",")
       i++;
     }
 </script>

結果　処理は行われない

理由→変数「i」は「0」なので 0 > 0 は間違っているので、i > 0は「偽」となりループ処理は行われません。

<script>
    var i =0;
    do {
      document.write(i +",");
      i++;
    } while(i > 0);
 </script>

結果　ループ処理が永遠に終わらない

理由→先にループ処理が行われるので、「i」は１増加して１になります。そのため末尾の
i > 0が「真」になるのでループ内の処理は継続されます。
そこで注意！「i」はずっと０より大きくなってしまうのでループ処理が永遠に続いてしまいます。かなりパソコンに負荷がかかるので行わないように気をつけましょう！！