daily-log
2026年3月12日の開発日記
eurekapu-nuxt4プロジェクトに集中した1日。旧Nuxt 2プロジェクトのディレクトリを掘り返して移行計画を策定し、コンテンツの見せ方をゼロから設計し直した。
今日やったこと
1. 簿記3級コンテンツのNuxt 4移行計画策定
旧プロジェクト（Nuxt 2 + Vuetify 2）の簿記3級コンテンツを調査。SlideType1コンポーネントの2カラムレイアウトやプラグインによるストア管理（目次・「次へ」ボタンでのページ遷移）の仕組みを把握した。
主な成果:
- 旧プロジェクトのコンテンツ構造・コンポーネント設計を調査完了
- Codexレビューでファイル名の推定ミスなど2点を修正し、計画を確定
- 2,338個のSVGファイル（169MB）をGit LFSで管理・プッシュ
2. 教育コンテンツUIのデザイン改善
既存SlideViewerの860px幅が窮屈で、テキスト側が340pxに押し込められていた。幅の調整だけでなく、コンテンツの見せ方を抜本的に見直した。
主な成果:
- Theater型・Scrollytelling型・Stepper型の3パターンを実装して比較
- Theater型を採用 → TheaterViewerコンポーネントとして切り出し
- ページ全体を書き換えて743行→140行にスリム化
- Scrollytellingのバグ修正（IntersectionObserverの遷移飛び、末尾余白）
- レスポンシブ対応（モバイルでインターリーブ縦並び表示）
- ミラーカラムレイアウト（大・中・小カテゴリの3カラム + Theater型）を試作
詳細: 教育コンテンツUIを抜本改善
今日の学び
- Chrome DevToolsでCSS注入してレイアウト案をライブ比較すると、ユーザーとの合意が速い
- IntersectionObserverのコールバックは「変化した要素のみ」を含むため、全カードの可視率比較には注意が必要
- コンポーネント化で743行→140行に縮まった。早い段階でコンポーネント化を見据えた設計をすると手戻りが減る
明日やること
- 簿記3級Chapter 1の残りページ（02〜04）をTheater型で移行
- ミラーカラムレイアウトの採用可否を最終判断
- TheaterViewerのキーボードナビゲーション（←→キー）対応