静的サイトジェネレータ(SSG)調査レポート
docs/workspace/ 以下の Markdown ドキュメント群を静的サイトとしてビルド・デプロイするにあたり、最適な静的サイトジェネレータ(SSG)の選定調査結果をまとめます。
1. 主要な静的サイトジェネレータ(SSG)の比較
| ジェネレータ名 | ベース技術 | 特徴・メリット | デメリット | こんな用途にオススメ |
|---|---|---|---|---|
| VitePress | Vite + Vue 3 | ・Viteベースでビルドと開発サーバーが極めて高速 ・設定が最小限で学習コストが低い ・Markdown内に Vue 3 コンポーネントを埋め込み可能 | ・Vueエコシステム以外との親和性はやや低い | ・シンプルかつ軽量なドキュメントサイトを素早く作りたい |
| Starlight (Astro) | Astro (JS/TS) | ・表示速度が非常に高速(最適化されたHTML出力) ・デフォルトUIがモダンでレスポンシブ対応 ・Markdown/MDXをサポート | ・比較的新しく、日本語ドキュメントがやや少ない | ・モダンで高速なサイトを作りたい ・フロントエンドの自由度を高く保ちたい |
| MkDocs (Materialテーマ) | Python | ・Python環境だけで完結し、JS/Node.jsが不要 ・ Material for MkDocs テーマが非常に高機能・検索やコードコピー機能が標準搭載 | ・動的なUIコンポーネントの埋め込みが難しい | ・Python環境を好む ・JSツールチェーンを使わずに構築したい |
| Docusaurus | React | ・バージョン管理、多言語対応、検索機能が標準で強力 ・プラグインやコミュニティが非常に豊富 | ・設定項目が多く、小規模なサイトにはオーバースペック ・ビルド速度が他に比べるとやや遅い | ・大規模な製品ドキュメントマニュアルなど |
| mdbook | Rust | ・Rust製のためビルド・起動速度が圧倒的に速い ・単一バイナリで動作し、依存関係がない | ・SUMMARY.md による構成定義が必須・デザインがやや古風でカスタマイズしにくい | ・本の形式に特化したシンプルなマニュアル |
2. VitePress vs mdbook 詳細比較(現在のフォルダ構成に基づく)
プロジェクトの現在のフォルダ構成(package.json や docs/workspace/index.md などが存在する環境)において、候補となった VitePress と mdbook を導入する場合のメリット・デメリットは以下の通りです。
| 比較項目 | VitePress のメリット | VitePress のデメリット | mdbook のメリット | mdbook のデメリット |
|---|---|---|---|---|
| セットアップと依存関係 | ・既存の package.json にパッケージを追加するだけで即座に導入可能 ・Node.js エコシステムをそのまま利用できる | ・node_modules の依存パッケージが増加する | ・単一のバイナリで動作するため、Node.js などの依存関係に影響されない | ・Rustのツールチェーン(Cargo)または専用バイナリの個別インストール必要 |
| ディレクトリ・構成の管理 | ・index.md などのフォルダ構造がそのままルーティングになり、ディレクトリに応じたサイドバーの自動生成が可能 | ・設定ファイル(.vitepress/config.js)の記述が必要 | ・シンプルな構成であれば設定ファイルが非常に小さい | ・サイト構成を定義する SUMMARY.md を強制されるため、既存ドキュメントのインデックスファイルと二重管理になりやすい |
| Markdownの互換性 | ・一般的なMarkdown記法や相対パスのリンクがそのまま機能する ・Markdown内にVueコンポーネントを直接埋め込み可能 | ・Vueの特殊な構文(大括弧など)がエスケープなしで記述されているとビルドエラーになる場合がある | ・ピュアなMarkdownのパースが非常に高速 | ・動的なUIコンポーネントの埋め込みなど、インタラクティブな拡張が難しい |
| ビルド・表示パフォーマンス | ・Viteによる高速な開発サーバー起動 ・SPA(Single Page Application)的な高速な画面遷移 | ・mdbookに比べるとNode.jsの起動やビルドにわずかなオーバーヘッドがある | ・Rust製のためビルド・起動速度が圧倒的に速い | ・ページ遷移時に通常のブラウザロードが発生する(SPAではない) |
| デザイン・カスタマイズ性 | ・デフォルトで非常に美しくモダンなダークモード対応UIが手に入る ・CSS(Tailwindなど)やVueを使ったカスタマイズが容易 | ・独自のレイアウトを作成する場合、VueやViteの知識が必要になる | ・シンプルで本(Book)の形式に特化した直感的なレイアウト | ・現代的なWebサイトに比べるとデザインがやや古風で、大幅なカスタマイズが難しい |
3. 結論
シンプルなドキュメントサイトにしたいという要件、および現在のNode.jsプロジェクト環境を踏まえると、VitePress が最適解と判断されます。
- 理由:
- すでに
package.jsonが存在する環境であるため、パッケージの追加だけで最小限の手間で導入可能であること。 SUMMARY.mdを手動管理する必要がなく、docs/workspace/index.md などの既存のフォルダ構造・リンク関係をそのまま有効活用してサイドバーを構築できること。- デフォルトテーマの完成度が高く、特に追加のスタイリングをしなくても実用的なダークモード対応のモダンなドキュメントサイトが構築できること。
GistTools
Gist URL: https://gist.github.com/${UserId}/${Hash}/raw/${Name}
Gist Data
{
"items": {
"editorconfig": {
"Hash": "c660eee4639989e8f1ebe1a3b80e5ade",
"Name": ".editorconfig"
},
"prettier": {
"Hash": "9aa743efab0eebb543a36498c07f9b1e",
"Name": ".prettierrc.yaml"
},
"mdbook": {
"Hash": "b8f40ce99a88dc24a680c8e026a6e911",
"Name": "book.toml"
},
"mdbook-css": {
"Hash": "b8f40ce99a88dc24a680c8e026a6e911",
"Name": "mdbook-mebiusbox.css"
},
"mdbook-table-css": {
"Hash": "b8f40ce99a88dc24a680c8e026a6e911",
"Name": "mdbook-table.css"
},
"mdbook-make": {
"Hash": "b8f40ce99a88dc24a680c8e026a6e911",
"Name": "makefile.toml"
},
"ruff": {
"Hash": "ba62eb6bfb3257f88927cf3ec4a3cd4d",
"Name": "ruff.toml"
},
"mypy": {
"Hash": "4ac70c0e6e91a56e4843fcce948e1850",
"Name": ".mypy.ini"
},
"typos": {
"Hash": "e91ad9faafeb702527cc25f3f5178ba0",
"Name": "typos.toml"
},
"makers": {
"Hash": "ed2f0c862a1b7662db2a7df091d8fed0",
"Name": "makefile.toml"
},
"markdownlint": {
"Hash": "2e6bbbe13aa092567fa5130659a88f49",
"Name": ".markdownlint.yaml"
},
"highlight.js": {
"Hash": "b8f40ce99a88dc24a680c8e026a6e911",
"Name": "highlight.js"
},
"index.hbs": {
"Hash": "b8f40ce99a88dc24a680c8e026a6e911",
"Name": "index.hbs"
},
"pagetoc.css": {
"Hash": "b8f40ce99a88dc24a680c8e026a6e911",
"Name": "pagetoc.css"
},
"pagetoc.js": {
"Hash": "b8f40ce99a88dc24a680c8e026a6e911",
"Name": "pagetoc.js"
}
},
"groups": {
"mdbook-theme": {
"items": ["highlight.js", "index.hbs", "pagetoc.css", "pagetoc.js"]
},
"mdbook-css": {
"items": ["mdbook-css", "mdbook-table-css"]
}
}
}
Download
AIエージェントを使ったドキュメントシステム
仕様書とコードベースは巨大なため、AIエージェントが扱いやすいようにデータを抽出します。
仕様書とコードベース(元文書、不変データ)から、ドメインごとにデータを整理します(AI文書)。 AIエージェントはAI文書を参照して、作業を行います。
AI文書
AI文書はたとえば、コンセプト、アーキテクチャ、要件定義、設計書、機能仕様書(画面仕様書)、テスト設計書などがあります。
レビュー
AI文書は間違いや情報不足、元文書に存在しない情報を作成したりします。そのため、AI文書と元文書を使ってレビューを行い、情報が正確かどうかを確認します。
仕様書の分解
仕様書(PDF)が大きいため、事前にPDFからマークダウンファイルに出力します。次に、出力したマークダウンファイルを章節で分割します。さらに、1つのファイルが800行程度に収まるように分割します。最終的に100ファイル程度。
AI文書の作成
まず、コードベースから仕様書を作成します。作成した仕様書と元文書から出力した仕様書を使ってレビューを行い、仕様書を更新します。仕様書は全体の仕様書と画面ごとの仕様書を作成します。
テスト設計書の作成
AI文書を使ってテスト設計書を作成します。
AIエージェントとAI文書
仕様書とコードベースは巨大なため、AIエージェントが扱いやすいようにデータを抽出します。
仕様書とコードベース(元文書)から、ドメインごとにデータを整理します(AI文書)。 AIエージェントはAI文書を参照して、作業を行います。
AI文書
AI文書はたとえば、コンセプト、アーキテクチャ、要件定義、設計書、機能仕様書(画面仕様書)、テスト設計書などがあります。
AIエージェント
AIエージェントは元文書を参照せず、AI文書を参照して作業を行います。
AIエージェントによるE2Eテスト
AIエージェントにPlaywrightを使ってE2Eテストを行います。
チェックリストの作成
AI文書のテスト設計書からチェックリストを作成します。今回は受注業務と照会業務の2つを作成しました。
Playwrightスキル
AIエージェントにPlaywrightを使わせるために、Playwright CLI を導入し、スキルをインストールします。
テストスキルの作成
AIエージェントにチェックリストをPlaywrightでテストさせるスキルを作成します。 このスキルはチェックリストに結果も保存します。
レポートの作成
チェックリストの検証結果、および検証で不具合が見つかった場合の情報をまとめます。
AIエージェントの役目
この場合、テストスキルの作成は人間が行い、検証はすべてAIエージェントが行います。
AIエージェントを使った機能テスト
AIエージェントを活用して機能テストを行う準備をします。機能テストは人間が行います。
チェックリストの作成
AI文書のテスト設計書からチェックリストを作成します。今回は受注業務と照会業務の2つを作成しました。
手順書の作成
人間が行うために、チェックリストの内容から手順書を作成します。
SQLの作成
機能テストを行うためのテストデータや設定を行うためにSQLをAIエージェントに作成させます。
機能テスト
手順書に書かれている内容のとおりに、SQLを実行して機能テストを行います。
AIエージェントの役目
この場合、手順書やSQLはAIエージェントが作成し、人間が機能テストを行います。
各テストにおけるAIエージェントの活用
| テストの種類 | 人間の役割 | AIエージェントの役割 |
|---|---|---|
| 機能テスト | 検証の実行 | 事前準備(手順書、SQLの作成) |
| E2Eテスト | 事前準備(スキルの作成) | 検証の実行 |