このガイドでは、最初の Firestore スキーマファイルを作成し、インタラクティブなドキュメントビューアを起動します。全プロセスは約5分で完了します — バックエンド不要、ビルドステップ不要、フレームワーク不要です。 JSON Schema.
ステップ 1：スキーマファイルを作成する
プロジェクトに schemas というフォルダを作成します。その中に users.schema.json というファイルを作成します。このファイルは Firestore の users コレクションの構造を記述します：
schemas/users.schema.jsonJSON
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"collection": "users",
"description": "App users with profile information",
"schema": {
"type": "object",
"properties": {
"displayName": {
"type": "string",
"description": "User's display name"
},
"email": {
"type": "string",
"format": "email",
"description": "User's email address"
},
"createdAt": {
"type": "string",
"format": "date-time",
"description": "Account creation timestamp"
},
"role": {
"type": "string",
"enum": ["admin", "editor", "viewer"],
"description": "User role for access control"
}
},
"required": ["displayName", "email", "createdAt"]
}
}フォルダ構造
your-project/
└── schemas/
└── users.schema.json💡 ファイル名がコレクション名を決定します。users.schema.json は users コレクションになります。サブコレクションの場合は、ネストされたフォルダを使用します：schemas/users/orders.schema.json。
ステップ 2：HTML にビューアを追加する
プロジェクトルート（schemas フォルダと同じ階層）に index.html ファイルを作成します。以下の行を追加してください：
index.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Firestore Schema Docs</title>
<link rel="stylesheet" href="https://unpkg.com/firestore-schema-viewer/dist/style.css">
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/firestore-schema-viewer/dist/fsv.umd.js"></script>
<script>
FirestoreSchemaViewer.render('#app', {
schemasDir: './schemas/'
})
</script>
</body>
</html>💡 これだけです — CSS と JS のたった2行です。schemasDir オプションは FireSchema にスキーマファイルの場所を伝えます。ディレクトリ内のすべての .schema.json ファイルが自動的に検出されます。
ステップ 3：ブラウザで開く
任意の静的サーバーでプロジェクトフォルダを配信します。Node.js がインストールされている場合：
npx serve .http://localhost:3000 を開くと、インタラクティブな Firestore スキーマドキュメントが表示されます。users コレクションをクリックして、フィールド、型、説明を確認してください。
次のステップ
最初のスキーマが動作したら、次はこちらをご覧ください：