レジストリ
コンポーネントレジストリの概念、その仕組み、および開発者がUIコンポーネントを共有・発見する方法をどのように変革しているかを理解する。
コンポーネントレジストリは、UIコンポーネントを共有および発見するための仕組みです。shadcn/ui によって普及し、プロジェクトに直接コンポーネントを発見してコピーすることを可能にします。
レジストリは、開発者がUIコンポーネントを共有および発見する方法における根本的な変化を表します。従来のnpmパッケージとは異なり、レジストリはオープンソースモデルに依存し、ソースコードをプロジェクトにダウンロードすることで機能します。
レジストリを構成するもの
1. ソースコードの配布
コンパイル済みコードを配布する従来のnpmパッケージとは異なり、レジストリはソースコードを配布します:
// Traditional npm package
import { Button } from 'some-ui-library';
// Registry-based component
// Copy source from registry into your project
// src/components/ui/button.tsx contains the full source
import { Button } from '@/components/ui/button';2. メタデータと設定
優れたレジストリは、コンポーネントの名前、説明、依存関係、カテゴリなどの豊富なメタデータを含みます。
{
"name": "announcement",
"type": "registry:component",
"description": "A compound badge component designed to display announcements with theming support",
"dependencies": ["class-variance-authority", "lucide-react"],
"registryDependencies": ["badge"],
"files": [
{
"type": "registry:component",
"content": "..."
}
],
"category": "ui"
}3. プレビューとドキュメント
ダウンロードはされませんが、レジストリのウェブサイトは通常以下を提供します:
- ライブコンポーネントプレビュー
- インタラクティブな例
- 詳細なドキュメント
- コピーしてすぐ使えるコードスニペット
レジストリアーキテクチャの利点
コンポーネントレジストリは、作成者と利用者の双方にとって重要な利点を提供し、UIコンポーネントの共有と採用のプロセスを合理化します。
作成者向け
コンポーネント作成者にとって、レジストリは配布を非常に簡単にします。一度コンポーネントを作成すれば、それをレジストリに追加するだけで、複雑な公開手順なしにユーザーが即座に利用できるようになります。この配布の容易さはフィードバックループを高速化し、迅速な反復を促進します。
バージョン管理も重要な利点です。レジストリは通常、コンポーネントのバージョン、変更履歴、互換性情報を追跡します。例えば、コンポーネントのエントリは現在のバージョンを指定したり、アクセシビリティの改善や新機能など最近の変更を強調したり、どのバージョンの shadcn/ui をサポートしているかを示したりします。この透明性はメンテナが更新を伝えるのに役立ち、ユーザーがプロジェクト要件に合ったコンポーネントを選択できるようにします。
コミュニティの関与もレジストリによって強化されます。作成者はユーザーから直接フィードバックを受け取り、問題を報告したり、機能を要望したり、共同で改善に貢献してもらうことができます。これにより、よりインタラクティブで応答性の高い開発環境が育まれ、作成者と消費者の双方にメリットがあります。
利用者向け
コンポーネント利用者の観点では、レジストリは発見プロセスを大幅に改善します。ユーザーはカテゴリごとにコンポーネントをブラウズしたり、検索機能を利用したり、人気指標を確認したり、関連コンポーネントを探索したりすることで、プロジェクトに最適なものを見つけやすくなります。
コンポーネントを統合する前に、ユーザーは実際に動作するプレビューを確認し、さまざまなバリアントを試し、その挙動やコード品質をレビューできます。事前にコンポーネントを評価できることでリスクが低減され、採用に対する信頼が高まります。
おそらく最も重要なのは、レジストリはユーザーに真の所有権を与えることです。依存関係に縛られる代わりに、ユーザーはソースコードをプロジェクトに直接コピーします。これによりコンポーネントを必要に応じて変更でき、依存関係管理の問題を回避し、コードベースに対する完全なコントロールを維持できます。
レジストリの作成
シンプルなレジストリは比較的短時間で作成できます。実際的には、次の3つのコア要素が必要です:
1. コンポーネント
共有したいコンポーネント、またはコンポーネントのセットを作成します。コンポーネントのソースコードがあること、そして十分にドキュメント化され理解しやすいことを確認してください。
Markdownドキュメント、実装例、コンポーネントのプレビュー方法などを追加することを検討してください。
2. 公開エンドポイント
コンポーネントを提供する公開エンドポイントを作成します。これは単純なJSONファイルでも、より複雑なウェブサイトでもかまいません。公開されアクセス可能であれば、任意のエンドポイントを使用できます。
3. CLI
コンポーネントをプロジェクトにインストールできるCLIを作成します。これは npx myregistry add button のような単一コマンドのシンプルなものでも、オプションやフラグを備えたより複雑なコマンドでも構いません。
shadcn レジストリの使用
自分でレジストリを構築することは、コンポーネントをコミュニティと共有する素晴らしい方法ですが、多くの労力とメンテナンスを必要とします。コンポーネントを一つか二つ共有したいだけなら、shadcn/ui エコシステム（レジストリ、CLI、変数）を利用することができます。
ここでは、Vercel の静的ホスティングを使って、MetricCard コンポーネントを5分未満で公開する方法を見てみましょう。
ステップ 1: フォルダを作成する
次の構成でフォルダを作成します:
my-component/
├── public/
│ └── metric-card.json
└── vercel.jsonレジストリアイテムのJSON（例: metric-card.json）を public/ フォルダに配置します。
ステップ 2: vercel.json を追加する
public/ の隣に vercel.json ファイルを作成し、以下を記述します:
{
"headers": [
{
"source": "/(.*).json",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
},
{
"key": "Content-Type",
"value": "application/json"
}
]
}
]
}これにより、JSONが正しいCORSおよびコンテンツヘッダーで配信されることが保証されます。
ステップ 3: Vercel にデプロイする
フォルダのルートから次を実行します:
vercel --prodプロンプトに答えてプロジェクトをデプロイしてください。
完了すると、ファイルは次のようなURLで公開されます:
https://your-project-name.vercel.app/metric-card.jsonステップ 4: コンポーネントをインストールする
これで誰でも次を実行できます:
npx shadcn@latest add https://your-project-name.vercel.app/metric-card.jsonnpmパッケージ不要、ビルド不要、複雑さなし。