悲愴三国志Zeroのバージョン1をリファクタリング
悲愴三国志Zeroのバージョン1とバージョン2を今の知識で頑張ってリファクタリングしてみました。
そのうちバージョン1部分の内容を載せることにします。
まずは元々のコード
関連ディレクトリ構成は以下とします(説明のため、実際とは異なります)
root
┣apple-touch-icon.png
┣favicon.ico
┣icon-192.png
┣icon-512.png
┣icon.svg
┣manifest.json
┣sitePage.css
┗siteContents
┗hisouSangokushiZero1_1.html
hisouSangokushiZero1_1.html
sitePage.css
manifest.json
他にアイコンファイルもあるけどここでは割愛
cssがサイト全体と共有だったり、 で空白を調整していたりしていますし、
変数名や関数・クラスの切り出し方も甘い気がして、色々改善の余地が見える内容になっていました。
javascript部分を直に埋め込んでいるため、開発時のバグを検知するのも難易度も高くなっています。
ファイルを増やしたくないという思いで単一ファイルにしていましたが、しっかりやろうと思うと適切に分割が必要と認識。
これをリファクタリングすることにしました。
リファクタリング後の関連ディレクトリ構成は以下とします(実際とは異なります)
root
┣apple-touch-icon.png
┣favicon.ico
┣icon-192.png
┣icon-512.png
┣icon.svg
┣manifest.json
┣sitePage.css
┣css
┃┗bootstrap.min.css
┣js
┃┗readTs.js
┗siteContents
┗hisouSangokushiZero1_1
┣index.css
┣index.html
┗index.ts
hisouSangokushiZero1_1.htmlがhisouSangokushiZero1_1フォルダのindex.css、index.html、index.tsになり、
他のゲームにも共通で使える部品として、readTs.js、bootstrap.min.cssを増設しています。
index.html
index.css
index.ts
readTs.js
加えて、bootstrapのファイルをダウンロードして導入。
ファイルを分け、cssをサイト部分から分離してゲームごとのファイルにすることにしました。
javascirptをtypescriptにして、動的にトランスパイルして実行するスタイルにしています。
その代わり、読み込みに時間がかかるようになってしまいましたが、より良い構造になったならと目をつぶることに。
あとユーティリティ部分も余分もあるけど大幅に拡張して埋め込んでいます。
↓見た感じこれだけのゲームなのに実は結構やることがある・・
2024/8/4