2026年2月6日の開発日記

今日は朝7時から夕方17時まで、tax-assistantとmdx-playgroundの両方で大きく手を動かした。tax-assistantでは仕訳ビューアをゼロから実装して経費・収入の両タブまで一気に作り上げ、帳票種別まわりのデータ連携も大幅に改善した。mdx-playgroundでは(a+b)³のインタラクティブ3Dビジュアライザーと、25種類のSVG図解カタログページを完成させた。

今日やったこと

1. 仕訳ビューア大規模実装（tax-assistant）

仕訳ビューアをVueコンポーネント + composable構成でゼロから作成した。経費475件・収入911件のデータをタブ切替で表示し、勘定科目・補助科目・税区分のインライン編集、確認/編集トグル、マッチした仕訳ルールの右パネル表示まで一日で実装した。

午後にはページ分割リファクタリングも完了し、useJournalViewerBase.tsを共通composableとしてuseExpenseViewer.tsとuseIncomeViewer.tsに分割。ルートベースのページ切替とlocalStorage永続化も実装した。

主な成果:

仕訳ビューアの新規作成（借方/貸方カラムの仕訳テーブル）
インライン編集機能（勘定科目連動のドロップダウン）
経費/収入ページ分割リファクタリング
会計マスタUIの改善（スクロール問題修正、インライン編集）
変更履歴機能の設計ドキュメント作成 + Codexレビュー

詳細: 仕訳ビューア大規模実装 - インライン編集・ページ分割・会計マスタUI改善まで

2. 帳票種別・データ連携の改善（tax-assistant）

クレカ明細にdocument_type_idを紐付ける仕組みを実装した。CSV取り込み時の自動解決関数、仕訳ビューアでのハードコード廃止、領収書の貸方表示バグ修正、売上伝票の貸方2行表示（技術売上高 + 店販売上高）まで対応。Squareの重複レコード340件の修正と、document_typeへのslugカラム追加も行った。

主な成果:

creditcard_transactionsにdocument_type_idカラム追加（既存265件をマイグレーション）
領収書の貸方ハードコードバグ修正 + テスト13件追加
document_type_journal_linesテーブルとCRUD API作成
Square重複レコード修正（340→170件）
slugカラム追加（UNIQUE制約、Pydanticバリデーター付き）

詳細: 帳票種別・データ連携の改善 - document_type統合からSquare重複修正まで

3. (a+b)³ インタラクティブ3Dビジュアライザー（mdx-playground）

(a+b)³の展開公式をCSS 3D Transformsで8ブロックのキューブとして可視化するインタラクティブページを開発した。分解アニメーション、アイソメトリックSVG凡例、辺の寸法ラベル、デスクトップ向け2カラムレイアウトまで実装。OGP画像も自動生成。

主な成果:

CSS 3D Transformsによる8ブロックキューブの実装
分解アニメーション（cubic-bezier制御）
アイソメトリックSVGによる凡例（テキスト凡例から移行）
動的SCALE計算とレスポンシブ対応
トップページへのカードリンク追加

詳細: (a+b)³ インタラクティブ3Dビジュアライザーの開発記録

4. 25種類のSVG図解カタログ（mdx-playground）

Slidelandのダイアグラムタイプページを新規作成した。Miller Columnsレイアウトで6カテゴリ・25種類の図解を閲覧でき、4:3比率のスライドスタイルで表示される。SVGイラストはフローチャート、マトリクス、ピラミッド、タイムラインなど多彩なタイプを網羅。

主な成果:

25種類のSVGダイアグラムイラスト作成
4:3スライドプレゼンテーション表示
Merit/Demeritから「特徴」テキスト表示への変更
キーボードナビゲーション対応
フレームワーク図、2軸タイムライン、ROI図の追加

詳細: 25種類のSVG図解カタログをVue.jsで構築した

5. 環境整備

WSLメモリ使用量の調査と自動起動エントリの削除（755MB消費していた）
LM Studio自動起動の無効化
MCP設定のcmd /cラッパー修正
デプロイ実行（ビルド+Cloudflare Pages）

今日の学び

CSS 3D Transformsはtransform-originの設定が肝。全ブロックを正しい位置に配置するには原点をキューブの中心に揃える必要がある
composableの共通化は早い段階で設計しておくと、後のページ分割がスムーズになる
バックエンドのキー名（勘定科目）とフロントエンドのキー名（account_category）の不一致は、見つけにくいバグの典型。型定義を揃えるか、APIレイヤーで変換するのが確実
アイソメトリック投影では面の描画順序が重要。奥の面から描かないと手前の面に隠される

明日やること

仕訳ビューアの変更履歴機能の実装（設計ドキュメントは完成済み）
収入明細のSquare売上とsales_slipのマッチングロジック検討
書籍データベースのスキーマ設計（900冊の蔵書管理）
mdx-playgroundのデプロイ確認