Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

静的サイトジェネレータ(SSG)調査レポート

docs/workspace/ 以下の Markdown ドキュメント群を静的サイトとしてビルド・デプロイするにあたり、最適な静的サイトジェネレータ(SSG)の選定調査結果をまとめます。


1. 主要な静的サイトジェネレータ(SSG)の比較

ジェネレータ名ベース技術特徴・メリットデメリットこんな用途にオススメ
VitePressVite + 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ツールチェーンを使わずに構築したい
DocusaurusReact・バージョン管理、多言語対応、検索機能が標準で強力
・プラグインやコミュニティが非常に豊富
・設定項目が多く、小規模なサイトにはオーバースペック
・ビルド速度が他に比べるとやや遅い
・大規模な製品ドキュメントマニュアルなど
mdbookRust・Rust製のためビルド・起動速度が圧倒的に速い
・単一バイナリで動作し、依存関係がない
SUMMARY.md による構成定義が必須
・デザインがやや古風でカスタマイズしにくい
・本の形式に特化したシンプルなマニュアル

2. VitePress vs mdbook 詳細比較(現在のフォルダ構成に基づく)

プロジェクトの現在のフォルダ構成(package.jsondocs/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 が最適解と判断されます。

  • 理由:
  1. すでに package.json が存在する環境であるため、パッケージの追加だけで最小限の手間で導入可能であること。
  2. SUMMARY.md を手動管理する必要がなく、docs/workspace/index.md などの既存のフォルダ構造・リンク関係をそのまま有効活用してサイドバーを構築できること。
  3. デフォルトテーマの完成度が高く、特に追加のスタイリングをしなくても実用的なダークモード対応のモダンなドキュメントサイトが構築できること。

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テスト事前準備(スキルの作成)検証の実行