1. Claude Codeでの問題解決とサブエージェント機能の紹介 [0]

thumbnail

1.1. コーディング時の一般的な問題点 [0]

  1. 一般的な問題: Claude Codeでウェブサイトの画面変更を試みると、ログイン失敗やデータ未取得などが発生します。

    1. これにより、Claude Codeの会話ウィンドウがすぐに混乱してしまいます [0]。

  2. 解決策の提示: 筆者が発見した新機能で、この問題がすべて解決します [1]。

1.2. サブエージェント機能の概要と利点 [3]

  1. サブエージェントの定義: 専門分野の異なる開発者をチームとして作成する機能です [4]。
  2. 主な利点: 各エージェントが独立した会話を持つため、メインの会話が整理されます [5]。
  3. 実演: 使用方法をすぐに実演します [6]。

1.3. サブエージェントの作成手順（コードレビューア） [7]

  1. エージェント作成の開始: ターミナルで /agents と入力します [7]。
  2. 新規作成: Create New Agent を選択し、プロジェクトレベルに設定します [8]。
  3. テンプレート選択: Generate With Wizard を選択します [8]。
  4. 説明の入力: 「Next.jsとReactに特化したコードレビューア」と入力します [9]。
    1. 専門は「パフォーマンス最適化とバグ発見」です [10]。
  5. ツールの設定: このエージェントにはコード閲覧のみを許可する制限を設定します [11]。
    1. これは監視カメラのように、すべてを監視しますが操作は不可を意味します [12]。
  6. モデルと色の設定: モデルは Sonnet に設定します [13]。
    1. 区別しやすくするため、色は緑色に設定します [14]。
  7. プロンプトの確認: Claudeが生成したエージェント構成プロンプトは適切です [16]。
    1. 変更したい場合は、.Claude/agents/エージェント名.md ファイルを変更します [17]。

1.4. サブエージェントのテストと脆弱性の発見 [18]

  1. テスト実行: 緑色の「Next.js React レビューア」にコードレビューを依頼します [19]。
  2. 作業開始: エージェントが緑色に変わり、作業を開始します [20]。
  3. 脆弱性の発見: SQLインジェクションやクロスサイトスクリプティングなどが発見されました [21]。
    1. 隠れていたバグがカメラに捉えられたように次々と現れます [23]。

1.5. 他の専門エージェントの作成 [24]

  1. バックエンド専門家: 新しいエージェントを作成します [24]。
    1. 専門は「Next.jsサーバーアクションとAPIルート構築」です [25]。
    2. データベース連携と認証システムに熟練していると設定します [25]。
    3. このエージェントにはすべての権限を与えます [25]。
    4. 色はオレンジ色に設定します [26]。
  2. フロントエンド専門家: さらに別のエージェントを作成します [27]。
    1. 専門は「Reactコンポーネント最適化とTailwindスタイリング」です [28]。
    2. 色はシアン色に設定します [28]。

1.6. チーム連携による高速な問題解決 [29]

  1. 連携指示: 3人のエージェントに順に作業を依頼します [30]。
    1. オレンジ（バックエンド）が修正し、シアン（UI）が改善します [30]。
    2. 最後に緑（全体レビュー）が最終確認を行います [30]。
  2. オーケストレーション: 3人が順番に作業を進めます [31]。
    1. まるで完璧に構成されたオーケストラのようです [31]。
  3. 時間短縮: これを一人で行うと数時間かかりますが、わずか5分で完了しました [32]。
  4. 指示方法: @マークで特定の専門家に直接指示できます [33]。
    1. または、メインエージェントが自動でタスクを分配することも可能です [33]。
  5. 感想: まるでチームのリーダーになった気分です [34]。

1.7. まとめと結び [35]

  1. 最終的な利点: もう一人で全てを背負う必要がなくなります [35]。
  2. 視聴者への呼びかけ: 購読といいねでエージェントたちを応援してください [36]。
  3. 終了: 音楽とともにコンテンツが終了します [37]。