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

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

 

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

 

今日は

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

 

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

 

結論からいうと、

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

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

 

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

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

 

for文とwhile文のちがい

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

 

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

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

 

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

 

 

という感じに今なっているので（笑）

 

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

 

for文

まずはfor文について。

 

 

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

 

書き方

JavaScriptのfor文の書き方。

 

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

 

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

流れ

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

 

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

 

 

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

 

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

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

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

上記のものがあります。

 

となっています。

 

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

 

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

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

 

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

 

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

 

使い方

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

 

for文は

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

 

下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/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部分は、

 

 

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

 

ただ不明点は、

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

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

 

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

注意点

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

 

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

 

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

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

while文

続いてwhile文について。

 

 

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

 

書き方

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についてまとめていきました。

 

抜け出す方法は

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

 

break文

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

 

 

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

 

書き方

 JavaScript
break;

これだけ！

流れ

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

使い方

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

 

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

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

 

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

 

注意点

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

 

 

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

 JavaScript
break　outDoor;

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

 

continue文

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

 

 

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

 

書き方

 JavaScript
continue;

これだけ！

 

流れ

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

 

使い方

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

 

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

 

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

 

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

 

注意点

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

 

おわりに

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

 

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

 

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

勉強の感想

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

 

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

 

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

 

もりけん塾（@terrace_tech）

 

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