shadcn/ui: コピペで使えるReact UIコンポーネント集

shadcn/ui は、React向けに開発された、カスタマイズ性の高いUIコンポーネントのコレクションです。

UI開発の課題とコンポーネントライブラリ

ReactでUIを構築する際、ボタンやフォームなどのコンポーネントをゼロから作るのは手間がかかります。そこで、デザイン済みのコンポーネントを提供する「UIコンポーネントライブラリ」（例: MUI, Chakra UI）がよく利用されます。

shadcn/uiの特徴：ライブラリではない？

shadcn/ui も同様に便利なコンポーネントを提供しますが、一般的なライブラリとは異なります。

• インストール不要: npm install shadcn-ui のようなコマンドで依存関係として追加するものではありません。
• コードを直接コピー: コマンドを実行すると、コンポーネントのソースコードそのものがあなたのプロジェクト内にコピーされます。

// 従来のライブラリ
npm install some-ui-library  // 依存関係として追加

// shadcn/ui
npx shadcn@latest add button // プロジェクトに 'button.tsx' をコピー

shadcn/uiのメリット

• 高いカスタマイズ性: コピーされたコードはあなたのプロジェクトの一部なので、自由に編集・拡張できます。ライブラリの制約に縛られません。
• 依存関係が少ない: 必要なコンポーネントのコードだけがプロジェクトに含まれます。
• 最新技術ベース: Tailwind CSS や Radix UI を活用して構築されています。

ハンズオン：shadcn/uiを使ってみよう (Next.js)

ここではNext.jsプロジェクトで shadcn/ui をセットアップし、Buttonコンポーネントを追加する手順を説明します。

1. shadcn/ui の初期化

まず、ターミナルでプロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。

npx shadcn-ui@latest init

• このコマンドは、プロジェクトに必要な設定ファイル (components.json など) を作成し、Tailwind CSSなどの設定を更新します。
• 実行すると、TypeScriptの使用、スタイルの選択（Default / New York）、ベースカラー、CSS Variablesの使用などを対話形式で質問されます。基本的にはデフォルトのままでEnterキーを押していけばOKです。
• package.json がない場合は、先に npm init -y を実行するか、init コマンドが新しいNext.jsプロジェクトを作成するか聞いてきます。

2. コンポーネントの追加 (例: Button)

次に、使いたいコンポーネントを追加します。ここでは button を追加してみましょう。

npx shadcn-ui@latest add button

• このコマンドを実行すると、components/ui/button.tsx というファイルがプロジェクト内に作成（コピー）されます。
• 依存するライブラリ（Radix UIなど）があれば、それらもインストールするか聞かれます (y を選択）。

3. コンポーネントの利用

コピーされたコンポーネントを通常のReactコンポーネントとして利用します。例えば、app/page.tsx を以下のように編集します。

// app/page.tsx
import { Button } from "@/components/ui/button"; // ★追加されたButtonをインポート

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      {/* ★Buttonコンポーネントを使用 */}
      <Button>Click me</Button>

      {/* バリアントやサイズも指定可能 */}
      <Button variant="destructive" size="lg" className="mt-4">
        Destructive Large
      </Button>
      <Button variant="outline" className="mt-4">
        Outline
      </Button>
    </main>
  );
}

4. 開発サーバーの起動

変更を確認するために開発サーバーを起動します。

npm run dev

ブラウザで http://localhost:3000 を開くと、追加したボタンが表示されているはずです。

まとめ

shadcn/ui を利用することで、以下のメリットがあります。

• ✅ デザイン済みのUIコンポーネントを簡単に利用できる
• ✅ コマンド一つで必要なコンポーネントのコードを追加できる
• ✅ プロジェクト内のコードとして、コンポーネントを自由にカスタマイズできる

これにより、シンプルでカスタマイズしやすいReactのUIを効率的に構築できます。

---