# Fumadocs Core (the core library of Fumadocs): ページツリー
URL: /ja/docs/headless/page-tree
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/page-tree.ja.mdx
ページツリーの構造について説明します。
ページツリーは、すべてのナビゲーションリンクと、区切りやフォルダーなどの項目を表すツリー構造です。
ページツリーはクライアントに送信され、サイドバーやパンくずリストなどのナビゲーション要素から参照されます。
そのため、機密データやサイズの大きいデータをページツリーに含めないでください。
ページツリーには、設計上、すべてのページとフォルダーに関する必要最小限の情報のみが含まれます。
関数などのシリアライズできないデータは、ページツリーに渡せません。
## 規約 [#conventions]
ページツリーの型定義をインポートできます。ページツリーをハードコードしたり生成したりする場合に役立ちます。
```ts
import type * as PageTree from 'fumadocs-core/page-tree';
const tree: PageTree.Root = {
// props
};
```
一部のノードには `$ref` プロパティが含まれていますが、これは内部用のものであり、ハードコードする場合には使用しません。
### Root [#root]
ページツリーの初期ルートです。
### PageTreeRoot
| Prop | Type | Description |
| -------------- | ---------------------------- | ------------------------------------------------------------------------- |
| `type?` | `"root" \| undefined` | |
| `name` | `React.ReactNode` | |
| `description?` | `React.ReactNode` | |
| `children` | `PageTree.Node[]` | |
| `fallback?` | `PageTree.Root \| undefined` | Another page tree that won't be displayed unless being opened. |
| `$id?` | `string \| undefined` | ID for the node, unique in all page trees (even across different locales) |
### Page [#page]
リンクを表すノードです。
```json
{
"type": "page",
"name": "Quick Start",
"url": "/docs"
}
```
> 外部 URL も使用できます。
### PageTreeItem
| Prop | Type | Description |
| -------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `type` | `"page"` | |
| `name` | `React.ReactNode` | |
| `url` | `string` | |
| `external?` | `boolean \| undefined` | Whether the link should be treated as external (e.g. use HTML tag). When unspecified, it depends on the value of `url`. |
| `description?` | `React.ReactNode` | |
| `icon?` | `React.ReactNode` | |
| `$id?` | `string \| undefined` | ID for the node, unique in all page trees (even across different locales) |
### フォルダー [#folder]
複数の子ノードを含むノードです。
```json
{
"type": "folder",
"name": "Guide",
"index": {
"type": "page",
...
}
"children": [
...
]
}
```
### PageTreeFolder
| Prop | Type | Description |
| -------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | `"folder"` | |
| `name` | `React.ReactNode` | |
| `description?` | `React.ReactNode` | |
| `root?` | `string \| boolean \| undefined` | Mark as a root folder, `true` for the default type. A string value specifies its **root type**: root folders of the same type under the same parent scope are interchangeable (e.g. versions), and pages can map to their structural projection in another root. |
| `defaultOpen?` | `boolean \| undefined` | |
| `collapsible?` | `boolean \| undefined` | |
| `index?` | `PageTree.Item \| undefined` | |
| `icon?` | `React.ReactNode` | |
| `children` | `PageTree.Node[]` | |
| `$id?` | `string \| undefined` | ID for the node, unique in all page trees (even across different locales) |
### セパレーター [#separator]
アイテムの間に表示するラベルです。
```json
{
"type": "separator",
"name": "Components"
}
```
### PageTreeSeparator
| Prop | Type | Description |
| ------- | --------------------- | ------------------------------------------------------------------------- |
| `type` | `"separator"` | |
| `name?` | `React.ReactNode` | |
| `icon?` | `React.ReactNode` | |
| `$id?` | `string \| undefined` | ID for the node, unique in all page trees (even across different locales) |
## アイコン [#icons]
アイコンは `ReactElement` で、ページとフォルダーに設定できます。