NVIDIA EPS予測 Phase 9: チャート・タブ連動機能

概要

計算詳細テーブルの「PER × Forward EPS」/「P/S × Forward売上」タブ切り替えに連動してページ内のチャート表示を切り替える機能を実装する。

背景

現在の実装では：

• 計算詳細テーブルにPER/P/Sの2つのタブがある
• チャートはタブに関係なく、常にすべて表示されている
• これはユーザーにとって混乱を招く（P/Sモードなのにまだ表示）

完了ステータス

Phase 9-1: タブ状態の親コンポーネント移動
  [x] CalculationDetailTable.vueのactiveTabをv-model対応に変更
  [x] nvidia-eps-forecast.vueにcalculationMethod ref追加
  [x] CalculationDetailTableにv-model渡し

Phase 9-2: チャート表示の条件分岐
  [x] PERモード時：PER推移チャート + EPSチャート表示
  [x] P/Sモード時：P/S推移チャート表示、EPSチャート非表示
  [x] nvda-ps-data.ts を NVDA.json の正しいデータで更新
  [x] nvda-per-data.ts を作成し、PERRatioChart.vue コンポーネント実装

Phase 9-3: 動作確認
  [x] タブ切り替えでチャートが連動することを確認
  [x] P/Sモードでは四半期EPS/年間EPSチャートが非表示
  [x] PERモードに戻すとEPSチャートが再表示

Phase 9-4: アナリスト予測期間の制限（年間チャート修正）
  [x] 年間売上チャートでFY29/FY30の青バー（アナリスト予測）を非表示
  [x] 年間EPSチャートでFY29/FY30の青バー（アナリスト予測）を非表示
  [x] annualForecastDataにhasAnalystDataフラグを追加（FY28までtrue）
  [x] EPS/株価差異をFY30修正版 vs FY28アナリストで比較するよう修正

Phase 9-5: 結論セクションのPER/P/S切り替え
  [x] 計算詳細テーブルの直下に結論セクションを移動
  [x] PERモード時：EPS差異、株価差異、上昇率、CAGR（現行）
  [x] P/Sモード時：時価総額ベースの結論表示（FY30時価総額、$20T到達状況、上昇率、CAGR）
  [x] calculationMethodに連動して表示内容を切り替え

Phase 9-6: 四半期チャートの修正版QoQ成長率表示修正
  [x] 四半期EPSチャートで修正版QoQ成長率を予測期間のみ表示（実績期間は非表示）
  [x] 四半期売上チャートで修正版QoQ成長率を予測期間のみ表示（実績期間は非表示）
  [x] 非モーダルとモーダルの整合性を確認

現在のチャート構成

実装詳細

Phase 9-1: タブ状態の親コンポーネント移動

1. CalculationDetailTable.vue 修正

変更前：

// アクティブタブ
const activeTab = ref<'per' | 'ps'>('per')

変更後：

type CalculationMethod = 'per' | 'ps'

interface Props {
  // ... existing props ...
  modelValue?: CalculationMethod
}

const props = withDefaults(defineProps<Props>(), {
  // ... existing defaults ...
  modelValue: 'per'
})

const emit = defineEmits<{
  'update:modelValue': [value: CalculationMethod]
}>()

// アクティブタブ（v-model対応）
const activeTab = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v)
})

2. nvidia-eps-forecast.vue 修正

// 計算方式（PER or P/S）
const calculationMethod = ref<'per' | 'ps'>('per')

<CalculationDetailTable
  v-model="calculationMethod"
  :quarterlyData="quarterlyForecastData"
  :quarterlyQoQOverrides="quarterlyQoQOverrides"
  :netProfitMargin="netProfitMargin"
  :perMultiple="perMultiple"
  :psMultiple="psMultiple"
  :dilutionRate="dilutionRate"
  :baseShares="24800"
/>

Phase 9-2: チャート表示の条件分岐

nvidia-eps-forecast.vue のテンプレートで条件分岐：

<!-- 四半期売上予測チャート（常に表示） -->
<DualSeriesChart
  title="四半期売上予測チャート"
  ...
/>

<!-- 年間売上高予測チャート（常に表示） -->
<DualSeriesChart
  title="年間売上高予測チャート"
  ...
/>

<!-- 四半期EPS予測チャート（PERモードのみ） -->
<DualSeriesChart
  v-if="calculationMethod === 'per'"
  title="四半期EPS予測チャート"
  ...
/>

<!-- 年間EPS予測チャート（PERモードのみ） -->
<DualSeriesChart
  v-if="calculationMethod === 'per'"
  title="年間EPS予測チャート"
  ...
/>

<!-- P/S推移チャート（常に表示） -->
<PSRatioChart
  ...
/>

Phase 9-4: アナリスト予測期間の制限（年間チャート修正）

問題: アナリスト予測は 3Q'28（FY28）までしかないが、年間チャートでは FY29/FY30 にも青いバー（アナリスト予測）が表示されている。

原因: annualForecastData が FY25〜FY30 までループしてアナリストデータを外挿している（特に FY30 は line 385-396 で外挿）。

1. useNvidiaForecast.ts の修正

annualForecastData 計算で、アナリスト予測の範囲を四半期データから判定：

// 年間予測データ (FY25 to FY30)
const annualForecastData = computed((): AnnualForecastItem[] => {
  // ...existing code...

  // アナリスト予測が存在する最後の四半期を取得
  const lastAnalystQuarter = quarterlyForecastData.value
    .filter(q => !q.isActual && q.hasAnalystData)
    .pop()

  // アナリスト予測の最終年度を決定（3Q'28 → FY28）
  const lastAnalystFY = lastAnalystQuarter
    ? parseInt('20' + lastAnalystQuarter.label.slice(-2))
    : 2028

  for (let year = 2025; year <= 2030; year++) {
    // ...existing code...

    // FY29以降はアナリストデータなし
    const hasAnalystData = year <= lastAnalystFY && (analystYear?.isActual || analystEps > 0)

    result.push({
      year: `FY${year.toString().slice(-2)}`,
      isActual,
      hasAnalystData,  // ★ 追加
      analystRevenue: hasAnalystData ? analystRevenue : 0,
      analystEps: hasAnalystData ? analystEps : 0,
      // ...rest...
    })
  }
})

2. types.ts の AnnualForecastItem 修正

export interface AnnualForecastItem {
  year: string
  isActual: boolean
  hasAnalystData: boolean  // ★ 追加
  analystRevenue: number
  analystEps: number
  // ...rest...
}

3. nvidia-eps-forecast.vue のチャートデータ変換修正

annualRevenueChartData と annualEpsChartData で hasAnalystData を反映：

const annualRevenueChartData = computed((): DualSeriesDataItem[] => {
  return forecastData.value.map((item, i, arr) => {
    // ...growth calculation...
    return {
      label: item.year,
      isActual: item.isActual,
      hasAnalystData: item.hasAnalystData,  // ★ composableから取得
      analystValue: item.hasAnalystData ? item.analystRevenue / 1000 : null,
      modifiedValue: item.modifiedRevenue / 1000,
      analystGrowth: item.hasAnalystData ? analystGrowth : null,
      modifiedGrowth
    }
  })
})

Phase 9-6: 四半期チャートの修正版QoQ成長率表示修正

問題: 四半期EPS/売上チャートで、修正版QoQ成長率（赤いライン）が実績期間にも表示されていた。これは予測期間のみに表示すべき。

原因: quarterlyEpsChartData と quarterlyRevenueChartData で modifiedGrowth を全期間に設定していた。

nvidia-eps-forecast.vue の修正

quarterlyEpsChartData:

// 修正版QoQ成長率（modifiedQoQから取得）- 予測期間のみ表示
// 実績期間は修正版QoQ成長率を表示しない（アナリスト成長率のみ）
if (!q.isActual && q.modifiedQoQ !== null && q.modifiedQoQ !== undefined) {
  modifiedGrowth = q.modifiedQoQ
}

quarterlyRevenueChartData:

// 修正版QoQ成長率 - 予測期間のみ表示
if (!q.isActual && prev.modifiedRevenue > 0) {
  modifiedGrowth = ((q.modifiedRevenue - prev.modifiedRevenue) / prev.modifiedRevenue) * 100
}

動作の違い:

• 非モーダル (DualSeriesChart): ユーザーが設定したQoQ成長率を表示（予測期間のみ）
• モーダル (ChartModal): 実際のEPS/売上値から計算した成長率を表示（全期間）

関連ファイル

型定義の追加（オプション）

types.ts に追加：

export type CalculationMethod = 'per' | 'ps'

テスト手順

Phase 9-1〜9-3: タブ連動機能

1. PERモード（デフォルト）
   • すべてのチャートが表示されることを確認
2. P/Sモードに切り替え
   • 四半期EPS、年間EPSチャートが非表示になることを確認
   • 売上チャート、P/S推移チャートは表示されていることを確認
3. PERモードに戻す
   • EPSチャートが再表示されることを確認

Phase 9-4: アナリスト予測期間の制限

4. 年間売上チャートの確認
   • FY25〜FY28: 青バー（アナリスト予測）と緑バー（修正版）の両方が表示
   • FY29〜FY30: 緑バー（修正版）のみ表示、青バーは非表示
   • 成長率ライン: FY29以降はアナリスト成長率（実線）が表示されない
5. 年間EPSチャートの確認
   • FY25〜FY28: 青バー（アナリスト予測）と緑バー（修正版）の両方が表示
   • FY29〜FY30: 緑バー（修正版）のみ表示、青バーは非表示

新規セッション用プロンプト

nvidia-eps-forecast.vueの実装を続けてください。

計画ドキュメント:
apps/web/content/2025-12-18/nvidia-eps-forecast-phase9-chart-tab-sync.md

このドキュメントを読んで、「完了ステータス」を確認し、
Phase 9-1から実装を開始してください。