仕訳ビューア大規模実装

tax-assistantに仕訳ビューア機能を一から作った。経費・収入の仕訳データを一覧表示して、その場で勘定科目を編集・確認できるUIを構築し、最終的にページ分割と会計マスタUIの改善まで進めた記録。

Phase 1: 仕訳ビューアの初期実装

Vue コンポーネントと composable の新規作成

仕訳ビューアの基盤として、Vueコンポーネントと対応するcomposableを新規作成した。

主な構成:

ビューアコンポーネント: 仕訳データの一覧表示
composable: データ取得・状態管理・ナビゲーションロジック

経費/収入タブの実装

仕訳データを経費と収入で切り替えられるタブUIを実装した。タブの選択状態はlocalStorageに保存し、ページ再読み込み時にも維持される。

借方/貸方カラムの仕訳スタイルテーブル

簿記の仕訳帳に倣い、借方と貸方をカラムで分離したテーブルレイアウトを採用した。

| 日付 | 支出先 | 借方（勘定科目/税区分/補助科目） | 貸方（勘定科目/税区分/補助科目） | 金額 |

通常のテーブルとは異なり、借方・貸方それぞれに勘定科目・税区分・補助科目の3フィールドを配置している。

レシート画像モーダル

仕訳エントリに紐づくレシート画像をモーダルで表示する機能を追加した。画像クリックで拡大表示、背景クリックまたはEscキーで閉じる。

エントリナビゲーションの自動スクロール

キーボードやボタンでエントリを移動したとき、選択されたエントリが画面内に収まるよう自動スクロールする処理を実装した。scrollIntoView({ behavior: 'smooth', block: 'nearest' }) を使い、必要なときだけスクロールが発生するようにした。

Phase 2: インライン編集機能

勘定科目・補助科目・税区分のインライン編集

仕訳テーブル上で直接、勘定科目・補助科目・税区分を編集できるインライン編集を実装した。

ポイント:

未確認エントリ: ドロップダウンが常時表示される。すぐに編集できる状態
確認済みエントリ: テキスト表示のみ。編集するには確認を解除する必要がある
確認/編集トグル: ボタン一つで確認済み/未確認を切り替え

補助科目と税区分の連動

勘定科目を選択すると、補助科目と税区分の選択肢がその勘定科目に紐づくものだけにフィルタリングされる。

勘定科目: 旅費交通費 → 補助科目: [電車, タクシー, ...], 税区分: [課税仕入10%, ...]
勘定科目: 消耗品費 → 補助科目: [事務用品, ...], 税区分: [課税仕入10%, ...]

会計マスタデータバリデーション

選択された勘定科目・補助科目・税区分の組み合わせが会計マスタデータに存在するかリアルタイムでチェックする仕組みを入れた。不正な組み合わせの場合はエラー表示する。

Phase 3: 勘定科目の永続化バグ修正

問題

勘定科目をインライン編集して保存しようとすると、バックエンドでエラーが発生する問題が起きた。

原因は、バックエンドのAPIが 勘定科目 という日本語キーを期待しているのに対して、フロントエンドのコードが account_category という英語キーをセットしていたこと。

修正

フロントエンドからバックエンドに送信するペイロードのキー名を、バックエンドが期待する日本語キーに統一した。

// 修正前
{ account_category: '旅費交通費', sub_account: '電車', tax_category: '課税仕入10%' }

// 修正後
{ 勘定科目: '旅費交通費', 補助科目: '電車', 税区分: '課税仕入10%' }

バックエンドがPythonの辞書で日本語キーを使っていたため、フロントエンドもそれに合わせた形。

Phase 4: UIリファクタリング

細かい見た目の問題をまとめて修正した。

行の高さ不一致修正

支出先がない行（空文字の行）の高さが他の行より縮んでしまう問題を修正した。min-height を設定して、データの有無にかかわらず行の高さを統一した。

借方・貸方ボーダーのスタイル変更

借方と貸方の区切り線をグレーの実線に変更し、テキストを中央揃えにした。仕訳帳の見た目に近づけるための調整。

テーブルグリッド線の追加

セル間の区切りが曖昧だった箇所にグリッド線を追加した。データの読み取りやすさが上がった。

マッチしたエントリグループの太い上下ボーダー

同一取引に属する複数の仕訳行をグループとして視認できるよう、グループの上端と下端に太いボーダーを追加した。

.entry-group-first td {
  border-top: 2px solid #374151;
}
.entry-group-last td {
  border-bottom: 2px solid #374151;
}

確認ボタンの拡大とキーボードショートカットヒント

確認ボタンのクリック領域を広げ、キーボードショートカット（Ctrl+Enter）のヒントをボタン近くに表示するようにした。大量のエントリを処理するときにマウス操作を減らせる。

Phase 5: 仕訳ルール表示

右パネルにマッチした仕訳ルールを表示

選択中のエントリにマッチした仕訳ルールがある場合、右パネルにルールの詳細を表示するようにした。

表示内容:

ルール名
マッチ条件（キーワード、金額範囲など）
設定される勘定科目・補助科目・税区分

ルール編集リンク

表示されたルールから直接、会計ルール管理ページに遷移できるリンクを追加した。ルールの微調整が必要なとき、画面遷移の手間が減る。

Phase 6: 収入明細タブ

getAllReceipts() の UNION 活用

バックエンドの getAllReceipts() 関数は、SQLのUNIONで領収書テーブルと売上伝票テーブルの両方からデータを取得する。この仕組みをそのまま活用し、収入明細タブで売上データを表示できるようにした。

データ件数の確認

実データで動作確認したところ、経費475件 + 収入911件が正しく表示された。タブ切り替えでそれぞれのデータが正しくフィルタリングされることも確認した。

localStorage永続化

タブ選択状態と年月のポジション（何年何月のデータを表示しているか）をlocalStorageに保存するようにした。ページを離れて戻ってきたとき、前回の表示状態が復元される。

Phase 7: ページ分割リファクタリング

仕訳ビューアのコードが大きくなってきたため、経費と収入でページとcomposableを分割した。

useJournalViewerBase.ts の作成

経費ビューアと収入ビューアで共通するロジックを useJournalViewerBase.ts に切り出した。

共通化した処理:

データ取得とキャッシュ
ナビゲーション（前後移動、ページ内検索）
確認/未確認トグル
localStorage永続化
キーボードショートカット

経費/収入の個別 composable

composables/
  useJournalViewerBase.ts   # 共通ロジック
  useExpenseViewer.ts        # 経費固有のロジック
  useIncomeViewer.ts         # 収入固有のロジック

useExpenseViewer.ts と useIncomeViewer.ts は、baseのcomposableを呼び出しつつ、それぞれ固有のデータ取得URLやフィルタ条件を設定する。

個別ページの作成

pages/
  ExpenseViewerView.vue   # 経費仕訳ビューア
  IncomeViewerView.vue    # 収入仕訳ビューア

タブ切り替えではなく、ルートベースでページを切り替える方式に変更した。URLで直接経費ページや収入ページにアクセスできるようになった。

localStorage永続化の維持

ページ分割後もlocalStorageの永続化は維持した。経費ページと収入ページでそれぞれ独立したキーで状態を保存している。

// 経費ページ
localStorage.setItem('expense-viewer-month', '2026-01')
localStorage.setItem('expense-viewer-position', '42')

// 収入ページ
localStorage.setItem('income-viewer-month', '2026-01')
localStorage.setItem('income-viewer-position', '15')

鉛筆アイコン: 編集モードに切り替え
ゴミ箱アイコン: 勘定科目の削除（確認ダイアログ付き）

<button @click="startEdit(account)" class="icon-btn">
  <PencilIcon class="w-4 h-4" />
</button>
<button @click="confirmDelete(account)" class="icon-btn text-red-500">
  <TrashIcon class="w-4 h-4" />
</button>

変更履歴テーブル: journal_change_logs に変更前後の値、タイムスタンプ、ユーザー情報を保存
仕訳ビューアのUI上で変更履歴を参照できるパネル
ルール適用による自動変更と手動変更の区別

Codex（GPT-5.3）による設計レビュー

作成した設計ドキュメントをCodex（GPT-5.3）に渡してレビューを依頼した。データモデルの整合性、パフォーマンスへの影響、将来の拡張性についてフィードバックを得た。

まとめ

一日で仕訳ビューアを新規作成し、以下の状態まで持ってきた。

初期実装: 借方/貸方の仕訳スタイルテーブル、レシート画像モーダル、自動スクロール
インライン編集: 勘定科目・補助科目・税区分をその場で編集、確認/未確認の切り替え
バグ修正: バックエンドとのキー名不一致を解消
UIリファクタリング: グリッド線、グループボーダー、行高さ統一、キーボードショートカット
仕訳ルール表示: 右パネルでマッチしたルールを確認、編集ページへのリンク
収入明細: UNION活用で経費475件+収入911件を表示
ページ分割: composableを共通/経費/収入に分離、ルートベースのページ切替
会計マスタUI: ドロップダウン化、スクロール修正、インライン編集
変更履歴設計: 勘定科目変更のトラッキング設計とCodexによるレビュー