2026年5月16日の開発日記
土曜日。午前中は昨日の積み残しに着手して、Part 2 投資判断クイズ75問のVOICEVOX音声化パイプラインを本番デプロイまで一気に通した。午後はマイクロン（MU）の決算「期待との差」を可視化するSVGチャートを新規実装して、ユーザー視点での違和感を拾いながら11回ほどClaude Codeに作り直してもらった。
人間が手を動かしたのは「音声化やっていきましょう」「マージンっておかしい」「数字大きく」程度の判断だけで、SVG座標計算もWAV合成スクリプトもgrep+置換もClaude Codeに丸投げした。判断する係と実行する係の分担が今日もうまく回った。
今日のタイムライン
今日やったこと
1. Part 2 投資判断クイズ75問のVOICEVOX音声化パイプライン
朝、昨日の積み残しに着手。既存のA/B/C用JSONベース音声化スクリプトをTSファイル対応に拡張し、誤答パターンDも合成対象に追加。investment-1/2/3の全75問（25+18+32）を順次合成→MP3変換→Cloudflare R2へ並列アップロード→Nuxtページの18箇所にnarrationConfigを一括追加→localhost:3200と本番サイトで音声再生フル確認→デプロイ（5.4分）まで一気通貫で完走。
主な成果:
- WAV 150問合成、151ファイルMP3変換、R2アップロード完了
- 18ページ分の narrationConfig をPython一括置換で挿入
- ローカル・本番の両方で音声再生フロー検証
- PowerShellのhere-string失敗からPython代替への切り替え経験
INV-NESTprefix typo（正しくはNESTEGG）を404から発見・修正
詳細: 投資判断クイズ75問をVOICEVOXで音声化：WAV合成→MP3→Cloudflare R2まで一気通貫の自動化ログ
2. マイクロン決算「期待との差」をSVGチャートで可視化
午後、投資の教科書 ch08（投資原則）ページに、マイクロン（ティッカー: MU）の決算「期待との差」を可視化する Part2Ch8MuExpectations.vue を新規実装。4指標（売上・EPS・ガイダンス売上・ガイダンスEPS）× 3四半期の実績vs予想を並列棒で並べ、株価バンドを5つ目のチャートとして横長で統合。レスポンシブの目次もフローティングFAB+スライドパネルに改修。
主な成果:
- 11回のイテレーションで完成（値ラベル衝突→FY表記修正→株価終値表示→未発表四半期追加→縦積み→バッジ位置→整数化→数字拡大）
- 「マージン」誤用の修正（予実の差は「上回り幅」「乖離」「サプライズ%」に置換）
- レスポンシブ時のフローティング目次（FAB+スライドパネル）の実装
- 営業CFマージン・安全マージンは会計用語として正規なので残す判断
詳細: マイクロン決算の「期待との差」をSVGチャートで可視化する
3. マイクロン売上・EPS四半期推移チャート（3本ペア表示）
「期待との差」図とは独立した新規図 Part2Ch8MuFutureProjection.vue を作成。売上とEPSの四半期推移を、事前アナリスト予想・実績・会社ガイダンスの3本ペアで縦に積んだ。表示モードを pair / reported-only / future-only の3パターンで分岐させ、過去・現在・将来をひとつのコンポーネントで切り替え可能に。
途中、半年前のコンセンサス予想の所在をClaude Codeに聞いたら曖昧な回答が返ってきて、WebFetchで実画面確認後に訂正させる一幕もあった。AIの曖昧な記憶を鵜呑みにしないこと、を再確認した。
主な成果:
- 実績のみ → ペア化 → ガイダンス追加 → FY2028削除と4段階で構造を組み替え
- 凡例とスタイルを3バー対応に拡張
- AIに誤情報を答えられて訂正させた経緯を記録
詳細: マイクロン四半期推移チャート：事前予想・実績・会社ガイダンスの3本ペア表示
今日の試行錯誤
| # | テーマ | 試したこと | 結果 | 気づき |
|---|---|---|---|---|
| 1 | VOICEVOX一括合成 | A/B/C用JSONスクリプトをTS対応＋Dパターン追加に拡張 | 成功 | 既存スクリプトの拡張は新規作成より速い |
| 2 | 18ページの一括置換 | PowerShellのhere-stringで narrationConfig 挿入 | 失敗（引用符エスケープで詰まる） | Windowsの長文置換はPython一択 |
| 3 | 18ページの一括置換 | Pythonに切り替えて再実行 | 成功 | 最初からPythonでよかった |
| 4 | R2アップロード | _common先行→investment-1/2/3を3並列でアップロード | 成功 | 並列実行で数分で完了 |
| 5 | 音声再生確認 | localhost:3200 でautoモード→開始ボタン | 一部失敗（404） | INV-NEST prefix typoを耳と目で発見 |
| 6 | prefix修正 | INV-NEST → NESTEGG に修正 | 成功 | 人間は違和感を拾う係、AIが原因特定 |
| 7 | チャート値ラベル | 並列棒の真上にラベル配置 | 失敗（隣バーと重なる） | 予想は左外側、実績は右外側へ |
| 8 | 四半期表記 | 「2025 Q4」と書く | 失敗（カレンダーとズレ） | マイクロンは8月決算、FY表記が必要 |
| 9 | 株価バッジ | 下落/上昇を色分け＋矢印 | 失敗（雑なメッセージライン） | 終値を直接表示に置換 |
| 10 | 5チャート配置 | 横並びで配置 | 失敗（1つあたり狭く潰れる） | 全部縦に積む、横長1160pxで |
| 11 | サプライズ%バッジ | チャート外（四半期ラベル下）に配置 | 失敗（視線が散る） | チャート内・バー上に移動 |
| 12 | バッジと値ラベル衝突 | 同じ高さに重ねる | 失敗（被る） | 20pxマージンを取って積層 |
| 13 | 「マージン」誤用 | 「15〜20%の大幅マージンで上回る」と表現 | NG（予実差をマージンとは言わない） | 「上回り幅」「乖離」「サプライズ%」に置換 |
| 14 | 半年前のコンセンサス予想の所在 | AIに口頭で質問 | 曖昧な回答が返る | WebFetchで実画面確認後に訂正させた |
| 15 | 将来予想チャート | 実績のみの2チャート | 不十分 | ペア化→ガイダンス追加→FY2028削除と段階的に整理 |
今日の学び
- VOICEVOXパイプラインの汎用性: テキスト→音声→クラウドストレージ→再生エンドポイントの構造は、投資判断クイズでも税務通達でも同じ。コンテンツを差し替えるだけで再利用可能
- PowerShellのhere-stringは長文置換と相性が悪い: 最初からPythonで書く
- 音声品質チェックは耳が頼り: 75問全てを聞いたわけではないが、サンプリングで違和感を拾える
- チャートのレイアウトは一発で決まらない: 11回の作り直しを前提に、SVG生成を関数化しておくと差し替えが早い
- 「マージン」は予実差には使わない: 営業CFマージン、安全マージンは会計用語として正規。期待値との差は「上回り幅」「乖離」「サプライズ%」を使う
- AIの曖昧な記憶は信じすぎない: 特に有料サービスの機能詳細は、WebFetchやagent-browserで実画面を確認する
- 未発表四半期もチャートに入れる: 「これから当てるべき数字」を視野に入れると、過去のトレンドが意味を持つ
- データがあるから載せるな: 読み手が読める範囲だけ残す。FY2028を切った判断と同じ
明日やること
- narrationConfigのデフォルト値を親コンポーネント側に寄せ、ページ側で書かなくても動くようにする
- R2に存在しないキーを叩いた瞬間にコンソール警告を出すフォールバック実装
- WAV→MP3変換のビットレート再検討
- その他の積み残し（業種別実例クイズの状況確認は完了済みなので除外）