React + Vite + shadcn/ui 環境構築手順メモ

はじめに

これまでフロントエンド開発は Bootstrap しか触ったことありませんでした。
FastAPI での学習を進める上で、普段通り Bootstrap を使おうとも思ったのですが、せっかくなので近年はやりの React を学んでみようと思い立ちました。

React 環境といえば Next.js も候補に上がりましたが、今後バックエンドを FastAPI に完全に委任する予定だったため、「フロントエンドのみ」として考えた時に Vite の方がメリットが大きそうだと感じ、こちらを選択しました。

公式ドキュメントの手順通りではありますが、React 初心者の視点から、基本的な Vite プロジェクトの作成から shadcn/ui コンポーネントの実装までの手順をまとめてみました。

プロジェクト構成

完成後のプロジェクト構成は以下のようになります：

プロジェクトルート/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── components/
│   │   └── ui/           # shadcn/ui コンポーネント
│   │       └── button.tsx
│   ├── lib/
│   │   └── utils.ts      # shadcn/ui ユーティリティ
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── components.json       # shadcn/ui 設定
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

1. Vite プロジェクトの作成

まず、Vite を使って React + TypeScript プロジェクトを作成します。

npm create vite@latest

コマンドを実行すると、以下のような選択肢が表示されます：

プロジェクト名の入力

◆  Project name:
│  .█

プロジェクト名は、新しいフォルダを作りたい場合は任意の名前を、現在のディレクトリに作成したい場合は . を入力します。

現在のディレクトリが空でない場合は、以下のような選択肢が表示されます：

◇  Project name:
│  .
│
◆  Current directory is not empty. Please choose how to proceed:
│  ○ Cancel operation
│  ○ Remove existing files and continue
│  ● Ignore files and continue  ← 推奨

通常は「Ignore files and continue」を選択すれば、既存ファイルを残したまま新しいファイルが追加されます。

フレームワークの選択

◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React  ← 選択
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular

バリアントの選択

◆  Select a variant:
│  ● TypeScript  ← 選択
│  ○ TypeScript + SWC
│  ○ JavaScript
│  ○ JavaScript + SWC
│  ○ React Router v7 ↗
│  ○ TanStack Router ↗
│  ○ RedwoodSDK ↗

依存関係のインストール

プロジェクトが作成されたら、依存関係をインストールします：

npm install

開発サーバーの起動

npm run dev

ブラウザで http://localhost:5173 にアクセスして、React アプリケーションが正常に表示されることを確認します。

これで基本的な Vite + React + TypeScript 環境の構築が完了です！

2. shadcn/ui の追加

基本的な Vite プロジェクトが動作することを確認したら、shadcn/ui を追加して美しい UI コンポーネントを使用できるようにします。

Tailwind CSS の追加

npm install tailwindcss @tailwindcss/vite

src/index.css を以下の内容に置き換えます：

@import "tailwindcss";

TypeScript 設定の編集

tsconfig.json を編集してパス解決を設定：

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json にも同様の設定を追加：

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2022",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "useDefineForClassFields": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

Vite 設定の更新

@types/node を開発依存関係として追加：

npm install -D @types/node

vite.config.ts を更新してパスエイリアスと Tailwind CSS プラグインを設定：

import path from "path";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

3. shadcn CLI でプロジェクトを初期化

npx shadcn@latest init

実行すると以下のような流れになります：

Need to install the following packages:
shadcn@2.9.0
Ok to proceed? (y) y

✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS config. Found v4.
✔ Validating import alias.
? Which color would you like to use as the base color? › - Use arrow-keys. Return to submit.
    Neutral
    Gray
    Zinc
    Stone
❯   Slate  ← 選択

今回は Slate を選択しました。これは shadcn/ui コンポーネントのベースカラーになり、グレー系の落ち着いた色合いです。

4. コンポーネントの追加と動作確認

Button コンポーネントの追加

npx shadcn@latest add button

App.tsx の編集

src/App.tsx を編集して Button コンポーネントをテスト：

import { Button } from "@/components/ui/button";

function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  );
}

export default App;

開発サーバーの起動と確認

npm run dev

ブラウザで http://localhost:5173 にアクセスして、shadcn/ui の Button コンポーネントが正常に表示されることを確認します。

これで shadcn/ui の Button コンポーネントが正常に動作することが確認できました！

おわりに

Vite と shadcn/ui を使って、高速で美しい React 開発環境を構築することができました。

このように、Vite + shadcn/ui は現代的な React 開発を効率よく・美しく進められる強力な組み合わせです。次回は、CI の構築や実践的なアプリケーション開発にも挑戦していきたいと思います。

参考リンク

• shadcn/ui 公式ドキュメント
• Vite 公式ドキュメント

ソースコード

完全なソースコードは GitHub で公開しています：
vite-react-test