Web プログラミング

【もりけん塾87記事】JavaScriptのループ、for文とwhile文のちがい

フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。

 

昨日はif文とfor文についてまとめていきました。

 

今日は

  • for文
  • while文

のちがいについてまとめていこうと思います。

 

繰り返しでよく使うと言われているfor文とwhile文のちがいについて以前も記載しましたが、自分自身の確認のために再度まとめていきます。

 

結論からいうと、

特徴
for文 繰り返し回数が決まっている
while文 繰り返し回数が決まっていない

上記のちがいが大きいようです。

 

他にもfor文とwhile文には書き方のちがいなどがあるので、

  1. for文とwhile文のちがい
  2. 無限ループを抜け出す方法

上記の順番でJavaScriptのループについてこの記事でまとめていきます。

 

for文とwhile文のちがい

冒頭で説明したとおり、for文とwhile文の大きなちがいは繰り返す回数が決まっているかどうかでした。

 

使い分けはJavaScriptを使っていくうちに理解できて来るようですがブログ記事を例に挙げると

  • for文:新着記事
  • while文:カテゴリー記事

などのように使い分けることが可能なようです。

 

while文は設定済の条件だけを指定して処理を実行したい場合に利用することが可能なようなので、カテゴリーをすでに指定しているようなものに最適なのかもしれません。

 

ねこらのん

 

という感じに今なっているので(笑)

 

どういった構文を書いて、なぜ条件を指定できる方がwhileのほうがカテゴリー分けに適しているのかをまとめながら見ていこうと思います。

 

for文

まずはfor文について。

 

  1. 書き方
  2. 流れ
  3. 使い方
  4. 注意点

 

この流れでまとめていきます。

 

書き方

JavaScriptのfor文の書き方。

 

 JavaScript
for (初期化式; 条件式; 加算式もしくは更新式) 文

 

この読み方や流れについて次でご紹介していきます。

流れ

 JavaScript
for (初期化式; 条件式; 加算式もしくは更新式) 文

 

上記の流れについて説明していきます。

 

  1. 初期化式が最初に1回実行
    (ループスタート)
  2. 条件式が評価される
    (trueの場合にループ本体の文が実行)
  3. 加算式もしくは更新式が実行
    (値を一定数を増減させる式)
  4. 条件式に戻る

 

上記のような流れでfor文の繰り返しが実行されていくようです。

 

ちなみに実際に使った構文の例として、

 JavaScript
for (var i = 0; i < 10; i++){
document.write(i, '<br/>';
}

引用:独学JavaScript,p77,高橋和也,竹添直樹,里見知宏 著

上記のものがあります。

 

  • 初期化式→var i
  • 条件式→i < 10
  • 加算式もしくは更新式→i++
  • 文→document.write(i, '<br/>'

となっています。

 

初期化式でiを変数定義し、条件式でiは10より小さいことを条件づけし、加算式もしくは更新式によってiに1づつ加算していき、それをdocumentにwriteしていく。

 

ここで<br/>(ブレイク)があるのでループにならないように、

0
1
2
3
4
5
6
7
8
9

上記のような状態で終わらすことを意味していきます。

 

for文の流れをここまでで説明していきました。

 

次は使い方についてです。

 

使い方

for文の使い方についてまとめていきます。

 

for文は

  • 繰り返す回数が分かっている処理
  • 2行目だけで繰り返し回数がわかる
  • falseになるまでの繰り返し
  • break文を使う
  • continueを使う

のうような使い方があります。

 

下2つについては後述していきます。

 

また、for文にはfor/inやfor/ofがあるのでそれぞれまとめていきます。

for/in

for/inの書き方については下記のとおりです。

 

 JavaScript
for (変数名in オブジェクト名)文

 

 

メモ

オブジェクトとはさまざまなデータ型のデータ値の集合体のこと。

オブジェクトの中にプロパティとメソッドがある。

  • プロパティ:状態や属性を表すもの
    例.名前、性別など
  • メソッド:プログラムを動かすもの、やることリスト

 

 

for文とのちがいは制御変数がいらないこと。

 

ねこらのん
制御変数…?

 

ちょっとわからないので、実際の記載例を見てみます。

 JavaScript
for season = ['Spring', 'Summer', 'Fall', 'Winter'];
for (var prop in season) {
document.weite(season[prop], '<br/>');
}

引用:独学JavaScript,p80,高橋和也,竹添直樹,里見知宏 著

 

上記を見る限り違う部分は、

 

  • 初期化式
  • 条件式
  • 加算式もしくは更新式
  • for文の中にある変数名後「in」

 

このあたりが違うと思いました。

 

ただ不明点は、

  • いつ使うものか
  • グループ配列に適しているのかな?

など分からないところが多いです…!

 

調べると

  • 順不同で良いもの

などに使えるようです。

 

ただfor/ofにも同じことが言えるようなので、続いてfor/ofについて調べていきます。

 

for/of

for/ofの書き方については下記のとおりです。

 

 JavaScript
for([プロパティの値を格納する変数] of [反復可能なオブジェクト]) {
文
}

 

for/in文とのちがいはofの後が反復処理が可能なオブジェクトのみを使えるということ。

 

ねこらのん
反復処理…?

 

ちょっとわからないので、実際の記載例を見てみます。

 JavaScript
var sum = 0;
var array = [1, 3, 4, 7];
for(var value of array) { // オブジェクトの中のプロパティ名を取り出す。
sum += value;
}

引用:javascript-for#for-inオブジェクトのプロパティ名についての繰り返し

 

上記を見る限り違うfor/in部分は、

 

  • inの部分がofになっているところ

 

このあたりが違うと思いました。

 

ただ不明点は、

  • 反復処理ができるものはreturnなどかな?
  • 具体的に何に使うものなんだろう

など分からないところがあります!

 

なので実際にJavaScriptを書いて動かす方がわかりやすいのかもしれません…

注意点

古いブラウザのバージョンは対応していないため、Array.forEachを使う必要があるようです。

 

Array.forEachは配列の要素を先頭から順番にコールバック関数(関数の呼び出しが戻される)へ渡し、反復処理を行うメソッド(プログラムを動かすもの)です。

 

このあたりがわからないですが、古いバージョンでは使えないからArray.forEachを使う必要がある。

コードを書いて分からなければググって実際にどう動くか見るということで前に進めそう…

while文

続いてwhile文について。

 

  1. 書き方
  2. 流れ
  3. 使い方
  4. 注意点

 

この流れでまとめていきます。

 

書き方

JavaScriptのwhile文の書き方。

 

 JavaScript
while(条件式)文

 

この読み方や流れについて次でご紹介していきます。

使い方

while文の使い方についてまとめていきます。

 

while文は

  • 複雑な前処理や後処理が必要な反復処理が必要な場合
  • 条件式しか与えられない
    →ループ抜け出しは内部で増減式を記述する必要あり

のうような使い方があります。

 

forより分からないですが…while文は繰り返す回数が決まってないということで複雑な処理も可能だよということかな?

 

 

while文にはdo/whileがあるのでそれぞれまとめていきます。

 

do/while文

do/while文の書き方については下記のとおりです。

 

 JavaScript
do{
文
}while (条件式);

 

do/whileはループ最後で繰り返し条件を判定するもの

 

繰り返し処理が前か後かで処理スピードが関わってくるかな?

 

ループの繰り返し条件が最後にあるから少なくとも1回はループの本体実行がされる、これfor文でもあったような…?for文とwhile文を書き換えることができるってことかな^^!

 

実際の記載例を見てみます。

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

引用:独学JavaScript,p84,高橋和也,竹添直樹,里見知宏 著

 

1回処理させるかさせないか条件によって決まるようです。

 

while文とdo/whileの大きなちがいは一旦処理を実行するかどうか。一旦処理を実行したい場合はdo/whileを使うこと。

 

無限ループを抜け出す方法

今回、抜け出す方法がなければ永遠のループに陥ってしまうforとwhileについてまとめていきました。

 

抜け出す方法は

  • break:抜け出し
  • continue:スキップ

の2つがあるようなのでこちらもまとめていきます。

 

break文

ループの制御文として使うbreakについて。

 

  1. 書き方
  2. 流れ
  3. 使い方
  4. 注意点

 

この流れでまとめていきます。

 

書き方

 JavaScript
break;

これだけ!

流れ

抜け出したいときの文の下に記載するようです。

使い方

実際の使い方を見ていきましょう。

 

 JavaScript
for(var i = ; i < 100; i++){
document.write(i, '<br/>');
if(i == 10){
break;
}
}

引用:独学JavaScript,p88,高橋和也,竹添直樹,里見知宏 著

 

10の数字までいったらbreakすることが記載されたもの。

 

注意点

ラベルの有無によってもコードの書き方が違うようです。

 

メモ

ラベル名はJavaScriptで利用可能な識別子を設定。

識別子はユーザーが定義する名称のもので英字、数字、_、$が使えるものです。

 

ラベル名があるbreakの書き方は以下のとおりです。

 JavaScript
break outDoor;

改行せずに記載することがポイント!

 

continue文

ループの制御文として使うbreakについて。

 

  1. 書き方
  2. 流れ
  3. 使い方
  4. 注意点

 

この流れでまとめていきます。

 

書き方

 JavaScript
continue;

これだけ!

 

流れ

スキップしたいものの次に記載すること。

 

使い方

使い方は以下のとおりです。

 

  • while文
  • do/while文
  • for文
  • for/in文

このいづれかのループ内のみで利用可能。

 

continue以下の文をスキップして上に記載している条件へ戻りまたループする形になります。

 

つまりcontinueの下にあるものをスキップしている状態です。

 

注意点

注意点はbreakと同様でラベルがあるときは改行しないこと。

 

おわりに

for文とwhile文の大きなちがいは繰り返す回数が決まっているかどうかでした!

 

まとめはしたものの実際に問題を解くか、コードを打たないとわからないのですごろくに戻ってさっそくやってみようと思います^^!

 

whileでもforでもできそうだけど、回数が決まっていないすごろくを作りたいのでwhileが適してそうです!

勉強の感想

久しぶりにちゃんとしたブログを書いた気がする…!

 

性格的に「はやくしなきゃ、ちゃんとしなきゃ」が最初の内に出ちゃうtypeだから、ゆっくり落ち着いて急がば回れでゆっくり基礎を固めていくと思って今日はまとめることができたので、以前よりは理解度も上がった気がする。

 

丁寧って大事…大事ーーーーーー

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada