開発financial-dataメモ

EDINET四半期財務データの取得パイプラインとNuxt3チャートUI実装

前日に設計だけで半日溶かした四半期ビューアを、今日は朝から一気に組み上げた。別セッションのClaude CodeにPythonスクリプトでJSONを吐いてもらい、そのデータを受け取って表示側を実装する流れ。途中でユーザーの「会社を切り替えるたびに年次に戻るのが面倒」という一言から、localStorageによるタブ状態永続化まで入れることになった。

Pythonスクリプトで四半期データを取得・変換した

edinet-api側のClaude Codeに、前日作成した指示書を渡してスクリプトを実行してもらった。export_quarterly.py が完成し、EDINET DB APIから四半期財務データを取得して累計値から単独四半期値への変換とQ4逆算を行い、JSONを出力する。

累計→単独四半期の変換ルール

四半期報告のP/L・CFは累計値で開示される。Q2の売上高は「上半期の合計」であって、Q2単独の数字ではない。これを単独値に変換するには、前四半期の累計値を差し引く。

  • Q1: そのまま（累計 = 単独）
  • Q2: Q2累計 - Q1累計
  • Q3: Q3累計 - Q2累計
  • Q4: 年次値 - Q3累計（年次データから逆算）

BSはストック値なのでそのまま使う。Q4は四半期報告が存在しないため、年次有報の値から逆算する必要がある。この「Q4逆算」が設計段階でCodexに指摘されたポイントで、テスト時にQ1+Q2+Q3+Q4の合計が年次PLと一致するか検証して全件パスした。

再利用可能なパイプラインとして整備

スクリプト完成後、「次回また同じ手順を踏むのか」という話になった。最初はスキル化を検討したが、export_quarterly.py 自体が uv run python export_quarterly.py の1コマンドで済む再利用可能な成果物になっていたので、スキルではなくCLAUDE.mdにワークフローを追記する形に落ち着いた。新しい企業を追加したければ COMPANIES 辞書にEDINETコードと期末月を足すだけで動く。

四半期チャートUIをNuxt3で実装した

JSONデータを受け取り、表示側の実装に入った。既存の年次データ表示ページに四半期タブを追加する形で進めた。

データ構造の確認で計画を修正

JSONの中身を見て、前日の計画から修正が入った。P/Lは全四半期（Q1-Q4）のデータが揃っていたが、BSはQ4（年次有報由来）のみ、CFデータは四半期にはなかった。当初6チャートの2x3グリッドを想定していたが、データがないものは出せない。BS・CFを外して4チャートの2x2に調整した。

計画段階でCodexレビューを入れたのは正解だったが、実データの構造は実装時にしか確定しない。「計画で決めた通りに作る」のではなく、データを見てから構成を決める柔軟さが必要だった。

年次/四半期タブ切替の実装

最初はチャートパネル（右カラム）だけをタブで切り替える設計にした。しかしユーザーから「ページ全体を切り替えてほしい」とフィードバックが来た。四半期データにはBS詳細やP/L内訳がないので、中央カラムのウォーターフォール・比例縮尺は四半期モードでは出せない。結果として、タブを上部に移動し、年次モードと四半期モードで中央+右カラム全体のレイアウトを切り替える実装にした。

<!-- タブを上部に移動し、ページ全体を切り替え -->
<div class="chart-mode-tabs">
  <button :class="{ active: chartMode === 'annual' }">年次</button>
  <button :class="{ active: chartMode === 'quarterly' }">四半期</button>
</div>

チャート構成の変遷

チャートの構成はユーザーのフィードバックで3回変わった。

  1. 初期案（4チャート2x2）: 売上高・営業利益・経常利益・純利益。データ構造を見て決定
  2. 営業利益+利益率追加: 「純利益じゃなくて営業利益にして、営業利益率もつけて」→売上高+営業利益+営業利益率のコンボチャートに変更
  3. 純利益復活+1列化: 「純利益のチャートも結局見えないままだから入れて」「2列じゃなくて1列にして横いっぱいに」

最終構成は以下の3チャート、1列フル幅レイアウト。

  • 売上高+営業利益+営業利益率コンボチャート（棒+折れ線）
  • 純利益チャート
  • 総資産チャート

2列レイアウトだと四半期の20本のバーが窮屈に詰まって読めなかった。1列フル幅にした瞬間、各四半期のバーの間に余白が生まれて数字が追えるようになった。

四半期データテーブルを新規作成した

チャートだけでなく、数値の一覧テーブルも四半期データに切り替える必要があった。既存の年次テーブルコンポーネントとは構造が異なる（期間ラベルが「FY2024」ではなく「FY2024 Q1」になる等）ため、四半期専用のデータテーブルコンポーネントを新規作成した。親ページで年次/四半期のタブ状態に応じて表示を切り替える。

localStorageでタブ状態を永続化した

ここが今日の実装で一番「なるほど」と思った変更。会社を切り替えると、サイドバーのリンクで別ページに遷移する。遷移するとVueコンポーネントが再マウントされるので、chartMode のrefが初期値の 'annual' に戻る。四半期データを見ていた人が会社Aから会社Bに切り替えると、毎回「年次→四半期」のタブクリックが必要になる。

今は2社だから気にならないが、将来500社に増えたら致命的に面倒になる。localStorage.setItem('chartMode', 'quarterly') で状態を保存し、マウント時に読み出す実装を追加した。

// マウント時にlocalStorageから復元
onMounted(() => {
  const saved = localStorage.getItem('chartMode')
  if (saved) chartMode.value = saved
})
// タブ切替時に保存
watch(chartMode, (val) => localStorage.setItem('chartMode', val))

ただしSSR時にlocalStorageは存在しないので、サーバーサイドでは初期値 'annual' でレンダリングされ、クライアントで 'quarterly' に切り替わる。ハイドレーションミスマッチの警告が出るが、表示は正常に動く。

インデックスページを削除してリダイレクトに変更した

/financial-quiz/edinet のインデックスページには企業一覧が表示されていたが、「ここは不要、どうせサイドバーで切り替える」とのフィードバックで、最初の企業（freee）への自動リダイレクトに置き換えた。一覧ページの存在意義がなくなっていた。

チャートのゼロ位置揃えで手こずった

売上高+営業利益+営業利益率のコンボチャートで、左軸（金額、棒グラフ）のゼロ位置と右軸（利益率%、折れ線）のゼロ位置がずれていた。営業利益がマイナスの年があるため、左軸は0よりも下にバーが伸びる。一方、右軸の0%が左軸の0と別の高さにプロットされてしまい、利益率がマイナスなのにグラフ上ではプラス圏にいるように見える。

修正は、左軸のmin/maxから0の位置（全体に対する比率）を計算し、右軸のスケールを同じ比率で0%が揃うように調整する方式。年次チャートを直した後、四半期チャートにも同じ修正を適用し忘れていてユーザーにスクリーンショットで指摘された。

もうひとつ、値ラベルの「万」表記の問題もあった。formatYenCompact 関数が10,000以上の値を「万」単位に変換していたが、データは既に百万円単位。百万円の値に「万」を掛けて二重に単位変換されていた。百万円の数値をそのまま表示するように修正した。

CFウォーターフォールも追加した

年次データにはCFの3区分合計（営業CF・投資CF・財務CF）と設備投資額があったので、既存の CFWaterfallChart コンポーネントを再利用してキャッシュフローウォーターフォールを追加した。期首現預金から営業CF・設備投資・FCF・その他投資CF・財務CFを経て期末現預金に至る増減を可視化する。

capexデータがないFY2019以前はウォーターフォールを非表示にする条件分岐を入れた。freeeとマネーフォワードの両社で表示を確認し、数値の整合性もチェックした。

学びメモ

  • 計画はデータの実物を見てから確定する: 6チャートの構想が、JSONを開いた瞬間に4チャートに変わった。設計段階で考えるのは大事だが、実データの構造が計画を上書きする
  • 「毎回の手間」はユーザー数で掛け算する: 2社のときは年次→四半期の1クリックが気にならない。500社になったら500クリック。localStorageの数行で将来の500クリックが消えた
  • 両軸チャートのゼロ位置は手動で揃える: Chart.jsは左右の軸を独立にスケーリングする。マイナス値がある場合、ゼロラインがずれて「プラスに見えるマイナス」が生まれる。スケール計算を自前で書く必要がある
  • コンポーネント修正は全ての使用箇所に適用する: 年次チャートのゼロ揃えを直して四半期を忘れた。同じロジックを使う箇所は機械的に洗い出してから修正する