この記事は、現代的なフロントエンド開発（デザインを見ながらコードを変更し、即座に反映させるスタイル）を効率よく習得するためのガイドです。
1. プロジェクトの全体像
現代のReact開発は、以下の2段階で構成されています。
- 土台（Next.js）: フレームワーク、ルーティング、サーバー機能
- 内装（shadcn/ui）: UIコンポーネントシステム
これらを組み合わせることで、「一からCSSを書く」のではなく「完成された部品（コンポーネント）を組み立てる」開発が可能になります。
2. Step 1: 土台の作成（Next.js）
まずはアプリケーションの骨組みを作成します。これは Rails new や django-admin startproject に相当する作業です。
実行コマンド
# プロジェクトの作成（TypeScript, Tailwind, ESLintを含む）
pnpm create next-app my-app --typescript --tailwind --eslint
セットアップ時の推奨設定
コマンドを実行すると対話形式で設定を求められます。以下の構成が最も安定的かつ標準的です。
| 質問 | 推奨回答 | 理由 |
|---|---|---|
| Would you like to use React Compiler? | No | まだ実験的な機能のため、既存ライブラリとの競合を避けます。 |
Would you like to use src/ directory? |
Yes | ファイルが src にまとまり、ルートディレクトリが整理されます。 |
| Would you like to use App Router? | Yes | 必須。Next.jsの最新標準であり、ディレクトリ構造がそのままURLになります。 |
| Would you like to customize the default import alias? | No | デフォルト (@/components/...) のままで問題ありません。 |
起動確認
インストール完了後、サーバーを立ち上げます。
cd my-app
pnpm dev
ブラウザで http://localhost:3000 にアクセスできれば土台は完成です。
3. Step 2: UIライブラリの導入（shadcn/ui）
次に、UIコンポーネントを導入するための準備と、実際の部品追加を行います。
2-1. 初期化（配管工事）
プロジェクトに対して、shadcn/uiを受け入れるための設定（CSS変数やユーティリティ関数の配置）を行います。これはプロジェクトにつき1回だけ実行します。
pnpm dlx shadcn@latest init
2-2. コンポーネントの追加（家具の配置）
必要な部品（ボタン、カード、入力フォームなど）をカタログから取得します。
# 例: ボタンを追加
pnpm dlx shadcn@latest add button
# 例: カードとフォーム関連を一括追加
pnpm dlx shadcn@latest add card input label
4. 概念理解：なぜこのフローなのか？
shadcn/ui は従来のライブラリ（BootstrapやMUI）とは異なる思想で作られています。バックエンドエンジニアにとって、この構造を理解することが最大の近道です。
3段階の導入プロセス
| 段階 | コマンド | 役割 | 頻度 |
|---|---|---|---|
| 1. 土台 | create-next-app |
アプリの「骨組み」を作る（React, TS, Tailwind）。既存PJなら不要。 | 初回のみ |
| 2. 初期化 | shadcn init |
shadcnを受け入れるための「配管工事」。全体設定ファイルを作成。 | 初回のみ |
| 3. 追加 | shadcn add [部品名] |
必要な「家具」をカタログから選んで配置する。 | 都度 |
バックエンドエンジニア向けの概念図
このアーキテクチャを、MVCフレームワークなどのバックエンド用語に置き換えると以下のようになります。
| コマンド | 役割 | バックエンドのイメージ |
|---|---|---|
| create-next-app | フレームワーク設置 |
rails new。Webサーバーやルーターを用意する段階。 |
| shadcn init | 共通設定クラス作成 |
BaseController や config.yaml を用意する段階。アプリ全体の共通ルールを決める。 |
| shadcn add [x] | クラスファイルの生成 |
UserButton.php などのクラスファイルを自動生成して src/ に置くイメージ。 |
重要：「インストール」ではなく「コード生成」
shadcn/ui の最大の特徴は、部品を追加した際に node_modules に隠蔽されるのではなく、components/ui/button.tsx というソースファイルそのものが生成される点です。
- 従来のライブラリ: ブラックボックス。カスタマイズするには複雑なオーバーライド設定が必要。
- shadcn/ui: ホワイトボックス。手元にコードがあるため、「このボタンのデザインを少し変えたい」と思ったら、直接そのファイルを書き換えればOKです。
これが、「実際のデザインを見ながら、柔軟にコードを変えていく」開発スタイルを実現できる理由です。
5. Next Steps
土台とUI部品が揃いました。次はアプリケーションに魂を吹き込むフェーズです。
-
ロジック編:
useStateを使って、入力フォームの値を取得したり、ボタンのアクションを制御する。 - AI活用編: v0 などの生成AIを使って、複雑なダッシュボード等のUIコードを一括生成し、プロジェクトに取り込む。