AIチャットアシスタントチュートリアル

Traeの強力なAIアシスタントを活用して開発ワークフローを加速する方法を学びます。

概要

TraeのAIアシスタントは、以下のことを支援するインテリジェントなコーディングコンパニオンです：

コード生成と補完
デバッグとエラー解決
コードの説明とドキュメント化
アーキテクチャの提案
ベストプラクティスの推奨

はじめに

AIチャットを開く

方法1: キーボードショートカット

Windows/Linux: Ctrl+Shift+A
Mac: Cmd+Shift+A

方法2: UI操作

サイドバーのAIアシスタントアイコンをクリック
または表示 > AIアシスタントに移動

方法3: コマンドパレット

Ctrl+Shift+P（Windows/Linux）またはCmd+Shift+P（Mac）を押す
"AI Chat"と入力し、AIアシスタントを開くを選択

基本的なAIインタラクション

簡単なコードの質問

例1: コードの説明

あなた: このReactフックは何をしますか？

const [count, setCount] = useState(0);

AI: これはReactのuseStateフックです。初期値0で'count'という状態変数を作成し、その状態を更新するためのセッター関数'setCount'を提供します。setCountが呼ばれると、新しい値でコンポーネントの再レンダリングがトリガーされます。

例2: クイックフィックス

あなた: このTypeScriptエラーを修正するにはどうすればよいですか？

Property 'name' does not exist on type 'User'

AI: このエラーは、Userタイプで'name'プロパティが定義されていないことを意味します。以下の方法で修正できます：

1. Userインターフェースに'name'を追加：
   interface User {
     id: number;
     name: string; // この行を追加
   }

2. nameが存在しない可能性がある場合はオプショナルチェーンを使用：
   user.name?.toLowerCase()

コード生成

例1: コンポーネント生成

あなた: 名前、メール、アバターを含むユーザープロフィールカードのReactコンポーネントを作成してください

AI: Reactユーザープロフィールカードコンポーネントです：

import React from 'react';
import './UserProfileCard.css';

interface UserProfileCardProps {
  name: string;
  email: string;
  avatar?: string;
}

const UserProfileCard: React.FC<UserProfileCardProps> = ({ 
  name, 
  email, 
  avatar 
}) => {
  return (
    <div className="user-profile-card">
      <div className="avatar-container">
        <img 
          src={avatar || '/default-avatar.png'} 
          alt={`${name}'s avatar`}
          className="avatar"
        />
      </div>
      <div className="user-info">
        <h3 className="user-name">{name}</h3>
        <p className="user-email">{email}</p>
      </div>
    </div>
  );
};

export default UserProfileCard;

例2: 関数生成

あなた: メールアドレスを検証する関数を書いてください

AI: メール検証関数です：

function validateEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  
  // 基本的なフォーマットチェック
  if (!emailRegex.test(email)) {
    return false;
  }
  
  // 追加チェック
  if (email.length > 254) {
    return false;
  }
  
  const [localPart, domain] = email.split('@');
  
  if (localPart.length > 64 || domain.length > 253) {
    return false;
  }
  
  return true;
}

// 使用例：
const isValid = validateEmail('user@example.com'); // true
const isInvalid = validateEmail('invalid-email'); // false

高度なAI機能

コンテキスト認識アシスタンス

AIアシスタントは現在のプロジェクトコンテキストを理解します：

例: プロジェクト固有のヘルプ

あなた: Reactアプリにルーティングを追加するにはどうすればよいですか？

AI: React TypeScriptプロジェクトで作業していることがわかります。React Routerを追加する方法は以下の通りです：

1. React Routerをインストール：
   npm install react-router-dom
   npm install @types/react-router-dom

2. App.tsxを更新：
   import { BrowserRouter, Routes, Route } from 'react-router-dom';
   import Home from './components/Home';
   import About from './components/About';

   function App() {
     return (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </BrowserRouter>
     );
   }

コードレビューと最適化

例: パフォーマンス最適化

あなた: このコンポーネントのパフォーマンス問題をレビューしてもらえますか？

const UserList = ({ users }) => {
  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
          <img src={user.avatar} alt="avatar" />
        </div>
      ))}
    </div>
  );
};

AI: いくつかの最適化の機会があります：

1. **メモ化**: React.memoを使用して不要な再レンダリングを防ぐ
2. **画像最適化**: 画像にloading="lazy"を追加
3. **TypeScript**: 適切な型定義を追加

最適化されたバージョンです：

import React from 'react';

interface User {
  id: string;
  name: string;
  email: string;
  avatar: string;
}

interface UserListProps {
  users: User[];
}

const UserList: React.FC<UserListProps> = React.memo(({ users }) => {
  return (
    <div className="user-list">
      {users.map(user => (
        <div key={user.id} className="user-item">
          <h3>{user.name}</h3>
          <p>{user.email}</p>
          <img 
            src={user.avatar} 
            alt={`${user.name}'s avatar`}
            loading="lazy"
            width="50"
            height="50"
          />
        </div>
      ))}
    </div>
  );
});

UserList.displayName = 'UserList';
export default UserList;

デバッグ支援

例: エラーデバッグ

あなた: このエラーが発生していて、なぜかわかりません：

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

AI: このエラーは通常、undefinedまたはnullの変数に対して.map()を呼び出そうとしたときに発生します。最も一般的な原因と解決策は以下の通りです：

1. **データがまだ読み込まれていない**:
   // 問題：
   const UserList = ({ users }) => {
     return users.map(user => <div key={user.id}>{user.name}</div>);
   };

   // 解決策：
   const UserList = ({ users = [] }) => {
     return users.map(user => <div key={user.id}>{user.name}</div>);
   };

2. **Async data loading**:
   // Problem:
   const [users, setUsers] = useState();
   
   // Solution:
   const [users, setUsers] = useState([]);
   
   // Or with conditional rendering:
   return users ? users.map(...) : <div>Loading...</div>;

3. **API response structure**:
   Check if your API returns the expected array structure.

AI Chat Best Practices

1. Be Specific

❌ Vague:

"My code doesn't work"

✅ Specific:

"My React component throws a TypeError when trying to map over the users array. Here's the error message and my code: [paste code]"

2. Provide Context

❌ No context:

"How do I make an API call?"

✅ With context:

"How do I make an API call in my React TypeScript component to fetch user data from a REST endpoint?"

3. Include Code Snippets

❌ Description only:

"My function isn't working properly"

✅ With code:

"My function isn't working properly:

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

It returns NaN instead of the expected number."

4. Ask Follow-up Questions

You: Thanks for the code! Can you also show me how to add error handling?

AI: Absolutely! Here's the same function with comprehensive error handling:

function calculateTotal(items: Item[]): number {
  try {
    if (!Array.isArray(items)) {
      throw new Error('Items must be an array');
    }
    
    return items.reduce((sum, item) => {
      if (typeof item.price !== 'number' || isNaN(item.price)) {
        console.warn(`Invalid price for item ${item.id}: ${item.price}`);
        return sum;
      }
      return sum + item.price;
    }, 0);
  } catch (error) {
    console.error('Error calculating total:', error);
    return 0;
  }
}

AI-Powered Workflows

1. Test-Driven Development

You: I want to create a function that validates passwords. Can you help me write tests first?

AI: Great approach! Here are comprehensive tests for password validation:

// passwordValidator.test.ts
import { validatePassword } from './passwordValidator';

describe('Password Validator', () => {
  test('should accept valid passwords', () => {
    expect(validatePassword('StrongPass123!')).toBe(true);
    expect(validatePassword('MySecure@Pass1')).toBe(true);
  });

  test('should reject passwords that are too short', () => {
    expect(validatePassword('Short1!')).toBe(false);
  });

  test('should reject passwords without uppercase letters', () => {
    expect(validatePassword('lowercase123!')).toBe(false);
  });

  test('should reject passwords without numbers', () => {
    expect(validatePassword('NoNumbers!')).toBe(false);
  });

  test('should reject passwords without special characters', () => {
    expect(validatePassword('NoSpecialChars123')).toBe(false);
  });
});

Now, would you like me to implement the function that passes these tests?

2. Code Refactoring

You: Can you help me refactor this component to use custom hooks?

const UserProfile = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchUser()
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>No user found</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

AI: Here's the refactored version using a custom hook:

// hooks/useUser.ts
import { useState, useEffect } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
}

interface UseUserReturn {
  user: User | null;
  loading: boolean;
  error: Error | null;
  refetch: () => void;
}

export const useUser = (): UseUserReturn => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  const fetchUserData = async () => {
    try {
      setLoading(true);
      setError(null);
      const userData = await fetchUser();
      setUser(userData);
    } catch (err) {
      setError(err as Error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUserData();
  }, []);

  return { user, loading, error, refetch: fetchUserData };
};

// UserProfile.tsx
import React from 'react';
import { useUser } from './hooks/useUser';

const UserProfile: React.FC = () => {
  const { user, loading, error } = useUser();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!user) return <div>No user found</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

export default UserProfile;

Advanced Tips

1. Multi-turn Conversations

Build complex solutions through iterative conversations:

Turn 1: "Create a todo app component"
Turn 2: "Add the ability to mark todos as complete"
Turn 3: "Add filtering by status (all, active, completed)"
Turn 4: "Add local storage persistence"
Turn 5: "Add drag and drop reordering"

2. Code Explanation

You: Can you explain this complex regex?

/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/

AI: This regex validates strong passwords. Let me break it down:

/^                     - Start of string
(?=.*[a-z])           - Positive lookahead: must contain lowercase letter
(?=.*[A-Z])           - Positive lookahead: must contain uppercase letter
(?=.*\d)              - Positive lookahead: must contain digit
(?=.*[@$!%*?&])       - Positive lookahead: must contain special character
[A-Za-z\d@$!%*?&]{8,} - Match 8+ characters from allowed set
$/                     - End of string

The lookaheads ensure all requirements are met without consuming characters.

3. アーキテクチャディスカッション

あなた: 大規模なReactアプリを構築しています。最適な状態管理アプローチは何ですか？

AI: 大規模なReactアプリの場合、主なオプションは以下の通りです：

1. **Redux Toolkit（複雑なアプリに推奨）**:
   - 予測可能な状態更新
   - 優秀なDevTools
   - 複雑な状態ロジックを持つアプリに最適
   - タイムトラベルデバッグ

2. **Zustand（中規模アプリに推奨）**:
   - Reduxよりもシンプル
   - ボイラープレートが少ない
   - TypeScriptフレンドリー
   - 良好なパフォーマンス

3. **React Context + useReducer（シンプルなアプリ用）**:
   - Reactに組み込まれている
   - テーマ、認証、またはシンプルなグローバル状態に適している
   - 頻繁な更新でパフォーマンス問題を引き起こす可能性

あなたのユースケースでは、シンプルさを求めるならZustand、ミドルウェア、永続化、複雑な非同期ロジックなどの高度な機能が必要ならRedux Toolkitをお勧めします。

どちらかの設定方法をお見せしましょうか？

AIチャットのトラブルシューティング

よくある問題

AIが応答しない:

インターネット接続を確認
IDEを更新
質問を言い換えてみる

不完全な応答:

継続を求める: "続けてください"
リクエストをより具体的にする
複雑なリクエストを小さな部分に分割

古い提案:

使用しているバージョンを指定
現在のベストプラクティスに言及
最新のアプローチを求める

より良い結果を得るために

デバッグ時はエラーメッセージを含める
技術スタックを指定する（React、Vue、Angularなど）
経験レベルを言及する（初心者、中級者、上級者）
理解できない場合は説明を求める
最初の解決策が合わない場合は代替案を要求する

次のステップ

AIチャットをマスターしたので、以下を探索してください：

コード生成チュートリアル - 高度なAI駆動開発
IDE機能 - より多くのTrae機能を発見
プロジェクト開発 - エンドツーエンド開発ワークフロー

結論

TraeのAIアシスタントは、開発ワークフローを大幅に加速できる強力なツールです。最大限に活用するための鍵は：

具体的でコンテキストを提供する
リクエストを反復し、改良する
学習と理解のために使用する
AI提案を自分の専門知識と組み合わせる

AIと一緒に楽しくコーディングしましょう！ 🤖✨

AIチャットアシスタントチュートリアル ​

概要 ​

はじめに ​

AIチャットを開く ​

基本的なAIインタラクション ​

簡単なコードの質問 ​

コード生成 ​

高度なAI機能 ​

コンテキスト認識アシスタンス ​

コードレビューと最適化 ​

デバッグ支援 ​

AI Chat Best Practices ​

1. Be Specific ​

2. Provide Context ​

3. Include Code Snippets ​

4. Ask Follow-up Questions ​

AI-Powered Workflows ​

1. Test-Driven Development ​

2. Code Refactoring ​

Advanced Tips ​

1. Multi-turn Conversations ​

2. Code Explanation ​

3. アーキテクチャディスカッション ​

AIチャットのトラブルシューティング ​

よくある問題 ​

より良い結果を得るために ​

次のステップ ​

結論 ​