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

### 今回のゴール

データ/処理のまとまりをクラスとして、ひとまとまりで扱うことができるようになる。

### ミノの位置のクラス化

一発目からJSのクラスの概念として正しいかは不明だけど、扱いやすければOKってことで。

ミノの位置は、x,yでセットとなる値だが、いまはバラバラに定義されている。

そのため、1つのクラスとしてまとめてしまって、セットで管理する値であるということを明確にする

これでミノの位置は必ずx,yのセットで用意されるようになった。

ついでに管理し易いように作成したクラスは「minoPos.js」として外部ファイル化

クラスを扱う側は↓みたいな感じでインスタンスを生成してから扱う形になる。

ただ、このままだとクラスメンバはundefinedとなり扱えないためクラスメンバに対して初期化が必要

クラスにはインスタンス生成時にコールされる特別な処理が存在しているため、基本はそこに初期化処理を書く形になる

これでメンバを扱えるようになったため、移動処理を例に修正すると

ただ、これでは折角セットで扱えるようにしたのに、バラバラに処理しているため、もったいない。

そのため、移動処理についてもMinoPosクラスに持たせるようにする

ついでに同じような形で設定用の処理も持たせる

あとはコールもとは移動用関数をコールする形へと置き換える

### 描画処理のクラス化

描画処理についてもクラス化する。

このとき、クラスとして切り分けた処理の中で当然のように外部変数を参照してしまうと、

折角ひとつの処理のまとまりとして切り出したのに、その変数への依存関係が出来てしまい、本当の意味で切り出したことにならない。

これを解消するために、直接、外部の変数を参照していた関数について、同値を引数で渡すように変更する。

忘れずにコール元についても対応する

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

クラス化は必須ではないですし、クラス化しなくても動くソースを作ることはできるので、

色々な意味で難しいと思いますが、覚えておくと後々役に立つと思うので、

最初は意味がわからずに写経するってレベルでも良いので、触っておくと良いです。

また、本編では説明せずにシレッとコードだけ書いてますが

クラスメンバ変数には、クラス変数とインスタンス変数の2種類が存在してます。

余裕がある人はこの2種類の違いについて調べてみると理解が深まるかも

※staticで宣言しているものがクラス変数(DrwaMainFieldのCANVAS_W/H)

　それ以外はインスタンス変数

基本の導入部分は書き終わったので、次からは有料記事にする予定