LLM-Studies (AI Model Cost Calculator & AI Studies Hub)

最終更新日: 2026-09-18

LLM-Studies（AI-Model-Cost-Calculator）は、「AI モデル・コーディングツールの料金比較計算機」 と 「AI エンジニアリング・ガバナンス・実践ガイドハブ」 の 2 つの役割を統合した Web アプリケーション基盤です。

---

主な目的と機能

1. LLM / AI ツール料金計算機 (Cost Calculator)

• マルチプロバイダー対応: OpenAI, Anthropic, Google, AWS Bedrock, DeepSeek, xAI, Moonshot, Zhipu など主要 77 以上の最新 API モデルの価格を網羅。
• コーディングツール・サブスク比較: GitHub Copilot, Cursor, Windsurf, Claude Code, JetBrains, Codex, Antigravity など 33 以上の開発ツールの価格とプランを比較。
• 高精度なコスト試算: 入力/出力トークン比率、キャッシュ利用、時間/日/月/年単位でのリアルタイム見積もり。
• 為替レート自動連動: Frankfurter API から最新の USD/JPY 為替レートを取得し、日本円（JPY）換算表示。
• 3 層フォールバック & Provenance 追跡: スクレイプ成功 → 履歴 provenance 値 → ハードコード定義による強固なデータ完全性。

2. AI エンジニアリング & ガバナンス ガイドハブ (Studies Hub)

• 80 の専門ガイド: Claude Code, OpenAI Codex, GitHub Copilot, Google Gemini / Antigravity の活用法から、AI ガバナンス（ITIL AI Governance 等）、AI セキュリティ、RAG、マルチモーダル、コンテキストエンジニアリング、CI/CD 自動化、推薦書籍ガイドまでを網羅。
• 100% Faithful 完全移植: 原本の章立て、詳細な表、コード例、Mermaid 図解、実践チェックリスト、参考文献リンクを完全再現。
• 快適な読書体験: 目次スクロール追従（TOC Observer）、シンタックスハイライト、ワンクリックコードコピー、横断検索、What's New、RSS フィード対応。

---

アーキテクチャ

LLM-Studies/
├── scraper/              Python 3.12+ スクレイパー (uv, Pydantic v2, Playwright, httpx)
│   └── src/scraper/
│       ├── main.py            CLI エントリポイント
│       ├── models.py          PricingData / ApiModel / SubTool スキーマ (SSoT)
│       ├── provenance.py      出自管理・3層フォールバック解決
│       ├── exchange.py        為替レート取得
│       ├── providers/         API プロバイダー別スクレイパー (anthropic, openai, google, aws, etc.)
│       └── tools/             コーディングツール別スクレイパー (cursor, copilot, windsurf, etc.)
├── web-next/             Next.js 16 + React 19 + TypeScript + Tailwind CSS v4 (Bun)
│   ├── app/
│   │   ├── layout.tsx         ルートレイアウト (SiteHeader / DisclaimerBanner マウント)
│   │   ├── page.tsx           コスト計算機ホーム (Server Component + Zod 検証)
│   │   ├── {claude,google,codex,copilot,agent,security,governance,books,etc.}/  各分野のガイド群
│   │   ├── search/            横断検索機能
│   │   ├── whats-new/         新着・最近更新一覧
│   │   └── sitemap.ts         page-registry からの全ルート自動生成
│   ├── components/            React コンポーネント (ApiTable, SubTable, MermaidDiagram 等)
│   ├── lib/                   純粋関数・設定 (page-registry.ts, cost.ts, pricing.ts, etc.)
│   ├── types/                 TypeScript 型定義 (Pydantic models.py と厳格同期)
│   └── data/pricing.json      ビルド時インポート用データ
├── docs/                 プロジェクト仕様書・設計書・テスト進捗記録
├── archive/              移行元 HTML/Markdown の退避保存場所 (削除厳禁)
├── scripts/              Markdown 整形・HTML/MD → TSX 変換スクリプト
│                         (原本照合監査スクリプトは .claude/skills/nextjs-page-migration/scripts/)
├── docker-compose.yml    Docker 開発・実行環境定義
├── Makefile              共通運用コマンド
└── update.sh             データ更新オーケストレーター (scrape → copy → build)

---

データフロー

flowchart LR
    subgraph PROVIDERS["🌐 外部プロバイダー"]
        P1["Anthropic / OpenAI / Google / AWS / DeepSeek 等"]
    end

    subgraph SCRAPER["🕷️ スクレイパー（Python 3.12+ / uv）"]
        SC["Playwright & httpx"]
        MODEL_PY["models.py (Pydantic v2)"]
        FALLBACK["3層フォールバック & Provenance 出自解決"]
    end

    subgraph DATA["📄 データ配信"]
        JSON_DATA["web-next/data/pricing.json (ビルド時 import)"]
        JSON_PUB["web-next/public/pricing.json (公開 URL 配信用)"]
    end

    subgraph FRONTEND["⚡ Next.js 16 (SSG: output 'export')"]
        ZOD["Zod 型検証"]
        HOME["app/page.tsx (コスト計算機)"]
        GUIDES["app/{provider}/* (80 ガイドページ)"]
    end

    subgraph CDN["🚀 Netlify CDN"]
        OUT["静的 HTML / JSON / 資産"]
    end

    P1 --> SC --> MODEL_PY --> FALLBACK
    FALLBACK --> JSON_DATA
    FALLBACK --> JSON_PUB
    JSON_DATA --> ZOD --> HOME
    GUIDES -.-> OUT
    HOME --> OUT

1. スクレイプ: scraper/ が各社料金ページから最新データを抽出。
2. 出自管理: 失敗時は provenance.py の 3 層フォールバック機構により過去の確定値またはハードコード値を安全に採用。
3. 同期: update.sh が web-next/ 内の静的インポート用および配信用の 2 箇所へデータを同期。
4. 検証と静的出力: Next.js ビルド時に Zod で厳格検証し、output: 'export' で純静的サイトとして out/ を生成、Netlify へ配信。

---

技術スタック

分野	技術	用途
フロントエンド	Next.js 16 (App Router)	SSG（静的エクスポート）フレームワーク
	React 19	UI ライブラリ
	TypeScript	静的型検査 (strict: true, erasableSyntaxOnly: true)
	Tailwind CSS v4 + CSS Modules	デザイントークン & コンポーネントスタイリング
	Bun	パッケージマネージャー & JS ランタイム
	Vitest	フロントエンド契約テスト・単体テスト
	Biome	高速 Linter / Formatter
	Zod	実行時データバリデーション
バックエンド	Python 3.12+	データ抽出ランタイム
	uv	高速 Python パッケージ・仮想環境マネージャー
	Pydantic v2	スキーマ定義・型定義の Single Source of Truth (SSoT)
	Playwright	ヘッドレスブラウザによる動的コンテンツスクレイピング
	httpx	非同期・同期 HTTP クライアント
	pytest	スクレイパー単体テスト・契約テスト (100 tests)
インフラ	Netlify	CDN 静的ホスティング
	Docker / Compose	コンテナ化された開発・ビルド環境

---

クイックスタート

1. Docker を使用する場合（推奨）

Docker と Docker Compose がインストールされていれば、ローカル環境を汚さずに全機能を利用できます。

# 全 Docker イメージのビルド
make build-images

# 最新価格データのスクレイピング実行
make scrape

# 開発サーバー起動（http://localhost:3000）
make dev

# 静的サイトのビルド（web-next/out/ へエクスポート）
make build

# 全テストの実行（Vitest + Pytest）
make test

2. ネイティブ環境でセットアップする場合

前提条件

• Python 3.12+
• uv
• Bun

This is the beginning of the README. Read the rest at the original. Read the full README ↗