• #jleague
  • #財務データ
  • #typescript
  • #vue
  • #比例縮尺財務諸表
financial-data完了

Jリーグクラブ財務データ可視化 - 実装計画

データ出典

Jクラブ経営情報ポータルhttps://cieloazul310.github.io/jclub-financial-table/download/

JSONファイルパス:apps/web/data/j-league-data.json

既存型定義:apps/web/app/types/financial.ts

データ概要

項目内容
クラブ数62（J1/J2/J3/JFL）
年度範囲2005年〜2024年（20年分）
含まれるデータ損益計算書、貸借対照表、入場者数、順位等

参考ページ

既存の米国株版ページhttps://log.eurekapu.com/financial-quiz/proportional-animation

このページのコンポーネント構成をベースにJリーグ版を作成する。

既存コンポーネントの流用

以下のコンポーネントはリファクタリング済みで再利用可能：

コンポーネントパス用途
CompanySelectorSidebarproportional-animation/左サイドバー（クラブ選択）
CompanySelectorModalproportional-animation/モバイル用モーダル
ProportionalFinancialStatementsAnimatedproportional-statements/比例縮尺BS/PL
PLWaterfallSectionwaterfall/PLウォーターフォール
FinancialChartsPanelfinancial-quiz/右側タブ切り替えチャート
FinancialDataTablefinancial-quiz/財務データテーブル
AnimationExportButtonfinancial-quiz/エクスポートボタン

使用しないコンポーネント:

  • CFWaterfallSection - キャッシュフローウォーターフォール（Jリーグデータに該当項目なし）

実装計画

スコープ

項目内容
対象クラブ浦和、鹿島、川崎（3クラブのみ）
年度範囲直近10年（2015-2024）

Phase 1 対象クラブ:

IDnameshort_name
urawa浦和レッズ浦和
antlers鹿島アントラーズ鹿島
kawasaki川崎フロンターレ川崎

※ クラブ追加は FEATURED_CLUBS 配列に追加するだけで対応可能

Phase 1: 型定義とデータ変換（直近10年） ✅ 完了

  • apps/web/app/types/jleague.ts - TypeScript型定義（JSONの構造に合わせる）
  • apps/web/app/composables/jleague/useJLeagueData.ts - JSONデータ読み込みcomposable
    • デフォルトは直近10年（2015-2024）のみ読み込み
    • 有名クラブのみ全20年データを取得するオプション
  • 既存の FinancialData / BSData / PLData 型への変換関数

Phase 2: クラブ選択UI ✅ 完了

Phase 1では3クラブのみなので、シンプルなセレクタで実装:

  • 既存 CompanySelectorSidebar を流用
  • ティア分けは将来クラブ追加時に対応
  • 既存コンポーネントで3クラブ切り替えを実装

Phase 3: 右側チャートパネル（Jリーグ用） ✅ 完了

タブ構成案:

タブ名チャート内容
収支営業収入推移、営業利益推移、当期純利益推移、人件費率
収入構成スポンサー収入/入場料収入/配分金/物販/その他の構成比
財務健全性純資産、資本金、利益剰余金、総資産推移
  • apps/web/app/components/jleague/JLeagueChartsPanel.vue - タブ切り替えパネル
  • 各チャートコンポーネント（既存 BaseBarChart / BaseLineChart を活用）
  • 追加: 積み上げ棒グラフ（収益内訳・費用内訳）
  • 追加: 複合チャート（営業収入・営業利益・利益率）
  • 追加: グループツールチップ（ホバーで全内訳表示）

Phase 4: 財務データテーブル ✅ 完了

既存の FinancialDataTable を参考に、Jリーグ用テーブルを作成。

年度範囲:

  • 通常クラブ: 直近10年（2015-2024）
  • 有名クラブ: 全20年（2005-2024）を表示可能

表示項目:

  • 損益計算書: 営業収入、営業費用、営業利益、経常利益、当期純利益
  • 貸借対照表: 総資産、総負債、純資産、資本金、利益剰余金
  • 収入内訳: スポンサー、入場料、配分金、物販、移籍、その他
  • 費用内訳: チーム人件費、試合関連、物販関連、販管費
  • 入場者数: 年間総入場者数、リーグ戦平均、客単価

タブ分け（案）:

  • 損益計算書
  • 貸借対照表
  • 収入内訳
  • 費用内訳
  • 入場者数・順位
  • apps/web/app/components/jleague/JLeagueDataTable.vue - タブ切り替えテーブル

Phase 5: メインページ作成 ✅ 完了

  • apps/web/app/pages/financial-quiz/jleague/index.vue
  • BS/PL比例縮尺表示（構成比率表示あり）
  • PLウォーターフォール（積み上げ棒グラフ化、引き出し線対応）
  • financial-quizインデックスページにカード追加

Phase 6: 全クラブ対応 🚧 進行中

目標

川崎フロンターレ単一クラブでの実装が完了したため、全クラブのデータを投入して表示確認を行う。

タスク

  • 全クラブデータの投入（j-league-data.jsonに全62クラブ分）
  • データ変換の検証（各クラブで正常に変換されるか）
  • 表示確認（各クラブでBS/PL/チャートが正しく表示されるか）
  • クラブ選択UIの拡張（62クラブに対応）
  • エッジケース対応（データ欠損、マイナス値など）

レイアウト構成:

┌──────────────────────────────────────────────────────────┐
│ [Breadcrumb]                                              │
├──────────────────────────────────────────────────────────┤
│ ┌─────────┬────────────────────────┬──────────────────┐ │
│ │サイドバー │    中央カラム           │   右カラム        │ │
│ │         │                        │                  │ │
│ │ 浦和    │ ◀ 2015 ───●─── 2024 ▶ │  [収支] [収入] [財務]│
│ │ 鹿島    │                        │                  │ │
│ │ 川崎    │  ┌─────────────────┐  │  ┌────────────┐ │ │
│ │         │  │ 浦和レッズ (J1)  │  │  │ 営業収入推移 │ │ │
│ │         │  │ 2024年度         │  │  │            │ │ │
│ │         │  ├────────┬────────┤  │  ├────────────┤ │ │
│ │         │  │  BS    │   PL   │  │  │ 営業利益推移 │ │ │
│ │         │  │ 比例縮尺│  比例縮尺│  │  │            │ │ │
│ │         │  └────────┴────────┘  │  ├────────────┤ │ │
│ │         │                        │  │ 当期純利益  │ │ │
│ │         │  ┌─────────────────┐  │  │            │ │ │
│ │         │  │PLウォーターフォール │  │  ├────────────┤ │ │
│ │         │  │収益→費用→利益     │  │  │ 人件費率   │ │ │
│ │         │  └─────────────────┘  │  └────────────┘ │ │
│ └─────────┴────────────────────────┴──────────────────┘ │
├──────────────────────────────────────────────────────────┤
│ ## 財務データ一覧                                         │
│ [損益計算書] [貸借対照表] [収入内訳] [費用内訳] [入場者数]   │
│ ┌────────────────────────────────────────────────────────┐│
│ │ 項目＼年度 │ 2015 │ 2016 │ ... │ 2023 │ 2024 │        ││
│ │ 営業収入   │ 5000 │ 5200 │ ... │ 6500 │ 7200 │ →年度  ││
│ │ 営業費用   │ 4800 │ 5000 │ ... │ 6200 │ 6889 │        ││
│ │ 営業利益   │  200 │  200 │ ... │  300 │  311 │        ││
│ │ 経常利益   │  250 │  230 │ ... │  350 │  379 │        ││
│ │ 当期純利益 │  150 │  140 │ ... │  280 │  311 │        ││
│ │ ↓項目     │      │      │     │      │      │        ││
│ └────────────────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────┘

ファイル構成（予定）

apps/web/app/
├── types/
│   └── jleague.ts              # Jリーグ用型定義
├── composables/
│   └── jleague/
│       ├── useJLeagueData.ts   # JSONデータ読み込み + 変換
│       └── useClubMetrics.ts   # 財務指標計算
├── components/
│   └── jleague/
│       ├── JLeagueChartsPanel.vue   # 右側チャートパネル
│       └── JLeagueDataTable.vue     # 財務データテーブル
└── pages/
    └── financial-quiz/
        └── jleague/
            └── index.vue       # メインページ

データ変換仕様

BS（貸借対照表）への変換

function convertToBS(data: JLeagueYearDataRaw): BSData {
  // 流動資産・固定資産の内訳がない場合は総資産のみ表示
  const totalAssets = data["総資産(資産の部)"] ?? 0
  const currentAssets = data.流動資産 ?? 0
  const fixedAssets = data.固定資産等 ?? (totalAssets - currentAssets)

  return {
    currentAssets: [
      { label: '流動資産', value: currentAssets, color: '#4CAF50' }
    ],
    fixedAssets: [
      { label: '固定資産', value: fixedAssets, color: '#8BC34A' }
    ],
    currentLiabilities: [
      { label: '流動負債', value: data.流動負債 ?? 0, color: '#FF9800' }
    ],
    fixedLiabilities: [
      { label: '固定負債', value: data.固定負債 ?? 0, color: '#FF5722' }
    ],
    equity: [
      { label: '資本金', value: data.資本金 ?? 0, color: '#2196F3' },
      { label: '利益剰余金', value: data.利益剰余金 ?? 0, color: '#03A9F4' }
    ]
  }
}

PL（損益計算書）への変換

function convertToPLDetailed(data: JLeagueYearDataRaw): PLDetailedData {
  const revenue = data.営業収入 ?? 0
  const operatingExpenses = data.営業費用 ?? 0
  const sgaExpenses = data.販売費および一般管理費 ?? 0

  // 売上原価 = 営業費用 - 販管費
  const costOfRevenue = operatingExpenses - sgaExpenses

  return {
    revenue,
    costOfRevenue,
    grossProfit: revenue - costOfRevenue,
    sgaExpenses,
    rdExpenses: 0,
    daExpenses: 0,
    otherOperatingExpenses: 0,
    operatingIncome: data.営業利益 ?? 0,
    nonOperatingIncome: data.営業外収益 ?? 0,
    nonOperatingExpenses: data.営業外費用 ?? 0,
    preTaxIncome: data.税引前当期利益 ?? (data.経常利益 ?? 0),
    taxes: data.法人税および住民税等 ?? 0,
    netIncome: data.当期純利益 ?? 0
  }
}

注意事項

  1. Phase 1 スコープ: 浦和・鹿島・川崎の3クラブ、直近10年（2015-2024）のみ
  2. クラブ追加: FEATURED_CLUBS 配列にIDを追加するだけで対応可能
  3. 単位: 全て百万円
  4. カテゴリ変動: クラブによってJ1/J2を行き来している（各年度の所属リーグは 所属 フィールドで判定可能）
  5. 決算期: クラブごとに異なる（1月期、3月期、12月期等）

JSONデータ構造（参考）

interface JLeagueClubRaw {
  id: string                    // "antlers"
  name: string                  // "鹿島アントラーズ"
  short_name: string            // "鹿島"
  fullname: string
  category: "J1" | "J2" | "J3" | "JFL"
  company: string               // 運営会社名
  period: number                // 決算期（月）
  hometown: string
  website: string
  items: JLeagueYearDataRaw[]   // 各年度のデータ
}

interface JLeagueYearDataRaw {
  // 基本情報
  クラブ: string
  id: string
  年: number
  所属: string
  順位: number | null
  勝ち点: number | null

  // 損益計算書
  営業収入: number | null
  営業費用: number | null
  営業利益: number | null
  経常利益: number | null
  当期純利益: number | null
  // ... その他項目

  // 貸借対照表
  "総資産(資産の部)": number | null
  "総負債(負債の部)": number | null
  "純資産(純資産の部)": number | null
  // ... その他項目

  // 収入・費用内訳、入場者数など
  // ...
}