Ne:Code道場～JavaScript 繰り返し処理の巻～

はじめに

この記事ではJavaScriptの繰り返し処理について、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、繰り返し処理について理解を深めてゆきましょう。

ぐるぐる繰り返すってどういうことニャ

上から順番に実行されるコード、条件分岐によってルートが変わるコード、これらに追加して、今回は特定の区間を特定の条件まで繰り返し行うコードについて学びます。 「１から100まで」、という様に言葉でいうと簡単ですが、現実は100個ぶんの数値に対する処理が必要になりますよね。 その結果100行の処理を書かなければならないとなったら、手の腱鞘炎待ったなしですよね。しかも途中で数字を書き間違えてしまっていても、気づくのは結構難しいと思います。 「1から100まで」、言葉でいうと簡単なことを、JavaScriptで書くときも簡単に書く方法があります。 今回は繰り返し処理として、while文、for文を取り上げます。 まずはそれぞれの基本文法から見てゆきましょう。

while文の基本文法について教えてほしいニャ

while文の「いつも書くワンセット」はこちら。

while () {
　
}

if文のそれと、よく似ていますね。 whileの後の丸カッコの中に書けるものも、ifの後の丸カッコに書いていたものと全く同じです。丸カッコの中身は条件式と呼ばれていて、「結果がBoolean（真偽値）になるもの」であり、「真偽値はtrue・falseのどちらかの値で、条件式の結果の真偽値がtrueとなった時だけ、その条件式の後のブロック（波括弧の中身の処理）が実行」されるということを、if文の記事でも取り上げましたね。 動きも全く同じです。 while文も条件式の結果がtrueになるときに、条件式の後のブロックが実行されます。 if文との違いは、このブロックはハムスターの回し車のように下の波括弧（}）に到達した際に、もう一度while文の丸カッコの条件式まで戻ってくるという動きをします。 この条件式の結果がfalseになったら、その後のブロックは実行されず、while文の処理を抜けてゆきます。

while文の具体例教えてほしいニャ

例えば、while文で「1から3までの数字を出力する」という、繰り返し処理を行う場合は以下のように書きます。

// ①
let i = 1;
// ②
while (i <= 3) {
　console.log(i);
　// ③
　i++;
}

whileの先頭で宣言している変数は何ニャ？

まず、①です。「1から3まで」を実現するために、何回目という情報を持つ、「i」という変数をwhile文の上で宣言しています。 そのiには、「1から」を加味して、「1」という値を代入しています。 何回目という情報を持つ変数を宣言し、繰り返したい回数の最小値を代入している、とも言えますね。

whileの条件式はどう書けば良いニャ？

次に、②です。「3まで」を加味して、条件式は、「i <= 3」と記載しています。 もちろん、「i < 4」でも良いですよ。ただ、この場合、「4より小さいから3かな？」という脳内変換が必要になりますよね。 好みにもよるかもしれませんが、そのままの数値を読むことができる「i <= 3」の方の書き方だと、その変換なくするっと読めるのが特徴ですね。 iの値が3以下である限り実行されるwhile文になっていますね。

whileの最後で行っている処理は何ニャ？

最後に、③です。while文のブロックの終了間際で、何回目という情報を持っているiという変数をインクリメント、つまり、中身を一つ増やしています。 ③の処理が実行されることでiの中身は1から1つ増えて2に変わります。 この処理があるからこそ、iの中身が変わり、「iの値が3以下である限り実行されるwhile文」の終わりが見えてきますね。iが4まで増えたら、whileの条件式の結果がfalseになり、繰り返し処理は終了されます。

for文の基本文法について教えて欲しいニャ

では、次にfor文の基本文法についてみてゆきましょう。 for文はwhile文に比べて書くものが多く、最初は身構えてしまうかもしれません。ですがwhile文との対比で確認してみると、把握しやすいです。 for文の「いつも書くワンセット」はこちら。

for (;;) {
　
}

if文やwhile文との大きな違いは、まず、丸カッコの中に涙目（；；）が存在していることですね。 丸カッコの中身は、このあとwhile文との比較で順を追ってみてゆきましょう。

while文で書いていたのをfor文に置き換えると、どうなるニャ

// ①
let i = 1;
// ②
while (i <= 3) {
　console.log(i);
　// ③
　i++;
}
// ①; ②; ③
for (let i = 1; i <= 3; i++) {
　console.log(i);
}

①の変数を宣言、for文の場合は、1つ目の涙目（セミコロン）の左に書きます。 この①の部分は、繰り返しの一番最初だけ実行されます。 なので、iという変数が何度も作られるというわけでは無いのですね。 while文の場合は文の上に、for文の場合は丸カッコの先頭に書いている①、意味合い（何回目を管理する変数）と動き（繰り返し前に一回だけ実行される）は全く同じものになります。 for文でも②の条件式が繰り返すかどうかの判断に用いられます。 そして、最後の③。for文だと丸カッコの中に横並びで書いてあるので、あたかも②の後に実行されそうな雰囲気ですが、これはwhile文の③と同じ、つまり繰り返し処理の最後に実行される処理になります。

for文とwhile文、どう使い分ければいいニャ？

先程の例で、全く同じ、1〜3までを繰り返すという処理をwhile文とfor文とで記載しました。 なので、どちらの繰り返し処理を用いても、目的とする処理を書けるという場合は、基本はどちらを用いても構いません。自分にとって、わかりやすいほうで書くと良いでしょう。 ただ、どちらも同程度にわかりやすい、という様に、繰り返し処理への習熟度が深まっている場合は、上記の例でしたら、for文の方で記載したほうが、for文の旨味を活かせると思います。 実際、while文で記載していた時の行数よりも、for文で記載した行数の方が少ないですよね。 また、この先取り上げる変数のスコープ（変数の利用範囲）でも、for文に軍配が上がります。 while文では、変数iはwhile文の後でも利用できてしまいますが、for文の変数iを利用できるのは、for文の波カッコの中だけです。 for文は今回のような、下限と上限が決まっていて、その間を繰り返し処理してゆく、という場合に最適な文法なんですね。

下限〜上限が決まってない繰り返しではどうするニャ

その場合はwhile文を用いるといいですね。 例えば、サイコロを何回かふって、出た目の合計が15を超えたら、サイコロをふるのをやめる、という処理の場合、何回サイコロをふることになるのかはやってみないとわからないですよね。

// サイコロの出目の合計だニャ
let sum = 0;
while (sum < 15) {
　// サイコロをふり、出た目（1〜6までの数）を合計に加算してるニャ
　sum += Math.floor(Math.random() * 6) + 1;
}

出た目を合計に加算している箇所について補足します。

sum += Math.floor(Math.random() * 6) + 1;
// sum += ① + ②;
// ① 0〜5までのランダムな数を取得してるニャ
// ② 欲しいのは1〜6までだから、1足してそうなるようにしてるニャ
// 「sum += サイコロの目」で、sumに出目を足し込んでゆくニャ。「sum = sum + サイコロの目」と同じ意味ニャ

最後に

繰り返し処理、for文、while文について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

1. 繰り返し処理を活用することでコードがシンプルになるニャ
   1. 「○から□までの数字を出力する」というのは、もちろんセッセと手書きでも書けるニャ。でもそれは茨の道ニャ。確実に間違えそうニャ。。
   2. 繰り返し書く位なら、繰り返し処理をJavaScriptにお願いして楽したいところニャ
2. 条件式の動きはif文の時と同じニャ
   1. 一番間違いが紛れ込みかねない部分だニャ
   2. 動作がおかしい時はまずこの部分が正しいかどうかをチェックしてみるのもありニャ
3. 使いドコロを把握しつつ、繰り返し処理を用いてゆくニャ
   1. 処理に下限や上限があるならfor文、特定の条件まで回数関係なく行いたいならwhile文、それぞれの特性を活かしてゆくニャ

今回とりあげた繰り返し処理、プログラミングのイロハ（順次・条件分岐・繰り返し）を一旦は順を追ってみてゆくことができました。 人間ならば1〜100を数え上げるのには苦労しますが、JavaScriptにとっては朝飯前です。そんなプログラミング言語にとっての得意領域を活かしながら、繰り返し処理ならではの書き方に一歩一歩慣れてゆきましょう。するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。 繰り返し処理への理解をしっかり身につけつつ、今後の学習に繋げてゆきましょう。