React Project Init

Step 2: 追加パッケージのインストール

# Tailwind CSS
npm install -D tailwindcss @tailwindcss/vite

# 状態管理
npm install zustand

# テスト
npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom @types/jest

# ESLint + Prettier
npm install -D prettier eslint-config-prettier eslint-plugin-prettier

Step 3: Tailwind CSS設定

src/index.cssを以下に置き換える:

@import "tailwindcss";

vite.config.tsにTailwindプラグインを追加:

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

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
});

Step 4: ESLint設定

Viteが生成するeslint.config.jsに追記する:

import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import prettier from "eslint-plugin-prettier";

export default tseslint.config(
  { ignores: ["dist"] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ["**/*.{ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
      prettier,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
      "prettier/prettier": "warn",
    },
  }
);

Step 5: Prettier設定

.prettierrcを作成:

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

Step 6: Vitest設定

Vitest 4.x以降ではvite.config.ts内のtestプロパティがサポートされない。テスト設定は別ファイルvitest.config.tsに分離する。

vitest.config.tsを作成:

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/test/setup.ts",
    css: true,
  },
});

vite.config.tsはStep 3の内容のまま変更しない（Tailwindプラグイン + パスエイリアスのみ）。

src/test/setup.tsを作成:

import "@testing-library/jest-dom";

tsconfig.app.jsonのcompilerOptionsに追加:

{
  "compilerOptions": {
    "types": ["vitest/globals", "@testing-library/jest-dom"],
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

package.jsonのscriptsに追加:

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "test:coverage": "vitest run --coverage",
    "lint": "eslint .",
    "format": "prettier --write \"src/**/*.{ts,tsx,css,json}\""
  }
}

Step 7: Dockerfile（マルチステージビルド、オプション）

Docker(nginx) はオプション。ユーザが「Dockerで動かしたい」「Dockerfile欲しい」と明示した場合のみStep 7-9を実行する。npm run devでの開発が前提なら省略してよい。

FROM node:22-slim AS builder

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

FROM nginx:alpine AS runtime

COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Step 8: nginx.conf

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Step 9: docker-compose.yaml