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

## 05. 外部ファイル化/クラス化

想定より文章量が多くなったので、2部構成で。

今回は外部ファイル化の方だけ。

### 今回のゴール

スクリプトをHTMLにベタ書きではなく、外部ファイルから読み出すようになる。

### 外部ファイル化

いまはHTMLファイルに直接スクリプトを記載してたが、処理が増えてくると見くくなってくるため、管理しやすいよう管理しやすい単位で外部ファイル化する。

まずはhtmlファイルがあるフォルダに「js」という名前のフォルダを作成

次に作成したjsフォルダ内に「main.js」という名前のファイルを作成

※以降、追加作成するjsファイルは全て「js」フォルダ内に作成する

元々のHTMLファイルにて、↑のscriptで括っていた処理を全コピーして、作成した「main.js」に貼り付け

※<script>タグ自体はコピー不要

HTMLファイルの```<script>タグ```の内容を↓に書き換え

この時点でHTML上からは処理の記述が消えたけど、これまでと変わらずに動くようになっている。

### ファイル内容の分割

切り分ける単位は自分の好みで。

ただ、その場の思いつきでやると、後で自分が見返した時にもわけが分からなくなるので、

自分なりのルールを決めて、そのルールに則る形で分けた方がよい。

今回は、まずはシステム全体で共有することになりそうな定数数をまずは別ファイルとして分離。

"なりそう"ってところがポイントで、「システム全体で共有する定数は別ファイル化する」ってルールだけ決めておけば、実際の切り分け自体に悩む必要はなく、"なりそう"レベルの切り分けで問題ない。

※実際切り分けてみて、なんか違うな。ってなっても、その時に変更すれば良いだけ。それを繰り返してく内に自分のなかで切り分け基準が固まってくる。

の部分を、「system.js」として切り出して、HTML側での読み込みを追加

次に描画にかかわる処理を別ファイルとして分離

の部分を、「drawMainField.js」として切り出して、HTML側での読み込みを追加

このとき、切り分け対象としては、あくまでも描画の仕組みの部分のみとして、実際の描画要求(drawAllのコール箇所)を行うところに関してはこれまで通りmain.js側に残しておく

ここの段階で一旦動作確認してみて、いままでと変わらず動作することが確認できたら環境を保持しておく(gitであればコミットしておく)ことをお勧めします。

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

実は今回はしれっと外部ファイル間の参照を実施してしまってます。

JSの外部ファイル間での参照方法は他にもやり方があるので、余裕がある人は調べてみると理解が深まるかも

※ちなみにローカルで動かそうとすると今回のやり方でしか出来ないらしいです。