このツールについて
tcgvaultの仕組み
tcgvaultはセルフホスト対応のTCGコレクション追跡ツールです。APIキーを環境変数として設定してデプロイします。キーはサーバーに存在し、ブラウザには公開されません。コレクションはブラウザのlocalStorageに保存されます。
アーキテクチャ
ハイブリッドAstro 5アプリ
tcgvaultはAstroのハイブリッド出力モードを使用しています。ランディングページはプリレンダリングされた静的HTMLです。APIルート（/api/*）はサーバーレンダリングされ、Cloudflare Pages（またはNode/Vercel/Netlify）で動作します。
サーバーサイドAPIルート
カード価格データはすべてAstro APIルート経由でサーバーサイドで取得されます。SDKはサーバーサイドのみで呼び出され、ブラウザでは決して使用されません。APIルートはサーバー環境からTCG_API_KEYを読み込みます。
コレクションのlocalStorage保存
コレクション（カード名、数量、コンディション、キャッシュされた価格）はブラウザのlocalStorageに「tcgvault:」名前空間で保存されます。保存時にネットワークリクエストは発生しません。
デフォルトでセキュア
APIキーはサーバーの.envまたはデプロイプラットフォームの環境変数で設定します。クライアントバンドルには含まれず、ブラウザに送信されることも、localStorageに保存されることもありません。
データフロー:
ブラウザ → localStorage（コレクションのみ）
ブラウザ → /api/search（tcgvaultサーバー）
tcgvaultサーバー → tcgpricelookup.com（環境変数のTCG_API_KEYを使用）
ブラウザ上のAPIキー: なし
テックスタック
Astro 5
ハイブリッドSSRフレームワーク
@astrojs/cloudflare
Cloudflare Pagesアダプター
React 19
インタラクティブアイランド
Tailwind CSS 4
スタイリング
@tcgpricelookup/sdk
価格データAPI（サーバーサイド）
TypeScript (strict)
型安全性
localStorage
コレクション永続化
プライバシー
- アカウントやログイン不要
- アナリティクスやトラッキングスクリプトなし
- APIキーはサーバー環境変数にのみ保存 — ブラウザには公開されません
- コレクションデータはブラウザのlocalStorageに保存
- カード価格リクエストはサーバーからtcgpricelookup.comへ — キーはクライアントサイドに公開されません
- デプロイを自分でコントロール — データの行き先を管理できます
APIキーの取得
tcgvaultは TCG Price Lookup API
を使ってリアルタイムのカード価格を取得します。無料のAPIキーが必要で、.envまたはデプロイ設定に TCG_API_KEY として設定します。