Reactでフロントを環境構築した際の備忘録
React+TS+TailwindCSS+Dockerで環境構築したのでメモ。
🚀 使用技術・ライブラリ
- Vite
- React
- TypeScript
- Tailwind CSS
- Docker
せっかく開発をするので、使ったことがないCSSフレームワークを使ってみることにした。
⚙️ プロジェクト作成
SWCだと高速でビルドができるらしいのでとりあえず以下のコマンドを打ち込んでひな型を作成
npm create vite@latest react -- --template react-ts-swc && cd react && npm install #ts
依存モジュールのインストール
npm install
生成される主なファイル：
node_modulespackage-lock.json
※ node_modules は .gitignore に追加して GitHub には上げない。
参考：
dockerでviteを使ったreact環境を作ってみる
🔧 起動確認
npm run dev
ブラウザで以下にアクセス：
http://localhost:5173
初期画面が表示されていればOK
🎨 Tailwind CSS インストール
以下のリンクを参考にしてインストール。
参考：
【React】ReactアプリにTailwind Cssを導入する手順
🐳 Docker ファイル群
Dockerfile
FROM node:20-slim
# ワーキングディレクトリの指定
WORKDIR /usr/src/app
#パッケージをコピー
COPY package.json package-lock.json ./
#nodeモジュールのインストール
RUN npm install
COPY . .
# コンテナがリッスンするポートを明示的に公開
EXPOSE 5173
# コンテナ起動時に開発サーバーを実行
CMD ["npm" , "run" , "dev"]
docker-compose.yml
services:
react-app:
container_name: react-app
build: ./
ports:
- 5173:5173
volumes:
- ./:/usr/src/app
- /usr/src/app/node_modules
environment:
- CHOKIDAR_USEPOLLING=true
- WATCHPACK_POLLING=true
💡 知見メモ
- CHOKIDAR_USEPOLLING=true
- WATCHPACK_POLLING=true
これで ホットリロードが有効 になる。
- /usr/src/app/node_modules
これで ./:/usr/src/app の同期対象から外れ、
コンテナ内で独立した node_modules を保持できる。
メリット：
- Volume 同期で重くならない
- ホストの内容で上書きされない
▶️ Docker 起動
docker-compose up -d --build
-
-d: バックグラウンド実行（ログを見たい場合は外す） -
--build: イメージを再ビルド（down → upしなくてよい）
📦 テンプレート化して GitHub に公開
追加で行ったこと：
- CSS を Tailwind 形式で再記述
- TypeScript / Tailwind CSS のアイコンを追加（Icons8 の無料素材）
GitHub リポジトリ：
🔗torikara-code/vite-react-ts-tc-template
📝 学んだこと
🐋 Docker での環境構築
壊して作って、マルチデバイスで開発できる。
Tailwind のホットリロードも実装できた。
🎨 Tailwind CSS の使用感
最初はクラス名が多くて書きづらそうだったが、
慣れると以下のようなメリットを感じた。
良かった点
- 変数を書かなくていい
- CSS ファイルを別途作成・読み込み不要
課題
- クラス名を調べるのが少し面倒
→ Tailwind IntelliSense の使用を検討
⚡ Vite のパフォーマンス
最初は React 単体で環境構築を行っていて、ホットリロードが遅くストレスを感じた。
Vite に変えたところ、変更がほぼ即時で反映（ラグ1秒以内） されて快適になった。
📜 GitHub 公開とライセンス
テンプレートを公開する際に ライセンス の概念を初めて意識した。
緩めの公開なら README.md に MIT License を記載しておくとよさそう。
🏁 まとめ
今回の環境構築を通して、React の開発環境づくりの流れを一通り体験 できた。
次のステップでは、バックエンド環境の構築 を行う。
FastAPI や PostgreSQL を組み合わせて、アプリの土台を作る。
Discussion