2026年1月16日の開発日記

今日は複数のプロジェクトを並行して進めた濃密な1日だった。メインはキャッシュフロー仕訳ビューアの本格実装で、Excelの精算表をWebで完全再現することに成功した。

今日やったこと

1. キャッシュフロー仕訳ビューアの開発（メイン作業）

ExcelのCF精算表をHTML/Vueで再現する作業を本格的に進めた。

主な成果:

精算表の期首残高・期末残高・増減・CF調整項目の表示
「現金及び預金の振替」列の実装（全行の合計=0のチェック）
CF計算書への転記ロジック（精算表の値を-1倍）
Vitestによるテストコード作成（7テストケース全て合格）
ファイル分離リファクタリング（HTML/CSS/JS分離）

詳細: キャッシュフロー精算表ビューアをVue.jsで実装した開発記録

2. 人生計画Excel → Webアプリ移植計画

20シートあるExcelファイルを分析し、Nuxt 4でWebアプリ化する計画を立てた。

主な成果:

ミラーカラムUIの採用決定（階層的なナビゲーションに最適）
フロントエンド先行開発の方針（計算ロジックは後回し）
冗長バッファ設計（配偶者・子供5人分を最初から用意）
Scoped CSS採用（Tailwindより扱いやすい）

詳細: 人生計画ExcelをWebアプリ化する設計と計画

3. 不動産投資シミュレーション＆物件検索アプリ

39シートの不動産投資シミュレーションExcelの分析と、新規アプリのアイデア出し。

主な成果:

計算粒度ルールの決定（返済は月次、財務諸表は年次）
不動産物件検索アプリの設計案
- レインズの紙をOCRして地図にプロット
- QRコードでURL共有（有効期限1ヶ月）
- OpenStreetMap使用、Webアプリ縛り

詳細: 不動産投資シミュレーションと物件検索アプリの設計

4. その他

VS Code Windows Update問題の記事作成（ダブルクリックしても起動しない問題の対処法）
mdx-playgroundのデータ生成スクリプト実行

今日の学び

Excelの計算式をWebで再現する際は、テストコードが必須 - 符号の反転や集計ロジックは複雑で、テストなしでは検証が困難
ミラーカラムUIはExcelのシート構造をWeb化するのに最適 - 階層的なナビゲーションで情報を整理できる
フロントエンド先行開発は有効 - 見た目を先に作ることで、不要なロジックを削れる
Scoped CSSはAIとの協働に向いている - Tailwindのクラス名より直感的に伝わる

明日やること

キャッシュフロービューアの他の事例対応
人生計画アプリのプロジェクト初期化
ミラーカラムコンポーネントの共通化検討

関連記事