Trae 学習ガイド

日本語

English
中文

日本語

English
中文

Appearance

プロジェクト管理 ​

TRAEは、複数のプロジェクトを効率的に管理するための包括的なプロジェクト管理機能を提供します。このガイドでは、プロジェクトの作成、管理、設定、コラボレーションについて説明します。

概要 ​

TRAEのプロジェクト管理システムは以下を提供します：

  • 統合プロジェクトダッシュボード
  • プロジェクトテンプレートとスキャフォールディング
  • ワークスペース管理
  • バージョン管理統合
  • チームコラボレーション機能
  • プロジェクト設定とカスタマイズ

プロジェクトの作成 ​

新しいプロジェクトの作成 ​

  1. プロジェクト作成ダイアログを開く

    • Ctrl+Shift+N (Windows/Linux) / Cmd+Shift+N (Mac)
    • または「ファイル」→「新しいプロジェクト」

  2. プロジェクトタイプを選択

    • Webアプリケーション
    • モバイルアプリ
    • デスクトップアプリケーション
    • ライブラリ/パッケージ
    • カスタムプロジェクト

  3. プロジェクト設定を構成

    • プロジェクト名
    • 保存場所
    • 初期設定

プロジェクトテンプレート ​

利用可能なテンプレート ​

javascript
// React Webアプリケーション
{
  "name": "React App",
  "description": "React.jsを使用したモダンWebアプリケーション",
  "technologies": ["React", "TypeScript", "Vite"],
  "features": ["Hot Reload", "ESLint", "Prettier"]
}

// Node.js API
{
  "name": "Node.js API",
  "description": "Express.jsを使用したRESTful API",
  "technologies": ["Node.js", "Express", "TypeScript"],
  "features": ["Authentication", "Database", "Testing"]
}

// Python Webアプリ
{
  "name": "Python Web App",
  "description": "Flaskを使用したPython Webアプリケーション",
  "technologies": ["Python", "Flask", "SQLAlchemy"],
  "features": ["Database ORM", "Authentication", "Testing"]
}

カスタムテンプレートの作成 ​

json
{
  "name": "My Custom Template",
  "description": "カスタムプロジェクトテンプレート",
  "version": "1.0.0",
  "author": "Your Name",
  "files": [
    {
      "path": "package.json",
      "template": true
    },
    {
      "path": "src/index.js",
      "content": "// メインエントリーポイント\nconsole.log('Hello World!');"
    }
  ],
  "scripts": {
    "setup": "npm install",
    "dev": "npm run dev",
    "build": "npm run build"
  },
  "dependencies": {
    "react": "^18.0.0",
    "typescript": "^4.9.0"
  }
}

プロジェクトダッシュボード ​

ダッシュボードの概要 ​

プロジェクトダッシュボードは、すべてのプロジェクトの中央管理ハブです：

  1. 最近のプロジェクト: 最近開いたプロジェクトの一覧
  2. お気に入りプロジェクト: ピン留めされたプロジェクト
  3. プロジェクト統計: 進行状況とメトリクス
  4. クイックアクション: よく使用される操作

プロジェクトの整理 ​

フォルダとタグ ​

javascript
// プロジェクトの分類
const projectCategories = {
  "work": {
    "name": "仕事",
    "color": "#007ACC",
    "projects": ["project-a", "project-b"]
  },
  "personal": {
    "name": "個人",
    "color": "#28A745",
    "projects": ["hobby-project", "learning-project"]
  },
  "archived": {
    "name": "アーカイブ",
    "color": "#6C757D",
    "projects": ["old-project"]
  }
};

プロジェクトのフィルタリング ​

  1. 言語別: JavaScript、Python、Go など
  2. ステータス別: アクティブ、完了、一時停止
  3. 最終更新日: 今日、今週、今月
  4. チーム別: 個人、チーム、オープンソース

ワークスペース管理 ​

マルチルートワークスペース ​

json
{
  "folders": [
    {
      "name": "Frontend",
      "path": "./frontend"
    },
    {
      "name": "Backend",
      "path": "./backend"
    },
    {
      "name": "Shared",
      "path": "./shared"
    }
  ],
  "settings": {
    "typescript.preferences.includePackageJsonAutoImports": "auto",
    "eslint.workingDirectories": ["frontend", "backend"]
  },
  "extensions": {
    "recommendations": [
      "ms-vscode.vscode-typescript-next",
      "esbenp.prettier-vscode"
    ]
  }
}

ワークスペース設定 ​

プロジェクト固有の設定 ​

json
{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },
  "typescript.preferences.importModuleSpecifier": "relative"
}

タスクとランナー ​

json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev",
      "type": "shell",
      "command": "npm",
      "args": ["run", "dev"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      }
    },
    {
      "label": "build",
      "type": "shell",
      "command": "npm",
      "args": ["run", "build"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "test",
      "type": "shell",
      "command": "npm",
      "args": ["test"],
      "group": "test"
    }
  ]
}

バージョン管理統合 ​

Git統合 ​

リポジトリの初期化 ​

bash
# 新しいGitリポジトリを初期化
git init

# リモートリポジトリを追加
git remote add origin https://github.com/username/project.git

# 初期コミット
git add .
git commit -m "Initial commit"
git push -u origin main

ブランチ管理 ​

javascript
// ブランチ戦略の設定
const branchStrategy = {
  "main": "本番環境",
  "develop": "開発環境", 
  "feature/*": "機能開発",
  "hotfix/*": "緊急修正",
  "release/*": "リリース準備"
};

// ブランチ保護ルール
const branchProtection = {
  "main": {
    "requirePullRequest": true,
    "requireReviews": 2,
    "requireStatusChecks": true
  }
};

コミット管理 ​

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

bash
# 機能追加
feat: ユーザー認証機能を追加

# バグ修正
fix: ログイン時のエラーハンドリングを修正

# ドキュメント更新
docs: READMEにインストール手順を追加

# リファクタリング
refactor: ユーザーサービスのコードを整理

# テスト追加
test: ユーザー認証のテストケースを追加

プリコミットフック ​

json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss}": [
      "stylelint --fix",
      "prettier --write"
    ]
  }
}

チームコラボレーション ​

プロジェクト共有 ​

チームメンバーの招待 ​

javascript
// プロジェクト設定
const projectSettings = {
  "name": "Team Project",
  "visibility": "private",
  "members": [
    {
      "email": "developer@example.com",
      "role": "developer",
      "permissions": ["read", "write"]
    },
    {
      "email": "manager@example.com", 
      "role": "manager",
      "permissions": ["read", "write", "admin"]
    }
  ]
};

権限管理 ​

javascript
const permissions = {
  "owner": ["read", "write", "admin", "delete"],
  "admin": ["read", "write", "admin"],
  "developer": ["read", "write"],
  "viewer": ["read"]
};

コードレビュー ​

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

markdown
## 変更内容
<!-- 何を変更したかを簡潔に説明 -->

## 変更理由
<!-- なぜこの変更が必要かを説明 -->

## テスト
<!-- どのようにテストしたかを説明 -->
- [ ] 単体テスト
- [ ] 統合テスト
- [ ] 手動テスト

## チェックリスト
- [ ] コードレビューを実施
- [ ] テストが通過
- [ ] ドキュメントを更新
- [ ] 破壊的変更がある場合は明記

## スクリーンショット
<!-- UI変更がある場合はスクリーンショットを添付 -->

レビューガイドライン ​

  1. コード品質: 可読性、保守性、パフォーマンス
  2. セキュリティ: 脆弱性の確認
  3. テスト: 適切なテストカバレッジ
  4. ドキュメント: 必要なドキュメントの更新

プロジェクト設定 ​

環境設定 ​

開発環境 ​

json
{
  "development": {
    "database": {
      "host": "localhost",
      "port": 5432,
      "name": "myapp_dev"
    },
    "api": {
      "baseUrl": "http://localhost:3000",
      "timeout": 5000
    },
    "features": {
      "debugMode": true,
      "hotReload": true
    }
  }
}

本番環境 ​

json
{
  "production": {
    "database": {
      "host": "prod-db.example.com",
      "port": 5432,
      "name": "myapp_prod"
    },
    "api": {
      "baseUrl": "https://api.example.com",
      "timeout": 10000
    },
    "features": {
      "debugMode": false,
      "analytics": true
    }
  }
}

ビルド設定 ​

Webpack設定 ​

javascript
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

TypeScript設定 ​

json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020", "DOM"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

プロジェクト監視 ​

メトリクスとアナリティクス ​

コード品質メトリクス ​

javascript
const codeMetrics = {
  "complexity": {
    "cyclomatic": 8.5,
    "cognitive": 12.3
  },
  "coverage": {
    "lines": 85.2,
    "functions": 92.1,
    "branches": 78.9
  },
  "maintainability": {
    "index": 72.4,
    "debt": "2h 30m"
  }
};

パフォーマンス監視 ​

javascript
// パフォーマンス設定
const performanceConfig = {
  "monitoring": {
    "enabled": true,
    "sampleRate": 0.1
  },
  "alerts": {
    "responseTime": 2000,
    "errorRate": 0.05,
    "memoryUsage": 0.8
  }
};

自動化とCI/CD ​

GitHub Actions ​

yaml
name: CI/CD Pipeline

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

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - 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 tests
        run: npm test
      - name: Run linting
        run: npm run lint
      - name: Check types
        run: npm run type-check

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to production
        run: npm run deploy

プロジェクトのアーカイブと削除 ​

プロジェクトのアーカイブ ​

  1. アーカイブの準備

    • 重要なファイルのバックアップ
    • ドキュメントの整理
    • 依存関係の記録

  2. アーカイブの実行

    • プロジェクトを読み取り専用に設定
    • アーカイブフォルダに移動
    • メタデータの保存

プロジェクトの削除 ​

javascript
// 削除前のチェックリスト
const deletionChecklist = [
  "重要なデータのバックアップ完了",
  "チームメンバーへの通知完了",
  "依存関係の確認完了",
  "ドキュメントの保存完了"
];

// 安全な削除プロセス
function safeProjectDeletion(projectId) {
  // 1. バックアップ作成
  createBackup(projectId);
  
  // 2. 依存関係の確認
  checkDependencies(projectId);
  
  // 3. 確認ダイアログ
  confirmDeletion(projectId);
  
  // 4. 削除実行
  deleteProject(projectId);
}

ベストプラクティス ​

プロジェクト構造 ​

project-root/
├── src/                 # ソースコード
│   ├── components/      # コンポーネント
│   ├── services/        # サービス層
│   ├── utils/           # ユーティリティ
│   └── types/           # 型定義
├── tests/               # テストファイル
├── docs/                # ドキュメント
├── scripts/             # ビルドスクリプト
├── .github/             # GitHub設定
├── .vscode/             # VS Code設定
├── package.json         # 依存関係
├── tsconfig.json        # TypeScript設定
├── .eslintrc.js         # ESLint設定
├── .prettierrc          # Prettier設定
└── README.md            # プロジェクト説明

命名規約 ​

javascript
// ファイル命名規約
const namingConventions = {
  "components": "PascalCase",      // UserProfile.tsx
  "utilities": "camelCase",        // formatDate.ts
  "constants": "UPPER_SNAKE_CASE", // API_ENDPOINTS.ts
  "types": "PascalCase",           // UserType.ts
  "tests": "camelCase.test",       // userService.test.ts
};

セキュリティ ​

  1. シークレット管理: 環境変数を使用
  2. 依存関係: 定期的な脆弱性スキャン
  3. アクセス制御: 適切な権限設定
  4. コードレビュー: セキュリティ観点でのレビュー

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

一般的な問題 ​

  1. プロジェクトが開けない

    • ファイルパスの確認
    • 権限の確認
    • 破損したファイルの修復

  2. パフォーマンスの問題

    • 大きなファイルの除外
    • インデックスの最適化
    • 拡張機能の見直し

  3. 同期の問題

    • Gitの状態確認
    • 競合の解決
    • リモートとの同期

デバッグツール ​

bash
# プロジェクトの健全性チェック
trae --check-project

# 設定の検証
trae --validate-config

# パフォーマンス分析
trae --analyze-performance

関連記事 ​

究極の AI 駆動 IDE 学習ガイド

著作権 © 2025 ykzm.cn