【マイレース開発記録(26)】全体リファクタリング　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

全体リファクタリングマイレースの基本機能がひと通り動くようになったあと、私は一度開発の手を止めました。
新しい機能を追加するのではなく、これまで書いてきたコード全体を読み直す時間を作るためです。

開発中はどうしても「動くこと」を優先してしまいます。
しかし、ポートフォリオ用の課題制作として考えたとき、コードの構造や整理の状態も重要だと感じました。

そこで、マイレースのコード全体を見直し、リファクタリングを行うことにしました。

コードを読み直すという作業

リファクタリングでは、新しい機能を作るわけではありません。
むしろ逆で、

• 不要なコードはないか
• 同じ処理を複数書いていないか
• 意図が分かりづらい部分はないか

といった点を、一つずつ確認していきます。

開発中は「とりあえず動いたコード」を残してしまうことも多く、
時間をおいて読み返すと、構造の改善点が見えてきます。

AIとの共同開発でも、この工程はとても重要だと感じました。
提案されたコードをそのまま使うのではなく、自分で読み直し、構造を理解しながら整理していく必要があります。

APIレスポンスの整理

次に見直したのが、Flask APIのレスポンス構造です。

マイレースの /api/calc では、

• phases（周期情報）
• speeds（各テーマの速度）
• finish_times（ゴールタイム）
• rank_map（順位）
• messages（ゾーンとメッセージID）

といったデータをJSONで返しています。

開発初期は必要な値をその都度追加していたため、データ構造がやや分かりづらくなっていました。

そこで、

• フロント側が必要とする情報
• APIが返す責任範囲

を整理し、レスポンスの構造を明確にしました。

この作業によって、フロントエンドとバックエンドの役割分担も理解しやすくなりました。

JavaScript構造の見直し

フロントエンド側の main.js も、リファクタリングを行いました。

マイレースのJavaScriptには、

• レースアニメーション
• フォーム処理
• API通信
• ゾーン判定
• メッセージ表示

といった複数の役割があります。

開発途中では、それらを一つのファイルに順番に書いていたため、処理の流れが少し分かりづらくなっていました。

そこで、

• 初期設定
• フォーム処理
• レースロジック
• 描画処理
• 結果表示

といった単位でコードを整理し、役割ごとにまとまるように構造を調整しました。

フォルダ構成の整理

コードの整理とあわせて、プロジェクトのフォルダ構成も見直しました。

現在の構成は次のようになっています。

project/
├── app.py
├── prefectures.py
├── templates/
│ └── index.html
└── static/
├── main.js
├── style.css
├── grass.png
└── my_race_logo.png

Flaskの基本構造に沿った形にすることで、今後コードを読む人にも理解しやすい構成にしました。

リファクタリングで得られたこと

リファ今回のリファクタリングは、新しい機能を追加する作業ではありません。
しかし、開発プロセスの中ではとても重要な工程でした。

コードを書き続けるだけではなく、

• 構造を見直す
• 不要な部分を整理する
• 将来読みやすい状態に整える

という作業を通して、コードの品質に対する意識も強くなったと感じています。

AIとの共同開発においても、提案されたコードを理解し、自分のプロジェクトに合わせて整理する作業は欠かせません。

マイレースのリファクタリングは、そのプロセスを実践する機会になりました。

次回予告

次の記事は、

【マイレース開発記録(27)】AIとの役割分担

として、

• AIに任せた部分
• 自分が検証した部分

について整理して書いていきます。