目次

🌟 はじめに
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コンポーネントライブラリの定期的な更新

参考ドキュメント