Trae 学習ガイド

日本語

English
中文

日本語

English
中文

Appearance

プロジェクト開発 ​

Trae IDEは、プロジェクトの開始から完成まで、開発ライフサイクル全体をサポートする包括的な開発環境を提供します。プロジェクトテンプレートから高度なビルドシステムまで、効率的で楽しい開発体験を実現します。

プロジェクト作成 ​

新規プロジェクト ​

Trae IDEでは、様々なフレームワークとテンプレートから新しいプロジェクトを簡単に作成できます：

bash
# React プロジェクト
trae create react my-react-app

# Vue プロジェクト  
trae create vue my-vue-app

# Node.js API
trae create node-api my-api

# Python Flask アプリ
trae create flask my-flask-app

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

Web開発 ​

  • React: TypeScript、JavaScript、Next.js
  • Vue: Vue 3、Nuxt.js、Composition API
  • Angular: 最新版、Material Design
  • Svelte: SvelteKit、TypeScript対応

バックエンド開発 ​

  • Node.js: Express、Koa、NestJS
  • Python: Django、Flask、FastAPI
  • Java: Spring Boot、Maven/Gradle
  • Go: Gin、Echo、標準ライブラリ

モバイル開発 ​

  • React Native: Expo、CLI
  • Flutter: Dart、Material Design
  • Ionic: Angular、React、Vue

プロジェクト設定 ​

新しいプロジェクトを作成する際、以下の設定を選択できます：

json
{
  "name": "my-project",
  "template": "react-typescript",
  "features": [
    "eslint",
    "prettier",
    "testing",
    "storybook"
  ],
  "packageManager": "npm",
  "gitInit": true
}

依存関係管理 ​

パッケージマネージャー統合 ​

Trae IDEは主要なパッケージマネージャーと統合されています：

npm/yarn ​

bash
# パッケージインストール
npm install lodash
yarn add lodash

# 開発依存関係
npm install --save-dev typescript
yarn add -D typescript

# グローバルパッケージ
npm install -g @angular/cli
yarn global add @angular/cli

pip (Python) ​

bash
# パッケージインストール
pip install requests
pip install -r requirements.txt

# 仮想環境
python -m venv venv
source venv/bin/activate  # Linux/Mac
venv\Scripts\activate     # Windows

Maven/Gradle (Java) ​

xml
<!-- Maven -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-core</artifactId>
    <version>5.3.21</version>
</dependency>
gradle
// Gradle
implementation 'org.springframework:spring-core:5.3.21'

依存関係の可視化 ​

プロジェクトの依存関係を視覚的に確認できます：

  • 依存関係ツリー: 階層構造での表示
  • 脆弱性スキャン: セキュリティ問題の検出
  • ライセンス確認: 使用ライブラリのライセンス情報
  • 更新通知: 新しいバージョンの通知

ビルドシステム ​

自動ビルド設定 ​

プロジェクトタイプに応じて、適切なビルド設定が自動的に構成されます：

Web プロジェクト ​

json
{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest",
    "lint": "eslint src",
    "format": "prettier --write src"
  }
}

Node.js プロジェクト ​

json
{
  "scripts": {
    "start": "node dist/index.js",
    "dev": "nodemon src/index.ts",
    "build": "tsc",
    "test": "jest",
    "test:watch": "jest --watch"
  }
}

ビルド最適化 ​

本番ビルド ​

  • コード分割: 動的インポートによる最適化
  • ツリーシェイキング: 未使用コードの除去
  • 圧縮: JavaScript、CSS、画像の圧縮
  • キャッシュ: ブラウザキャッシュの最適化

開発ビルド ​

  • ホットリロード: リアルタイムでの変更反映
  • ソースマップ: デバッグ情報の保持
  • 高速ビルド: 増分ビルドによる高速化

テスト統合 ​

テストフレームワーク ​

JavaScript/TypeScript ​

javascript
// Jest
describe('Calculator', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(add(1, 2)).toBe(3);
  });
});

// Vitest
import { describe, it, expect } from 'vitest';

describe('Calculator', () => {
  it('adds 1 + 2 to equal 3', () => {
    expect(add(1, 2)).toBe(3);
  });
});

Python ​

python
# pytest
def test_add():
    assert add(1, 2) == 3

# unittest
import unittest

class TestCalculator(unittest.TestCase):
    def test_add(self):
        self.assertEqual(add(1, 2), 3)

Java ​

java
// JUnit 5
@Test
void testAdd() {
    assertEquals(3, Calculator.add(1, 2));
}

テスト実行 ​

  • ユニットテスト: 個別機能のテスト
  • 統合テスト: コンポーネント間の連携テスト
  • E2Eテスト: エンドツーエンドのテスト
  • カバレッジ: コードカバレッジの測定

テスト結果の可視化 ​

テスト結果
├── 成功: 45 テスト
├── 失敗: 2 テスト
├── スキップ: 1 テスト
└── カバレッジ: 87%

デプロイメント ​

デプロイ設定 ​

Vercel ​

json
{
  "name": "my-app",
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build"
    }
  ]
}

Netlify ​

toml
[build]
  publish = "dist"
  command = "npm run build"

[build.environment]
  NODE_VERSION = "18"

Docker ​

dockerfile
FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]

CI/CD統合 ​

GitHub Actions ​

yaml
name: CI/CD

on:
  push:
    branches: [ main ]
  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'
    - run: npm ci
    - run: npm test
    - run: npm run build

プロジェクト管理 ​

ワークスペース ​

複数のプロジェクトを効率的に管理：

ワークスペース
├── frontend/
│   ├── react-app/
│   └── vue-app/
├── backend/
│   ├── api-server/
│   └── auth-service/
└── shared/
    ├── types/
    └── utils/

タスク管理 ​

  • TODO統合: コメント内のTODOを自動検出
  • 課題追跡: GitHub Issues、Jira統合
  • マイルストーン: プロジェクトの進捗管理
  • 時間追跡: 開発時間の記録

チーム協力 ​

コードレビュー ​

  • プルリクエスト: GitHub、GitLab統合
  • インラインコメント: コード内でのレビュー
  • 承認ワークフロー: レビュー承認プロセス

コミュニケーション ​

  • チャット統合: Slack、Discord連携
  • 通知: 重要な変更の通知
  • ドキュメント: プロジェクトドキュメントの管理

環境管理 ​

開発環境 ​

bash
# 環境変数設定
NODE_ENV=development
API_URL=http://localhost:3001
DATABASE_URL=postgresql://localhost:5432/mydb

本番環境 ​

bash
# 本番環境変数
NODE_ENV=production
API_URL=https://api.myapp.com
DATABASE_URL=postgresql://prod-db:5432/mydb

環境切り替え ​

  • 設定ファイル: 環境別の設定管理
  • シークレット管理: 機密情報の安全な保存
  • 環境同期: 開発と本番の環境同期

パフォーマンス監視 ​

ビルド分析 ​

  • バンドルサイズ: JavaScript、CSSファイルサイズ
  • 依存関係分析: 重いライブラリの特定
  • ロード時間: ページロード時間の測定

実行時監視 ​

  • メモリ使用量: アプリケーションのメモリ消費
  • CPU使用率: プロセッサー負荷の監視
  • ネットワーク: API呼び出しの監視

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

よくある問題 ​

ビルドエラー ​

bash
# 依存関係の問題
npm install
npm audit fix

# キャッシュクリア
npm cache clean --force

テストエラー ​

bash
# テスト環境のリセット
npm test -- --clearCache
npm test -- --updateSnapshot

デバッグツール ​

  • ログ分析: 構造化されたログの表示
  • エラー追跡: スタックトレースの詳細表示
  • パフォーマンス分析: ボトルネックの特定

ベストプラクティス ​

プロジェクト構造 ​

src/
├── components/     # 再利用可能なコンポーネント
├── pages/         # ページコンポーネント
├── hooks/         # カスタムフック
├── utils/         # ユーティリティ関数
├── types/         # TypeScript型定義
├── styles/        # スタイルファイル
└── tests/         # テストファイル

コード品質 ​

  • リンター: ESLint、Prettier設定
  • 型チェック: TypeScript活用
  • コードレビュー: 定期的なレビュー実施
  • ドキュメント: コードコメントとREADME

セキュリティ ​

  • 依存関係監査: 定期的な脆弱性チェック
  • 環境変数: 機密情報の適切な管理
  • HTTPS: 本番環境でのHTTPS使用
  • 認証: 適切な認証・認可の実装

Trae IDEのプロジェクト開発機能により、アイデアから本番デプロイまでのプロセスが大幅に簡素化されます。統合されたツールチェーンと自動化により、開発者はコードの品質と機能に集中できます。

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

著作権 © 2025 ykzm.cn