関数と配列
同じ手順をくり返すなら、手順に名前をつけて関数にする。square(c, x, y, size) の中で fillRect を一回呼び、呼ぶ側は square(...) を並べる。fillRect の書き方が一か所にまとまり、直すのもそこだけ。
x, y, size が引数で、呼ぶたびに変える値。関数には、描くものと、値を返すものがある。center(full, size) は中央の座標を計算して return で返すだけで、画面には触らない。
配列
同じ数を何度も書く代わりに、配列にまとめる。[50, 210, 370] を for...of で順に取り出して square に渡す。要素を足せば、四角が増える。
位置もサイズも変えたいなら、四角ひとつを { x, y, size } というオブジェクトにして並べる。cell.x で名前で取り出す。配列が、四角の設計図の一覧になる。
for...of は配列の要素を順に渡すくり返し。for (let i = 0; i < 3; i++) は番号を数えるくり返しで、「何回」や「何番目」が要るときに使う。オブジェクトは名前のついた値の束で、cell.x のように名前で読み出す。