Getting Started
ローカル環境セットアップ
mise によるツールチェーン構築から、DB 起動・テストデータ投入・各ロールのログイン画面到達まで。
前提
macOS / Linux を想定。Docker Desktop（または互換のコンテナランタイム）がインストール済みであること。
1. mise の導入
mise で Node.js / pnpm のバージョンと環境変数を管理する。
shellinstall mise# macOS (Homebrew) $ brew install mise # zsh への統合 $ echo 'eval "$(mise activate zsh)"' >> ~/.zshrc $ exec zsh
その他の OS は mise 公式ドキュメント を参照。
2. ツールチェーンのインストール
.mise.toml で定義された Node.js / pnpm をインストールする。
shellrepo root$ mise install $ mise trust
3. .env ファイルの作成
shellrepo root$ cp docs/env-templates/env.development.template .env
アプリ側で dotenv を import していないため、.mise.toml の [env] _.file = ".env" による mise activate 時の自動ロードが必須。
注意
mise の dotenv パーサは値内の空白を許容しない。空白を含む値はダブルクォートで囲む（例: VITE_APP_TITLE="SalonBook (Dev)"）。
4. 依存関係のインストール
shellrepo root$ pnpm install
5. Docker で MySQL を起動
shellrepo root$ docker compose up -d
| 項目 | 値 |
|---|---|
| ホスト | localhost:3306 |
| DB 名 | salon_booking_dev |
| root パスワード | password |
6. DB スキーマの適用
shellrepo root$ pnpm db:push
7. 開発サーバーの起動
shellrepo root$ pnpm dev
8. テストデータの投入
開発用のサンプルデータと各ロールのログインアカウントを投入する。
shellrepo root$ mise run test-data
投入後のログイン情報（パスワードは全て passw0rd!）:
| ロール | ログイン ID / メール |
|---|---|
| マスター管理者 | master@example.com |
| 店舗管理者 | shop@example.com |
| 店舗スタッフ | staff@example.com |
| 顧客 | customer@example.com |
補足
店舗管理者・店舗スタッフのログインフォームは「ログイン ID」入力欄だが、上記のメールアドレスをそのまま入力する（login_id カラムにメールアドレスを格納している）。
9. ログイン画面のパス
ルーティングは client/src/App.tsx で定義されている。
| ロール | パス | 備考 |
|---|---|---|
| マスター管理者 | /master/login |
システム全体の管理者 |
| 店舗管理者 | /shop/login |
店舗オーナー向け |
| 店舗スタッフ | /staff-portal/login |
スタッフポータル |
| 顧客 | /reserve/:shopId/login |
:shopId は店舗ごとに動的に決まる |
顧客ログインの
:shopId について
テストデータ投入後の shopId は shops テーブル、または店舗管理者ダッシュボードで確認する。
10. 開発コマンド
| コマンド | 役割 |
|---|---|
pnpm dev | 開発サーバー起動（tsx watch） |
pnpm build | クライアント + サーバービルド |
pnpm start | 本番起動（NODE_ENV=production） |
pnpm test | テスト実行（vitest） |
pnpm check | 型チェック（tsc --noEmit） |
pnpm format | コードフォーマット（prettier） |
pnpm db:push | DB マイグレーション実行 |