2026年1月31日の開発日記
今日はtax-assistantプロジェクトのクレカ明細画面を集中的に改善した。確定処理のパフォーマンス問題、ステータス命名の統一、デザインシステムの色ルール整理、そしてPrettier導入まで、UI/UX周りの課題を一気に片付けた。
今日やったこと
1. クレカ確定処理のパフォーマンス最適化
確定ボタンを押すたびに画面全体がカクつく問題を修正した。
原因は、1行の check_status を更新するだけなのに loadData() で全265件を再取得していたこと。watcherが発火して selectedIndex がリセットされ、右パネルが一瞬空になっていた。
updateLocalStatus ヘルパーを作成し、ローカルの配列内で該当行のプロパティだけを書き換える方式に変更。confirming フラグも不要になり、コードもシンプルになった。
また、9月データで確定できない問題も発覚。DBに古い ok ステータスが残っていたため、receipt_matched にマイグレーションして解決した。
主な成果:
- 確定/取消時の画面カクつきが解消
- 不要な全件再取得を排除
- DBマイグレーション（
ok→receipt_matched）実施
詳細: Vue.jsで確定処理のカクつきを解消 - ローカルステート更新パターン
2. デザインシステムとステータス管理の整理
クレカ明細のステータス体系を全面的に見直した。
check_status の ok を receipt_matched にリネームし、rule_matched と対になる命名に統一。バッジも「仕訳ルール一致」「読取帳票一致」を追加し、solid フラグで濃淡を区別できるようにした。
進捗バーの色ルールも整理。緑=確定済み、紫=一致未確定、赤=問題あり、オレンジ=編集中、と意味を明確化。重複ステータスはオレンジから赤に変更し、「編集中」との混同を解消した。
主な成果:
- ステータス命名の統一（
ok→receipt_matched） - バッジデザインの追加・整理
- 進捗バーの色ルール体系化
design-tokens.tsにカラールールのドキュメント追加- 読み取り帳票セクションのUI改善
詳細: クレカ明細のデザインシステム整理 - ステータス命名統一と色ルールの体系化
3. Prettier設定の導入
VSCodeの formatOnSave が有効な状態で、Claude Codeが書いたコードを保存するとフォーマットが変わってしまう問題に対処した。
インデントが2→4スペースになったり、80文字で折り返されたりして、git diffがノイズだらけになっていた。frontend/.prettierrc を作成し、2スペースインデント + printWidth: 120 で既存コードスタイルに合わせた。
主な成果:
.prettierrcでフォーマットルールを明示化- git diffのノイズ軽減
- Claude CodeとVSCodeの共存環境を整備
詳細: Prettier導入でClaude CodeとVSCodeのフォーマット衝突を解消
今日の学び
- 1行の更新に全件再取得は不要。Vueのリアクティビティを活かしてローカルのプロパティだけ書き換えれば十分
- デザインシステムの色ルールは
design-tokens.tsにコメントで残すと、変更時に必ず目に入る - 「オレンジ=編集中」のように色に意味を持たせるなら、例外を作らないことが大事
- Prettierは設定なしだとデフォルトで80文字折り返し。チームのコードスタイルに合わせた
.prettierrcは早めに入れるべき