2026年1月28日の開発日記

今日はtax-assistantプロジェクトで大きな作業を行った。ページベースルーティングの計画・実装・検証を経て、最終的にシンプルな解決策に着地した。また、仕訳ルールUIの大幅改善とキーボードナビゲーション原則のデザインシステム化も完了。

今日やったこと

1. ページベースルーティングの計画と検証

クエリパラメータベース（/?tab=receipt）からページベース（/vouchers）への移行を計画・実装した。

主な成果:

Phase 1-3の実装完了（レイアウト、ストア、ミドルウェア、全11ページの移行）
useTabQuerySyncのpush/replace使い分け問題を調査
重要な気づき: ページベースなら明示的な履歴管理コードが不要。ブラウザ標準のAlt+矢印で十分

最終的な結論: 複雑な履歴管理コードを書くより、ブラウザ標準機能に任せるほうがシンプル。

詳細: Nuxt3でページベースルーティングへ移行 - ブラウザ履歴管理の複雑さから解放される方法

2. 仕訳ルールUIの大幅改善

shiwake_rulesテーブルへのdocument_type_id追加を起点に、UIを大幅に改善した。

主な成果:

DBスキーマ変更: document_type_idカラム追加、外部キー制約
書類タイプ別の帳票タイプ表示（三井住友カード、アメックス等の個別表示）
RuleListViewのカラム構成変更（フィールド・マッチタイプ削除、勘定科目・税区分追加）
収支区分の自動選択とdisabled表示（0件の収支区分はクリック不可）
勘定科目ビューとルール一覧ビューのカラム幅統一
件数表示の追加

詳細: 仕訳ルールUIの大幅改善 - 帳票タイプ別表示とカラム構成変更

3. キーボードナビゲーション改善とデザインシステム

矢印キーナビゲーションの改善とデザインシステムへの原則追加を行った。

主な成果:

パターンカラムの勘定科目順ソート（localeCompareで日本語五十音順）
allFilteredRulesのソート順を表示順と一致させる修正
ループナビゲーション原則の導入: 最後→最初、最初→最後への循環移動
デザインシステム（/design-system/ui/keyboard）への原則追加
履歴ナビゲーションテストの安定化（waitForTimeout→waitForURL）

詳細: キーボードナビゲーション改善とデザインシステム

今日の学び

ブラウザ標準機能に任せる: SPAで独自の履歴管理を実装するより、ページベースルーティングでブラウザに任せるほうがシンプル
UIの一貫性: 複数ビュー間でカラム幅やソート順を統一することで、ユーザー体験が向上
デザインシステム化: 個別の実装をデザインシステムに原則として追加することで、今後の開発で一貫性を保てる

明日やること

ページベースルーティングの本実装（今日は検証のみで一旦リバート済み）
仕訳ルールの貸方デフォルト値設定の確認
E2Eテストの整理（旧URLパターンのテスト更新）

関連記事