開発eurekapu-nuxt4

マイクロン四半期推移チャート:事前予想・実績・会社ガイダンスの3本ペア表示

マイクロン(MU)の四半期推移を、事前アナリスト予想・実績・会社ガイダンスの3本ペアで並べたSVGチャートを作った。最初は実績バーだけの2チャートで作り始めて、ペア化→ガイダンス追加→FY2028削除と3回構造を組み替えた。途中、半年前のコンセンサス予想の所在についてAIに聞いたら不正確な答えが返ってきて訂正させた一幕もある。

やったこと

Part2Ch8MuFutureProjection.vue を新規作成して ch08-investment-principles ページに組み込んだ。決算「期待との差」を扱う既存図とは独立した別コンポーネントにしている。

  • 売上(Sales)と EPS の2チャートを縦に積む
  • 1四半期ごとに「事前アナリスト予想」「実績」「会社ガイダンス」の3本をペアで並べる
  • 表示モードを3パターン用意(pair / reported-only / future-only)して、期によって過去・現在・将来を出し分け
  • 凡例とスタイルを3バー対応に拡張

試行錯誤の経過

1. 実績バーのみのシンプル版から開始

最初は実績の縦棒だけを時系列で並べる2チャート構成で組んだ。データは四半期ベースで、Q1〜Q4を1サイクルとして並べるだけ。SVGの座標計算は素直に書ける。

2. 「実績の横に事前予想を並べて」と要望が入る

実績バーの横にアナリスト事前予想を並べてほしい、と方針を切り替えた。ペア表示への変更をClaude Codeに指示して、3パターン分岐(pair / reported-only / future-only)と凡例更新、将来予想と事前コンセンサスを視覚的に区別するスタイル追加までを一気に実装させた。

ペア化すると四半期あたり2本の棒が並ぶので、x座標のオフセット計算が変わる。「予想が実績より低かったのに当てに行ったか外したか」が一目で見える形になった。

3. 半年前のコンセンサス予想の所在をAIに聞いて誤情報を掴まされる

「半年前のコンセンサス予想ってどっか残してたりするウェブサイトあります?」と聞いた。Claude Codeは最初「無料で半年前のコンセンサスをきれいに見られるサイトはほぼない。Koyfin の有料プランで遡れる可能性があるが、自分の知識では曖昧」と答えた。

念のためKoyfinの実ページをWebFetchで取りに行かせたら、機能の詳細が判然としなかった。Claude Codeは「前の回答が不正確でした、訂正します」と訂正を出した。

ここは正直に書いておく。AIの曖昧な記憶を鵜呑みにするとそのまま記事や判断に誤情報が混じる。実画面で確認する手間を惜しまないこと、を自分への戒めとして残す。

4. 会社ガイダンスを3本目として追加

「会社のガイダンスは直近3四半期分は入れられるはず。会社ガイダンスを入れて」と方針を追加した。3本ペア(事前アナリスト予想・実績・会社ガイダンス)に拡張し、凡例にガイダンスを足し、スタイルも追加させた。

ガイダンスは会社自身が示す数字なので、アナリストコンセンサスとは色も透明度も変えた。「会社の手の内」と「市場の予想」と「結果」を1四半期1セットで横並びに見せる構図になった。

5. FY2028を削除してFY2027までに切る

「FY2028 のデータは意味がないので削除」と決めた。データが薄くて読み手のノイズになるだけだった。N_QUARTERS を 16 から 12 に下げ、タイトル・リード・本文に紛れていた「FY2028」表記をすべて「FY2027」に置換した。チャートの横軸が引き締まり、視線が集まる範囲だけが残った。

人間が判断したこと vs AIが実行したこと

担当内容
筆者「実績の横に予想並べて」「ガイダンス入れて」「FY2028いらない」の構造的判断と意図
Claude CodeSVGコンポーネントの新規作成、3パターン分岐の実装、凡例とスタイルの更新、リード文の文言修正
筆者半年前のコンセンサス予想の所在を質問
Claude Code曖昧な記憶で回答 → WebFetchで実画面確認後に訂正

構造の判断は筆者が握り、SVGの座標計算・スタイル分岐・凡例更新の手仕事はClaude Codeに回した。AIに調べ物を頼んだときは、答えの確度を見て実画面の確認まで踏ませることで、誤情報の混入を1回拾った。

学び

  • 四半期推移の見せ方は、棒1本ずつより「予想・実績・ガイダンス」を3本ペアにすると、企業と市場と結果のズレが視線一発で読める
  • AIの曖昧な記憶(特に有料サービスの機能詳細)は信じすぎない。WebFetchやagent-browserで実画面を取りに行く手間を惜しまない
  • 「データがあるから載せる」ではなく「読み手が読める範囲だけ残す」(FY2028を切った判断)が、チャートの密度を上げる
  • 表示モードを pair / reported-only / future-only の3パターンに分けると、過去・現在・将来をひとつのコンポーネントで切り替えられる

関連ファイル

  • apps/web/app/components/Part2Ch8MuFutureProjection.vue — 新規追加した独立SVGコンポーネント
  • apps/web/app/pages/eurekapu/part-2/ch08-investment-principles.vue — チャートを組み込んだ章ページ