ConfigDoc – 設定ファイルのドキュメント化を簡単に

はじめに

最近、設定ファイルについてのドキュメントをまとめる機会があったので、それ用のWebアプリをClaude Codeに作成してもらいnpmパッケージとして公開しました。

アプリの紹介

※以降 Claude Codeによるアプリの紹介

「このappsettings.jsonの設定、何に使うんだっけ？」

そんな経験はありませんか？ConfigDocは、JSON設定ファイルのドキュメントを簡単に作成・管理できるツールです。

ConfigDocとは

ConfigDocは、appsettings.jsonなどのJSON設定ファイルに対して、各プロパティの説明やメタ情報を追加し、チームで共有できるドキュメントを生成するWebベースのツールです。

こんな課題を解決します

設定の意味がわからない → 各プロパティに説明を追加して可視化
ドキュメントが散らばっている → 設定ファイルと紐づいた一元管理
ドキュメントが古くなる → コードと一緒にGit管理、自動エクスポート
新メンバーのオンボーディング → HTML/Markdownで共有可能なドキュメント

主な機能

1. 階層的なツリー表示

JSONファイルの構造をツリー形式で可視化。ネストされた設定も直感的に把握できます。

2. プロパティごとのドキュメント作成

各プロパティに以下の情報を追加できます：

説明: プロパティの用途や設定値の意味
タグ: データ型（string/number/boolean）や属性（required/nullable）
カスタムフィールド: プロジェクト固有の情報（デフォルト値、変更履歴など）

3. 複数ファイル対応

appsettings.json、appsettings.Development.json、appsettings.Production.jsonなど、関連する複数の設定ファイルをまとめて管理できます。

4. 柔軟なエクスポート

作成したドキュメントは3つの形式で出力可能：

形式	用途
HTML	ブラウザで閲覧、社内ドキュメント
Markdown	GitHub README、Wiki
Markdown（テーブル）	一覧表示が必要な場合

例えばHTMLファイルにエクスポートしておくことで、ConfigDocの環境がないユーザも、ブラウザで内容を確認することができます。

インストール不要で今すぐ使える

npx @skspwork/config-doc

これだけで起動します。ブラウザが自動で開き、すぐに使い始められます。

動作の流れ

コマンド実行 → 空きポートを自動検出（3000-3100）
Webサーバー起動 → ブラウザが自動で開く
設定ファイルを選択 → JSON構造がツリー表示される
プロパティを選択 → 説明やタグを追加
保存 → .config_doc/フォルダに自動保存
エクスポート → HTML/Markdownファイルを生成

データはプロジェクト内に保存

ドキュメントデータは、プロジェクトディレクトリ内の.config_doc/フォルダに保存されます。

your-project/
├── appsettings.json
├── .config_doc/                    # ← ConfigDocが作成
│   ├── project_settings.json       # プロジェクト設定（チーム共有）
│   ├── metadata/docs/              # ドキュメントデータ
│   └── output/config-doc.html      # エクスポートされたHTML
└── ...

チームでの共有

project_settings.jsonとmetadata/をGitにコミットすれば、チーム全員で同じドキュメントを共有できます
.user_settings.jsonは個人設定なので.gitignoreに追加を推奨

対象ユーザー

.NET開発者: appsettings.jsonの管理に
Node.js開発者: 各種config.jsonの管理に
チームリーダー: 設定の標準化とドキュメント化に
新規参画メンバー: プロジェクトの設定を素早く理解するために

技術スタック

フロントエンド: Next.js 16 + React 19 + TypeScript
スタイリング: Tailwind CSS 4
CLI: Node.js
データ保存: JSONファイル（データベース不要）

始めてみよう

クイックスタート

# プロジェクトディレクトリで実行
cd your-project
npx @skspwork/config-doc

グローバルインストール（頻繁に使う場合）

npm install -g @skspwork/config-doc
config-doc

要件

Node.js 18.0.0 以上
モダンブラウザ（Chrome、Firefox、Edge、Safari）

リンク

GitHub: https://github.com/skspwork/ConfigDoc
npm: https://www.npmjs.com/package/@skspwork/config-doc
Issue報告: https://github.com/skspwork/ConfigDoc/issues

ライセンス

設定ファイルのドキュメント化、始めてみませんか？

npx @skspwork/config-doc

おわりに

以上、Claude Codeによる紹介でした。

このレベルのアプリであれば、AIを使っていつでも作れるとは思いましたが、割と汎用的に出来たので今後も利用するシーンがあるかなと思い、公開しました。

今後の拡張ではymlへの対応と、Honoへの移行での軽量化を予定しています。