TreeView Features - ootomonaiso/docusaurus_edit GitHub Wiki

TreeView機能

Docusaurus EditorのTreeView機能の詳細な説明です。

TreeView の概要

TreeViewは、Docusaurusプロジェクトのドキュメント構造を階層的に表示し、効率的な編集作業を支援します。

主な特徴

  • 階層表示: フォルダとファイルの構造を直感的に表示
  • 位置情報: sidebar_position に基づいた並び順
  • リアルタイム更新: ファイルシステムの変更を即座に反映
  • ドラッグ&ドロップ: 直感的な位置変更操作

TreeView の表示

アクティベーション

  1. VS Code のサイドバーで「Docusaurus Editor」アイコンをクリック
  2. または、コマンドパレット（Ctrl+Shift+P）で「Docusaurus: Show TreeView」を実行

表示される情報

各ファイル・フォルダには以下の情報が表示されます：

📁 getting-started (2)          // フォルダ名 (position)
├── 📄 intro.md [1] 2.5KB      // ファイル名 [position] サイズ
├── 📄 tutorial.md [2] 4.1KB
└── 📁 advanced (3)
    ├── 📄 config.md [1] 1.8KB
    └── 📄 api.md [2] 3.2KB

アイコンの説明

  • 📁 フォルダ: ドキュメントグループ
  • 📄 Markdownファイル: 通常のドキュメント
  • 📋 MDXファイル: React コンポーネント含有
  • ⚠️ 警告: sidebar_position が未設定
  • ❌ エラー: 読み込みエラーや構文エラー

ドラッグ&ドロップ機能

ファイルの移動

同一フォルダ内での移動

  1. 移動したいファイルを選択
  2. 新しい位置にドラッグ
  3. sidebar_position が自動で更新される
# 移動前
---
title: チュートリアル
sidebar_position: 3
---

# 移動後（1番目に移動した場合）
---
title: チュートリアル
sidebar_position: 1
---

別フォルダへの移動

  1. ファイルを別のフォルダにドラッグ
  2. 移動先フォルダの適切な位置に配置
  3. ファイルパスと sidebar_position を更新

フォルダの移動

  1. フォルダ全体をドラッグ&ドロップ
  2. _category_.json ファイルが自動更新
  3. 含まれるすべてのファイルの相対位置を保持

移動の制限事項

  • ルートフォルダ: docs/ フォルダ外には移動不可
  • システムファイル: . で始まるファイルは移動対象外
  • バイナリファイル: 画像などのバイナリファイルは位置更新なし

コンテキストメニュー

TreeView の各項目を右クリックすると、以下のメニューが表示されます：

ファイル用メニュー

  • Open: ファイルをエディタで開く
  • Open Preview: Markdownプレビューで開く
  • New Document: 同階層に新規ドキュメント作成
  • Rename: ファイル名変更
  • Delete: ファイル削除
  • Copy Path: ファイルパスをクリップボードにコピー
  • Show in Explorer: エクスプローラーで表示

フォルダ用メニュー

  • New Document: フォルダ内に新規ドキュメント作成
  • New Folder: サブフォルダ作成
  • Rename: フォルダ名変更
  • Delete: フォルダ削除（確認あり）
  • Refresh: フォルダ内容の再読み込み

位置管理システム

sidebar_position の自動計算

Docusaurus Editor は以下のロジックで sidebar_position を決定します：

  1. 挿入位置の分析: ドロップ先の前後のファイルの position を確認
  2. 中間値の計算: 適切な数値を算出（整数または小数）
  3. 重複回避: 既存の値と重複しないよう調整
  4. 自動整理: 必要に応じて全体の番号を振り直し

category.json の管理

フォルダには _category_.json ファイルが自動生成されます：

{
  "label": "Getting Started",
  "position": 1,
  "link": {
    "type": "generated-index",
    "description": "Getting started with our documentation."
  }
}

位置競合の解決

同じ sidebar_position を持つファイルが検出された場合：

  1. 警告アイコンで視覚的に表示
  2. 自動修正の提案
  3. 手動での調整も可能

フィルタリングとソート

表示フィルター

  • ファイルタイプ: .md, .mdx ファイルのみ表示
  • 隠しファイル: . で始まるファイルを非表示
  • 空フォルダ: 中身のないフォルダの扱い

ソート順序

  1. Primary: sidebar_position の昇順
  2. Secondary: ファイル名のアルファベット順
  3. フォルダ優先: フォルダをファイルより上に表示

更新とリフレッシュ

自動更新

  • ファイルシステムの変更を監視
  • 外部エディタでの変更も即座に反映
  • Frontmatter の変更を検出して表示更新

手動リフレッシュ

  • TreeView ヘッダーの更新ボタンをクリック
  • コマンドパレットから「Docusaurus: Refresh TreeView」を実行
  • 大きな変更後の完全な再読み込み

パフォーマンス最適化

大規模プロジェクト対応

  • 遅延読み込み: 必要な部分のみを段階的に読み込み
  • キャッシュ機能: 頻繁にアクセスする情報をメモリに保持
  • 差分更新: 変更された部分のみを更新

メモリ使用量

  • ファイル内容の全読み込みは回避
  • Frontmatter のみを効率的に解析
  • 不要なデータの定期的なクリーンアップ

カスタマイズ設定

VS Code の設定で TreeView の動作をカスタマイズできます：

{
  "docusaurusEditor.treeView.autoRefresh": true,
  "docusaurusEditor.treeView.showFileSize": true,
  "docusaurusEditor.treeView.sortBy": "position",
  "docusaurusEditor.treeView.groupFolders": true
}

トラブルシューティング

よくある問題

TreeView が表示されない

  1. Docusaurus プロジェクトフォルダが開かれているか確認
  2. docs/ フォルダが存在するか確認
  3. VS Code の拡張機能が有効になっているか確認

ファイルが表示されない

  1. ファイルが .md または .mdx 拡張子か確認
  2. Frontmatter の YAML 構文が正しいか確認
  3. ファイルの読み取り権限を確認

ドラッグ&ドロップができない

  1. ファイルが編集可能な状態か確認
  2. 移動先が有効なフォルダか確認
  3. Git などのバージョン管理でロックされていないか確認

デバッグ情報

問題が発生した場合は、以下の情報を確認してください：

  • VS Code の開発者ツール（Ctrl+Shift+I）
  • Docusaurus Editor の出力パネル
  • ファイルシステムの権限とアクセス状況