2024-09-10
このセクションでは、プログラミングにおける「for 文」について学びます。for 文とは、指定した回数だけ特定の処理を繰り返すための構文です。同じ処理を繰り返し行うコードを簡潔に書くことができます。
for 文のスニペット登録
Ctrl + Shift + Pを押して、コマンドパレットを開きます。Snippets: Configure Snippetsを選択します。javascript.jsonを選択します。- 以下のコードを追加します。
"for": {
"prefix": "for",
"body": ["for (let i = $1; i < $2; i+=$3) {", " $4", "}"],
"description": "for loop"
},Practice 3.3.1
まずは、for 文を使わないで縦線を 10 本描くコードを書いてみましょう。
function setup() {
createCanvas(490, 320);
background(255);
strokeWeight(2);
line(110, 60, 110, 260);
line(140, 60, 140, 260);
line(170, 60, 170, 260);
line(200, 60, 200, 260);
line(230, 60, 230, 260);
line(260, 60, 260, 260);
line(290, 60, 290, 260);
line(320, 60, 320, 260);
line(350, 60, 350, 260);
line(380, 60, 380, 260);
}
なんとか書くことが出来ました。しかし、もし 10 本でなく 100 本の線を引くことになったらどうでしょうか。流石に１行ずつ書くのは大変です。 先ほどの 10 本の線を引くコードをじっくり観察すると、何かしらのパターン、規則性があることに気付くかもしれません。「for 文」という構造を使うと、同じようなコードを並べる代わりに、一つのコードで繰り返し処理を行うことができます。
function setup() {
createCanvas(490, 320);
background(255);
strokeWeight(2);
for (let x = 110; x <= 380; x += 30) {
line(x, 60, x, 260);
}
}こうすると 10 本だけでなく、100 本、1000 本との線を引くことができます。
for 文の書き方
for 文はこれまで利用してきた描画関数のような関数とは違います。まず、for 文は{と}で囲まれたブロックと呼ばれるものを持ち、その中に繰り返し処理を記述します。 まずは for 構文の構造を人が理解しやすいように書き換えてみましょう。
for (初期化; 終了条件; 更新) {
// 繰り返し処理
}具体例として、10 本の縦線を描画するコードは以下のようになります。
for (let x = 110; x <= 380; x += 30) {
line(x, 60, x, 260); // 繰り返し処理
}- 初期化：繰り返し処理を始める前に、変数を初期化します。上の例では、
let x = 110;が初期化です。 - 終了条件：繰り返し処理を続けるかどうかを判定します。終了条件が
trueの間、処理を繰り返します。上の例では、x <= 380が終了条件です。 - 更新：繰り返し処理の終了後に、変数を更新します。上の例では、
x += 30が更新です。これはx = x + 30と同じ意味です。
つまり、変数 x は 110 で初期化され、150、190、230、270、310、350 と更新され、380 になるまで繰り返し処理が行われます。
終了条件で使う「比較演算子」
for 文を終えるための終了条件には、「比較演算子」を使います。比較演算子は、2 つの値を比較して、その結果がtrue（真）かfalse（偽）かを返します。Javascript では、以下の比較演算子が使えます。
==：等しい!=：等しくない>：より大きい>=：以上<：より小さい<=：以下
Practice 3.3.2
前セクションの「Practice 3.2.1」で作成した階段を描画するコードを for 文を使って書き換えてみましょう。
function setup() {
createCanvas(480, 320);
background('#D6E3ED');
let w = 100;
let h = 50;
let x = 0;
let y = 50;
let step = 100;
rect(x, y, w, h);
w += step;
y += h;
rect(x, y, w, h);
w += step;
y += h;
rect(x, y, w, h);
w += step;
y += h;
rect(x, y, w, h);
}最後の３行ごとのコードは全く同じ繰り返し処理になっていますので、改善の余地がありそうです。
function setup() {
createCanvas(480, 320);
background('#D6E3ED');
let w = 100;
let h = 50;
let x = 0;
let y = 50;
let step = 100;
for (let i = 0; i < 4; i++) {
rect(x, y, w, h);
w += step;
y += h;
}
}for 文で書いたので、現在は階段の段数が 4 段ですが、i < 4の部分を変更することで、段数を変更することができます。例えば１００段にしたければ、i < 100とするだけです。