【マイレース開発記録(25) 】本番環境を想定した修正　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

開発が一段落して見えてきた課題

マイレースの基本機能が一通り動くようになった段階で、一度立ち止まり、「実際に公開するならどこを直す必要があるのか」を整理することにしました。

これまでの開発は、あくまでローカル環境での検証が中心でした。
Python（Flask）でAPIを作り、JavaScriptでレース表示を制御し、Canvasでアニメーションを描画する。
基本的な動作確認はできていましたが、本番環境を意識すると気になる点がいくつも見えてきました。

特に意識したのは次の3点です。

• 入力データの安全性
• APIの安定性
• 表示の再現性

ここからは、それぞれどのような修正を行ったかを書いていきます。

入力データのバリデーション

まず見直したのが、入力データの検証処理です。

マイレースでは、ユーザーが次の情報を入力します。

• 生年月日
• 出生時間
• 出生地（都道府県）
• 占いたい日

開発初期は、JavaScript側で簡単なチェックをしていましたが、
それだけでは十分ではありません。

本番環境では、サーバー側でも必ず検証を行う必要があります。

そこで Flask 側の API に、次のチェックを追加しました。

• JSON形式が正しいか
• 都道府県が定義リストに存在するか
• 占う日が出生日前になっていないか

Python

if pref not in PREFECTURES:
return jsonify({"error": "出生地が不正です"}), 400

if target < birthday:
return jsonify({"error": "占いたい日は出生日以降にしてください"}), 400

入力データを信用しないというのは、Webアプリケーションを作る上での基本ですが、実際にコードを書きながらその重要性を改めて実感しました。

APIレスポンスの整理

次に行ったのは、APIの返却データの整理です。

マイレースのAPIは、次の情報を返しています。

• phases（周期情報）
• speeds（速度）
• finish_times（ゴール時間）
• rank_map（順位）
• messages（メッセージ情報）

最初は計算結果をそのまま返していましたが、フロント側の処理を整理するために、構造を少し整理しました。

特に追加したのが、「ゾーン」と「メッセージインデックス」です。

Python

message_meta[key] = {
"zone": zone,
"index": msg_index
}

この情報を返すことで、フロントエンド側では

• ゾーン演出
• メッセージ表示

を分離して処理できるようになりました。

結果として、JavaScript側のロジックもかなり整理されました。

レース演出の安定化

Canvasで描画しているレースアニメーションも、本番を意識して見直しました。

特に調整したのは、次の部分です。

• レース速度
• ゴール判定
• レース終了後の表示切り替え

開発途中では、レース終了後にスコアボードが表示されないことがあり、状態管理の処理を整理し直しました。

JavaScript

function fn(){
document.querySelector(".race").classList.remove("running");
document.getElementById("scoreboard").classList.add("show");
sc();
}

また、Canvasのサイズが環境によって変わるため、ゴールラインの位置も再計算するようにしました。

JavaScript

function updateRaceBounds(){
SX = cv.width * 0.12;
GX = cv.width * 0.93;
}

こうした小さな調整の積み重ねで、レースの挙動がかなり安定しました。

メッセージ表示の再現性

もう一つ重要だったのが、メッセージの再現性です。

最初の実装では、ゾーンごとにランダムでメッセージを表示していました。

しかし、同じ条件で結果が変わるのは占いアプリとして少し違和感があります。

そこで、

• 生年月日
• 占う日
• カテゴリー
• ゾーン

を組み合わせて、ハッシュ値からメッセージを決定する仕組みに変更しました。

Python

seed_str = f"{birthday.isoformat()}|{target.isoformat()}|{category}|{zone}"
digest = hashlib.sha256(seed_str.encode("utf-8")).hexdigest()
seed_int = int(digest, 16)

これにより、同じ条件なら同じ結果になるという挙動を実現できました。

本番環境を意識することで見えるもの

今回の修正作業を通して感じたのは、「動くコード」と「公開できるコード」は違う、ということです。

ローカルで動けばそれで終わりではなく、

• 入力の安全性
• データ構造
• 表示の安定性
• 再現性

といった点まで含めて、アプリケーションとして整えていく必要があります。

こうした作業は、派手な機能追加ではありませんが、実際の開発ではとても重要な工程だと感じました。

次回予告

マイレースの機能が一通り整ってきたところで、
次はコード全体の見直しを行いました。

次の記事は、

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

として、コード構造をどのように整理したのかを書いていきます。