2026年3月2日の開発日記

朝7時にエディタを開いてから夕方まで、22セッションを重ねた。クイズの回答画面にBS/PLがリアルタイムで動く機能を載せ、テストをゼロから215本まで積み上げ、UIの細かい違和感を一つずつ潰していった。

今日やったこと

1. BS/PLインタラクティブ表示の設計・実装

クイズで仕訳を回答するたびに、BS（貸借対照表）とPL（損益計算書）の数字がリアルタイムで動く機能を実装した。92科目のマッピングを組み、累積モード（セッション通しで残高が積み上がる）と単体モード（1問ごとのインパクトを見る）の2つを切り替えられるようにした。

主な成果:

勘定科目マッピング（92科目→5分類）の構築
累積/単体モードのラジオカード型切替UI
純資産の階層表示（利益剰余金→利益準備金/繰越利益剰余金/当期純利益）
変動科目の青ハイライト機能（netIncomeChangedフラグ追加）
equity合算バグ・ハイライト条件バグの修正
PC横並び/スマホ縦積みのレスポンシブ対応

詳細: 簿記クイズにBS/PLリアルタイム表示を実装

2. テスト基盤整備とカバレッジ改善

朝の時点でテストゼロだったプロジェクトに、8ステップの計画を立てて一気にテストを積み上げた。Composable→サーバーAPI→セキュリティ修正→E2E→ベンチマークと順に進め、最終的に215テスト全パスに到達。

主な成果:

Composableテスト（questionId, useQuizHistory）
サーバーAPIテスト12ファイル（vi.hoisted()モック注入パターン確立）
セキュリティ修正3件（バリデーション強化、署名検証、SQLインジェクション対策）
E2Eテスト62件（Playwright）
ベンチマーク3ファイル
batch API化・ヘルスチェック深化のコード改善

詳細: テスト基盤整備とカバレッジ改善

3. クイズUI/UX改善・オンボーディング

初見ユーザーが何をすればいいか一目でわかるオンボーディングモーダルを実装し、選択ボタンのスタイルや判定ロジックなど細かいUXの違和感を潰した。

主な成果:

4ステップオンボーディングモーダルの設計・実装
複数回答判定の修正（選択数が足りない間はpendingを返す）
選択ボタン（黒背景→薄いブルー+青ボーダー）
スケルトンUI・エラー・空状態の3画面実装
ログインプロンプトモーダルのデザイン改善
選択肢データの構造化（文字列→{account, amount}オブジェクト）

詳細: クイズUI/UX改善

4. トップページ改修とUdemy講座ページ新設

トップページのレイアウトを見直し、コンテンツが先に目に入る構成に変更。さらにUdemy講座の一覧ページと詳細ページ3本を新設した。

主な成果:

コンテンツカードをヒーローセクションの前に配置
home.vueレイアウトを新規作成（default.vueへの影響回避）
Udemy講座一覧ページ（/udemy）新設
各講座の詳細ページ3本（メタ情報・カリキュラム・CTA付き）
Chrome DevToolsでデスクトップ/モバイル両方を検証

詳細: トップページ改修とUdemy講座ページ新設

今日の学び

テストを書く作業がそのままコードレビューになる。セキュリティ修正3件はテスト追加中に発見した
単体モードと累積モードの切替は、同じデータ構造の上に載せると実装が楽になる
オンボーディングの dismissed/completed を分離しておくと、表示制御の自由度が上がる
レイアウト変更は既存ページへの影響が大きいので、専用レイアウトファイルで隔離するのが安全

明日やること

BS/PLインタラクティブ表示のブラウザ検証（Chrome DevTools）
オンボーディングモーダルの本番デプロイと動作確認
Udemy講座ページのサムネイル画像設置
テストカバレッジのさらなる改善

関連記事