俺が3人分になる... おすすめのClaudeCodeを使った開発環境構築方法・使用例

はじめに

Claude Codeの新機能であるHooksとSubagentsを使って、3人分以上の馬力を出せる開発環境構築方法を記事にしてみました。
HooksでCIを実行し、Subagentsに専門的なタスクを任せるという形となります。

Hooks

Hooksとは

Claude Codeの特定のアクションのタイミングで、任意の処理を実行することができる機能です。

設定方法

settings.json内に、記述ルールに従って記載することで実行されるようになります。
settings.jsonは下記の場所のどれかに配置する必要があります。

• ~/.claude/settings.json
  PC全体の設定（個人開発だと、ここに配置して記述することでどのプロジェクトでも同じ設定が使えます）
• プロジェクトフォルダ/.claude/settings.json
  プロジェクトの設定（基本ここで良いと思います）
• プロジェクトフォルダ/.claude/settings.local.json
  コミットしないユーザーのローカル設定

記述方法

settings.jsonに、

{
  "hooks": {
    "イベント名": [
      {
        "matcher": "PreToolUseとPostToolUse時のみ設定",
        "hooks": [
          {
            "type": "command",
            "command": "your-command-here"
          }
        ]
      }
    ]
  }
}

CI構築

一つ目のコマンドでファイルのフォーマット、二つ目のコマンドでLinterのルールに基づきファイル修正を行っています。
適宜、ご自身の開発言語に応じて、コマンドを変更してください。

{
  "hooks": {
    "PostToolUse": [{
      "matcher": "Write|Edit|MultiEdit",
      "hooks": [{
        "type": "command",
        "command": "fvm dart format lib"
      }, {
        "type": "command",
        "command": "fvm dart fix --apply"
      }]
    }]
  }
}

Subagents

Subagentsとは、特定のタスクに特化して作業を任せることができる機能です。
メインの会話とは、独立したコンテキストで動作するので、コードレビューやテストといった目的で使うと、より客観的にレビュー、テストができるようになります。

設定方法

• ClaudeCodeを起動し、以下のコマンドを実行する

/agents

• Create new agentを選択

• Projectsを選択(お好みで)

• Generate with claudeを選択

• プロンプトを入力する

• Continueを選択(お好みで)

• Sonnetを選択(お好みで)

• 好きな色を選択(お好みで)

• Enterで保存

使用したプロンプト

今後、ベストプラクティス的なプロンプトが出てくると思います。
公式でも例がありました。

私は、以下のプロンプトを使用しました。

コードレビュー用

あなたはFlutterを中心としたモバイルアプリ開発の専門家です。
以下のコードをレビューしてください。

レビュー観点：
1. Dart/Flutterのベストプラクティスに沿っているか
2. 可読性（変数名・関数名・Widget構造）
3. 再利用性（Widget分割や状態管理の適切性）
4. パフォーマンス（不要なrebuild、無駄な処理）
5. セキュリティ（ユーザー入力の扱いなど）
6. 保守性と拡張性（将来的に規模が大きくなった場合の問題点）

改善点は箇条書きで指摘し、可能であれば修正例のコードも提示してください。

要件定義、設計用

あなたはシステム開発の要件定義から設計、タスク分解まで行うエキスパートアシスタントです。  
ただし、与えられた情報に不明点や曖昧さがある場合は、必ず質問をしてください。  

出力は必ず「ファイル単位」で提示してください。  

進め方のルール:
1. まず「現時点での理解」と「不明点リスト」を提示してください。  
   - 不明点は具体的な質問として列挙してください。  

2. 不明点が解消されたら、以下のファイルを生成してください。  

**ファイル構成**
- `requirements.md` : 要件定義  
- `design/screen_design.md` : 画面設計  
- `design/feature_design.md` : 機能設計  
- `design/data_design.md` : データ設計  
- `design/system_architecture.md` : システム構成設計  
- `tasks/◯◯.md` : 機能ごとのタスク分解  

3. タスクファイルは機能ごとに分割し、各タスクに以下の情報を記載してください。  
   - タスク名  
   - やること
   - 完了条件 

使用例

一連の開発を通して、使用例を記載します。

要件定義、設計、タスクの作成

system-dev-analystの部分はご自身のエージェント名を指定してください。

XXXをするアプリを作ります。
Flutterを使用して開発します。
system-dev-analystを使用して、要件定義、設計、タスクの作成をしてください。
日本語で出力してください。

上記のような感じで、入力すると、いくつか質問されるので、質問に答えて、ドキュメントを作成してもらいます。

タスクを実行

作成したタスクごとにタスクを実行します。

XXXを実行してください。

実行ごとに、Hooksが実行され、フォーマットとリンターでコードの品質が保たれます。

レビュー

タスクが終わったら、作成したレビュー用エージェントでレビューします。

flutter-code-reviewerを使って、レビューしてください。

修正

###　繰り返す
あとはタスクごとに繰り返していくだけです。

おわりに

Subagentsを使った方がより詳細な質問やレビューをしてくれるような感じでした。