未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる

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

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

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

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

目次

マンガJavaScript第7話のまとめ

ループ処理

つるぴよ
つるぴよ
同じことを何度も繰り返す処理のことを「ループ処理」というよ!今回は「for」文を学びます
\「for」文で行う処理/
①実行回数を表す変数を用意する
②1回処理するごとに、その変数の値を1増やす
③指定の回数処理を行ったら、変数の値を確認する。
④指定の回数処理を行ったら、処理を終了する
例えば「つるぴよ」という単語を1000回繰り返す処理を行うとします。
「◯回目:つるぴよ」という形で表示されるようにするなら以下のように書きます
<script>
      for (var i = 1; i <=1000; i++) {
        document.write(i + "回目:つるぴよ");
      }
 </script>

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

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

つるぴよ
つるぴよ
これから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」は1増加して1になります。そのため末尾の
i > 0が「真」になるのでループ内の処理は継続されます。
そこで注意!「i」はずっと0より大きくなってしまうのでループ処理が永遠に続いてしまいます。かなりパソコンに負荷がかかるので行わないように気をつけましょう!!

第7話はループ処理について学びました

ここまでのまとめです!
・ループ処理では「for」文を使う
・ループ処理内での特殊な命令
 「break」「continue」「ラベル」
・「for」以外のループ文
 「while」「do while」

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア(@terrace_tech)のフォローは👇

フォローはこちら

目次