for文がよくわかりません

Question

何が起きているのですか

for (int j = 1; j < 11; j = j + 1) {
for (int i = 1; i < 11; i = i + 1) {
rect((i-1) * 10, (j-1) * 10, 8, 8);
}
}

正方形が大量に並ぶ理由を知りたいです。
これを書き換えて正方形を階段状に並べたいです。

ソースコードprocessing

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

Comments

[Zuishin]

正方形を 10 個並べるのを 10 回繰り返しているからです。

Answer 1

for は繰り返しを行うための構文です。

１　まず、外側の for 文について考えてみましょう。

for (int j = 1; j < 11; j = j + 1) {

} 

まず、int j = 1; で最初に int 型の整数 j が宣言され、1 に初期化されます。

次の j < 11; は繰り返しの継続条件で j が 11 より小さい間は、処理が繰り返されるということです。

j = j + 1 は、１回内側の処理が終わったたびに j に j+1 を代入しています。

結果、jは、1,2,3 ... 10 まで変化し、11 になった時点で終了します。

２　次に内側の for 文について考えてみます。

  for (int i = 1; i < 11; i = i + 1) {

  }

これは、最初に int 型の変数 i を 1 に初期化し、i < 11 の間は繰り返し、１回内側の処理が終わったたびに i に i+1 を代入します。

結果、i は、1,2,3 ... 10 まで変化し、11 になった時点で終了します。

３　これらを組み合わせて rect((i-1) * 10, (j-1) * 10, 8, 8); がどのように処理されていくのかをトレースしてみます。

まず、最初に j=1 で

  for (int i = 1; i < 11; i = i + 1) {
    rect((i-1) * 10, (j-1) * 10, 8, 8);
  }

の処理が実行されます。

最初、j=1、i=1 で rect() が実行されるので rect((1-1) * 10, (1-1) * 10, 8, 8); が実行されることになります。

次は、j=1、i=2 で rect() が実行されるので rect((2-1) * 10, (1-1) * 10, 8, 8); が実行されます。

以下、同様に次のように動いていきます。

j=1、i=3 →　rect((3-1) * 10, (1-1) * 10, 8, 8);

（i=4 から i=9 を省略します。）

j=1、i=10 →　rect((10-1) * 10, (1-1) * 10, 8, 8);

次に j=1、i=11 になりますが、内側の for 文の継続条件に合わないため、j=1 の処理が終了してて、j=j+1 が実行され、j=2 の処理に移ります。

j=2、i=1 → rect((1-1) * 10, (2-1) * 10, 8, 8);

j=2、i=2 → rect((2-1) * 10, (2-1) * 10, 8, 8);

（以降は省略）

以上のような処理が繰り返されることで正方形がたくさん、作られます。

【階段を作る一例】

for (int j = 1; j < 11; j = j + 1) {
  for (int i = 1; i <= j; i = i + 1) {
    rect((i-1) * 10, (j-1) * 10, 8, 8);
  }
} 

上記のように変更すると以下のような絵になります。

これが理解出来たら、左右反対にするには、どうすればよいのか、考えてみましょう。

Comments

[退会済みユーザー]

分かりやすい解説に加えて問題までだしていただきましてありがとうございます。
言い訳になりますが、私は中学生なのでまだまだ日本語がへたくそです。もし失礼なことを言ったらすみません。

for (int j = 1; j < 11; j = j + 1) {
for (int i = 1; i <= j; i = i + 1) {
rect((j-1) * 10, (i-1) * 10, 8, 8);
}
}

この問題のおかげでとても理解が深まりました。ありがとうございます。

Answer 2

for文なんて全然難しいものじゃないです。

for(初期化; 継続判別式; 更新式) 実行文

これだけ。

for文に到達すると、
初期化を行い、
継続判別式がtrueだったら実行文を実行し/falseだったらfor文終わり
更新式を実行して、
継続判別式がtrueだったら実行文を実行し/falseだったらfor文終わり
更新式を実行して、
...
つまり、継続判別式がtrueになる間実行分と更新式を繰り返します。

for文とは直接には関係ないけれど、ブロックと言って、{ }で囲むと0個以上の文を一つの文として扱うので、実行文にブロックを置くことは普通に行われます。

余計なことは考えずに、以上の規則を

for (int j = 1; j < 11; j = j + 1) { //for①とする
  for (int i = 1; i < 11; i = i + 1) { //for②とする
    rect((i-1) * 10, (j-1) * 10, 8, 8);
  }
} 

に適用します。

for①に到達するとjを宣言して1を設定します。
jは1で、継続判別式j<11はtrueなので、実行文を実行します。
for①の実行文はfor②です。
  for②では、iを宣言して1を設定します。
  iは1で、継続判別式i<11はtrueなので、実行文を実行します。
    for②の実行文は`rect((i-1) * 10, (j-1) * 10, 8, 8);`です。
    ここまでで、iは1,jは1なので、rect(0,0,8,8)で正方形を描画します。
  for②の実行文が終わったので、for②の更新式を実行します。i=i+1ということで、iは2になります。
  iは2で、i<11はtrueなので、実行文を実行します。
    iは2,jは1なので、rect(10,0,8,8)で正方形を描画します。
  for②の更新式を実行し、iは3になります。
  iは3で、i<11はtrueなので、実行文を実行します。
    iは3,jは1なので、rect(20,0,8,8)で正方形を描画します。
  for②の更新式を実行し、iは4になります。
(同様の繰り返しなので中略。理解できますね?)
  iは10,jは1なので、rect(90,0,8,8)で正方形を描画します。
  for②の更新式を実行し、iは11になります。
  iは11で、i<11はfalseなので、for②を終了します
for①の実行文が終わったので、for①の更新式を実行します。jは2になります。
jは2で、j<11はtrueなので、実行文を実行します。
  for②では、iを宣言して1を設定します。
  iは1で、i<11はtrueなので、実行文を実行します。
    ここまでで、iは1,jは2なので、rect(0,10,8,8)で正方形を描画します。
  for②の実行文が終わったので、for②の更新式を実行します。i=i+1ということで、iは2になります。
(中略)
  iは10,jは2なので、rect(90,10,8,8)で正方形を描画します。
  for②の更新式を実行し、iは11になります。
  iは11で、i<11はfalseなので、for②を終了します
for①の更新式を実行し、jは3になります。
jは3で、j<11はtrueなので、実行文を実行します。
(中略略)
  iは10,jは10なので、rect(90,90,8,8)で正方形を描画します。
  for②の更新式を実行し、iは11になります。
  iは11で、i<11はfalseなので、for②を終了します
for①の更新式を実行し、jは11になります。
jは11で、j<11はtrueなので、for①を終了します

なにか疑問な点がありますか?

Comments

[退会済みユーザー]

このような雑な質問にご丁寧に回答してくださいましてありがとうございます。
とても分かりやすくて理解することができました。