開発mdx-playground

きっかけ：南亞科技の「数量ではなく値段だけで稼いだ四半期」

きっかけは外で見かけた1行だった。 「南亞科技の1-3月期は売上が前年同期比+582.9%、粗利益率は67.9%まで跳ね、平均販売価格は前期比+70%なのにビット出荷はむしろ微減」。 数量が動いていないのに ASP（平均販売価格）だけで稼ぎ切る四半期というのは絵として強い。 これは /memory-makers/ 配下に持ってきたい、と思った。

最初に「Powerchip（力晶, PSMC）が /memory-makers/makers に入っていない気がする」と Claude Code に伝えたが、調べさせたら既に登録済みだった。 リスト上の横棒を社名と勘違いしていただけだったので謝って、本題の南亞科技に切り替えた。

やってみたら IR の出し方がやや特殊だった

「ASP と Bit 出荷量を四半期で取れるか」を Claude Code に調べさせたら、南亞科技は公式 IR で開示はしている、ただしレンジ表記で出している、ということが分かった。 Micron のように +18.5% という具体的な数値ではなく、ASP 季增超過 70 位數百分比 / Bit Shipment 季減中個位數百分比 のような書き方だ。 「>+70%」「mid-single digit 減」というニュアンスを言葉で投げてくる。

最初は makers.ts の overview 末尾に文章で説明文を追記してもらった。 ところが表示確認のスクショを見たら、自分が欲しかったのは「数字の記述」ではなく「チャート」だった、と気付いた。 売上の方は月次でグラフになっているのに、この ASP / Bit Shipment は文章で並んでいるだけだ。違和感が残った。

「中央値で勝手に数値化」をやめて、IR の記号をそのまま見せる

最初に Claude Code が出してきた案は、レンジ表記を中央値で数値化してプロットするものだった。 たとえば「>+70%」なら「+75%」と仮置きしてバーを伸ばす、という発想。 グラフは描けるが、これは南亞科技が言っていない数字を画面に書くことになる。 そこで「+75 とは言ってないじゃないですか。記号でいいです」と方針を切り替えた。

ここからチャート側のリファクタが始まる。

  • まず GroupedBarChart に「ラベルだけ外から上書きできる optional な prop」を追加してもらった。後方互換は維持。
  • バーの長さを描くための中央値は裏で持っておくが、画面に見せる文字は >+70% +mid -low 20s のようなIR 原文の記号にする。
  • 小さなバーでもラベルが消えないように、valueLabels を渡したときは「短いバーはラベル省略」のしきい値を無視する分岐を入れる。

これで「+75 と勝手に書く」問題は消えた。

棒 → 折れ線 → 個別コンポーネントに切り出し

ここでもう一段方針が変わった。 QoQ の変化率を棒で並べていたが、ASP と Bit 出荷の並走関係（ASP は跳ね、Bit は横ばい）を見たいので、棒 → 折れ線に切り替えた。 SegmentLineChart 側にも valueLabels 上書きを足して、[maker].vue を差し替え。

ここまで来てから、ようやく「配置がそもそも変だ」と気付いた。 最初は showSignalsLayers セクション直後（ページ下のシグナル群の中）に置いていたが、これは ASP / Bit 出荷量という売上の分解情報だ。 四半期売上高チャートの真下に置いた方が、読み手の思考に沿う。 配置を QuarterlyRevenueChart の直下に移植した。

そのうえで Claude Code は SegmentLineChart を直接書き換えようとしたが、他ページからも使われているコンポーネントなので壊したくない。 QuarterlyRevenueChart のトンマナ（#fafafa の背景パネル、年境の 4px dashed #A6A6A6 縦線、年ラベル）を踏襲した Nanya 専用の折れ線コンポーネント NanyaAspBitChart.vue を新規で切り出させた。

結果、/memory-makers/nanya の売上セクションの直下に、ASP / Bit 出荷量の QoQ 変化率を IR 原文記号付きで折れ線2系列で描くチャートが収まった。 売上が跳ねている隣で「数量はほぼ横ばい・ASP だけ突き抜ける」線が並ぶ。絵として読みやすい。

ついでに DRAM 4社比較などの「トンマナ揃ってない問題」も片付ける

Nanya のチャートが綺麗に収まったのを見て、ユーザーから次の指摘が来た。 「他の箇所、たとえば DRAM 4社の市販機売上比較などのチャートも、ここは全部トーンとマナーが合ってないじゃないですか」。

確かに、/memory-makers/ 配下のチャートは段階的に作ってきたので、コンポーネントごとに座標系・余白・凡例位置・フォントが微妙にズレていた。 横串でリファクタすることにして、まずサブエージェントに全ページのチャートを監査させた。 監査結果を見て、基準は QuarterlyRevenueChart（1200 座標系・背景パネル #fafafa・年境縦点線・凡例上部・共通フォントファミリ）と決めた。

そこから 4 ステップで進めた。

  • Step 1: QuarterlyEpsChart — もともと基準に近かった。凡例（最新Q=マゼンタ / 黒字=濃グレー / 赤字=薄グレー）と年境縦点線を足して終了。
  • Step 2: SegmentLineChart — 内部だけ書き直し、外向きの prop は据え置き。他ページから呼ばれているので壊さない。
  • Step 3: GroupedBarChart — 1200 座標系・背景パネル・凡例位置・フォントを基準側に寄せる。
  • Step 4: StackedBarChart — Step 3 と同じ要領で書き直し。再起動を 1 回に減らすため Step 3 と連続して反映。

memo/2026-06-23/ にステップごとのスクショ（step1-eps-chart-aligned.png / step2-segmentlinechart-skhynix-margin.png / step3-groupedbar-skhynix-signals.png / step3-groupedbar-nanya-dram-compare.png / step4-stackedbar-dram-fab-capacity.png）が残っている。 監査 → 共通基準を1枚決める → ステップごとに合わせる、という順序がよかった。「全部いっぺんに直す」と必ずどこかが壊れる。

詰まりどころ：HMR と dev サーバーの 503

途中で何度か HMR が反映されない場面があり、SSR HTML には新セクションが出ているのに画面が古いままという挙動になった。 最初は Chrome 側のキャッシュを疑ってハードリロードしたが直らず、結局 port 3000 の Nuxt CLI プロセスだけを kill して dev サーバーを立て直したら反映された。 Step 3/4 を一気に反映したときは dev サーバーが一時的に 503 を返して、これも立て直しで復帰。 チャートコンポーネントを連続して書き換えるときは、.nuxt/dist の再生成が間に合わないことがあるという感触を得た。

taskkill //IM node.exe //F は Claude Code 自体が落ちるので絶対使わず、ポート単位で Get-NetTCPConnection -LocalPort 3000 から PID を出して Stop-Process する手順を守った。

学び

  • 「文章で説明 → チャート」「中央値で数値化 → IR 原文記号」のような方針反転は、画面を見てから初めて気付ける。最初から正解は出てこない。スクショで見て違和感を拾うのが一番早い。
  • 共通コンポーネントを直接書き換えたい誘惑に勝つ。SegmentLineChart は他ページからも使われているので、Nanya 専用の折れ線は別ファイル（NanyaAspBitChart.vue）に切り出した。後方互換を保つ判断は正しかった。
  • 横串リファクタは「基準を 1 つ決める → サブエージェントで全ページ監査 → ステップごとに反映」。QuarterlyRevenueChart を基準に置けたのが効いた。基準が無いと「どれに合わせるのか」で迷子になる。
  • 「会社が言っていない数字を画面に書かない」。レンジ表記を中央値で勝手に確定させるのは、技術的にはチャートが描けるが情報の解像度を勝手に上げてしまう。IR 原文の記号をそのまま出す方が誠実だ。

触ったファイル

  • apps/web/app/components/memory-makers/NanyaAspBitChart.vue（新規）
  • apps/web/app/components/memory-makers/GroupedBarChart.vue（トンマナ統一・valueLabels 上書き対応）
  • apps/web/app/components/memory-makers/QuarterlyEpsChart.vue（凡例＋年境縦点線）
  • apps/web/app/components/memory-makers/SegmentLineChart.vue（基準に寄せて書き直し）
  • apps/web/app/components/memory-makers/StackedBarChart.vue（基準に寄せて書き直し）
  • apps/web/app/pages/memory-makers/[maker].vue（Nanya セクションを売上チャート直下に移植・新コンポーネント import）

南亞科技の個別ページは /memory-makers/nanya で見られる。