Claude Code Development Environment Setup

Claude Code 開発環境のセットアップ

MCP サーバー、開発コンテナー、長時間実行ジョブ機能を備えた、Claude Code 向けの包括的な開発環境セットアップです。

🚀 クイックスタート

1. このリポジトリをクローンします：

   git clone https://github.com/your-username/claude-dev-setup.git
   cd claude-dev-setup
   

2. 環境変数を設定します：

   cp .env.example .env
   # Edit .env with your API tokens
   

3. 開発コンテナーを起動します：

   # Using VS Code Dev Containers extension
   code .
   # Or using Docker Compose directly
   docker-compose up -d
   

4. MCP サーバーを初期化します：

   ./.devcontainer/init-mcp.sh
   

5. 長時間実行ジョブを開始します：

   ./scripts/ten-minute-job.sh
   

📋 目次

• 機能
• 前提条件
• インストール
• 設定
• 使用方法
• ドキュメント
• トラブルシューティング
• 貢献

✨ 機能

開発環境

• VS Code 開発コンテナー（拡張機能の設定済み）
• Docker ベースの分離された開発環境
• 快適なターミナル環境を実現する Oh-My-Zsh を備えた Zsh
• 差分を見やすくする Git Delta

MCP（Model Context Protocol）サーバー

• ファイルシステムサーバー：ファイル操作とプロジェクト管理
• Monday.com 連携：プロジェクト管理とタスクの追跡
• Figma 連携：デザインシステムへのアクセスとコンポーネント管理
• Playwright 連携：ブラウザーの自動化とテスト

長時間実行ジョブ

• 自動継続：セッションをまたいで継続するジョブ
• モニタリング：進捗状況のリアルタイム追跡
• ログ記録：包括的なジョブログの記録と分析
• テンプレート：一般的なタスク向けの構築済みジョブテンプレート

セキュリティとネットワーク

• ファイアウォール設定：ネットワークセキュリティの自動セットアップ
• 権限管理：システムリソースへのアクセス制御
• トークン管理：API 認証情報の安全な取り扱い

🔧 前提条件

• Docker Compose を備えた Docker Desktop または Docker Engine
• VS Code と Dev Containers 拡張機能（推奨）
• バージョン管理用の Git
• Node.js 20 以降（コンテナーに含まれています）

必要な API トークン

サービス	必須	用途	入手方法
GitHub	✅ はい	リポジトリの操作	GitHub Settings → Developer settings → Personal access tokens
Monday.com	⚪ 任意	プロジェクト管理	Monday.com → Admin → API
Figma	⚪ 任意	デザインシステムへのアクセス	Figma → Settings → Account → Personal access tokens

📦 インストール

方法 1：VS Code 開発コンテナー（推奨）

1. クローンして VS Code で開きます：

   git clone https://github.com/your-username/claude-dev-setup.git
   cd claude-dev-setup
   code .
   

2. プロンプトが表示されたら、「コンテナーで再度開く」をクリックします

   • VS Code が開発コンテナーを自動的にビルドして起動します
   • すべての依存関係が自動的にインストールされます

3. 環境変数を設定します：

   cp .env.example .env
   # Edit .env with your API tokens
   

方法 2：Docker Compose

1. リポジトリをクローンします：

   git clone https://github.com/your-username/claude-dev-setup.git
   cd claude-dev-setup
   

2. 環境を設定します：

   cp .env.example .env
   # Edit .env with your API tokens
   

3. コンテナーを起動します：

   docker-compose up -d
   

4. コンテナーにアクセスします：

   docker-compose exec claude-dev zsh
   

方法 3：ローカルインストール

コンテナーを使わずに実行する場合：

1. Node.js の依存関係をインストールします：

   npm install -g \
     @anthropic-ai/claude-code \
     @modelcontextprotocol/server-filesystem \
     @mondaydotcomorg/monday-api-mcp \
     @playwright/mcp \
     figma-developer-mcp
   

2. 環境を設定します：

   cp .env.example .env
   source .env
   

3. 初期化スクリプトを実行します：

   chmod +x .devcontainer/*.sh scripts/*.sh
   ./.devcontainer/init-mcp.sh
   

⚙️ 設定

環境変数

.env ファイルを編集して設定します：

# Required: GitHub Personal Access Token
GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

# Optional: Monday.com API token
MONDAY_API_TOKEN=your_monday_token_here

# Optional: Figma API token
FIGMA_TOKEN=your_figma_token_here

# Optional: Timezone (defaults to UTC)
TZ=America/New_York

# Optional: Node.js memory limit
NODE_OPTIONS=--max-old-space-size=8192

MCP サーバーの設定

MCP サーバーはコンテナーの起動時に自動的に設定されます。手動で設定する場合：

# Add MCP servers to Claude
claude mcp add filesystem "npx @modelcontextprotocol/server-filesystem /workspace"
claude mcp add monday "npx @mondaydotcomorg/monday-api-mcp --token $MONDAY_API_TOKEN"
claude mcp add playwright "npx @playwright/mcp"
claude mcp add figma "npx figma-developer-mcp --figma-api-key=$FIGMA_TOKEN --stdio"

# Verify configuration
claude mcp list

🎯 使用方法

クイックコマンド

# Start MCP servers
./.devcontainer/start-mcps.sh

# Run a 10-minute demo job
./scripts/ten-minute-job.sh

# Start custom long-running job
./scripts/run-long-claude-job.sh "Your task description"

# Monitor job progress
./scripts/monitor-job.sh /workspace/claude-job-*.log

# Check system status
docker-compose ps
ps aux | grep claude

開発ワークフロー

1. 開発環境を起動します：

   # Open in VS Code
   code .
   # Or start container manually
   docker-compose up -d
   

2. プロジェクトを初期化します：

   # Create new project
   mkdir my-project && cd my-project
   npm init -y
   
   # Start Claude Code
   claude-code --dangerously-skip-permissions
   

3. 長時間実行の分析を実行します：

   ./scripts/ten-minute-job.sh
   # Monitor in another terminal
   tail -f /workspace/claude-job-*.log
   

ジョブテンプレート

コード分析

./scripts/run-long-claude-job.sh "
Perform comprehensive code analysis:
1. Review all components for performance issues
2. Identify security vulnerabilities  
3. Suggest architectural improvements
4. Generate detailed report with recommendations
"

ドキュメント生成

./scripts/run-long-claude-job.sh "
Create comprehensive documentation:
1. Add JSDoc comments to all functions
2. Create API documentation
3. Write usage examples for components
4. Generate architecture diagrams
"

テストのセットアップ

./scripts/run-long-claude-job.sh "
Set up comprehensive testing infrastructure:
1. Configure Jest and testing libraries
2. Create test files for existing components
3. Set up E2E testing with Playwright
4. Add test coverage reporting
"

📚 ドキュメント

• MCP セットアップガイド - MCP サーバーの詳細な設定
• 長時間実行ジョブ - ジョブの管理と監視
• Dev Container ガイド - コンテナー設定の詳細
• トラブルシューティングガイド - よくある問題と解決策

🔍 監視とデバッグ

システムステータスの確認

# Container status
docker-compose ps

# MCP server status
ps aux | grep mcp

# Claude processes
ps aux | grep claude

# Resource usage
docker stats

ログファイル

# MCP server logs
tail -f /tmp/mcp-server.log
tail -f /tmp/monday-mcp.log
tail -f /tmp/figma-mcp.log
tail -f /tmp/playwright-mcp.log

# Job logs
tail -f /workspace/claude-job-*.log

# Container logs
docker-compose logs -f claude-dev

ヘルスチェック

# Test MCP connections
claude mcp test filesystem
claude mcp test monday
claude mcp test playwright
claude mcp test figma

# Network connectivity
ping github.com
curl -I https://api.monday.com

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

よくある問題

コンテナーが起動しない

# Check Docker daemon
docker version

# Check disk space
df -h

# Rebuild container
docker-compose down
docker-compose build --no-cache
docker-compose up -d

MCP サーバーが動作しない

# Restart MCP servers
pkill -f mcp
./.devcontainer/init-mcp.sh

# Check environment variables
echo $MONDAY_API_TOKEN
echo $FIGMA_TOKEN

# Verify installations
npm list -g | grep mcp

長時間実行ジョブが失敗する

# Check Claude authentication
claude-code --version

# Verify permissions
ls -la /workspace

# Check available memory
free -m

# Review error logs
grep -i error /workspace/claude-job-*.log

サポートを受ける

1. ログを確認し、具体的なエラーメッセージを確認します
2. docs/ ディレクトリのドキュメントを確認します
3. GitHub リポジトリで課題を検索します
4. 次の情報を添えて課題を作成します：
   • エラーメッセージ
   • 再現手順
   • 環境の詳細（docker version、node --version）

🔒 セキュリティに関する考慮事項

• API トークン：.env ファイルに保存し、リポジトリには絶対にコミットしないでください
• 権限：--dangerously-skip-permissions は信頼できる環境でのみ使用してください
• ネットワーク：ファイアウォールルールは自動的に設定されます
• コンテナー：デフォルトでは root 以外のユーザーで実行されます

🤝 貢献

1. リポジトリをフォークします
2. 機能ブランチを作成します：git checkout -b feature/amazing-feature
3. 変更を加え、十分にテストします
4. 変更をコミットします：git commit -m 'Add amazing feature'
5. ブランチにプッシュします：git push origin feature/amazing-feature
6. プルリクエストを作成します

開発ガイドライン

• 既存のコードスタイルと規約に従ってください
• 新機能のドキュメントを追加してください
• コンテナー環境とローカル環境の両方で変更をテストしてください
• 関連するドキュメントファイルを更新してください

📄 ライセンス

このプロジェクトは MIT License の下でライセンスされています。詳細は LICENSE ファイルをご覧ください。

🙏 謝辞

• Claude Code と MCP プロトコルを提供する Anthropic
• VS Code Dev Containers を提供する Microsoft
• コンテナー化プラットフォームを提供する Docker
• 改善やフィードバックを寄せてくださったコミュニティの貢献者

📞 サポート

• ドキュメント：docs/ ディレクトリをご確認ください
• 課題：GitHub Issues
• ディスカッション：GitHub Discussions

---

Claude で楽しくコーディングしましょう！🎉