【マイレース開発記録(24) 】バグの洗い出し
Yokoここまでの段階で、「マイレース」の基本的な機能は一通り動くようになっていました。
入力フォームから生年月日などを入力し、「レースを見る」を押すと、5匹のウサギが走り、結果のスコアボードが表示される。
見た目としては、すでにアプリとして成立している状態でした。
ただ、ここから先に進むためには、
「動くこと」と「安心して使えること」は別問題だと改めて感じるようになりました。
そこで、このタイミングで一度、機能追加を止めて
徹底的にバグを洗い出す作業に集中することにしました。
実際に動かしてみると見えてくる問題
開発中は、どうしても
- 特定の入力パターン
- 同じブラウザ
- 同じ画面サイズ
でしかテストしていないことが多くなります。
しかし実際のユーザーは、
- 入力ミスをする
- 日付を逆に入れる
- 出生地を選ばない
- スマートフォンでアクセスする
など、さまざまな使い方をします。
そのため、この段階では「ユーザーが想定外の操作をしたらどうなるか」という視点でアプリを触り直しました。
すると、いくつかの問題が見えてきました。
入力データのバリデーション
まず気づいたのは、入力データの扱いです。
API側では次のような処理を行っています。
Python
if pref not in PREFECTURES:
return jsonify({"error": "出生地が不正です"}), 400
また、占いたい日が出生日前になっている場合もチェックしています。
Python
if target < birthday:
return jsonify({"error": "占いたい日は出生日以降にしてください"}), 400
開発中は「正しい入力」を前提にしてしまいがちですが、実際には 入力エラーは必ず起こるものです。
そのため、
- 不正入力
- 未入力
- 日付の矛盾
などのケースをすべて確認し、エラーが出ても画面が崩れないことを一つずつ確認していきました。
レースロジックの境界値
次に確認したのは、レースの計算部分です。
マイレースでは、天体位置の差からスピードを計算しています。
Python
def speed(natal_lon, transit_lon):
return 1.0 + (1 - angle_diff(natal_lon, transit_lon) / 180) * 0.4
この式はシンプルですが、境界値を確認すると挙動が変わることがあります。
たとえば
- 天体角度差が 0°
- 180° 付近
- 位相が 0.5 付近
などです。
こうしたケースで極端な値が出ないか、ログを出しながら確認しました。
この段階で、finish_bonus の補正値が強すぎるケースも見つかり、微調整を行いました。
Canvas描画のズレ
フロント側でもいくつかの問題が見つかりました。
特に目立ったのは、Canvasの描画位置のズレです。
レースのスタート位置とゴール位置は、次のように計算しています。
JavaScript
SX = cv.width * 0.12;
GX = cv.width * 0.93;
PCでは問題なく見えていたのですが、画面サイズが変わるとレイアウトが崩れることがありました。
そのため、
JavaScript
window.addEventListener("resize", () => {
updateRaceBounds();
});
という処理を追加し、画面サイズが変わってもレース範囲が正しく再計算されるようにしました。
スコアボード表示の状態管理
もう一つ気になったのは、スコアボードの表示状態です。
レース終了後に結果が表示される仕組みですが、連続してレースを実行すると、
- 前回の結果が残る
- 表示が一瞬ちらつく
といった問題がありました。
そこで、レース開始時に
JavaScript
bd.innerHTML="";
bd.classList.remove("show");
という処理を入れて、毎回スコアボードを初期化するようにしました。
こうした細かい状態管理は、後から見つかることが多い部分です。
AIとのデバッグ
このバグ洗い出しの段階では、AIとの対話が特に役立ちました。
開発中は、問題が起きたとき
- どこが原因か分からない
- 自分のコードを客観視できない
という状態になることがあります。
そんなときに、
- 処理の流れを説明する
- コードを分割して整理する
- 仮説を立てて検証する
という形で、AIとの対話を使いました。
AIが直接バグを直すというより、自分の思考を整理する相手として機能していたという感覚です。
「動く」から「整える」へ
この段階で感じたのは、
開発の後半は「新しい機能を作る作業」ではない
ということでした。
むしろ、
- 想定外の入力
- 境界値
- UIの状態管理
といった細かい部分を整えていく作業が中心になります。
派手な変化はありませんが、この工程があるかどうかでアプリの安定性は大きく変わります。
次回予告
次の記事は、
として、
- Flaskアプリの構成
- API設計の見直し
- 本番環境を意識したコード整理
などについて書いていく予定です。
＼ 最新情報をチェック ／
