Traeでの初めてのプロジェクト

Trae IDEへようこそ！このチュートリアルでは、ゼロから初めてのプロジェクトを作成する方法をガイドします。

前提条件

Trae IDEがインストールされ、実行されていること
Web開発の基本的な理解
Node.jsがインストールされていること（この例では）

ステップ1: 新しいプロジェクトの作成

Trae IDEを開く
ファイル > 新しいプロジェクトをクリックするか、Ctrl+Shift+N（Windows/Linux）またはCmd+Shift+N（Mac）を使用
Webアプリケーション > React TypeScriptを選択
プロジェクトの詳細を入力：
- プロジェクト名: my-first-trae-app
- 場所: お好みのディレクトリを選択
- 説明: "Trae IDEでの初めてのプロジェクト"
プロジェクトを作成をクリック

ステップ2: プロジェクト構造の確認

Traeは自動的に構造化されたReact TypeScriptプロジェクトを生成します：

my-first-trae-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── App.tsx
│   ├── styles/
│   │   └── App.css
│   ├── index.tsx
│   └── types/
├── package.json
├── tsconfig.json
└── README.md

主要ファイル:

src/index.tsx: アプリケーションのエントリーポイント
src/components/App.tsx: メインアプリケーションコンポーネント
package.json: プロジェクトの依存関係とスクリプト
tsconfig.json: TypeScript設定

ステップ3: 開発サーバーの起動

統合ターミナルを開く: `Ctrl+`` (バッククォート) または表示 > ターミナル
依存関係をインストール:
bash
```
npm install
```
開発サーバーを起動:
bash
```
npm start
```
アプリを表示: Traeは自動的にプレビューパネルでhttp://localhost:3000を開きます

ステップ4: 初めての変更を行う

Appコンポーネントの修正

src/components/App.tsxを開く
内容を以下に置き換える:

tsx

import React, { useState } from 'react';
import '../styles/App.css';

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My First Trae App! 🚀</h1>
        
        <div className="greeting-section">
          <input
            type="text"
            placeholder="Enter your name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="name-input"
          />
          {name && <p>Hello, {name}! 👋</p>}
        </div>

        <div className="counter-section">
          <p>You clicked {count} times</p>
          <button 
            onClick={() => setCount(count + 1)}
            className="counter-button"
          >
            Click me!
          </button>
        </div>

        <div className="features-section">
          <h2>使用したTrae IDEの機能:</h2>
          <ul>
            <li>✅ 自動補完</li>
            <li>✅ シンタックスハイライト</li>
            <li>✅ ライブプレビュー</li>
            <li>✅ ホットリロード</li>
          </ul>
        </div>
      </header>
    </div>
  );
}

export default App;

スタイルの更新

src/styles/App.cssを開く
内容を以下に置き換える:

css

.App {
  text-align: center;
}

.App-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px;
  color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

.greeting-section {
  margin: 20px 0;
}

.name-input {
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 25px;
  margin-bottom: 10px;
  outline: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.counter-section {
  margin: 30px 0;
}

.counter-button {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 18px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.counter-button:hover {
  background: #ff5252;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.features-section {
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

.features-section h2 {
  margin-bottom: 15px;
  color: #ffd700;
}

.features-section ul {
  list-style: none;
  padding: 0;
}

.features-section li {
  margin: 8px 0;
  font-size: 16px;
}

ステップ5: TraeのAI機能を体験する

AIコード補完の使用

App.tsxで新しい関数の入力を開始:

tsx

const handleReset = () => {
  // Trae AIが実装を提案します

TabまたはEnterでAI提案を受け入れる

AIアシスタントに質問する

AIチャットを開く: Ctrl+Shift+AまたはAIアイコンをクリック
以下のような質問をする:
- "このReactアプリにルーティングを追加するにはどうすればよいですか？"
- "ローディングスピナーコンポーネントを生成してください"
- "名前入力にフォームバリデーションを追加してください"

ステップ6: 新しいコンポーネントの追加

Welcomeコンポーネントの作成

src/components/を右クリック
"新しいファイル"を選択
Welcome.tsxと名前を付ける
内容を追加:

tsx

import React from 'react';

interface WelcomeProps {
  name: string;
  onNameChange: (name: string) => void;
}

const Welcome: React.FC<WelcomeProps> = ({ name, onNameChange }) => {
  return (
    <div className="welcome-component">
      <h2>Welcome Component</h2>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={(e) => onNameChange(e.target.value)}
        className="name-input"
      />
      {name && (
        <div className="welcome-message">
          <p>Hello, {name}! Welcome to Trae IDE! 🎉</p>
        </div>
      )}
    </div>
  );
};

export default Welcome;

コンポーネントの使用

App.tsxでコンポーネントをインポート:
tsx
```
import Welcome from './Welcome';
```
グリーティングセクションを以下に置き換える:
tsx
```
<Welcome name={name} onNameChange={setName} />
```

ステップ7: アプリケーションのテスト

手動テスト

名前入力欄に入力 - リアルタイム更新を確認
カウンターボタンをクリック - カウントの増加を確認
ブラウザをリサイズ - レスポンシブデザインを確認

簡単なテストの追加

src/components/__tests__/App.test.tsxを作成:

tsx

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from '../App';

test('renders welcome message', () => {
  render(<App />);
  const welcomeElement = screen.getByText(/Welcome to My First Trae App/i);
  expect(welcomeElement).toBeInTheDocument();
});

test('counter increments when button is clicked', () => {
  render(<App />);
  const button = screen.getByText(/Click me!/i);
  const counter = screen.getByText(/You clicked 0 times/i);
  
  fireEvent.click(button);
  
  expect(screen.getByText(/You clicked 1 times/i)).toBeInTheDocument();
});

テストを実行:
bash
```
npm test
```

ステップ8: ビルドとデプロイ

本番用ビルド

bash

npm run build

デプロイオプション

Vercel（推奨）:
- Vercel CLIをインストール: npm i -g vercel
- デプロイ: vercel
Netlify:
- buildフォルダをNetlifyにドラッグ&ドロップ
GitHub Pages:
- GitHubにプッシュ
- リポジトリ設定でGitHub Pagesを有効化

学習した内容

✅ プロジェクト作成: Traeのプロジェクトテンプレートを使用 ✅ 開発ワークフロー: ホットリロードとライブプレビュー ✅ AI機能: コード補完とAIアシスタント ✅ コンポーネント開発: 再利用可能なReactコンポーネントの作成 ✅ スタイリング: グラデーションとアニメーションを使用したモダンCSS ✅ テスト: コンポーネントの単体テストの追加 ✅ ビルド: 本番デプロイ用アプリの準備

次のステップ

より多くのテンプレートを探索: 異なるプロジェクトタイプを試す
AI機能を学習: AIアシスタントチュートリアルをチェック
高度な開発: コード生成チュートリアルを読む
IDE機能: IDE機能を発見

トラブルシューティング

よくある問題

ポートが既に使用中:

bash

# ポート3000のプロセスを終了
npx kill-port 3000

依存関係がインストールされない:

bash

# npmキャッシュをクリア
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

TypeScriptエラー:

tsconfig.json設定を確認
すべてのインポートが適切な型を持っていることを確認
型の提案にはTraeのAIアシスタントを使用

おめでとうございます！ 🎉

Trae IDEで初めてのプロジェクトを正常に作成しました！AI支援開発、モダンツール、シームレスなワークフロー統合の力を体験しました。

さらに学習したいですか？Traeの機能をより深く理解するために、他のチュートリアルをチェックしてください。

Traeでの初めてのプロジェクト ​

前提条件 ​

ステップ1: 新しいプロジェクトの作成 ​

ステップ2: プロジェクト構造の確認 ​

主要ファイル: ​

ステップ3: 開発サーバーの起動 ​

ステップ4: 初めての変更を行う ​

Appコンポーネントの修正 ​

スタイルの更新 ​

ステップ5: TraeのAI機能を体験する ​

AIコード補完の使用 ​

AIアシスタントに質問する ​

ステップ6: 新しいコンポーネントの追加 ​

Welcomeコンポーネントの作成 ​

コンポーネントの使用 ​

ステップ7: アプリケーションのテスト ​

手動テスト ​

簡単なテストの追加 ​

ステップ8: ビルドとデプロイ ​

本番用ビルド ​

デプロイオプション ​

学習した内容 ​

次のステップ ​

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

よくある問題 ​

おめでとうございます！ 🎉 ​

Traeでの初めてのプロジェクト

前提条件

ステップ1: 新しいプロジェクトの作成

ステップ2: プロジェクト構造の確認

主要ファイル:

ステップ3: 開発サーバーの起動

ステップ4: 初めての変更を行う

Appコンポーネントの修正

スタイルの更新

ステップ5: TraeのAI機能を体験する

AIコード補完の使用

AIアシスタントに質問する

ステップ6: 新しいコンポーネントの追加

Welcomeコンポーネントの作成

コンポーネントの使用

ステップ7: アプリケーションのテスト

手動テスト

簡単なテストの追加

ステップ8: ビルドとデプロイ

本番用ビルド

デプロイオプション

学習した内容

次のステップ

トラブルシューティング

よくある問題

おめでとうございます！ 🎉