facebook/docusaurus

6 articles

前提知識

›React の基礎知識（コンポーネント、フック、コンテキスト）
›Node.js および npm/yarn workspaces の使用経験
›静的サイトジェネレーターの一般的な理解

Docusaurus のアーキテクチャ：モノレポ全体像マップ

Docusaurus モノレポの高レベルな構造を解説します。40 パッケージの構成、サーバー/クライアントの分離、CLI オーケストレーター、loadSite() パイプライン、コード生成、クライアントサイドルーティングを網羅します。

プラグインのライフサイクル：コンテンツがルートになるまで

プラグインライフサイクルの4フェーズ（初期化・コンテンツ読み込み・ルート生成・クロスプラグイン通信）を深掘りします。actionsシステム、プリセット、Syntheticプラグイン、段階的な型階層についても解説します。

ソースから静的ファイルへ：ビルドパイプラインとバンドラー抽象化

CLI の呼び出しから静的 HTML の出力まで、ビルドフロー全体を追う。マルチロケールビルド、Webpack/Rspack の抽象化レイヤー、SSG の実行モード、そして future.faster パフォーマンスフラグシステムを解説する。

コンテンツ Plugin と MDX パイプライン：Markdown から React へ

Docusaurus が Markdown・MDX ファイルを React コンポーネントに変換する仕組みを解説します。MDX webpack loader、remark/rehype plugin チェーン、docs plugin のバージョン管理・サイドバーシステム、そしてルート生成までを詳しく追います。

テーマシステム：エイリアス、Swizzling、コンポーネントのカスタマイズ

DocusaurusのテーマシステムがWebpackエイリアスレベルでどう機能するかを解説します。階層的なエイリアス解決、@docusaurus/* クライアントAPI、theme-classicとtheme-common、swizzle CLI、フォールバックコンポーネントまでを網羅します。

開発者体験：Dev Server・i18n・設定システム

Dev Server のホットリロードアーキテクチャ、i18n システムのロケール別サイト構築アプローチ、TypeScript 対応の設定読み込み、Future Flag システム、そして全体のデータフローを解説します。