Reactプロジェクト雛形を新規生成するスキル。Vite + TypeScript + Tailwind + ESLint/Prettier + Vitest が共通仕様、spa / dashboard の2タイプから選択する。Docker(nginx)はオプション。 使用するケース: 「Reactプロジェクトを作って」「Viteで新規プロジェクト」「フロントエンドの雛形」「SPAを作りたい」「ダッシュボード作りたい」「TypeScript+Reactで始めたい」「Tailwind使って画面作りたい」など、空ディレクトリからのスケルトン作成。 使わないケース: 既存プロジェクト内でのコンポーネント作成・編集(react-impl を使う)、依存追加だけ、画面追加・実装変更。
Vite + React + TypeScriptベースのプロジェクト雛形を生成するスキル。ユーザの指定に応じてプロジェクトタイプを選択し、必要なファイルをすべて生成する。
npm create vite@latestでプロジェクトを作成する(テンプレート: react-ts)| タイプ | 用途 | リファレンス |
|---|---|---|
| spa | シンプルなSPA、小〜中規模アプリ | references/spa.md |
| dashboard | 管理画面・ダッシュボード | references/dashboard.md |
ユーザが明示しない場合は用途をヒアリングして判断する。迷ったらspaを提案する。
すべてのタイプで以下のセットアップを行う。
npm create vite@latest <project-name> -- --template react-ts
cd <project-name>
# 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
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",
},
},
});
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",
},
}
);
.prettierrcを作成:
{
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}
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}\""
}
}
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;"]
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";
}
}