CCJKでのチームコラボレーション：共有AIワークフロー

複数の開発者がAIアシスタントを使用する場合、一貫性が重要になります。CCJKは、チームコラボレーションのための強力な機能を提供し、全員が同じパターンとプラクティスに従うことを保証します。

チーム設定のセットアップ

プロジェクトレベルの設定

リポジトリに共有設定を作成：

hljs yaml
# .claude/config.yaml
version: "1.0"
team: "your-team-name"

# 共有モデル設定
model:
  default: claude-sonnet-4-20250514
  fallback: claude-haiku

# プロジェクトコンテキスト
context:
  description: |
    以下で構築されたEコマースプラットフォーム：
    - Next.js 14（App Router）
    - TypeScript（strictモード）
    - PostgreSQL + Prisma
    - キャッシング用Redis
    - Tailwind CSS

  conventions:
    - フックを使用した関数コンポーネントを使用
    - Airbnbスタイルガイドに従う
    - すべてのビジネスロジックにテストを書く
    - Conventional Commitsを使用

# 共有無視パターン
ignore:
  - node_modules/
  - .next/
  - coverage/
  - "*.log"
  - .env*

チーム権限

チームメンバーができることを定義：

hljs yaml
# .claude/permissions.yaml
roles:
  developer:
    read: ["src/**", "tests/**", "docs/**"]
    write: ["src/**", "tests/**"]
    execute: ["npm test", "npm run lint", "npm run build"]

  senior:
    extends: developer
    write: ["src/**", "tests/**", "config/**"]
    execute: ["npm run migrate", "npm run deploy:staging"]

  lead:
    extends: senior
    write: ["**"]
    execute: ["**"]

# チームメンバーのデフォルトロール
default_role: developer

共有スキルライブラリ

チームスキルの作成

チーム固有のスキルライブラリを構築：

hljs yaml
# .claude/skills/team/create-feature.yaml
name: create-feature
description: チーム規約に従って新機能を作成
version: 1.0.0
author: Team Lead

parameters:
  - name: name
    description: 機能名（kebab-case）
    required: true
    pattern: "^[a-z][a-z0-9-]*$"

  - name: type
    description: 機能タイプ
    default: page
    options: [page, component, api, service]

prompt: |
  チーム規約に従って「{{name}}」という{{type}}機能を作成してください：

  プロジェクト構造：
  - ページはsrc/app/に配置
  - コンポーネントはsrc/components/に配置
  - APIルートはsrc/app/api/に配置
  - サービスはsrc/services/に配置

  要件：
  - 厳密な型を持つTypeScript
  - ユニットテストを含める
  - Storybookストーリーを追加（コンポーネントの場合）
  - コードベースの既存パターンに従う

  一貫性のために類似の既存機能を参照してください。

スキルカテゴリ

目的別にスキルを整理：

.claude/skills/
├── team/
│   ├── create-feature.yaml
│   ├── create-api-endpoint.yaml
│   └── create-component.yaml
├── review/
│   ├── code-review.yaml
│   ├── security-review.yaml
│   └── performance-review.yaml
├── docs/
│   ├── api-docs.yaml
│   ├── component-docs.yaml
│   └── readme-update.yaml
└── testing/
    ├── unit-test.yaml
    ├── integration-test.yaml
    └── e2e-test.yaml

コーディング標準の強制

スタイルガイドの統合

hljs yaml
# .claude/style-guide.yaml
language: typescript
framework: react

rules:
  naming:
    components: PascalCase
    functions: camelCase
    constants: UPPER_SNAKE_CASE
    files: kebab-case

  structure:
    max_file_lines: 300
    max_function_lines: 50
    max_parameters: 4

  imports:
    order:
      - react
      - external
      - internal
      - relative
    group_separator: true

  comments:
    require_jsdoc: true
    require_inline: false

  testing:
    min_coverage: 80
    require_tests_for:
      - components
      - services
      - utils

自動レビューチェック

hljs yaml
# .claude/review-checklist.yaml
checks:
  - name: TypeScript型
    description: すべての関数とコンポーネントに適切な型定義があるか
    severity: error

  - name: テストカバレッジ
    description: 新しいコードに80%以上のテストカバレッジがあるか
    severity: warning

  - name: アクセシビリティ
    description: コンポーネントがWCAG 2.1 AA標準に準拠しているか
    severity: error

  - name: パフォーマンス
    description: 不要な再レンダリングやメモリリークがないか
    severity: warning

  - name: セキュリティ
    description: 一般的な脆弱性（XSS、SQLインジェクションなど）がないか
    severity: error

  - name: ドキュメント
    description: 公開APIにドキュメントがあるか
    severity: warning

ワークフローの標準化

プルリクエストテンプレート

hljs markdown
# .claude/templates/pull-request.md

## 変更内容

<!-- 変更内容を簡潔に説明 -->

## 変更の種類

- [ ] 新機能
- [ ] バグ修正
- [ ] リファクタリング
- [ ] ドキュメント更新
- [ ] パフォーマンス改善

## チェックリスト

- [ ] コードがスタイルガイドに従っている
- [ ] テストを追加/更新した
- [ ] ドキュメントを更新した
- [ ] 破壊的変更がない（またはマイグレーションガイドを追加）
- [ ] AIレビューを実行した（`/review`）

## AIレビュー結果

```bash
/review --comprehensive

<!-- AIレビューの結果をここに貼り付け -->

テスト

<!-- テスト方法を説明 -->

スクリーンショット

<!-- 該当する場合、スクリーンショットを追加 -->

### コミットメッセージ規約

```yaml
# .claude/commit-conventions.yaml
format: conventional-commits

types:
  - feat: 新機能
  - fix: バグ修正
  - docs: ドキュメントのみの変更
  - style: コードの意味に影響しない変更（空白、フォーマットなど）
  - refactor: バグ修正も機能追加もしないコード変更
  - perf: パフォーマンスを向上させるコード変更
  - test: 欠落しているテストの追加または既存のテストの修正
  - chore: ビルドプロセスまたは補助ツールの変更

scopes:
  - auth: 認証関連
  - api: APIエンドポイント
  - ui: ユーザーインターフェース
  - db: データベース
  - config: 設定

examples:
  - "feat(auth): JWTトークンリフレッシュを実装"
  - "fix(api): ユーザー作成時の検証エラーを修正"
  - "docs(readme): インストール手順を更新"

ナレッジ共有

チームドキュメント

hljs yaml
# .claude/team-docs.yaml
documentation:
  architecture:
    path: docs/architecture/
    auto_update: true
    sections:
      - overview
      - data-flow
      - api-design
      - security

  onboarding:
    path: docs/onboarding/
    includes:
      - setup-guide.md
      - coding-standards.md
      - common-tasks.md
      - troubleshooting.md

  decisions:
    path: docs/decisions/
    format: adr  # Architecture Decision Records
    template: .claude/templates/adr.md

ベストプラクティスライブラリ

hljs markdown
# .claude/best-practices/react-components.md

## Reactコンポーネントのベストプラクティス

### 1. コンポーネント構造

```typescript
// ✅ 良い例：明確な構造
interface Props {
  title: string;
  onSubmit: (data: FormData) => void;
}

export function MyComponent({ title, onSubmit }: Props) {
  // フック
  const [state, setState] = useState();

  // イベントハンドラー
  const handleSubmit = useCallback(() => {
    // ...
  }, []);

  // レンダリング
  return <div>{/* ... */}</div>;
}

2. パフォーマンス最適化

• useMemoで高コストな計算をメモ化
• useCallbackでイベントハンドラーをメモ化
• React.memoで不要な再レンダリングを防止

3. アクセシビリティ

• セマンティックHTMLを使用
• ARIA属性を適切に追加
• キーボードナビゲーションをサポート

## コミュニケーションプロトコル

### AIレビューフィードバック

```yaml
# .claude/feedback-protocol.yaml
review_process:
  1_ai_review:
    trigger: pull_request_opened
    action: /review --comprehensive
    output: comment_on_pr

  2_developer_response:
    required: true
    options:
      - accept: 変更を適用
      - discuss: 議論が必要
      - reject: 理由を説明

  3_team_review:
    required_for:
      - critical_severity_issues
      - architectural_changes
      - breaking_changes

  4_approval:
    minimum_approvals: 2
    required_checks:
      - ai_review_passed
      - tests_passed
      - no_merge_conflicts

コードレビューガイドライン

hljs markdown
# .claude/guidelines/code-review.md

## コードレビューガイドライン

### レビュアーとして

1. **建設的であること**
   - 問題を指摘するだけでなく、解決策を提案
   - ポジティブなフィードバックも含める

2. **優先順位をつける**
   - Critical：セキュリティ、バグ、破壊的変更
   - Major：パフォーマンス、保守性
   - Minor：スタイル、命名

3. **AIを活用**
   - `/review`で初期レビューを実行
   - AIの提案を検証
   - 人間の判断を追加

### 作成者として

1. **自己レビュー**
   - PRを作成する前に`/review`を実行
   - 明らかな問題を修正

2. **コンテキストを提供**
   - 変更の理由を説明
   - トレードオフを文書化
   - テスト戦略を共有

3. **フィードバックに対応**
   - タイムリーに応答
   - 議論をオープンに保つ
   - 学びを文書化

チームメトリクス

パフォーマンス追跡

hljs yaml
# .claude/metrics.yaml
tracking:
  code_quality:
    - test_coverage
    - code_complexity
    - duplication_rate
    - technical_debt

  ai_usage:
    - reviews_per_week
    - suggestions_accepted
    - time_saved
    - issues_prevented

  team_velocity:
    - features_delivered
    - bugs_fixed
    - review_turnaround
    - deployment_frequency

reports:
  frequency: weekly
  recipients:
    - team_lead
    - engineering_manager
  format: markdown
  include_trends: true

ダッシュボード

hljs typescript
// .claude/dashboard/config.ts
export const dashboardConfig = {
  widgets: [
    {
      type: 'ai-review-stats',
      title: 'AIレビュー統計',
      metrics: ['total_reviews', 'issues_found', 'time_saved']
    },
    {
      type: 'code-quality',
      title: 'コード品質トレンド',
      metrics: ['coverage', 'complexity', 'duplication']
    },
    {
      type: 'team-activity',
      title: 'チームアクティビティ',
      metrics: ['commits', 'prs', 'reviews']
    }
  ],
  refresh_interval: 3600, // 1時間
  export_formats: ['pdf', 'html', 'json']
};

オンボーディング

新メンバー向けセットアップ

hljs bash
#!/bin/bash
# .claude/scripts/onboard.sh

echo "🎉 チームへようこそ！CCJKをセットアップします..."

# CCJKをインストール
npm install -g ccjk

# チーム設定をクローン
git clone https://github.com/your-team/ccjk-config.git ~/.claude/team

# シンボリックリンクを作成
ln -s ~/.claude/team/config.yaml ~/.claude/config.yaml
ln -s ~/.claude/team/skills ~/.claude/skills

# APIキーを設定
echo "Anthropic APIキーを入力してください："
read -s API_KEY
echo "export ANTHROPIC_API_KEY=$API_KEY" >> ~/.bashrc

# 検証
ccjk --version
ccjk skills list

echo "✅ セットアップ完了！"
echo "次のステップ："
echo "1. docs/onboarding/setup-guide.mdを読む"
echo "2. /tutorial を実行してチュートリアルを開始"
echo "3. 最初のPRを作成して/reviewを試す"

トレーニング資料

hljs markdown
# .claude/training/getting-started.md

## CCJKを使い始める

### 基本コマンド

```bash
# コードレビュー
/review

# コミットメッセージ生成
/commit

# テスト生成
/test src/components/Button.tsx

# ドキュメント生成
/doc src/api/

チームスキル

hljs bash
# 新機能を作成
/create-feature --name user-profile --type page

# APIエンドポイントを作成
/create-api-endpoint --name users --methods GET,POST

# コンポーネントを作成
/create-component --name Button --type functional

ベストプラクティス

1. PRを作成する前に

   • /reviewを実行
   • テストを書く
   • ドキュメントを更新

2. レビュー中

   • AIの提案を検討
   • チームメンバーと議論
   • 学びを共有

3. マージ後

   • デプロイを監視
   • メトリクスを確認
   • フィードバックを収集

## トラブルシューティング

### 一般的な問題

```yaml
# .claude/troubleshooting.yaml
issues:
  - problem: "AIレビューが遅い"
    solutions:
      - スコープを制限（--scope src/specific/）
      - 小さなPRに分割
      - キャッシングを有効化

  - problem: "設定が同期されない"
    solutions:
      - git pullで最新の設定を取得
      - シンボリックリンクを確認
      - 設定ファイルの構文を検証

  - problem: "権限エラー"
    solutions:
      - ロールを確認（.claude/permissions.yaml）
      - チームリードに連絡
      - ローカル設定を確認

  - problem: "スキルが見つからない"
    solutions:
      - スキルディレクトリを確認
      - ccjk skills listを実行
      - スキルリポジトリを更新

セキュリティとコンプライアンス

チームセキュリティポリシー

hljs yaml
# .claude/security-policy.yaml
policies:
  data_handling:
    - no_production_data: true
    - anonymize_examples: true
    - encrypt_sensitive: true

  access_control:
    - require_2fa: true
    - session_timeout: 3600
    - audit_logging: true

  code_review:
    - security_scan: required
    - dependency_check: required
    - license_compliance: required

  incident_response:
    - report_to: security@company.com
    - escalation_time: 1h
    - documentation: required

まとめ

効果的なチームコラボレーションには：

1. 共有設定：一貫した動作のためにチーム設定を使用
2. スキルライブラリ：再利用可能なスキルを構築して共有
3. 標準化：コーディング標準とワークフローを強制
4. ナレッジ共有：ドキュメントとベストプラクティスを維持
5. メトリクス追跡：パフォーマンスと改善を測定
6. オンボーディング：新メンバーを迅速に立ち上げる

CCJKをチームワークフローに統合することで、一貫性、品質、生産性を向上させることができます。

次へ：CI/CD統合でAI支援ワークフローを自動化する方法を学びます。

よくある質問

チーム設定を個人設定で上書きできますか？

はい、ローカル設定（~/.claude/config.yaml）はプロジェクト設定を上書きします。

チームスキルを非公開にできますか？

はい、プライベートGitリポジトリでスキルをホストし、チームメンバーのみにアクセスを制限できます。

異なるチームで異なる設定を使用できますか？

はい、プロジェクトごとに異なる設定を持つことができます。CCJKは最も近い.claude/ディレクトリを使用します。

チームメトリクスはどのように追跡されますか？

CCJKは使用統計をローカルに記録します。チームダッシュボードのために集約できます。