開発financial-data

きっかけ: 1ページにいろいろ詰めすぎて見づらくなった

/memory-makers を開くたびに、市場全体の話・各メーカーの月次推移・輸出統計が縦に積み上がって、どこに何があるかスクロールで見失うようになっていた。トップページの「メモリーメーカー動向」カード1枚も、中身が混在していて結局リンク先に飛んでから探す動線になっている。

そこに加えて、これからハイパースケーラーの設備投資データを Capex チャートとして載せたい。そのまま /memory-makers の下にもう1セクション足すと、縦長スクロールがさらに伸びる。

ここで一度切ろうと判断した。

ハブ＋4サブページ構成に分割した

/memory-makers をハブにして、内容ごとにサブページへ切り出した。

  • /memory-makers/market — 市場全体（DRAM/NAND の値動き等）
  • /memory-makers/makers — メーカー別の月次売上推移
  • /memory-makers/hyperscaler-capex — ハイパースケーラーの設備投資（新規）
  • /memory-makers/exports — 輸出の統計

ファイル配置は apps/web/app/pages/memory-makers/ 配下に market.vue / makers.vue / hyperscaler-capex.vue / exports.vue を並べ、index.vue をハブカード4枚に置き換えた。トップページの / も、「メモリーメーカー動向」1枚を4枚に分けて、ハブと同じ並びにそろえた。

ハブを4枚にしたことで、それぞれのカードが「自分の責務はこれ」と1行で名乗れるようになった。市場の話を見たい人は market、メーカー各社の月次が見たい人は makers、というふうに、入口で分岐できる。

ハイパースケーラー Capex: まず年次データを置く

最初は UBS のスプレッドシートから 9 社の 2017〜2028E 年次 Capex（USD billion）を取り、StackedBarChart に積み上げた。データは apps/web/app/data/memory-makers/hyperscalerCapex.ts に固定値で書き出している。

年次は積み上げで全体感を見るには十分だが、設備投資の話は四半期の動きとガイダンスがほしい。次にコイフィンから四半期データを引きに行った。

四半期データは Koyfin から引いた

既存の Koyfin 取得スクリプトを覗いたら、四半期テーブルに is_actual フラグがあり、1 で実績・0 でアナリスト推定（コンセンサス）と区別できる構造になっていた。これなら「直近の実績まで」と「ガイダンス込みの先行き」を同じ系列で繋げられる。

apps/web/scripts/generate-hyperscaler-capex-quarterly.mjs を新しく書いて、7 社（MSFT・GOOGL・AMZN・META・AAPL・ORCL・CRWV）の四半期 Capex を吐き出させ、apps/web/app/data/memory-makers/hyperscalerCapexQuarterly.ts に保存。実績は CY2025Q3 (MSFT) まで揃い、CY2025Q4 以降はコンセンサスに切り替わる。

試行錯誤1: 3カラムだと数字が被って読めない

初手のチャートは、7社を1つのチャートにまとめた積み上げ棒＋小さい small multiples を3カラムで横並びにしていた。

画面を出して見たら、X軸ラベルが重なって '24Q1' が読めず、Y軸スケールもバーの高さが社ごとにバラバラで頭に入ってこない。

「これ被ってるんで見えないですね。」

3カラム×横並びを諦め、個社別の small multiples を縦に1カラムで7枚並べる構成に組み直した。これで各社が横長のチャートを1つずつ持ち、X軸の '23Q1〜'27Q4 の四半期ラベルが全部読める。

それでも数字が見たい場面はある。各バーに USD billion の値を直接乗せ、実績はソリッド・推定は半透明＋破線、実績と推定の境界に縦点線を入れた。apps/web/app/components/memory-makers/HyperscalerCapexSmallMultiples.vue として新規コンポーネントに切り出した。

縦に7枚並ぶので最初は冗長に見えたが、スクロールしながら各社の四半期の動きを順番に追えるので、結果的にこれが正解だった。

試行錯誤2: 25-Q3 が全社実績で揃ったのが気持ち悪い

チャートを眺めていたら違和感が来た。

「これ25年の休産になってるじゃないですか、全部実績が。それちょっと気になるんですけど、本当ですかこれ。25-Q3」

CY2025Q3 (Sep-30-2025) が 7 社全部 is_actual=1 で実績扱いになっている。今は2026年6月なので決算発表は終わっていてもおかしくはないが、念のため DB を直接見てもらった。

ここで Claude Code に DB を確認させたところ、もっと厄介な構造に気付いた。

  • MSFT と ORCL は会計年度がずれているため、DB には同じ Sep-30-2025 を含む期間で 複数行が入っていた
  • スクリプトが単純な月→四半期マッピングで拾っていたため、ORCL は会計年度の Jul-31-2025 を CY2025Q3 として誤採用し、12,033 という別四半期の数字をチャートに表示していた

正しい値は ORCL 8,502。カレンダー四半期末（3/31・6/30・9/30・12/31）に period_ending が一致する行のみを採用するロジックに直したら、ORCL が正しい値に戻った。MSFT も同様のずれが起きていたので、同じロジックで吸収した。

ただしこの修正は、過去四半期も含めて全社の値を一度棚卸ししないと安心できない範囲なので、明日以降の引き継ぎ事項として memo/2026-06-15/hyperscaler-capex-handover.md にメモを残した。

結果

/memory-makers がハブ＋4サブページに分かれ、各カードが「市場」「メーカー」「ハイパースケーラー Capex」「輸出統計」と1行で名乗るようになった。トップページのカードも同じ並びにそろい、入口の解像度が上がった。

ハイパースケーラー Capex ページは、上部に7社の個社別 small multiples（1カラム×横長、各バーに値）が並び、下に全社合計の積み上げチャートが続く構成。実績と推定が線種で区別され、境界に縦点線が入っているので、どこからがガイダンスかが目で分かる。

学び

  • 1ページに3トピック以上載ったら分割を検討する。スクロールで探す動線が出てきた時点で、入口を増やしたほうが速い
  • small multiples は3カラムより1カラム×横長のほうが読める場面がある。特に「各バーに数字を入れて読ませたい」とき、3カラムだと幅が足りずラベルが潰れる
  • Koyfin の四半期テーブルは会計年度がずれる銘柄に注意。period_ending がカレンダー四半期末と一致する行だけ採用しないと、別四半期の数字を CY 四半期に紛れ込ませることがある

明日やること

  • hyperscaler-capex-handover.md を見ながら、過去四半期の値を全社スポット確認する
  • ガイダンスとアナリストコンセンサスの取り違えがないか、is_actual フラグの境界をもう1回検証する