Create React App 非推奨に伴う、Vite + React + TypeScript + TailwindCSS + Zustand + React Router 開発環境構築ガイド

ViteでReact + TypeScriptのプロジェクトを新規作成し、Tailwind CSS、状態管理（例：Zustand）、ルーティング（React Router）を導入して、開発できる状態にするまでの手順を具体的なコマンドと説明付きでまとめます。

---

🔧 前提条件

• Node.js（v16以上）インストール済み
• パッケージマネージャー（npm または yarn または pnpm）

---

pnpm を使う場合：

pnpm create vite my-app -- --template react-ts

✅ my-app は任意のプロジェクト名です。

---

2. プロジェクトに移動

cd my-app

---

3. 依存関係インストール

npm install

---

4. Tailwind CSS セットアップ

Tailwind の依存関係を追加

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js を編集

// tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/index.css に以下を追加（既存ファイルに追加する）

@tailwind base;
@tailwind components;
@tailwind utilities;

main.tsx で CSS をインポート

import './index.css'

---

5. React Router（ルーティング）を導入

npm install react-router-dom

使用例（App.tsx にて）:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

---

6. Zustand（状態管理）を導入

npm install zustand

使用例（store.ts）

import { create } from 'zustand'

interface CounterState {
  count: number
  increment: () => void
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))

---

7. 開発サーバー起動

npm run dev

---

✅ ディレクトリ構成（例）

my-app/
├─ src/
│  ├─ components/
│  ├─ pages/
│  ├─ store/
│  ├─ App.tsx
│  ├─ main.tsx
│  └─ index.css
├─ tailwind.config.js
├─ vite.config.ts

---

これで、Vite + React + TypeScript + TailwindCSS + Zustand + React Router の開発環境が整います。
どの状態管理ライブラリを使うかは好みによりますが、Zustand は軽量かつ直感的で初心者にも扱いやすいです。