分ける前に、今の動きを残す
コードを整理するときは、先に動いている版を残し、開始から結果までの操作を記録します。ファイルを分ける変更と、ゲームのルールを変える変更を同時にすると、動かなくなった理由を追いにくくなります。まず見た目と操作を変えず、責任だけを整理します。
分割の単位は行数より役割です。現在の工程、具材、焼き時間などの状態を持つ部分と、それを画面に描く部分を分けます。入力を受けて状態を変える部分も独立させると、表示だけ直したいときに採点まで触らずに済みます。
最初は五つの役割で足りる
大きな設計を先に作らず、内容を探す場所が分かる程度の構成から始めます。素材の種類が増えても、記事や味のデータを配列へ追加すれば済むようにしておくと、画面の処理との混在を減らせます。
| 置く場所の例 | 担当するもの |
|---|---|
| index.html | 見出し、ボタン、ゲーム領域 |
| style.css | 余白、文字、画面幅への対応 |
| model.js | 状態、量、工程の変化 |
| render.js | 状態を使った描画 |
| app.js | 入力、開始、結果への切り替え |
状態が変わる入口を増やしすぎない
別々のボタンがそれぞれ勝手に完成処理を呼ぶと、結果の二重作成や保存の取り違えが起きやすくなります。「完成へ進む」という入口を一つにし、すでに完成している場合は再実行しないようにします。画面の表示だけを変えて、内部の工程を置き去りにしないことも大切です。
整理後は、最初に残した操作を同じ順番で再現します。開始、途中で戻る、完成、もう一度、という往復を含めると、初回しか動かない不具合を探せます。ファイルがきれいに分かれたことより、修正する場所が分かり、元の動きが保たれたことを完了条件にします。