JavaScript»基礎»for文の中でfor文 九九表を作る

ファイル名: js-basic/quest_00163.html

下のソースコードをうつして、キャンバスに九九の表を表示ひょうじしてください。

ソースコード

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.font = "13px monospace";
context.textAlign = "end";

for (let i = 1; i < 10; i++) {
  for (let j = 1; j < 10; j++) {
    context.fillText(i * j, j * 25, i * 15);
  }
}

解説

“for”文の中に”for”文を記述することが出来ます。


for (let i = 1; i < 10; i++) {
  for (let j = 1; j < 10; j++) {
    context.fillText(i * j, j * 25, i * 15);
  }
}

お手本の記述ではまず1つ目の”for”文で

・変数”i”を初期値”1″で用意
・繰り返す条件は”10″より小さいとき
・繰り返した際に行う処理は変数”i”の値を”1″増やす

を決めています。(つまり9回繰り返す)
そして繰り返しの処理の中にもう1つ”for”文があり、その”for”文でも同じように

・変数”j”を初期値”1″で用意
・繰り返す条件は”10″より小さいとき
・繰り返した際に行う処理は変数”j”の値を”1″増やす

という様に設定しています。(つまり9回繰り返す)
この時、変数名は異なるようにつけましょう。
そして繰り返す処理として”i * j”の値を計算し、画面に表示させています。
こう記述することで、まず”i = 1″の時に


  for (let j = 1; j < 10; j++) {
    context.fillText(i * j, j * 25, i * 15);
  }

この”for”文を終わるまで行います。
その結果、変数”i”は”1″のまま変わらず、変数”j”が”1″ずつ変わっていきます。
そして”i * j”を計算し、画面に表示させます。

この処理が9回終わった後、本来だと次の処理へ進んでいくのですが、
まだ1番目の”for”文は終わっていません。続けて変数”i”を”1″増やして
もう一度上記の処理を”j = 1″から、といった流れを繰り返しの条件が終わるまで、つまり合計9回続けます。
1セットで9個の数字が表示され、それを9セット行うので、最終的には
9 * 9 = 81回
処理を行うことになります。

このように”for”文の中に”for”文を記述することで
繰り返しの処理を何度も行うことが出来ます。
とても難しいですが、この処理もプログラミングをしていくうえで必須の考え方になります。
しっかりと身に着けていきましょう