Reactで新規プロジェクトを立ち上げる際の、**モダンで高速なフロー〈Viteベース〉**を解説します。
✅ 前提
- Node.js がローカルにインストールされていること
- npm / yarn / pnpm のいずれかが使えること
🏠 1. React + Vite プロジェクトの生成
npm create vite@latest my-app -- --template react
# または
yarn create vite my-app --template react
TypeScriptを使う場合は --template react-ts を指定。
📁 2. プロジェクトディレクトリに移動
cd my-app
🚀 3. パッケージのインストール
npm install
# または
yarn
💻 4. 開発サーバの起動
npm run dev
# または
yarn dev
http://localhost:5173 でブラウザが開きます。
🥉 必要なライブラリの追加
Tailwind CSS の導入
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
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;
React Router の導入
npm install react-router-dom
📂 ディレクトリ構成 (例)
my-app/
├── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── pages/
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── tailwind.config.js
├── vite.config.js
├── package.json
└── README.md
🔧 Git 初期設定
git init
git add .
git commit -m "initial commit"
🌐 GitHub と連携
git remote add origin https://github.com/yourname/your-repo.git
git push -u origin main
📝 補足: 旧方式 (CRA は非推奨)
npx create-react-app my-app
⚠️
create-react-appは保守が遅れており、開発や拡張性の面で弱点が多く、現在は Vite 使用が標準 となっています。
🎉 おわりに
Vite を使った React 開発は、爆速起動・柔軟な設定・豊富なプラグインで開発体験が非常に快適です。
是非、次のプロジェクトからは Vite を取り入れてみてください。