HTML + JavaScriptでブロック落ち物パズルゲームを作ろう #01

## 1. フィールド表示

### 今回のゴール

ページ上に赤い四角(フィールド部)が表示されるようになる。

### ベースとなるHtmlの用意

この時点ではベースを用意しただけなので、仮にページを表示しても、真っ白なまま何も表示されない。

### フィールドの描画

今回はフィールドが表示されていることが分かるように、全体を赤く塗りつぶす。

JavaScriptでは変数宣言時に型の指定はなく、宣言であることの明示として、let(変数)、const(定数)を付与して宣言する。

※他にvarもあるけど、旧仕様のため現状で使う必要があるケースがあるのかは不明

ただ、このままでは260と416が何を基準にした何のための値なのかがよく分からない状態になっている。

こういう数字を見ても意味が分からない数字はマジックナンバーと言われており、プログラムを組む上では、基本的にマジックナンバーは排除する形でコーディングしていく。

マジックナンバーを排除することのメリットとして分かり易いのが、今回のケースにおいて、ブロックサイズを変更したいとなった時にはBLOCK_SIZEの値を変更するだけで、自動で計算されるようになる。(複数箇所に渡って同じ意味合いの数字を使いたい時にまとめて変更できるようになる)

また、仮にブロックサイズが16の時に直値で処理を記載した場合、↓のようにどの16が何を示す16なのかが分かり難くなるが、定数化しておくと、その心配はなくなる。

これで#01はゴール。お疲れ様でした。

余裕がある人はfillRectに指定する座標,サイズや、fillStyleに指定する色を変えて遊んでみると理解が深まるかも