仕訳ビューアの大幅改善
朝、仕訳ビューアで勘定科目を選ぶたびに補助科目が勝手に切り替わるのを見つけた。そこから芋づる式にバグと改善点が出てきて、結局一日中ビューアのコードを触り続けた。修正は10項目を超え、フロントエンドとバックエンドの両方にまたがった。
1. 補助科目のデフォルト値修正
勘定科目を「事業主貸」に変更すると、補助科目が「源泉所得税」に自動セットされてしまっていた。原因は watch 内で subs[0] を取っていたこと。補助科目配列の先頭ではなく、空文字(なし)をデフォルトにした。
// Before: subs[0] が自動選択される
// After: 空文字をデフォルトに
const defaultSub = ''
地味だが、ユーザーが毎回手動でリセットする手間が消えた。
2. duplicate行の編集・確定対応
仮払金明細で「重複?」ステータスの行は、勘定科目を変更しても確定ボタンが出なかった。canConfirm のロジックが receipt_matched と rule_matched しか対象にしていなかったため。
フロントエンド側で duplicate / ng / unchecked にも確定パスを追加し、バックエンドの PATCH エンドポイントも manual_confirmed への遷移を許可するように修正した。
Chrome DevTools MCPで実際にブラウザ上で操作して、ボタンクリック -> API 400エラー -> バックエンド修正 -> 再テスト、という流れで動作確認した。
3. 勘定科目未選択時のバリデーション
勘定科目が「なし」の状態で確定ボタンを押せてしまう問題があった。hasRequiredAccounts という判定を追加し、借方・貸方の勘定科目が未選択なら確定ボタンを disabled にした。一括チェックボックスとCtrl+Enterショートカットにも同じガードを入れた。
4. manual_confirmed の突合せ再実行時の保護バグ
突合せを再実行すると、手動確定済みの明細のステータスがクリアされるバグが再発していた。突合せロジック内の3箇所で manual_confirmed が保護対象に含まれていなかった。
-- 3箇所すべてで manual_confirmed を除外条件に追加
WHERE check_status NOT IN ('private', 'manual_confirmed', ...)
テストも7ケース追加した。manual_confirmed の明細が突合せ再実行後も変化しないことを検証するテスト、レシートマッチが正しく receipt_matched に遷移するテストなど。テストを書く過程でレシートクエリの日付条件バグも見つかり、併せて修正した。
5. 手動確定のステータス表示修正
手動で確定した明細が「仕訳ルール一致」と表示されていた。check_status === 'manual_confirmed' のときに専用ラベル「手動確定」を返すように修正し、CSSクラス match-manual も追加した。
6. リロード時の勘定科目消失バグ
manual_confirmed の明細をリロードすると、設定した勘定科目が消えてしまうバグがあった。原因は matched_rules に仕訳情報が保存されていなかったこと。
修正は4箇所にまたがった:
- バックエンド:
update_creditcard_check_statusにjournal_info引数を追加 - API: PATCH エンドポイントで仕訳情報を受け取りDBへ渡す
- フロントエンド:
saveEntryでmanual_confirmed時に借方・貸方の情報を送信 - フロントエンド:
convertCreditCardでmanual_confirmedの場合はmatched_rulesから勘定科目を復元
Codexレビューで「貸方情報も保存しないとMatrixViewで表示が壊れる」という指摘を受け、貸方も含めて保存するように修正した。
7. バリデーション関数の追加
validateJournalForConfirmation 関数を新設した。チェック項目は:
- 借方の勘定科目が設定されているか
- 貸方の勘定科目が設定されているか
- 貸借金額のバランスが取れているか
saveEntry、confirmEntry、batchConfirmEntries の3つの確定パスすべてにバリデーションを挟んだ。バックエンドAPIにも同等のチェックを追加。
8. バッチ一括確定のエラーハンドリング改善
一括確定で一部の行が失敗したとき、全チェックが外れて「どれが失敗したか分からない」状態になっていた。
修正後の挙動:
- 成功した行のチェックだけ外す
- 失敗した行のチェックは残す
- 結果レポートを表示(「15件中13件確定。2件失敗(勘定科目未設定)」)
composableの戻り値を BatchConfirmResult 型に変更し、succeeded / failed / skipped の件数を返すようにした。
9. 読取一覧ページへのディープリンク
仕訳ビューアで日付の間違いに気づいても、そこからは編集できない。読取一覧ページに移動して直す必要があった。ImageNavigationPanel に header-extra スロットを追加し、レシート系エントリ選択時に「読取一覧で表示」ボタンを表示するようにした。
読取一覧側は既にクエリパラメータ batch + receiptFile でのディープリンクに対応していたので、リンク先の実装は不要だった。
10. Chrome DevTools MCPによるブラウザ実機テスト
今回の修正のほとんどをChrome DevTools MCPで実機確認した。コードを書いてブラウザ上でボタンをクリックし、APIレスポンスやコンソールエラーを見て、問題があればコードに戻る。このサイクルを何度も回した。
特にduplicate行の確定で API 400エラーが返ってきたとき、ブラウザのコンソールでエラーを確認してバックエンドの修正箇所を特定できた。コードだけ読んでいたら見落としていたかもしれない。
振り返り
一つのバグ修正から始めて、触るたびに新しい問題が見つかる一日だった。補助科目のデフォルト値 -> duplicate行の確定 -> バリデーション -> 突合せ保護 -> ステータス表示 -> 勘定科目消失 -> バッチ確定、と連鎖的に改善が広がった。
テストを先に書いていれば防げた問題が複数あった。特に manual_confirmed の保護は以前も修正したはずなのに再発していた。テストがあれば「この条件は通らないとおかしい」と気づける。SQL修正3箇所にテスト7ケースを追加したのは、同じ穴を二度踏まないための保険になる。