マイクロン決算の「期待との差」をSVGチャートで可視化する

やったこと

投資の教科書 ch08（投資原則）のページに、マイクロン（ティッカー: MU）の決算「期待との差」を可視化する新規SVGコンポーネント Part2Ch8MuExpectations.vue を作った。

並べた指標は4つ。

これを直近3四半期分（FY2025 Q2〜Q4）並列棒で描き、5つ目に株価バンドのチャートを追加した。株価は Koyfin から拾った値をそのまま入れた。

加えて、レスポンシブ表示で目次が画面下にしか出ていなかったので、画面右下のフローティングFAB＋スライドパネル方式に作り直した。

最初の実装から「これでOK」と言われるまで、11回 Claude Code に作り直してもらった。順番に並べる。

並列棒の真上に値を出したら、隣のバーのラベルと文字が被った。「予想バーは左外側、実績バーは右外側にラベルを置いて」と指示して逃がした。

最初は株価だけ別スタイルだった。「他4つと同じスタイルの5つ目のチャート（横長）として作って」と頼み、軸・色・フォントを揃えた。

四半期ラベルを「2025 Q4」と書いたら、決算期がカレンダーとズレている。「Fiscal Year なるほど、FY2025 Q4 で書いて」と返ってきたので全箇所を直してもらった。マイクロンは8月決算。

株価バッジを「下落／上昇」で雑に色分けして矢印を出していたら、「終値そのものを直接表示にして」と指摘された。色分けは捨てて、$XXX.XX を表に出した。

FY2026 Q3（決算前）も入れて、アナリスト予想だけ表示。そこに現在株価 $724.66 を併記した。「これから当てるべき数字」を画面に残した。

5つのチャートを横に並べたら、1つあたりが狭くて潰れた。「全部縦に積んで、横長 1160px にして」と指示して、上から順にスクロールで読む形に変えた。

「実績がコンセンサスを何%上回ったか」のバッジは、最初は四半期ラベルの下に置いていた。「チャート内、バーの上に出して」と移動させた。視線がバーから離れずに済む。

$100以上は整数、それ未満は小数2桁、と桁数ルールを決めて文字幅を詰めた。たとえば売上は「$ 8,053M」、EPSは「$1.84」と書き分けた。

それでもバッジと値ラベルが被った。値ラベルの上に 20px の余白を確保するようバー上端のy座標を調整した。

「もうちょっと数字大きく」と言われ、バー間隔を広げて、バー上の数値フォントを上げた。

文章中に「ガイダンスを毎四半期15〜20%以上の大幅マージンで上回り続けている」と書いていた。ユーザーから「予実の差を『マージン』とは言わない」とNGが出た。

ch08 配下を margin|マージン で grep し、誤用2箇所を「上回り幅」「乖離」に直してもらった。営業CFマージン・安全マージンは会計用語として正規なのでそのまま残した。

このセッションで自分が手を動かしたのは、画面を見て「これ重なってる」「FYで書いて」「マージンっておかしい」と違和感を口で伝えるところだけ。

SVGの座標計算、レスポンシブ調整、フォントサイズの再配置、grep+置換は全部 Claude Code に書かせた。

人間: 違和感を拾う係。 AI: 座標とテキストを書く係。

特に11回目の「マージン」誤用は、AIが書いた英訳的な日本語をそのまま通していたら気づかなかった。会計用語の正確さは目で守るしかない、と再確認した。