menu

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

H&Rブログ > JavaScript > 反復処理|1から始めるJavaScript#7

反復処理|1から始めるJavaScript#7

JavaScript

どうもRyokutyaです。
今回は反復処理について説明していきます。
少し難しですがしっかり覚えていきましょう!

while文

反復処理は同じ処理を何回も繰り返し行いたいときに使う文です。

while(条件式){

  条件式がtrueの時の処理

}

while文は()の中に条件式を書きます。
条件式がtrueの場合のみwhile文の中身に書いた処理が実行されます。
条件式がtrueである限り処理は繰り返し実行されます。

① let i= 1;

② while( i <= 10 ){

③   console.log( i ); 

④   i+=1;

}

①iには1が格納されています。
②1は10よりも小さいので条件式はtrueとなります。
③コンソールにiを表示(1が表示されます)
④i+1;のためi=1+1となるためiには2が格納されます。
while文は条件式がtrueの限りwhile文を抜けずに繰り返し処理を実行するため、また②からを繰り返し実行します。
②に戻る(ただしiには2が格納されています)
③コンソールにiを表示(2が表示されます)
④iに+1してiに格納(3が格納されています)
この繰り返しを行っていくとiは一回処理が終了すると1づつ増えていくためいずれiに格納される数字が10を超えます。
すると条件式がfalseになるためwhile文を抜けて処理が終了します。

do while

while文とよく似たものにdo while文があります。



  do{

     条件式がtrueの時の処理

  }while( 条件式 );

let i=1;

  do{

     console.log( i );

     i++;

  }while( i < 10 );

今回の例ではコンソールに1~9が順番に表示されます。
基本的にはwhile文と同じでwhile文を一回処理するごとにiに格納される数値が+1され条件式がfalseになるまで繰り返されます。

では一体while文とdo while文の違いは何なのでしょうか?

let i=10;

while( i < 10 ){

  console.log(i);

}

while文でこのcodeを書くと条件式がfalseとなるため、「条件式がtrueの時実行される処理」が一度も実行されることなくwhile文を抜けます。
つまり、コンソールに何も表示されません。

let i=10;

do{

     console.log( i );

     i++;

  }while( i < 10 );

do while文でcodeを書くと、条件式よりも先に「条件式がtrueの時実行される処理」がくるため少なくとも一回は処理が実行されます。
そのためコンソールには10と表示されます。

このようにdo while文は条件式がfalseであっても最低一回は処理を実行します。

for文

for( 変数;条件式;変数++){

  処理

}
for(let i=1; i<=10; i++){

  console.log(i);

}

基本的にwhile文と同じで条件式がtrueの間処理を繰り返します。
書き方がwhile文に比べると少し異なるので注意しましょう。
一行目に変数の定義と条件式、変数の更新を全て書きます。
変数の宣言の後と条件式の後は;(セミコロン)であることに注意してください。逆にiに+1するしき(増減式)の後ろに;はつきません。

while文は条件式の部分がtrueであれば繰り返すことができるため何回繰り返すか未定の場合に使うことが多いですが、for文は何回繰り返すか決まっているときに使うことが多いです。

入れ子構造

入れ子構造とはfor文の中にfor文があるような構造のことです。
for文に限らずif文など今まで説明してきた構文は入れ構造にすることができます。

for( let i=1; i<=10; i++ ){

  for( let x=1; x<=10; x++){

    console.log(i + "-" + x);

  }

}

このcodeを実行するとコンソールに表示される文字はどうなるかわかりますか?
一度ご自分で試してみてください。

①外側のfor文(オレンジ)から処理が始まります。
②iに1が格納されており条件式がtrueのため処理が実行されます。(青文字のfor文)
③中のfor文(青)の処理が実行されます。
④xに1が格納されているため条件式はtrueとなり「条件式がtrueの時実行される処理(for文(青)」が実行されます。
⑤処理が実行されコンソールに現在iに格納されている数値とxに格納されている数値が表示されます。(+"-"+は文字列の連結です。i-xとするとJavaScriptに計算式と認識されため"-"として-は文字列ですよと明示しています。前後の+は文字列とを連結するために記述しています。)
⑥for文(青)の条件式がfalseになるまで繰り返します。
⑦for文(青)の条件がfalseになるとfor文(青)を抜ける。
⑧for文(オレンジ)の条件式はtrueのままなのでfor文(オレンジ)を抜けずに最初に戻る
⑨i=2となり条件式がtrueとなり「条件式がtrueのときに実行せれる処理(for文(青)」が実行される(この時実行されるときfor文(青)はxが1から始まることに注意してくだい)
⑩この繰り返し処理が繰り返されiに11が格納されるまで処理が繰り返されます。

入れ子はいくつでも入れることができます。
入れ子にすることでより複雑な繰り返し処理やより複雑な条件分岐などを指定できます。
for文とif文の組み合わせるなどさまざまな使い方ができます。

終わりに

今回は少し複雑で難しいところもありましたが、今まで説明してきたものを組み合わせると簡単なゲームなども作ることができるレベルになります。
次回はif文やfor文を実際につかった簡単なミニゲームを紹介できたらと思います。
では今回はこのあたりで(^^)/

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ

はとむぎ

独学でプログラミングを勉強中、現在(2019年8月)はPHPを勉強しています。 WEBサイト制作(WordPress対応)をとりあえずの目標としております!! それとゲーム実況もやっております!見ていて楽しいと思ってもらえる放送をしたいと日々試行錯誤しております。

緑茶

2019年からフリーランスを目指して独学でwebデザインの勉強をしてきました。 相方のはとむぎと一緒にゲーム実況やブログの運営などをしています。 今後も相方と一緒に色々なことに挑戦していきたいです。

緑茶のカテゴリー

アーカイブ