shadcn-ui/ui
6 articles
前提知識
- ›TypeScript の基本的な知識
- ›npm/pnpm パッケージ管理の経験
- ›React コンポーネントライブラリの概念的な理解
01
shadcn/ui のアーキテクチャ：コンポーネント配布システムの仕組み
shadcn/ui モノリポを俯瞰し、「パッケージではなくコピペ」という思想、レジストリプロトコル、CLI・ドキュメントサイト・ビルドパイプラインの関係を解説します。
02
レジストリプロトコル：名前空間の解決・フェッチ・依存関係ツリー
レジストリサブシステムの詳細解説 — 名前空間のパース、URL構築、キャッシュ付きHTTPフェッチ、再帰的な依存関係解決、トポロジカルソートまで。
03
ASTレベルのコード変換：shadcn/ui がコンポーネントをプロジェクトに適合させる仕組み
ts-morph を活用したトランスフォーマーパイプラインが、プロジェクトの設定に合わせてコンポーネントのソースコードを書き換える仕組みを解説します。
04
レジストリのビルド：コンポーネントのソースから静的 JSON API へ
コンポーネントのソースを ui.shadcn.com/r/ で配信される静的 JSON API へと変換するビルドパイプラインの詳細を解説します。
05
プロジェクト初期化：空のディレクトリから設定済みコンポーネントシステムへ
initコマンドの呼び出しから完全に設定されたプロジェクトが完成するまでの流れを追い、テンプレート・フレームワーク検出・プリセット・モノレポルーティングを解説します。
06
AIファースト設計によるコンポーネント探索：MCPサーバーとプログラマティックRegistry API
shadcn/ui がModel Context Protocolとプログラマティック API、そしてトリプルサーフェス設計を通じて、AIコーディングアシスタントにregistryを公開する仕組みを解説します。