🤝 Windsurf完全マスター講座 Part5｜チーム開発＆デプロイメント完全ガイド｜個人開発からプロダクト運用まで

こんにちは！咲耶です〜

ついにWindsurf完全マスター講座の最終回、Part5をお届けします！今回は、個人開発から一歩進んで、チーム開発とプロダクト運用の世界へご案内しますよ〜💕

「一人で開発するのは慣れたけど、チームではどうやるの？」「作ったアプリをちゃんとユーザーに届けたい」「プロの開発現場ってどんな感じ？」

そんな皆さんと一緒に、Git Flow、CI/CD、モニタリング、そしてスケーリングまで、プロフェッショナルな開発の全てを学んでいきましょう！

🎯 Part5で学ぶプロフェッショナルスキル

📊 学習ロードマップ

🤝 チーム開発：Git Flowとコラボレーション

🌿 Git Flowの実践

Git Flowとは？

Git Flowは、チーム開発でGitを効率的に使うためのブランチ戦略です。以下の5種類のブランチを使います：

• main/master：本番環境のコード
• develop：開発用のメインブランチ
• feature/*：新機能開発用
• release/*：リリース準備用
• hotfix/*：緊急修正用

💬 Cascadeとのチーム開発設定会話

あなた：“チーム開発を始めるため、Git Flowの設定とプルリクエストのテンプレート、コードレビューのガイドラインを作成してください。初心者にも分かりやすいドキュメントも含めてお願いします。”

Cascade：“チーム開発のベストプラクティスを実装しましょう！以下の構成で進めます：

**セットアップ内容：**
1. Git Flow設定とブランチ保護ルール
2. プルリクエストテンプレート
3. コードレビューチェックリスト
4. チーム開発ガイドライン
5. WindsurfとGitの連携設定

初心者の方にも分かりやすいよう、実例付きで説明しますね。”

Git Flow実装例

# .github/PULL_REQUEST_TEMPLATE.md
## 📋 変更内容


## 🎯 変更の理由


## 🧪 テスト

- [ ] ユニットテストの実行
- [ ] 手動テストの実行
- [ ] 既存機能への影響確認

## 📷 スクリーンショット


## ✅ チェックリスト
- [ ] コードレビューガイドラインに従っている
- [ ] テストが追加/更新されている
- [ ] ドキュメントが更新されている（必要に応じて）
- [ ] ブレイキングチェンジの場合は明記されている

## 🔗 関連Issue

Closes #

---

### レビュワーへのお願い




# チーム開発ガイドライン（TEAM_GUIDELINES.md）

## 🌿 ブランチ運用ルール

### ブランチ命名規則
```bash
# 機能開発
feature/todo-edit-functionality
feature/user-authentication

# バグ修正
bugfix/fix-todo-delete-error
bugfix/resolve-memory-leak

# ホットフィックス
hotfix/fix-critical-security-issue

# リリース準備
release/v1.2.0
```

### 開発フロー

#### 1. 新機能開発の流れ
```bash
# 1. developブランチから最新を取得
git checkout develop
git pull origin develop

# 2. featureブランチを作成
git checkout -b feature/todo-edit-functionality

# 3. 開発を進める
# ... コード編集 ...
git add .
git commit -m "feat: ToDoアイテムの編集機能を追加"

# 4. 定期的にdevelopブランチの変更を取り込む
git checkout develop
git pull origin develop
git checkout feature/todo-edit-functionality
git merge develop

# 5. プッシュしてプルリクエスト作成
git push origin feature/todo-edit-functionality
# GitHubでプルリクエスト作成
```

#### 2. コミットメッセージ規則（Conventional Commits）
```bash
# 新機能
feat: ユーザー認証機能を追加

# バグ修正
fix: ToDoアイテム削除時のエラーを修正

# ドキュメント
docs: READMEにセットアップ手順を追加

# リファクタリング
refactor: TodoServiceクラスを分割

# テスト
test: ToDoアイテム作成のテストを追加

# スタイル
style: ESLintエラーを修正

# パフォーマンス
perf: 画像読み込みを最適化

# ビルド
build: webpackの設定を更新
```

GitHub Actions設定

# .github/workflows/ci.yml
name: CI/CD Pipeline

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main, develop ]

jobs:
  # コード品質チェック
  quality-check:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Lint check
      run: npm run lint
      
    - name: Format check
      run: npm run format:check
      
    - name: Type check
      run: npm run type-check
      
  # テスト実行
  test:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Run unit tests
      run: npm run test:coverage
      
    - name: Upload coverage to Codecov
      uses: codecov/codecov-action@v3
      with:
        file: ./coverage/lcov.info
        
  # E2Eテスト
  e2e-test:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build application
      run: npm run build
      
    - name: Run Cypress tests
      uses: cypress-io/github-action@v5
      with:
        start: npm start
        wait-on: 'http://localhost:3000'
        
  # セキュリティチェック
  security:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      
    - name: Run security audit
      run: npm audit --audit-level=moderate
      
    - name: Run Snyk security check
      uses: snyk/actions/node@master
      env:
        SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
        
  # パフォーマンステスト
  lighthouse:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build application
      run: npm run build
      
    - name: Serve application
      run: npm start &
      
    - name: Wait for server
      run: npx wait-on http://localhost:3000
      
    - name: Run Lighthouse CI
      run: npx @lhci/cli@0.9.x autorun
      env:
        LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
        
  # 自動デプロイ（mainブランチのみ）
  deploy:
    needs: [quality-check, test, e2e-test]
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build application
      run: npm run build
      
    - name: Deploy to Vercel
      uses: amondnet/vercel-action@v25
      with:
        vercel-token: ${{ secrets.VERCEL_TOKEN }}
        vercel-org-id: ${{ secrets.ORG_ID }}
        vercel-project-id: ${{ secrets.PROJECT_ID }}
        vercel-args: '--prod'
        
    - name: Notify Slack
      uses: 8398a7/action-slack@v3
      with:
        status: ${{ job.status }}
        channel: '#deployments'
        webhook_url: ${{ secrets.SLACK_WEBHOOK }}
      if: always()

👥 コードレビューのベストプラクティス

効果的なコードレビューガイド

# コードレビューチェックリスト（CODE_REVIEW_CHECKLIST.md）

## 🔍 機能面のチェック

### ✅ 要件充足
- [ ] 仕様書・Issueの要件を満たしている
- [ ] エッジケースが考慮されている
- [ ] エラーハンドリングが適切
- [ ] パフォーマンスへの影響が最小限

### ✅ テスト
- [ ] 新機能にテストが追加されている
- [ ] 既存テストが通る
- [ ] テストカバレッジが維持/向上している
- [ ] テストケースが適切

## 🎨 コード品質のチェック

### ✅ 可読性
- [ ] 変数・関数名が分かりやすい
- [ ] コメントが適切（多すぎず少なすぎず）
- [ ] コードの構造が理解しやすい
- [ ] マジックナンバーが定数化されている

### ✅ 保守性
- [ ] DRY原則に従っている（重複が適切に排除）
- [ ] SOLID原則に従っている
- [ ] 関数・クラスの責任が単一
- [ ] 依存関係が明確

### ✅ セキュリティ
- [ ] ユーザー入力が適切にサニタイズされている
- [ ] 機密情報がハードコードされていない
- [ ] 権限チェックが適切
- [ ] SQLインジェクション等の脆弱性がない

## 💬 コードレビューコメントの書き方

### ✅ 建設的なフィードバック
```markdown
# 良い例
💡 **提案**: この部分を関数に分離すると、再利用性が向上しそうです。
```javascript
function calculateTotalPrice(items) {
  return items.reduce((total, item) => total + item.price, 0);
}
```

# 悪い例
❌ このコードはダメです。
```

### ✅ 具体的な改善案
```markdown
# 良い例
🔧 **改善案**: パフォーマンス向上のため、useMemoを使った最適化を検討してみてください。
```javascript
const expensiveValue = useMemo(() => {
  return heavyCalculation(data);
}, [data]);
```

# 悪い例
遅すぎます。
```

### ✅ 学習機会の提供
```markdown
# 良い例
📚 **参考**: この実装パターンについて、こちらの記事が参考になります：

Example Domain
example.com

# 悪い例
これは間違いです。
```

## 🎯 レビュー時の心構え

### レビュアーとして
- 🤝 **建設的であること**: 批判ではなく改善提案を
- 📚 **学習機会**: なぜその方法が良いかを説明
- ⏰ **迅速な対応**: 24時間以内にレビュー
- 🎯 **重要度の区別**: 必須 vs 提案 vs nit（軽微な指摘）

### レビュイーとして
- 🙏 **感謝の気持ち**: フィードバックに感謝を示す
- 🤔 **理解を深める**: 分からない指摘は質問する
- 🔄 **素早い修正**: 指摘事項への迅速な対応
- 📖 **学習姿勢**: 同じ指摘を繰り返さない

## 📋 プルリクエストの書き方

### ✅ 良いタイトル例
- `feat: ToDoアイテムの編集機能を追加`
- `fix: ログイン時のバリデーションエラーを修正`
- `refactor: UserServiceクラスを分割してテスタビリティを向上`

### ✅ 良い説明文例
```markdown
## 変更内容
ToDoアイテムをインライン編集できる機能を追加しました。

## 変更の理由
ユーザーからの要望で、ToDoアイテムを編集するために
別画面に遷移するのが不便という声が多くあったため。

## 実装詳細
- ダブルクリックで編集モードに切り替え
- Enterキーで保存、Escapeキーでキャンセル
- バリデーションエラーの表示

## テスト
- [ ] 正常な編集フロー
- [ ] 空文字での保存試行
- [ ] キャンセル操作
- [ ] 既存機能への影響確認
```

🚀 CI/CD：自動化されたデプロイメントパイプライン

🔄 継続的インテグレーション

CI/CD設定の依頼：“プロダクションレベルのCI/CDパイプラインを構築したいです。GitHub Actionsを使って、テスト、ビルド、デプロイまでを自動化してください。”

高度なワークフロー設定

# .github/workflows/production.yml
name: Production Deployment

on:
  push:
    branches: [ main ]
    tags: [ 'v*' ]

env:
  NODE_VERSION: '18'
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}

jobs:
  # 変更検知（monorepo対応）
  changes:
    runs-on: ubuntu-latest
    outputs:
      frontend: ${{ steps.changes.outputs.frontend }}
      backend: ${{ steps.changes.outputs.backend }}
      infrastructure: ${{ steps.changes.outputs.infrastructure }}
    steps:
      - uses: actions/checkout@v3
      - uses: dorny/paths-filter@v2
        id: changes
        with:
          filters: |
            frontend:
              - 'frontend/**'
              - 'shared/**'
            backend:
              - 'backend/**'
              - 'shared/**'
            infrastructure:
              - 'infrastructure/**'
              - '.github/workflows/**'

  # フロントエンド CI
  frontend-ci:
    needs: changes
    if: ${{ needs.changes.outputs.frontend == 'true' }}
    runs-on: ubuntu-latest
    
    strategy:
      matrix:
        browser: [chrome, firefox, safari]
        
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'
          cache-dependency-path: frontend/package-lock.json
          
      - name: Cache dependencies
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          
      - name: Install dependencies
        working-directory: frontend
        run: npm ci
        
      - name: Run linting
        working-directory: frontend
        run: npm run lint
        
      - name: Run type checking
        working-directory: frontend
        run: npm run type-check
        
      - name: Run unit tests
        working-directory: frontend
        run: npm run test:coverage
        
      - name: Upload coverage
        uses: codecov/codecov-action@v3
        with:
          file: ./frontend/coverage/lcov.info
          flags: frontend
          
      - name: Build application
        working-directory: frontend
        run: npm run build
        env:
          NODE_ENV: production
          VITE_API_URL: ${{ secrets.PROD_API_URL }}
          
      - name: Run E2E tests
        working-directory: frontend
        run: npm run test:e2e:${{ matrix.browser }}
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          
      - name: Upload E2E artifacts
        uses: actions/upload-artifact@v3
        if: failure()
        with:
          name: cypress-screenshots-${{ matrix.browser }}
          path: frontend/cypress/screenshots
          
      - name: Performance audit
        run: |
          npm install -g @lhci/cli@0.9.x
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
          
      - name: Upload build artifacts
        uses: actions/upload-artifact@v3
        with:
          name: frontend-build
          path: frontend/dist
          retention-days: 30

  # バックエンド CI
  backend-ci:
    needs: changes
    if: ${{ needs.changes.outputs.backend == 'true' }}
    runs-on: ubuntu-latest
    
    services:
      postgres:
        image: postgres:14
        env:
          POSTGRES_PASSWORD: postgres
          POSTGRES_DB: test
        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
        ports:
          - 5432:5432
          
      redis:
        image: redis:7
        options: >-
          --health-cmd "redis-cli ping"
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
        ports:
          - 6379:6379
          
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'
          cache-dependency-path: backend/package-lock.json
          
      - name: Install dependencies
        working-directory: backend
        run: npm ci
        
      - name: Run linting
        working-directory: backend
        run: npm run lint
        
      - name: Run security audit
        working-directory: backend
        run: npm audit --audit-level=moderate
        
      - name: Run database migrations
        working-directory: backend
        run: npm run migrate
        env:
          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test
          
      - name: Run tests
        working-directory: backend
        run: npm run test:coverage
        env:
          DATABASE_URL: postgresql://postgres:postgres@localhost:5432/test
          REDIS_URL: redis://localhost:6379
          
      - name: Upload coverage
        uses: codecov/codecov-action@v3
        with:
          file: ./backend/coverage/lcov.info
          flags: backend
          
      - name: Build Docker image
        run: |
          docker build -t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }} \
            --build-arg NODE_VERSION=${{ env.NODE_VERSION }} \
            backend/
            
      - name: Log in to Container Registry
        uses: docker/login-action@v2
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
          
      - name: Push Docker image
        run: |
          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
          docker tag ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }} \
            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest

  # セキュリティスキャン
  security-scan:
    runs-on: ubuntu-latest
    permissions:
      security-events: write
      
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        
      - name: Run Trivy vulnerability scanner
        uses: aquasecurity/trivy-action@master
        with:
          scan-type: 'fs'
          scan-ref: '.'
          format: 'sarif'
          output: 'trivy-results.sarif'
          
      - name: Upload Trivy scan results
        uses: github/codeql-action/upload-sarif@v2
        with:
          sarif_file: 'trivy-results.sarif'
          
      - name: Run CodeQL Analysis
        uses: github/codeql-action/analyze@v2
        with:
          languages: javascript

  # デプロイメント
  deploy:
    needs: [frontend-ci, backend-ci, security-scan]
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    environment:
      name: production
      url: https://app.example.com
      
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        
      - name: Download build artifacts
        uses: actions/download-artifact@v3
        with:
          name: frontend-build
          path: ./dist
          
      - name: Deploy to CDN
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
          
      - name: Sync to S3
        run: |
          aws s3 sync ./dist s3://${{ secrets.S3_BUCKET }} --delete
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*"
            
      - name: Deploy backend
        uses: azure/k8s-deploy@v1
        with:
          manifests: |
            k8s/deployment.yaml
            k8s/service.yaml
          images: |
            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
          kubeconfig: ${{ secrets.KUBE_CONFIG }}
          
      - name: Run smoke tests
        run: |
          npx newman run postman/smoke-tests.json \
            --environment postman/production.json \
            --reporters cli,json \
            --reporter-json-export smoke-test-results.json
            
      - name: Notify deployment status
        uses: 8398a7/action-slack@v3
        with:
          status: ${{ job.status }}
          channel: '#deployments'
          text: |
            🚀 Production deployment ${{ job.status }}!
            
            📦 Version: ${{ github.sha }}
            🌐 URL: https://app.example.com
            📊 Smoke tests: ${{ steps.smoke-tests.outcome }}
            
            <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|View Details>
          webhook_url: ${{ secrets.SLACK_WEBHOOK }}
        if: always()
        
      - name: Create GitHub release
        if: startsWith(github.ref, 'refs/tags/')
        uses: actions/create-release@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tag_name: ${{ github.ref }}
          release_name: Release ${{ github.ref }}
          body: |
            ## 変更内容
            
            詳細な変更内容については [CHANGELOG.md](./CHANGELOG.md) をご確認ください。
            
            ## デプロイ情報
            - Frontend: https://app.example.com
            - API: https://api.example.com
            - Documentation: https://docs.example.com
          draft: false
          prerelease: false

🔍 環境管理とシークレット管理

環境別設定の管理

# config/environments.js
const environments = {
  development: {
    API_URL: 'http://localhost:3001',
    DATABASE_URL: 'postgresql://localhost:5432/myapp_dev',
    REDIS_URL: 'redis://localhost:6379',
    LOG_LEVEL: 'debug',
    ENABLE_DEBUGGING: true,
    RATE_LIMIT: {
      windowMs: 15 * 60 * 1000, // 15分
      max: 1000 // リクエスト数
    }
  },
  
  staging: {
    API_URL: 'https://api-staging.example.com',
    DATABASE_URL: process.env.DATABASE_URL,
    REDIS_URL: process.env.REDIS_URL,
    LOG_LEVEL: 'info',
    ENABLE_DEBUGGING: false,
    RATE_LIMIT: {
      windowMs: 15 * 60 * 1000,
      max: 100
    }
  },
  
  production: {
    API_URL: 'https://api.example.com',
    DATABASE_URL: process.env.DATABASE_URL,
    REDIS_URL: process.env.REDIS_URL,
    LOG_LEVEL: 'warn',
    ENABLE_DEBUGGING: false,
    RATE_LIMIT: {
      windowMs: 15 * 60 * 1000,
      max: 100
    }
  }
};

// 環境設定の取得
function getConfig() {
  const env = process.env.NODE_ENV || 'development';
  const config = environments[env];
  
  if (!config) {
    throw new Error(`Unknown environment: ${env}`);
  }
  
  // 必須環境変数のチェック
  if (env !== 'development') {
    const requiredVars = ['DATABASE_URL', 'REDIS_URL'];
    const missing = requiredVars.filter(key => !process.env[key]);
    
    if (missing.length > 0) {
      throw new Error(`Missing required environment variables: ${missing.join(', ')}`);
    }
  }
  
  return config;
}

module.exports = { getConfig };

# .env.example（チーム共有用のテンプレート）
# データベース
DATABASE_URL=postgresql://username:password@localhost:5432/myapp

# Redis
REDIS_URL=redis://localhost:6379

# 外部API
OPENWEATHER_API_KEY=your_api_key_here
STRIPE_SECRET_KEY=sk_test_your_stripe_key

# 認証
JWT_SECRET=your_jwt_secret
JWT_EXPIRES_IN=7d

# メール
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASS=your-app-password

# ファイルアップロード
AWS_ACCESS_KEY_ID=your_aws_key
AWS_SECRET_ACCESS_KEY=your_aws_secret
AWS_S3_BUCKET=your-bucket-name
AWS_REGION=us-east-1

# 監視・分析
SENTRY_DSN=https://your-sentry-dsn
GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX

# 開発・デバッグ
DEBUG=myapp:*
LOG_LEVEL=debug

📊 監視・分析：プロダクトの健康状態を把握

🔍 エラートラッキングと監視

監視システムの依頼：“プロダクションで発生するエラーやパフォーマンス問題を即座に検知できる監視システムを構築してください。Sentry、Google Analytics、カスタムメトリクスを組み合わせたいです。”

包括的監視システムの実装

// monitoring/errorTracking.js
import * as Sentry from '@sentry/browser';
import { Integrations } from '@sentry/tracing';

class ErrorTracker {
  constructor(dsn, environment = 'production') {
    this.init(dsn, environment);
    this.setupGlobalErrorHandlers();
  }
  
  init(dsn, environment) {
    Sentry.init({
      dsn,
      environment,
      integrations: [
        new Integrations.BrowserTracing(),
        new Sentry.Replay({
          // セッションの10%を記録
          sessionSampleRate: 0.1,
          // エラーがあったセッションは100%記録
          errorSampleRate: 1.0,
        }),
      ],
      
      // パフォーマンス監視
      tracesSampleRate: 0.1,
      
      // リリース情報
      release: process.env.REACT_APP_VERSION,
      
      // ユーザーコンテキスト
      beforeSend(event, hint) {
        // 機密情報のフィルタリング
        if (event.exception) {
          const error = hint.originalException;
          
          // パスワードやトークンを含むエラーは送信しない
          if (error.message && 
              /password|token|secret|key/i.test(error.message)) {
            return null;
          }
        }
        
        return event;
      },
      
      // カスタムフィンガープリンティング
      fingerprint: ['{{ default }}', '{{ transaction }}']
    });
  }
  
  setupGlobalErrorHandlers() {
    // 未処理の Promise エラー
    window.addEventListener('unhandledrejection', event => {
      console.error('Unhandled promise rejection:', event.reason);
      
      Sentry.captureException(event.reason, {
        tags: {
          errorType: 'unhandledRejection'
        },
        extra: {
          promise: event.promise
        }
      });
    });
    
    // React Error Boundary では捕捉できないエラー
    window.addEventListener('error', event => {
      if (event.error) {
        Sentry.captureException(event.error, {
          tags: {
            errorType: 'globalError'
          },
          extra: {
            filename: event.filename,
            lineno: event.lineno,
            colno: event.colno
          }
        });
      }
    });
  }
  
  // ユーザー情報の設定
  setUser(user) {
    Sentry.setUser({
      id: user.id,
      email: user.email,
      username: user.username,
      subscription: user.subscription
    });
  }
  
  // カスタムエラーの報告
  captureError(error, context = {}) {
    Sentry.captureException(error, {
      tags: context.tags || {},
      extra: context.extra || {},
      level: context.level || 'error'
    });
  }
  
  // ユーザーアクションの追跡
  trackUserAction(action, data = {}) {
    Sentry.addBreadcrumb({
      message: action,
      data,
      level: 'info',
      type: 'user'
    });
  }
  
  // パフォーマンスの測定
  measurePerformance(name, fn) {
    const transaction = Sentry.startTransaction({ name });
    
    return Promise.resolve(fn())
      .then(result => {
        transaction.setStatus('ok');
        return result;
      })
      .catch(error => {
        transaction.setStatus('internal_error');
        throw error;
      })
      .finally(() => {
        transaction.finish();
      });
  }
}

// 使用例
const errorTracker = new ErrorTracker(
  process.env.REACT_APP_SENTRY_DSN,
  process.env.NODE_ENV
);

// ユーザーログイン時
errorTracker.setUser(currentUser);

// API呼び出し時のエラートラッキング
async function fetchTodos() {
  try {
    errorTracker.trackUserAction('fetch_todos_started');
    
    const response = await errorTracker.measurePerformance(
      'api_fetch_todos',
      () => fetch('/api/todos')
    );
    
    if (!response.ok) {
      throw new Error(`API Error: ${response.status}`);
    }
    
    const todos = await response.json();
    errorTracker.trackUserAction('fetch_todos_success', {
      count: todos.length
    });
    
    return todos;
    
  } catch (error) {
    errorTracker.captureError(error, {
      tags: {
        operation: 'fetch_todos',
        api_endpoint: '/api/todos'
      },
      extra: {
        userAgent: navigator.userAgent,
        timestamp: new Date().toISOString()
      }
    });
    
    throw error;
  }
}

export default errorTracker;

カスタムメトリクス収集

// monitoring/metrics.js
class MetricsCollector {
  constructor() {
    this.metrics = new Map();
    this.timers = new Map();
    this.setupPerformanceObserver();
    this.setupResourceMonitoring();
  }
  
  // Core Web Vitals の測定
  setupPerformanceObserver() {
    // Largest Contentful Paint (LCP)
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      const lastEntry = entries[entries.length - 1];
      
      this.recordMetric('web_vitals_lcp', lastEntry.startTime, {
        element: lastEntry.element?.tagName || 'unknown',
        url: lastEntry.url || 'unknown'
      });
    }).observe({entryTypes: ['largest-contentful-paint']});
    
    // First Input Delay (FID)
    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        const fid = entry.processingStart - entry.startTime;
        
        this.recordMetric('web_vitals_fid', fid, {
          eventType: entry.name,
          target: entry.target?.tagName || 'unknown'
        });
      }
    }).observe({entryTypes: ['first-input']});
    
    // Cumulative Layout Shift (CLS)
    let clsValue = 0;
    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
        }
      }
      
      this.recordMetric('web_vitals_cls', clsValue);
    }).observe({entryTypes: ['layout-shift']});
  }
  
  // リソース監視
  setupResourceMonitoring() {
    // メモリ使用量の監視
    if ('memory' in performance) {
      setInterval(() => {
        const memory = performance.memory;
        
        this.recordMetric('memory_used', memory.usedJSHeapSize / 1048576); // MB
        this.recordMetric('memory_total', memory.totalJSHeapSize / 1048576);
        this.recordMetric('memory_limit', memory.jsHeapSizeLimit / 1048576);
      }, 30000); // 30秒ごと
    }
    
    // ネットワーク状態の監視
    if ('connection' in navigator) {
      const connection = navigator.connection;
      
      this.recordMetric('network_type', connection.effectiveType, {
        downlink: connection.downlink,
        rtt: connection.rtt,
        saveData: connection.saveData
      });
      
      connection.addEventListener('change', () => {
        this.recordMetric('network_change', connection.effectiveType, {
          downlink: connection.downlink,
          rtt: connection.rtt
        });
      });
    }
  }
  
  // カスタムメトリクスの記録
  recordMetric(name, value, tags = {}) {
    const metric = {
      name,
      value,
      tags,
      timestamp: Date.now(),
      sessionId: this.getSessionId()
    };
    
    // ローカルでの蓄積
    if (!this.metrics.has(name)) {
      this.metrics.set(name, []);
    }
    
    this.metrics.get(name).push(metric);
    
    // リアルタイム送信（重要なメトリクスのみ）
    if (this.isImportantMetric(name)) {
      this.sendMetric(metric);
    }
    
    // コンソールでの確認（開発環境のみ）
    if (process.env.NODE_ENV === 'development') {
      console.log(`📊 Metric: ${name} = ${value}`, tags);
    }
  }
  
  // パフォーマンス測定の開始
  startTimer(name) {
    this.timers.set(name, {
      startTime: performance.now(),
      name
    });
  }
  
  // パフォーマンス測定の終了
  endTimer(name, tags = {}) {
    const timer = this.timers.get(name);
    
    if (timer) {
      const duration = performance.now() - timer.startTime;
      this.recordMetric(`duration_${name}`, duration, tags);
      this.timers.delete(name);
      return duration;
    }
    
    return null;
  }
  
  // ユーザーアクションの測定
  measureUserAction(actionName, actionFn) {
    this.startTimer(actionName);
    this.recordMetric(`action_${actionName}_started`, 1);
    
    const startTime = Date.now();
    
    return Promise.resolve(actionFn())
      .then(result => {
        const duration = this.endTimer(actionName);
        this.recordMetric(`action_${actionName}_success`, 1, {
          duration: Math.round(duration)
        });
        
        return result;
      })
      .catch(error => {
        this.endTimer(actionName);
        this.recordMetric(`action_${actionName}_error`, 1, {
          errorType: error.name || 'UnknownError'
        });
        
        throw error;
      });
  }
  
  // 重要メトリクスの判定
  isImportantMetric(name) {
    const importantMetrics = [
      'web_vitals_lcp',
      'web_vitals_fid',
      'web_vitals_cls',
      'api_error',
      'user_action_error'
    ];
    
    return importantMetrics.some(metric => name.includes(metric));
  }
  
  // セッションIDの取得/生成
  getSessionId() {
    let sessionId = sessionStorage.getItem('sessionId');
    
    if (!sessionId) {
      sessionId = 'session_' + Date.now() + '_' + 
                  Math.random().toString(36).substr(2, 9);
      sessionStorage.setItem('sessionId', sessionId);
    }
    
    return sessionId;
  }
  
  // メトリクスの送信
  async sendMetric(metric) {
    try {
      await fetch('/api/metrics', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(metric)
      });
    } catch (error) {
      console.error('Failed to send metric:', error);
    }
  }
  
  // バッチでメトリクスを送信
  async flushMetrics() {
    const allMetrics = [];
    
    for (const [name, metrics] of this.metrics.entries()) {
      allMetrics.push(...metrics);
    }
    
    if (allMetrics.length > 0) {
      try {
        await fetch('/api/metrics/batch', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(allMetrics)
        });
        
        // 送信後にクリア
        this.metrics.clear();
        
      } catch (error) {
        console.error('Failed to flush metrics:', error);
      }
    }
  }
}

// グローバルインスタンス
const metrics = new MetricsCollector();

// ページ離脱時にメトリクスを送信
window.addEventListener('beforeunload', () => {
  metrics.flushMetrics();
});

// 定期的なフラッシュ（5分ごと）
setInterval(() => {
  metrics.flushMetrics();
}, 5 * 60 * 1000);

// 使用例
metrics.measureUserAction('todo_creation', async () => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    body: JSON.stringify(todoData)
  });
  
  return response.json();
});

export default metrics;

🌍 スケーリングとインフラストラクチャ

☁️ クラウドアーキテクチャ

スケーリング設計の依頼：“ユーザー数の増加に対応できるスケーラブルなアーキテクチャを設計してください。CDN、ロードバランサー、データベースのスケーリング戦略を含めたいです。”

Docker & Kubernetes設定

# Dockerfile（マルチステージビルド）
# Stage 1: Build
FROM node:18-alpine AS builder

WORKDIR /app

# 依存関係のキャッシュ最適化
COPY package*.json ./
RUN npm ci --only=production && npm cache clean --force

# アプリケーションのビルド
COPY . .
RUN npm run build

# Stage 2: Production
FROM node:18-alpine AS production

# セキュリティ強化
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

WORKDIR /app

# 必要なファイルのみコピー
COPY --from=builder --chown=nextjs:nodejs /app/dist ./dist
COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
COPY --from=builder --chown=nextjs:nodejs /app/package.json ./package.json

# ヘルスチェック用のスクリプト
COPY --chown=nextjs:nodejs healthcheck.js ./

USER nextjs

EXPOSE 3000

# ヘルスチェック
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD node healthcheck.js

CMD ["npm", "start"]

---

# k8s/deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: vibe-coding-app
  labels:
    app: vibe-coding-app
spec:
  replicas: 3
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxUnavailable: 1
      maxSurge: 1
  selector:
    matchLabels:
      app: vibe-coding-app
  template:
    metadata:
      labels:
        app: vibe-coding-app
    spec:
      containers:
      - name: app
        image: ghcr.io/yourorg/vibe-coding-app:latest
        ports:
        - containerPort: 3000
        env:
        - name: NODE_ENV
          value: "production"
        - name: DATABASE_URL
          valueFrom:
            secretKeyRef:
              name: app-secrets
              key: database-url
        - name: REDIS_URL
          valueFrom:
            secretKeyRef:
              name: app-secrets
              key: redis-url
        resources:
          requests:
            memory: "256Mi"
            cpu: "250m"
          limits:
            memory: "512Mi"
            cpu: "500m"
        livenessProbe:
          httpGet:
            path: /health
            port: 3000
          initialDelaySeconds: 30
          periodSeconds: 10
        readinessProbe:
          httpGet:
            path: /ready
            port: 3000
          initialDelaySeconds: 5
          periodSeconds: 5
      imagePullSecrets:
      - name: ghcr-secret

---

# k8s/service.yaml
apiVersion: v1
kind: Service
metadata:
  name: vibe-coding-app-service
spec:
  selector:
    app: vibe-coding-app
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: ClusterIP

---

# k8s/hpa.yaml（水平スケーリング）
apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
  name: vibe-coding-app-hpa
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: vibe-coding-app
  minReplicas: 3
  maxReplicas: 10
  metrics:
  - type: Resource
    resource:
      name: cpu
      target:
        type: Utilization
        averageUtilization: 70
  - type: Resource
    resource:
      name: memory
      target:
        type: Utilization
        averageUtilization: 80
  behavior:
    scaleDown:
      stabilizationWindowSeconds: 300
      policies:
      - type: Percent
        value: 10
        periodSeconds: 60
    scaleUp:
      stabilizationWindowSeconds: 60
      policies:
      - type: Percent
        value: 50
        periodSeconds: 30

---

# k8s/ingress.yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: vibe-coding-app-ingress
  annotations:
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
    nginx.ingress.kubernetes.io/force-ssl-redirect: "true"
    cert-manager.io/cluster-issuer: "letsencrypt-prod"
    nginx.ingress.kubernetes.io/rate-limit: "100"
    nginx.ingress.kubernetes.io/rate-limit-burst: "50"
spec:
  tls:
  - hosts:
    - app.vibecoding.salon
    - api.vibecoding.salon
    secretName: vibecoding-tls
  rules:
  - host: app.vibecoding.salon
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: vibe-coding-app-service
            port:
              number: 80
  - host: api.vibecoding.salon
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: vibe-coding-api-service
            port:
              number: 80

📊 データベーススケーリング戦略

読み取り専用レプリカとキャッシュ戦略

// database/connectionManager.js
class DatabaseConnectionManager {
  constructor() {
    this.connections = {
      write: this.createConnection(process.env.DATABASE_WRITE_URL),
      read: this.createReadReplicas(),
      cache: this.createRedisConnection()
    };
    
    this.readReplicaIndex = 0;
  }
  
  createConnection(url) {
    return new Pool({
      connectionString: url,
      max: 20, // 最大接続数
      min: 5,  // 最小接続数
      acquireTimeoutMillis: 60000,
      createTimeoutMillis: 30000,
      destroyTimeoutMillis: 5000,
      idleTimeoutMillis: 30000,
      reapIntervalMillis: 1000,
      createRetryIntervalMillis: 200
    });
  }
  
  createReadReplicas() {
    const readUrls = [
      process.env.DATABASE_READ_REPLICA_1,
      process.env.DATABASE_READ_REPLICA_2,
      process.env.DATABASE_READ_REPLICA_3
    ].filter(Boolean);
    
    return readUrls.map(url => this.createConnection(url));
  }
  
  createRedisConnection() {
    return new Redis({
      host: process.env.REDIS_HOST,
      port: process.env.REDIS_PORT,
      password: process.env.REDIS_PASSWORD,
      db: 0,
      retryDelayOnFailover: 100,
      enableReadyCheck: false,
      maxRetriesPerRequest: 3,
      lazyConnect: true
    });
  }
  
  // 書き込み用接続取得
  getWriteConnection() {
    return this.connections.write;
  }
  
  // 読み取り用接続取得（ラウンドロビン）
  getReadConnection() {
    if (this.connections.read.length === 0) {
      return this.connections.write; // フォールバック
    }
    
    const connection = this.connections.read[this.readReplicaIndex];
    this.readReplicaIndex = (this.readReplicaIndex + 1) % this.connections.read.length;
    
    return connection;
  }
  
  // キャッシュ接続取得
  getCacheConnection() {
    return this.connections.cache;
  }
}

// repository/todoRepository.js
class TodoRepository {
  constructor(dbManager) {
    this.dbManager = dbManager;
    this.cache = dbManager.getCacheConnection();
  }
  
  // 書き込み操作
  async createTodo(todoData) {
    const writeDb = this.dbManager.getWriteConnection();
    
    const query = `
      INSERT INTO todos (title, description, user_id, created_at)
      VALUES ($1, $2, $3, NOW())
      RETURNING *
    `;
    
    const result = await writeDb.query(query, [
      todoData.title,
      todoData.description,
      todoData.userId
    ]);
    
    const todo = result.rows[0];
    
    // キャッシュを無効化
    await this.invalidateUserTodosCache(todoData.userId);
    
    return todo;
  }
  
  // 読み取り操作（キャッシュ戦略）
  async getUserTodos(userId, useCache = true) {
    const cacheKey = `user_todos:${userId}`;
    
    if (useCache) {
      // キャッシュから取得を試行
      const cached = await this.cache.get(cacheKey);
      if (cached) {
        return JSON.parse(cached);
      }
    }
    
    // データベースから取得
    const readDb = this.dbManager.getReadConnection();
    
    const query = `
      SELECT * FROM todos 
      WHERE user_id = $1 
      ORDER BY created_at DESC
    `;
    
    const result = await readDb.query(query, [userId]);
    const todos = result.rows;
    
    // キャッシュに保存（15分間）
    if (useCache) {
      await this.cache.setex(cacheKey, 900, JSON.stringify(todos));
    }
    
    return todos;
  }
  
  // 更新操作
  async updateTodo(todoId, updates) {
    const writeDb = this.dbManager.getWriteConnection();
    
    const setClause = Object.keys(updates)
      .map((key, index) => `${key} = ${index + 2}`)
      .join(', ');
    
    const query = `
      UPDATE todos 
      SET ${setClause}, updated_at = NOW()
      WHERE id = $1
      RETURNING *
    `;
    
    const values = [todoId, ...Object.values(updates)];
    const result = await writeDb.query(query, values);
    
    if (result.rows.length > 0) {
      const todo = result.rows[0];
      
      // 関連キャッシュを無効化
      await this.invalidateUserTodosCache(todo.user_id);
      await this.cache.del(`todo:${todoId}`);
      
      return todo;
    }
    
    return null;
  }
  
  // キャッシュ無効化
  async invalidateUserTodosCache(userId) {
    const keys = [
      `user_todos:${userId}`,
      `user_todos_count:${userId}`,
      `user_completed_todos:${userId}`
    ];
    
    await Promise.all(keys.map(key => this.cache.del(key)));
  }
  
  // 統計情報取得（重いクエリをキャッシュ）
  async getUserTodoStats(userId) {
    const cacheKey = `user_todo_stats:${userId}`;
    
    // 長期キャッシュ（1時間）
    const cached = await this.cache.get(cacheKey);
    if (cached) {
      return JSON.parse(cached);
    }
    
    const readDb = this.dbManager.getReadConnection();
    
    const query = `
      SELECT 
        COUNT(*) as total,
        COUNT(*) FILTER (WHERE completed = true) as completed,
        COUNT(*) FILTER (WHERE completed = false) as pending,
        AVG(CASE WHEN completed = true 
            THEN EXTRACT(EPOCH FROM (completed_at - created_at))/3600 
            ELSE NULL END) as avg_completion_hours
      FROM todos 
      WHERE user_id = $1
    `;
    
    const result = await readDb.query(query, [userId]);
    const stats = result.rows[0];
    
    // 1時間キャッシュ
    await this.cache.setex(cacheKey, 3600, JSON.stringify(stats));
    
    return stats;
  }
}

export { DatabaseConnectionManager, TodoRepository };

📈 プロダクト成長：A/Bテストと機能フラグ

🧪 A/Bテストシステム

A/Bテスト実装の依頼：“ユーザー体験の改善を測定するため、A/Bテストシステムを実装してください。機能フラグと組み合わせて、段階的な機能ロールアウトもできるようにしたいです。”

A/Bテストフレームワーク

// experiments/abTestManager.js
class ABTestManager {
  constructor(userId, experiments = []) {
    this.userId = userId;
    this.experiments = new Map();
    this.userAttributes = {};
    
    this.loadExperiments(experiments);
    this.loadUserAttributes();
  }
  
  loadExperiments(experiments) {
    experiments.forEach(experiment => {
      this.experiments.set(experiment.id, experiment);
    });
  }
  
  async loadUserAttributes() {
    try {
      const response = await fetch(`/api/users/${this.userId}/attributes`);
      this.userAttributes = await response.json();
    } catch (error) {
      console.error('Failed to load user attributes:', error);
    }
  }
  
  // バリアント決定ロジック
  getVariant(experimentId) {
    const experiment = this.experiments.get(experimentId);
    
    if (!experiment) {
      console.warn(`Experiment ${experimentId} not found`);
      return 'control';
    }
    
    // 実験が有効かチェック
    if (!this.isExperimentActive(experiment)) {
      return 'control';
    }
    
    // ユーザーが対象かチェック
    if (!this.isUserEligible(experiment)) {
      return 'control';
    }
    
    // 既に割り当て済みかチェック
    const cachedVariant = this.getCachedVariant(experimentId);
    if (cachedVariant) {
      return cachedVariant;
    }
    
    // バリアント決定
    const variant = this.assignVariant(experiment);
    
    // キャッシュに保存
    this.cacheVariant(experimentId, variant);
    
    // トラッキング
    this.trackExperimentAssignment(experimentId, variant);
    
    return variant;
  }
  
  isExperimentActive(experiment) {
    const now = new Date();
    const startDate = new Date(experiment.startDate);
    const endDate = new Date(experiment.endDate);
    
    return now >= startDate && now <= endDate && experiment.enabled;
  }
  
  isUserEligible(experiment) {
    const { targeting } = experiment;
    
    if (!targeting) return true;
    
    // 地域フィルタリング
    if (targeting.countries && 
        !targeting.countries.includes(this.userAttributes.country)) {
      return false;
    }
    
    // プラットフォームフィルタリング
    if (targeting.platforms && 
        !targeting.platforms.includes(this.userAttributes.platform)) {
      return false;
    }
    
    // ユーザー属性フィルタリング
    if (targeting.userSegments) {
      const userSegment = this.getUserSegment();
      if (!targeting.userSegments.includes(userSegment)) {
        return false;
      }
    }
    
    // カスタム条件
    if (targeting.customCondition) {
      return this.evaluateCustomCondition(targeting.customCondition);
    }
    
    return true;
  }
  
  assignVariant(experiment) {
    // ユーザーIDベースの一貫したハッシュ
    const hash = this.hashUserId(this.userId + experiment.id);
    const percentage = hash % 100;
    
    let cumulative = 0;
    for (const variant of experiment.variants) {
      cumulative += variant.allocation;
      if (percentage < cumulative) {
        return variant.name;
      }
    }
    
    return 'control';
  }
  
  hashUserId(input) {
    let hash = 0;
    for (let i = 0; i < input.length; i++) {
      const char = input.charCodeAt(i);
      hash = ((hash << 5) - hash) + char;
      hash = hash & hash; // 32bit整数に変換
    }
    return Math.abs(hash);
  }
  
  getCachedVariant(experimentId) {
    const key = `experiment_${experimentId}`;
    return localStorage.getItem(key);
  }
  
  cacheVariant(experimentId, variant) {
    const key = `experiment_${experimentId}`;
    localStorage.setItem(key, variant);
  }
  
  getUserSegment() {
    const { accountAge, activityLevel, subscription } = this.userAttributes;
    
    if (subscription === 'premium') return 'premium';
    if (accountAge > 365) return 'veteran';
    if (activityLevel === 'high') return 'power_user';
    if (accountAge < 7) return 'new_user';
    
    return 'regular';
  }
  
  evaluateCustomCondition(condition) {
    // シンプルな条件評価エンジン
    try {
      // セキュリティ上、eval は使わずにパーサーを実装
      return this.parseCondition(condition);
    } catch (error) {
      console.error('Failed to evaluate custom condition:', error);
      return false;
    }
  }
  
  parseCondition(condition) {
    // 例: "age > 18 AND country = 'US'"
    // 実際の実装では適切なパーサーを使用
    const { age, country } = this.userAttributes;
    
    if (condition.includes('age > 18') && age <= 18) return false;
    if (condition.includes("country = 'US'") && country !== 'US') return false;
    
    return true;
  }
  
  trackExperimentAssignment(experimentId, variant) {
    // 分析システムにイベント送信
    this.track('experiment_assignment', {
      experimentId,
      variant,
      userId: this.userId,
      timestamp: new Date().toISOString()
    });
  }
  
  // イベントトラッキング
  track(eventName, properties = {}) {
    // Google Analytics
    if (window.gtag) {
      window.gtag('event', eventName, properties);
    }
    
    // カスタム分析
    fetch('/api/analytics/track', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        event: eventName,
        properties: {
          ...properties,
          userId: this.userId,
          sessionId: this.getSessionId(),
          timestamp: new Date().toISOString()
        }
      })
    }).catch(error => {
      console.error('Failed to track event:', error);
    });
  }
  
  getSessionId() {
    let sessionId = sessionStorage.getItem('sessionId');
    if (!sessionId) {
      sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
      sessionStorage.setItem('sessionId', sessionId);
    }
    return sessionId;
  }
}

// 機能フラグマネージャー
class FeatureFlagManager {
  constructor(userId) {
    this.userId = userId;
    this.flags = new Map();
    this.loadFlags();
  }
  
  async loadFlags() {
    try {
      const response = await fetch(`/api/feature-flags?userId=${this.userId}`);
      const flags = await response.json();
      
      flags.forEach(flag => {
        this.flags.set(flag.name, flag);
      });
    } catch (error) {
      console.error('Failed to load feature flags:', error);
    }
  }
  
  isEnabled(flagName, defaultValue = false) {
    const flag = this.flags.get(flagName);
    
    if (!flag) {
      return defaultValue;
    }
    
    // グローバル無効化
    if (!flag.enabled) {
      return false;
    }
    
    // ロールアウト率チェック
    if (flag.rolloutPercentage < 100) {
      const hash = this.hashUserId(this.userId + flagName);
      const percentage = hash % 100;
      
      if (percentage >= flag.rolloutPercentage) {
        return false;
      }
    }
    
    // ユーザーセグメントチェック
    if (flag.targetSegments && flag.targetSegments.length > 0) {
      const userSegment = this.getUserSegment();
      if (!flag.targetSegments.includes(userSegment)) {
        return false;
      }
    }
    
    return true;
  }
  
  hashUserId(input) {
    let hash = 0;
    for (let i = 0; i < input.length; i++) {
      const char = input.charCodeAt(i);
      hash = ((hash << 5) - hash) + char;
      hash = hash & hash;
    }
    return Math.abs(hash);
  }
  
  getUserSegment() {
    // ユーザーセグメントの判定ロジック
    // ABTestManager と同様
    return 'regular';
  }
}

// 実験定義例
const experiments = [
  {
    id: 'new_todo_button_color',
    name: 'Todo Button Color Test',
    enabled: true,
    startDate: '2025-06-01',
    endDate: '2025-06-30',
    variants: [
      { name: 'control', allocation: 50 },
      { name: 'blue', allocation: 25 },
      { name: 'green', allocation: 25 }
    ],
    targeting: {
      countries: ['US', 'CA', 'UK'],
      platforms: ['web', 'mobile'],
      userSegments: ['new_user', 'regular']
    }
  }
];

// 使用例
const abTest = new ABTestManager(currentUser.id, experiments);
const featureFlags = new FeatureFlagManager(currentUser.id);

// A/Bテストのバリアント取得
const buttonColorVariant = abTest.getVariant('new_todo_button_color');

// 機能フラグの確認
const showNewFeature = featureFlags.isEnabled('new_dashboard_layout');

// UIでの使用
function renderTodoButton() {
  const variant = abTest.getVariant('new_todo_button_color');
  
  let buttonClass = 'btn-primary'; // デフォルト
  
  switch (variant) {
    case 'blue':
      buttonClass = 'btn-blue';
      break;
    case 'green':
      buttonClass = 'btn-green';
      break;
  }
  
  return `Add Todo`;
}

export { ABTestManager, FeatureFlagManager };

🎉 Windsurf完全マスター講座完結

🏆 Part5で習得したプロフェッショナルスキル

🤝 チーム開発スキル：

• Git Flowとブランチ戦略
• 効果的なコードレビュー
• プルリクエストのベストプラクティス
• チーム開発ガイドラインの策定

🚀 CI/CDスキル：

• GitHub Actions による自動化
• 多段階テストパイプライン
• 自動デプロイメント
• 環境管理とシークレット管理

📊 監視・分析スキル：

• Sentryによるエラートラッキング
• カスタムメトリクス収集
• パフォーマンス監視
• ユーザー行動分析

🌍 インフラストラクチャスキル：

• Docker & Kubernetes
• データベーススケーリング
• キャッシュ戦略
• CDNとロードバランシング

📈 プロダクト成長スキル：

• A/Bテストフレームワーク
• 機能フラグ管理
• 段階的ロールアウト
• データドリブンな意思決定

✅ 最終チェックリスト

プロフェッショナル開発者として

• □ Git Flowを使ったチーム開発ができる
• □ CI/CDパイプラインを設計・運用できる
• □ プロダクションレベルの監視システムを構築できる
• □ スケーラブルなアーキテクチャを設計できる
• □ A/Bテストでプロダクトを改善できる
• □ チームをリードし、技術的意思決定ができる
• □ ビジネス要件を技術実装に落とし込める
• □ 後輩にメンタリングができる

💡 咲耶からの最終メッセージ

🌸 プロフェッショナルデベロッパーとしての旅立ち

Part1から Part5まで、本当にお疲れさまでした〜💕

皆さんは今、単なるVibe Codingユーザーではありません。プロフェッショナルな開発者として、どんなプロジェクトにも対応できる実力を身につけました。

これからの皆さんへ

• 🚀 自信を持って挑戦：どんな大きなプロジェクトも、今の皆さんなら乗り越えられます
• 📚 継続的な学習：技術は日々進化します。学び続ける姿勢を大切に
• 🤝 コミュニティ貢献：今度は皆さんが後輩を導く番です
• 💡 価値創造：技術でユーザーに価値を届け、社会をより良くしていきましょう

Windsurfと共に歩む未来

Windsurfは皆さんの最強のパートナーです。これからも新しい機能が追加され、より便利になっていきます。

皆さんがWindsurfと共に、素晴らしいプロダクトを生み出し続けることを、心から楽しみにしています〜

🎯 次のステップ

短期目標（1-3ヶ月）

• 学んだスキルを実際のプロジェクトで実践
• GitHubでオープンソースプロジェクトに貢献
• 技術ブログで学習内容をアウトプット

中期目標（6ヶ月-1年）

• チームでのテックリード経験
• 勉強会やカンファレンスでの登壇
• 新しい技術スタックへの挑戦

長期目標（1年以上）

• プロダクトの技術責任者
• スタートアップの創業・CTO
• 技術コミュニティのリーダー

🌟 完全マスター達成おめでとうございます！

Windsurf完全マスター講座Part1〜Part5を通じて、皆さんは：

• 基礎から応用まで：Windsurfの全機能を習得
• 個人開発からチーム開発まで：あらゆる開発スタイルに対応
• 学習から運用まで：プロダクトライフサイクル全体をカバー

この知識とスキルを持った皆さんなら、どんな技術的課題も乗り越えられます。

それでは、新しいVibe Codingエキスパートとして、素晴らしい未来を築いていってくださいね〜✨

Windsurf完全マスター講座は今回で完結ですが、皆さんの学習と成長の旅は続いていきます。これからも新しい技術と共に、素晴らしいプロダクトを作り続けてくださいね〜

最後まで読んでくださって、本当にありがとうございました💕

Happy Professional Vibe Coding! 🤝🚀✨