【入門者向け】繰り返し処理を図解で学ぼう

一気に見ると大変なので、学習状況によって一つずつ見てくださいね。
一気見すると一瞬ですが、きちんと学習しようとすると、半日＋半日以上かかるつもりで読み進めてください。

目次

• 条件分岐編
• 繰り返し処理編（ここ）
• 配列・連想配列・オブジェクト編

for文を理解する前に、コードを分解してからフローチャートをみよう

for(i = 1; i <= 10; i++) {
  // ここに繰り返し実行したい処理
}

これを理解するためには、まず

i = 1
if(i <= 10){
  // ここに実行したい処理
}
i++(i = i + 1)

をそれぞれに理解する必要があります。
分解したコードをフローチャートで書くと

となります。
これをfor文にすると

このように変わります。
（mermaidで綺麗に描けなかったので、ちょっと良くない図になってしまいました）

本質的にはif文のフローチャートの流れで、Trueの時にもう一度処理を繰り返すのだ、と理解すればわかりやすいです。

while文とは？

for文と比較すると、

• 初期化がない
• 繰り返し処理が終了した時に毎度実施する処理がない

というのが大きな変化です。

これを念頭に置いて、コードをみます

while(i <= 10) {
  // ここに実行したい処理
}
// 繰り返し処理を抜けた後の処理

let i = 1;と、i = i + 1;がありませんね。
そのため、for文の構造や思想を理解してから、あえてforを使わないという選択肢が持てるようになって初めて使えるものだと認識しましょう。

do-while

let i = 1;  // 繰り返しをわかりやすくするため、敢えて書きます
do {
  // ここに実行したい処理1
  // わかりやすくするために複数処理を入れます
} while(i <= 10)

先ほどのwhile文との違い、繰り返し処理を１回実行してから判定をしています。
do-whileとwhileの違いで比較しやすいですが、for文とdo-whileで比較できるのが理想です。

どちらが良いのか？という表現ができるうちはforを使った方がいいです。
forで解決できないものをdo-whileで解決しましょう。

次の章へ

• 条件分岐編
• 繰り返し処理編（ここ）
• 配列・連想配列・オブジェクト編