[{"data":1,"prerenderedAt":244},["ShallowReactive",2],{"content-/mu-expectations-chart":3,"all-pages-for-dir":242,"og-image-/mu-expectations-chart":243},{"id":4,"title":5,"body":6,"category":223,"description":224,"extension":225,"meta":226,"navigation":227,"ogImage":228,"path":229,"project_name":230,"published":231,"publishedAt":232,"seo":233,"stem":234,"tags":235,"todo":228,"unpublished":231,"updatedAt":228,"__hash__":241},"pages/2026-05/2026-05-16/mu-expectations-chart.md","マイクロン決算の「期待との差」をSVGチャートで可視化する",{"type":7,"value":8,"toc":201},"minimark",[9,13,22,25,41,44,47,50,53,58,61,65,68,72,75,79,82,86,89,93,96,100,103,107,116,120,123,127,130,134,137,144,148,151,154,157,160,163,190,193],[10,11,12],"h2",{"id":12},"やったこと",[14,15,16,17,21],"p",{},"投資の教科書 ch08（投資原則）のページに、マイクロン（ティッカー: MU）の決算「期待との差」を可視化する新規SVGコンポーネント ",[18,19,20],"code",{},"Part2Ch8MuExpectations.vue"," を作った。",[14,23,24],{},"並べた指標は4つ。",[26,27,28,32,35,38],"ul",{},[29,30,31],"li",{},"売上（実績 vs アナリスト予想）",[29,33,34],{},"EPS（実績 vs アナリスト予想）",[29,36,37],{},"次四半期ガイダンス売上（会社発表 vs アナリスト予想）",[29,39,40],{},"次四半期ガイダンスEPS（会社発表 vs アナリスト予想）",[14,42,43],{},"これを直近3四半期分（FY2025 Q2〜Q4）並列棒で描き、5つ目に株価バンドのチャートを追加した。株価は Koyfin から拾った値をそのまま入れた。",[14,45,46],{},"加えて、レスポンシブ表示で目次が画面下にしか出ていなかったので、画面右下のフローティングFAB＋スライドパネル方式に作り直した。",[10,48,49],{"id":49},"試行錯誤の11イテレーション",[14,51,52],{},"最初の実装から「これでOK」と言われるまで、11回 Claude Code に作り直してもらった。順番に並べる。",[54,55,57],"h3",{"id":56},"_1-値ラベルが重なる","1. 値ラベルが重なる",[14,59,60],{},"並列棒の真上に値を出したら、隣のバーのラベルと文字が被った。「予想バーは左外側、実績バーは右外側にラベルを置いて」と指示して逃がした。",[54,62,64],{"id":63},"_2-株価チャートの統一感","2. 株価チャートの統一感",[14,66,67],{},"最初は株価だけ別スタイルだった。「他4つと同じスタイルの5つ目のチャート（横長）として作って」と頼み、軸・色・フォントを揃えた。",[54,69,71],{"id":70},"_3-fy表記の修正","3. FY表記の修正",[14,73,74],{},"四半期ラベルを「2025 Q4」と書いたら、決算期がカレンダーとズレている。「Fiscal Year なるほど、FY2025 Q4 で書いて」と返ってきたので全箇所を直してもらった。マイクロンは8月決算。",[54,76,78],{"id":77},"_4-株価バッジを終値表示に","4. 株価バッジを終値表示に",[14,80,81],{},"株価バッジを「下落／上昇」で雑に色分けして矢印を出していたら、「終値そのものを直接表示にして」と指摘された。色分けは捨てて、$XXX.XX を表に出した。",[54,83,85],{"id":84},"_5-未発表四半期も入れる","5. 未発表四半期も入れる",[14,87,88],{},"FY2026 Q3（決算前）も入れて、アナリスト予想だけ表示。そこに現在株価 $724.66 を併記した。「これから当てるべき数字」を画面に残した。",[54,90,92],{"id":91},"_6-横並びをやめて縦に積む","6. 横並びをやめて縦に積む",[14,94,95],{},"5つのチャートを横に並べたら、1つあたりが狭くて潰れた。「全部縦に積んで、横長 1160px にして」と指示して、上から順にスクロールで読む形に変えた。",[54,97,99],{"id":98},"_7-サプライズバッジをバー上へ","7. サプライズ%バッジをバー上へ",[14,101,102],{},"「実績がコンセンサスを何%上回ったか」のバッジは、最初は四半期ラベルの下に置いていた。「チャート内、バーの上に出して」と移動させた。視線がバーから離れずに済む。",[54,104,106],{"id":105},"_8-整数化でスペース確保","8. 整数化でスペース確保",[14,108,109,115],{},[18,110,114],{"className":111},[112,113],"language-math","math-inline","100以上は整数、それ未満は小数2桁、と桁数ルールを決めて文字幅を詰めた。たとえば売上は「","8,053M」、EPSは「$1.84」と書き分けた。",[54,117,119],{"id":118},"_9-バッジと値ラベルの衝突","9. バッジと値ラベルの衝突",[14,121,122],{},"それでもバッジと値ラベルが被った。値ラベルの上に 20px の余白を確保するようバー上端のy座標を調整した。",[54,124,126],{"id":125},"_10-数字を大きく","10. 数字を大きく",[14,128,129],{},"「もうちょっと数字大きく」と言われ、バー間隔を広げて、バー上の数値フォントを上げた。",[54,131,133],{"id":132},"_11-マージン誤用の修正","11. 「マージン」誤用の修正",[14,135,136],{},"文章中に「ガイダンスを毎四半期15〜20%以上の大幅マージンで上回り続けている」と書いていた。ユーザーから「予実の差を『マージン』とは言わない」とNGが出た。",[14,138,139,140,143],{},"ch08 配下を ",[18,141,142],{},"margin|マージン"," で grep し、誤用2箇所を「上回り幅」「乖離」に直してもらった。営業CFマージン・安全マージンは会計用語として正規なのでそのまま残した。",[10,145,147],{"id":146},"画面を見る係と実装する係","「画面を見る係」と「実装する係」",[14,149,150],{},"このセッションで自分が手を動かしたのは、画面を見て「これ重なってる」「FYで書いて」「マージンっておかしい」と違和感を口で伝えるところだけ。",[14,152,153],{},"SVGの座標計算、レスポンシブ調整、フォントサイズの再配置、grep+置換は全部 Claude Code に書かせた。",[14,155,156],{},"人間: 違和感を拾う係。\nAI: 座標とテキストを書く係。",[14,158,159],{},"特に11回目の「マージン」誤用は、AIが書いた英訳的な日本語をそのまま通していたら気づかなかった。会計用語の正確さは目で守るしかない、と再確認した。",[10,161,162],{"id":162},"学んだこと",[26,164,165,172,178,184],{},[29,166,167,171],{},[168,169,170],"strong",{},"チャートのレイアウトは一発で決まらない",": 11回の作り直しを前提に、SVG生成を関数化しておくと差し替えが早い",[29,173,174,177],{},[168,175,176],{},"「マージン」は予実差には使わない",": 営業CFマージン、安全マージンは正規用語。期待値との差は「上回り幅」「乖離」「サプライズ%」を使う",[29,179,180,183],{},[168,181,182],{},"未発表四半期もチャートに入れる",": 「これから当てるべき数字」を視野に入れると、過去3四半期のトレンドが意味を持つ",[29,185,186,189],{},[168,187,188],{},"チャートを横に並べるな",": 1160px横長で縦に積むと、1指標1スクロールで読める",[10,191,192],{"id":192},"関連",[26,194,195,198],{},[29,196,197],{},"投資の教科書 ch08（投資原則）に組み込み済み",[29,199,200],{},"データソース: マイクロン IR、Koyfin",{"title":202,"searchDepth":203,"depth":203,"links":204},"",2,[205,206,220,221,222],{"id":12,"depth":203,"text":12},{"id":49,"depth":203,"text":49,"children":207},[208,210,211,212,213,214,215,216,217,218,219],{"id":56,"depth":209,"text":57},3,{"id":63,"depth":209,"text":64},{"id":70,"depth":209,"text":71},{"id":77,"depth":209,"text":78},{"id":84,"depth":209,"text":85},{"id":91,"depth":209,"text":92},{"id":98,"depth":209,"text":99},{"id":105,"depth":209,"text":106},{"id":118,"depth":209,"text":119},{"id":125,"depth":209,"text":126},{"id":132,"depth":209,"text":133},{"id":146,"depth":203,"text":147},{"id":162,"depth":203,"text":162},{"id":192,"depth":203,"text":192},"dev","マイクロン（MU）の4指標×3四半期の実績とアナリスト予想を並列棒で並べたSVGチャートを新規実装し、UIフィードバックに11回応じて作り直した記録","md",{},true,null,"/mu-expectations-chart","eurekapu-nuxt4",false,"2026-05-16T00:00:00.000Z",{"title":5,"description":224},"2026-05/2026-05-16/mu-expectations-chart",[236,237,238,239,240],"SVG","Vue 3","決算分析","チャート設計","UIフィードバック","5iWgQI401r2YUMJsapZrndM9iERmQAzHkaqyvBg5o4E",[],"https://log.eurekapu.com/og/blog/mu-expectations-chart.png?v=2026-05-16T00%3A00%3A00.000Z&title=%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%83%B3%E6%B1%BA%E7%AE%97%E3%81%AE%E3%80%8C%E6%9C%9F%E5%BE%85%E3%81%A8%E3%81%AE%E5%B7%AE%E3%80%8D%E3%82%92SVG%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88%E3%81%A7%E5%8F%AF%E8%A6%96%E5%8C%96%E3%81%99%E3%82%8B&author=Kei%20Komatsu&sig=00def6500da3ed7a",1782528837239]