開発daily-logメモ
2026年1月17日の開発日記
今日は人生計画シミュレーターのUI実装に集中した日だった。Excelで作成していたライフプランシミュレーターをWebアプリに移植する作業を進め、多くの技術的な課題を解決した。
今日やったこと
1. 人生計画シミュレーターのUI実装
Nuxt 4でExcelのライフプランシミュレーターをWebアプリに移植した。方針は「見た目（UI）を先に作り、後からロジックとデータを繋ぐ」。
主な成果:
- ミラーカラム（3段階ナビゲーション）を実装
- サマリー画面を段階損益形式のマトリックステーブルに変更
- ウォーターフォールチャートで生涯年収の流れを可視化
- 年次収支テーブルで42年分のデータを一覧表示
- 矢印キーでタブ内ナビゲーションを実装
詳細: Nuxt 4で人生計画シミュレーターのUIを実装する
2. CSSのstickyヘッダー問題を解決
Flexboxレイアウト内でposition: stickyが効かない問題に遭遇。Flexboxの高さ制約が正しく伝播しないことが原因だった。
解決策:
- 親要素に
min-height: 0を追加 - スクロールコンテナを明確に設定
3. Nuxtキャッシュ問題の解決
CSSの変更がブラウザに反映されない問題が発生。ハードリフレッシュでも直らなかった。
解決策:
- 開発サーバーを停止
.nuxtフォルダを削除- サーバーを再起動
Nuxtのビルドキャッシュはサーバー側にあるため、ブラウザのキャッシュクリアだけでは不十分。
詳細: Nuxtでスタイルが反映されない時は.nuxtフォルダを削除する
4. URLルーティング設計の検討
ナビゲーション状態をURLで共有したいという要件に対し、クエリパラメータとパスベースのどちらを選ぶか検討した。
結論:
- 「同じデータの異なるビュー」→ クエリパラメータ
- 「別々のコンテンツ」→ パスベース
今回はシミュレーターの表示状態共有なのでクエリパラメータを採用。
詳細: URLルーティング設計：クエリパラメータとパスベースの使い分け
今日の学び
- Flexbox内でstickyを使う場合は
min-height: 0が必須 - Nuxtのスタイル問題は
.nuxt削除で解決することが多い - URL設計は「リソースか状態か」で判断する
- UIを先に作ってロジックを後から繋ぐ方が効率的
明日やること
- Excelデータを読み込んでハードコード値を置き換え
- 入力フォームから値を変更できるようにする
- 計算ロジックの実装