Open2日前にコメント追加1
f

シフト管理 開発ガイド

📌 プロジェクト概要

このプロジェクトは、Rails (APIモード) + React (Vite) + PostgreSQL を Docker 上で動かすシフト管理アプリケーションです。チーム全員が同じ環境で開発できるよう、Docker Compose によりバックエンド・フロントエンド・DBを統合管理します。
🚀 環境構築
必要なツール

Docker / Docker Compose
Git
Node.js（ローカルで直接動かす場合のみ）
WSL2（Windowsの場合）
初回セットアップ

 リポジトリをクローンgit clone git@github.com:＜your-org＞/shift-management.git

cd shift-management

 環境変数ファイルを作成cp frontend/.env.example frontend/.env

cp backend/.env.example backend/.env

 Dockerイメージをビルドdocker-compose build

 DB作成docker-compose run backend rails db:create
起動

docker-compose up
フロントエンド: http://localhost:5173
バックエンド(API): http://localhost:3000
🗂 ディレクトリ構造（フロントエンド）

frontend/

├── public/               # 静的ファイル

├── src/

│   ├── assets/           # 画像・フォント・CSSなど

│   ├── components/       # 汎用UI部品

│   ├── features/         # 機能単位のまとまり

│   │   └── hello/

│   │       ├── api/        # API呼び出し関数

│   │       ├── components/ # 機能専用UI部品

│   │       ├── hooks/      # 機能専用カスタムフック

│   │       └── types.ts    # 型定義

│   ├── hooks/            # 全体で使うカスタムフック

│   ├── layouts/          # ページ共通レイアウト

│   ├── pages/            # ページコンポーネント（ルーティング単位）

│   ├── services/         # APIクライアントや外部サービス連携

│   ├── store/            # 状態管理

│   ├── styles/           # グローバルCSSやテーマ

│   ├── types/            # 全体で使う型定義

│   ├── utils/            # 汎用関数

│   ├── main.tsx          # エントリーポイント

│   └── vite-env.d.ts
💡 開発の考え方（島モデル）

src … アプリ本体
features … 機能の島（API/UI/ロジックを完結させる）
components … 汎用UI部品
pages … URL単位の画面。組み立て役
services … 外部サービスやAPIクライアント
styles / assets … 見た目
utils / types … 共通知恵
store … 全体状態
🔄 よくある作業フロー

新機能追加

features/＜機能名＞ を作成
api/ にAPI呼び出し関数を作成
hooks/ にデータ取得や状態管理のロジックを作成
components/ にUI部品を作成
pages/ にページを作り、機能部品を組み合わせる
API呼び出し

機能固有 → features/＜機能名＞/api/
共通設定（ベースURLやエラー処理） → services/apiClient.ts
🛠 コマンド集

バックエンド（Rails）

 DBマイグレーションdocker-compose exec backend rails db:migrate

 モデル作成docker-compose exec backend rails g model ModelName field:type

 コントローラ作成docker-compose exec backend rails g controller api/v1/resource index
フロントエンド（React）

 パッケージ追加docker-compose exec frontend npm install package-name

 開発サーバー再起動docker-compose restart frontend
📜 環境変数

frontend/.env

VITE_API_BASE_URL=http://localhost:3000
backend/.env

DATABASE_HOST=db

DATABASE_USER=postgres

DATABASE_PASSWORD=postgres
🤝 コントリビュート方法

新しいブランチを作成
コードを変更
docker-compose up で動作確認
PRを作成
🧩 チーム開発Tips

機能ごとに features/ に閉じ込める
ページは組み立てだけにする
API呼び出しは api/ に集約
型は近くに置く（機能固有はfeatures内、共通はsrc/types）
.env.example を常に最新に保つ