目次
- 🌟 はじめに
- 1. React 19 プロジェクトの作成
- 2. Tailwind CSS の統合
- 3. パスエイリアスの設定
- 4. shadcn/ui コンポーネントライブラリの統合
- 5. プロジェクト構造
- 🚀 ベストプラクティス
- 参考ドキュメント
🌟 はじめに
React 19のリリースに伴い、効率的な開発ツールチェインの需要が高まっています。本記事では Vite を使ったReact 19プロジェクトの構築から、Tailwind CSS と shadcn/ui の統合、パスエイリアスの設定までを詳細に解説します。
1. React 19 プロジェクトの作成
pnpmを使用してプロジェクトを初期化します：
pnpm create vite --template=react-ts
プロジェクト名を入力後、ディレクトリに移動します。
2. Tailwind CSS の統合
1️⃣ 依存関係のインストール
npm install tailwindcss @tailwindcss/vite
2️⃣ Viteプラグインの設定
vite.config.ts を修正：
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})
3️⃣ Tailwindの導入
index.css の先頭に追加：
@import "tailwindcss";
4️⃣ プロジェクトの起動
npm run dev
3. パスエイリアスの設定
1️⃣ TypeScript設定の変更
tsconfig.json：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
tsconfig.app.json：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
2️⃣ 型定義のインストール
pnpm add -D @types/node
3️⃣ Viteのエイリアス解決設定
vite.config.ts を更新：
import path from "path"
import { defineConfig } from "vite"
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
4. shadcn/ui コンポーネントライブラリの統合
1️⃣ 初期設定
pnpm dlx shadcn@canary init
プロンプトに従い以下を選択：
- Tailwind CSSを使用
- コンポーネントディレクトリを設定
- ダークモードを有効化
2️⃣ サンプルコンポーネントの追加
pnpm dlx shadcn@canary add sidebar-07
5. プロジェクト構造
my-project/
├── src/
│ ├── components/ # shadcnコンポーネント
│ ├── App.tsx
│ └── index.css
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json
🚀 ベストプラクティス
-
@/componentsでカスタムコンポーネントをインポート - shadcnコンポーネントライブラリの定期的な更新
参考ドキュメント