claude-practice

自作アプリを集めたモノレポ。アプリは apps/<name>/、共有ツール（npm / テスト / CI / Vercel設定）はリポジトリルートに1セット。

🌐 本番: https://claude-practice-hazel.vercel.app/ （ルートがアプリ一覧）

アプリ

アプリ	URL	概要	ソース
dタスク	/dtask/	タスク管理SPA（Vanilla JS + Firebase）	apps/dtask/
ピアノペット	/piano-pet/	猫を育てるピアノ練習PWA	apps/piano-pet/

各アプリの詳細は各 apps/<name>/README.md（または docs/）を参照。

構成

claude-practice/
├── index.html            # ルートのランディング（アプリ一覧）
├── apps/
│   ├── dtask/            # タスク管理アプリ（tests/・e2e/・docs/ 込み）
│   └── piano-pet/        # ピアノ練習アプリ（tests/・e2e/・docs/ 込み）
├── scripts/              # 共有: gen-sw / perf-budget / アセット列挙（piano-pet）と gen-firebase-config（両アプリ・CLAUDE.md が鉄則として参照）
├── docs/                 # 共有: リポジトリ横断ドキュメント（external-services.md 等）
├── package.json          # 共有: npm スクリプト
├── vitest.config.js      # 共有: 単体テスト（apps/*/tests を対象）
├── playwright.config.js  # 共有: E2E（各アプリを別ポートで配信し project で振り分け）
├── vercel.json           # 共有: ルーティング（/dtask・/piano-pet）
└── .github/workflows/    # 共有: テスト & デプロイ

開発

必要環境

• Node.js 20 以上 / npm（vitest の engines が ^20 || ^22 || >=24。CI は 20（.github/workflows/test.yml:21 ほか各ジョブ）で固定）

セットアップ

npm install

テスト

npm test           # Vitest 単体テスト（apps/*/tests）
npm run test:e2e   # Playwright E2E テスト（http-serverは自動起動）

E2E は project ごとに配信元とデバイスが分かれる（playwright.config.js）。絞るときは --project を指定する。

project	対象	デバイス	備考
dtask	apps/dtask/e2e（:3000）	Desktop Chrome
piano-pet	apps/piano-pet/e2e（:3100）	Pixel 5	SW はキャッシュ干渉を避けて block
dtask-firefox / dtask-webkit	同上	Desktop Firefox / Safari	@compat タグのみ
piano-pet-mobile-safari	同上	iPhone 13	@compat タグのみ

npx playwright test --project=piano-pet            # piano-pet だけ
npx playwright test --project=piano-pet --workers=4 # ローカルは並列数を明示すると安定する

各アプリのローカル起動

npx http-server ./apps/dtask     -p 3000 -c-1   # dタスク
npx http-server ./apps/piano-pet -p 3001 -c-1   # ピアノペット

デプロイ

GitHub Actions（.github/workflows/test.yml）でテスト通過後に Vercel CLI でデプロイする。

• main への push → 本番デプロイ
• PR (mainターゲット) → プレビューデプロイ
• リポジトリ全体を静的配信し、vercel.json の rewrite で /dtask・/piano-pet を各アプリへ振り分ける

外部サービス / インフラ

設定・有効化手順・プライバシー方針は docs/external-services.md に集約。

用途	サービス
データ	Firebase Firestore（dtask-d08b6）
ホスティング	Vercel
CI / ソース	GitHub Actions
エラー監視 / 利用計測	Sentry / PostHog（どちらも鍵が未設定なら no-op）

接続情報・キーは npm run gen-config が環境変数から *-config.js を生成して注入する。

バックログ

GitHub Issues でラベル type/infra / type/ux / type/tech-debt と優先度 P1 / P2 / P3 で管理。

ライセンス

個人プロジェクト（ライセンス未設定）。