財務諸表クイズ - 20問の問題案

子供向け・初心者向けの財務諸表の読み方を学ぶクイズです。 2つのチャート（A案とB案）を比較して、どちらの企業が良いかを直感的に選ぶ形式です。

LLM実装プロンプト

このセクションはLLM（Claude等）がVueコンポーネントを実装する際の指示書です。 以下のルールに従ってChart.jsを使用した財務諸表クイズを実装してください。

技術スタック

• フレームワーク: Vue 3 + Composition API (<script setup>)
• チャートライブラリ: Chart.js (chart.js/auto)
• 配置: apps/web/app/pages/financial-quiz/index.vue

チャートタイプルール（厳守）

Y軸スケール統一ルール（厳守）

A案とB案のY軸スケールは必ず一致させること。 比較しやすさが最優先。

interface Question {
  // ... 他のプロパティ
  yAxisMax?: number    // A案・B案共通の最大値
  yAxisMin?: number    // マイナス値がある場合の最小値
  showZeroLine?: boolean // ゼロラインを太く強調するか
}

各問題のyAxisMax設定例:

複合チャート（売上高＋利益率）

売上高総利益率のように「金額と率」を同時に表示する場合：

{
  chartType: 'mixed',
  salesData: number[],      // 左軸：棒グラフ（売上高）
  profitRateA: number[],    // 右軸：点線折れ線（A案の利益率）
  profitRateB: number[],    // 右軸：点線折れ線（B案の利益率）
}

Chart.js設定:

• 左軸（y）: position: 'left', beginAtZero: true
• 右軸（y1）: position: 'right', max: 100, grid: { drawOnChartArea: false }

ゼロライン強調（キャッシュフロー用）

マイナス値があるチャートでは、ゼロラインを太く黒く表示：

if (q.showZeroLine) {
  yAxisConfig.grid = {
    color: (context) => context.tick.value === 0 ? '#000000' : 'rgba(0,0,0,0.1)',
    lineWidth: (context) => context.tick.value === 0 ? 3 : 1
  }
}

UI設計ルール

1. レイアウト: Breadcrumb + メインコンテンツ + TableOfContents（サイドバー）
2. 問題表示: 全問題を一覧表示（クイズモードではない）
3. チャート配置: A案・B案を横並び（モバイルでは縦並び）
4. 正解表示: 緑のバッジ（「正解」）と緑の枠線（border-color: #10b981）
5. 解説: 各問題の下に解説ボックス（左に青いボーダー）
6. 背景: 白背景（ダークモードなし）
7. 難易度バッジ: 初級（緑）、中級（黄）、上級（赤）

使用するコンポーネント

問題形式に合わせて以下の2つのコンポーネントを使用します。問題データはインライン形式でオブジェクトを埋め込むこと。

1. チャート比較問題: FinancialQuizChartComparison

A案とB案の2つのチャートを比較して正解を選ぶ問題形式。

<FinancialQuizChartComparison
  :question-number="2"
  :question="{
    title: 'EPS（1株当たり利益）の成長',
    description: 'EPSの10年間の推移を見てください。投資家にとってどちらが魅力的でしょうか？',
    chartALabel: '不安定（乱高下）',
    chartBLabel: '安定成長（毎年10%）',
    chartAData: [100, 80, 150, 70, 120, 60, 140, 90, 110, 85, 130],
    chartBData: [100, 110, 121, 133, 146, 161, 177, 195, 214, 236, 259],
    chartType: 'bar',
    answer: 'B',
    explanation: 'EPSが安定して成長している企業（B案）は、収益力が強く経営が安定しています。継続的なEPS成長は優良企業の重要な特徴です。',
    difficulty: 'easy',
    yAxisMax: 300
  }"
/>

Questionインターフェース:

interface Question {
  title: string
  description: string
  chartALabel: string
  chartBLabel: string
  chartAData: number[]
  chartBData: number[]
  chartType: 'line' | 'bar' | 'mixed'
  answer: 'A' | 'B'
  explanation: string
  difficulty: 'easy' | 'medium' | 'hard'
  yAxisMax?: number
  yAxisMin?: number
  showZeroLine?: boolean
  // 複合チャート用
  salesData?: number[]
  profitRateA?: number[]
  profitRateB?: number[]
}

2. 穴埋め問題: FinancialQuizFillInBlankQuestion

文章の空欄を選択肢から選んで埋める問題形式。

<FinancialQuizFillInBlankQuestion
  :question="{
    parts: [
      { type: 'blank', options: ['損益計算書', '貸借対照表', 'キャッシュフロー計算書'], answer: '損益計算書' },
      { type: 'text', content: 'は、特定の期間内に企業がどれだけのお金を稼いだかを教えてくれる。' }
    ],
    explanation: '損益計算書（P/L: Profit and Loss Statement）は、一定期間の収益と費用を記録し、最終的な利益（または損失）を示します。「どれだけ稼いだか」を知るための書類です。'
  }"
/>

FillInBlankQuestionインターフェース:

interface FillInBlankPart {
  type: 'text' | 'blank'
  content?: string           // type: 'text' の場合
  options?: string[]         // type: 'blank' の場合（選択肢）
  answer?: string            // type: 'blank' の場合（正解）
}

interface FillInBlankQuestion {
  parts: FillInBlankPart[]
  explanation: string
}

3. 貸借対照表比較問題: FinancialQuizBalanceSheetComparison

AとBの2つの貸借対照表（B/S）をビジュアルで比較する問題形式。

<FinancialQuizBalanceSheetComparison
  :question-number="7"
  :question="{
    title: '貸借対照表の構造',
    description: '2つの企業の貸借対照表を比較してください。財務の健全性を判断するうえで、どちらが優良企業でしょうか？',
    labelA: '現預金・有価証券が豊富、借入金が少ない',
    labelB: '現預金が少なく、借入金が多い',
    dataA: {
      currentAssets: [
        { label: '現預金', value: 300 },
        { label: '有価証券', value: 200 },
        { label: '売掛金', value: 50 },
        { label: 'その他', value: 50 }
      ],
      fixedAssets: [
        { label: '建物構築物', value: 100 },
        { label: '機械車輌備品', value: 50 },
        { label: '土地', value: 100 },
        { label: '投資等', value: 130 },
        { label: 'その他', value: 20 }
      ],
      currentLiabilities: [
        { label: '買掛金', value: 60 },
        { label: '短期借入金', value: 20 },
        { label: 'その他', value: 20 }
      ],
      fixedLiabilities: [
        { label: '長期借入金', value: 50 },
        { label: 'その他', value: 50 }
      ],
      equity: [
        { label: '資本金', value: 200 },
        { label: '剰余金', value: 600 }
      ]
    },
    dataB: {
      currentAssets: [
        { label: '現預金', value: 30 },
        { label: '有価証券', value: 20 },
        { label: '売掛金', value: 150 },
        { label: 'その他', value: 50 }
      ],
      fixedAssets: [
        { label: '建物構築物', value: 300 },
        { label: '機械車輌備品', value: 200 },
        { label: '土地', value: 200 },
        { label: '投資等', value: 30 },
        { label: 'その他', value: 20 }
      ],
      currentLiabilities: [
        { label: '買掛金', value: 100 },
        { label: '短期借入金', value: 200 },
        { label: 'その他', value: 50 }
      ],
      fixedLiabilities: [
        { label: '長期借入金', value: 350 },
        { label: 'その他', value: 50 }
      ],
      equity: [
        { label: '資本金', value: 200 },
        { label: '剰余金', value: 50 }
      ]
    },
    answer: 'A',
    explanation: '永続的な競争優位性を持つ優良企業（A）は、大量の現金・現預金と有価証券を保有し、長期借入金がほとんどありません。',
    difficulty: 'medium'
  }"
/>

BalanceSheetQuestionインターフェース:

interface BalanceSheetItem {
  label: string
  value: number
  color?: string  // オプション：カスタム色
}

interface BalanceSheetData {
  currentAssets: BalanceSheetItem[]      // 流動資産
  fixedAssets: BalanceSheetItem[]        // 固定資産
  currentLiabilities: BalanceSheetItem[] // 流動負債
  fixedLiabilities: BalanceSheetItem[]   // 固定負債
  equity: BalanceSheetItem[]             // 純資産
}

interface BalanceSheetQuestion {
  title: string
  description: string
  labelA: string
  labelB: string
  dataA: BalanceSheetData
  dataB: BalanceSheetData
  answer: 'A' | 'B'
  explanation: string
  difficulty: 'easy' | 'medium' | 'hard'
}

貸借一致ルール（厳守）:

データ作成時は必ず以下の等式が成り立つようにすること。コンポーネント内でバリデーションを行い、不一致の場合はエラーメッセージを表示する。

総資産 = 負債合計 + 純資産

（流動資産 + 固定資産） = （流動負債 + 固定負債 + 純資産）

データ作成手順:

1. 総資産（流動資産 + 固定資産）の合計を決める
2. 負債合計（流動負債 + 固定負債）を決める
3. 純資産 = 総資産 - 負債合計 で計算
4. 純資産を資本金と剰余金に分配する

比較のポイント:

問題1: 売上高の成長（CAGR）

テーマ: 売上高が継続的に成長している企業 vs 横ばいの企業

正解: A案 解説: 売上高が成長しているかどうかだけでなく、「一貫して」成長しているかが重要です。A案は10年間デコボコなく右肩上がりで成長しており、これは企業が「永続的な競争優位性」を持っている証拠です。一方、B案は横ばいでデコボコしており、景気や競合に左右されやすい不安定なビジネスの可能性があります。一時的な成長ではなく、長期間にわたる一貫した成長パターンこそが、優良企業を見分けるポイントです。

問題2: EPS（1株当たり利益）の成長

テーマ: EPSが継続的に成長している企業 vs 不安定な企業

正解: B案 解説: EPSが安定して成長している企業は、収益力が強く経営が安定しています。

問題3: 売上高総利益率（粗利益率）

テーマ: 高い粗利益率 vs 低い粗利益率

正解: A案 解説: 粗利益率が高い企業は、製品やサービスに強い競争力（価格決定力）があります。一般的に40%以上あると優良企業と言われています。

問題4: 営業利益率

テーマ: 高い営業利益率 vs 低い営業利益率

正解: A案 解説: 営業利益率が高い企業は、本業で効率的に稼ぐ力があります。

問題5: ROE（自己資本利益率）

テーマ: 高いROE vs 低いROE

正解: A案 解説: ROEが15%以上の企業は、株主のお金を効率よく使って利益を出しています。一般的に15%以上が優良企業の目安です。

問題6: 負債比率（D/Eレシオ）

テーマ: 低い負債 vs 高い負債

正解: A案 解説: 負債が少ない企業は財務が健全で、不況にも強いです。

問題7: 自己資本比率

テーマ: 高い自己資本比率 vs 低い自己資本比率

正解: A案 解説: 自己資本比率が高い企業は、借金に頼らず自分のお金で経営しています。

問題8: 営業キャッシュフロー

テーマ: 安定したプラス vs 不安定

正解: A案 解説: 営業キャッシュフローが安定してプラスの企業は、実際に現金を稼いでいます。

問題9: フリーキャッシュフロー

テーマ: 継続的にプラス vs マイナス

正解: A案 解説: フリーキャッシュフローがプラスの企業は、投資後も余裕のあるお金があります。

問題10: 純利益率

テーマ: 高い純利益率 vs 低い純利益率

正解: A案 解説: 純利益率が高い企業は、売上から多くの利益を残せる効率の良い企業です。

問題11: 流動比率

テーマ: 短期的な支払い能力

正解: A案 解説: 流動比率が100%以上あれば、1年以内の借金を返せる力があります。200%あれば安心です。

問題12: 配当の継続性

テーマ: 連続増配 vs 配当なし/減配

正解: A案 解説: 長年配当を増やし続けている企業は、安定した収益力と株主への還元意識があります。

問題13: ROA（総資産利益率）

テーマ: 資産を効率よく使っているか

正解: A案 解説: ROAが高い企業は、持っている資産を効率よく使って利益を出しています。

問題14: 売上高の安定性

テーマ: 安定した売上 vs 景気に左右される売上

正解: A案 解説: 景気に左右されにくい企業（ディフェンシブ銘柄）は、長期投資に向いています。

問題15: 在庫回転率

テーマ: 在庫の効率的な管理

正解: A案 解説: 在庫回転率が高い企業は、在庫を素早く売って現金化できています。

問題16: 売掛金回転期間

テーマ: お金の回収速度

正解: A案 解説: 売掛金をすぐに回収できる企業は、現金管理がうまくいっています。

問題17: 研究開発費の推移

テーマ: 将来への投資（成長企業向け）

正解: A案（成長企業の場合） 解説: テクノロジー企業などでは、研究開発への投資が将来の成長につながります。

問題18: 利益の質（営業CF vs 純利益）

テーマ: 本当に現金を稼いでいるか

正解: A案 解説: 営業キャッシュフローが純利益を上回っていれば、利益の質が高いです。

問題19: PER（株価収益率）の比較

テーマ: 割安 vs 割高（同業種比較）

正解: A案（成長率が同じ場合） 解説: PERが低い方が割安ですが、成長性も考慮する必要があります。

問題20: 経営者の持株比率

テーマ: 経営者のインセンティブ

正解: A案 解説: 経営者が多くの株を持っていると、株主と同じ立場で会社を良くしようとします。

実装メモ

チャートライブラリ

• Chart.js（採用）

チャート表示ルール（重要）

データの種類によってチャートタイプを統一する：

複合チャートの場合：

• 左軸（y）: 売上高などの金額 → 棒グラフ
• 右軸（y1）: 利益率などのパーセント → 点線の折れ線グラフ
• Y軸のスケールは必ず揃える（比較しやすくするため）

UI設計

1. 全問題を一覧表示
2. A案/B案のチャートを横並びで表示
3. 正解には緑のバッジと枠を表示
4. 各問題の下に解説を表示
5. レスポンシブ対応（モバイルでは縦並び）

難易度設定

• 初級：問題1-7（基本的な指標）
• 中級：問題8-14（キャッシュフローと効率性）
• 上級：問題15-20（応用的な分析）