2026-05-21

🔗概要

• 基本 CLI で動かしたほうがいいかもしれない

🔗目次

• 優先して覚えるべきこと
• ディレクトリ構造
• サブエージェント
  • • 実用的な例
    • トイプロブレム
• ツールの整理
• 既知の問題
• ブラウザ操作方法
  • • 1. Claude Code (CLI) から操作させる方法
    • 2. VS Code 拡張機能 (Cline 等) から操作させる方法
• yolo mode
• 並列エージェント処理
  • サブエージェント
  • エージェントチーム
• VSCode
  • 通常のフォルダを開く場合
  • .code-workspace ファイルを使う場合（Multi-root workspace）
  • フォルダ単体との違い
  • 設定の階層

🔗優先して覚えるべきこと

• claude agentsで Agent View を起動する
  • 全プロジェクトの中のセッションの部分集合を管理できる

ご指定の通り、ピン留めとリネームの行を分け、プロジェクト追加の操作場所を追記して表を修正しました。

• /batch

  • コードベースを調査し、作業を 5 ～ 30 個の独立したユニットに分解し、計画を提示します。
  • /batch migrate src/ from Solid to React など

• どこで起動するかが大事。VSCode だと、File > New Window すると複数のディレクトリを別の Windowで起動できる

  • ~/.claude/projects/ 配下に、プロジェクトパスをハイフン区切りにしたフォルダ名で保存される。例: /home/hamko → -home-hamko
  • CLI と VSCode 拡張は、同じ ~/.claude/projects/ を共有する。セッションは起動時のカレントディレクトリ（ワークスペースパス）に紐づく**

• /resume で同じプロジェクト内の、他の会話に移動。Terminal でも VSCode でも同様。

  • /resume はカレントディレクトリに対応するフォルダのセッションのみ表示する（重要。他のプロジェクト＝ディレクトリは表示しない）

• コードブロックに入れて、と言わないと Terminal, VSCode の両方でマークダウン出力・コピーができない（VSCode の場合ワンクリックコピーボタンはコードブロックのみサポート）

• 2026-05-21 Opus 4.7 xhigh が推奨

🔗ディレクトリ構造

global

~/.claude/
├── CLAUDE.md              # グローバル指示書（全プロジェクト共通）
├── settings.json          # グローバル設定（権限・モデル・effort・hooks）
├── settings.local.json    # 個人ローカル設定（gitと無関係）
├── agents/                # カスタムサブエージェント（要自作）
│   └── <name>.md
├── skills/                # カスタムスキル（要自作）
│   └── <name>/
│       └── SKILL.md
├── commands/              # カスタムスラッシュコマンド（要自作）
│   └── <name>.md
├── memory/                # 自動メモリ（user/feedback/project/reference）
│   ├── MEMORY.md          # インデックス
│   └── <name>.md
├── projects/              # セッション履歴
├── plugins/               # プラグイン
└── backups/, cache/, sessions/ 等

project (実質ディレクトリ)

<project-root>/
├── CLAUDE.md                   # プロジェクト指示書（チームで共有・gitコミット）
└── .claude/
    ├── settings.json           # プロジェクト設定（gitコミットする）
    ├── settings.local.json     # 個人専用（.gitignoreに入れる）
    ├── agents/<name>.md        # プロジェクト専用エージェント
    ├── skills/<name>/SKILL.md  # プロジェクト専用スキル
    └── commands/<name>.md      # プロジェクト専用コマンド

🔗サブエージェント

🔗実用的な例

~/.claude/agents/code-reviewer.md または <project>/.claude/agents/code-reviewer.md のようなものを作れる。例: Agent(subagent_type="code-reviewer", ...) が使えるようになる。

---
name: code-reviewer
description: 変更されたコードのレビューに使う。本番事故を防ぐ視点で厳しめに指摘。
tools: Read, Grep, Bash
model: opus
---

あなたはシニアレビュアーです。以下の観点でレビューしてください：
- セキュリティ（OWASP Top 10）
- エラーハンドリング漏れ
- 後方互換性
- テストカバレッジ
報告は重要度（Critical/Warning/Nit）で分類して。

Agent(subagent_type="code-reviewer", ...) が使えるようになる。

🔗トイプロブレム

---
name: google-top
description: テスト用。キーワードを渡すと Google 検索を行い、検索結果のトップ1件を要約して返す。動作確認・サブエージェント呼び出しのデモ用途。
tools: WebSearch, WebFetch
model: sonnet
---

あなたはキーワードを受け取り、Google 検索のトップ結果を要約して返す軽量エージェントです。

## 手順
1. ユーザーから渡されたキーワードで `WebSearch` を実行する
2. 検索結果の **1位** のページの URL とタイトルを特定する
3. 必要であれば `WebFetch` でそのページを取得する
4. 以下のフォーマットで日本語で報告する

## 出力フォーマット
```
🔎 検索キーワード: <keyword>
📌 トップ結果: <タイトル>
🔗 URL: <url>

📝 要約（200字以内）:
<本文の要約>
```

## 制約
- 報告は必ず 1 件のみ。複数列挙しない
- 要約は 200 字以内
- 検索結果が取得できなければその旨を素直に報告する
- 余計な前置き・後置きは書かない

• Agent: が呼び出されていることがわかる。

日本で最も多い苗字のベスト10は、1位「佐藤」、2位「鈴木」、3位「高橋」、4位「田中」、5位「伊藤」、6位「渡辺」、7位「山本」、8位「中村」、9位「小林」、10位「加藤」です。それぞれに対してagentを並列で動作させて

• Agent: と Web Searchの順序がバラバラなので、しっかり裏側でも並列処理できていることがわかる。

🔗ツールの整理

🔗既知の問題

• VSCode + Claude + Claude in Chrome は動作しない 2026-05-21

  • https://github.com/anthropics/claude-code/issues/50423
  • Linux 環境で VS Code パネル内の browser tools が一切ロードされない、/mcp に claude-in-chrome が出ない、という完全に同じ症状
  • https://github.com/anthropics/claude-code/issues/18825
  • /chrome コマンドが VS Code に存在しない

• セッション単位の削除ができない

  • 削除するならプロジェクト全体の削除 claude project purge（プロジェクト単位の一括削除のみ）
  • 一応、rm ~/.claude/projects/-home-hamko/hoge.jsonl のようにすればできなくはないが、裏側を触っているのでちょっと怖いね

🔗ブラウザ操作方法

🔗1. Claude Code (CLI) から操作させる方法

• Claude in Chrome (Chrome拡張機能連携):

  1. 公式の Chrome 拡張機能「Claude in Chrome」をインストールする。
  2. ターミナルで claude --chrome を実行するか、対話セッション中に /chrome コマンドを実行する。
  3. これにより、ユーザーの既存のブラウザセッション（ログイン状態など）を引き継いだ状態で、Claude が実画面のブラウザを直接操作・テスト・DOM検査できる。

• Playwright MCP サーバー連携 (ヘッドレス/自動化):

  1. Playwright MCP サーバー（@anthropic-ai/playwright-mcp など）をインストールし、設定ファイル（~/.claude.json）に登録する。
  2. セッション中に「〜のサイトからデータを抽出して」等の指示を与える。
  3. Claude は背後で Playwright を呼び出し、DOM 解析やスクレイピングなどの操作を自動で実行する。

🔗2. VS Code 拡張機能 (Cline 等) から操作させる方法

• 内蔵のブラウザ操作機能 (Puppeteer連携):
  • Cline などの主要なエージェント拡張機能には、ブラウザ操作ツールが標準で組み込まれている（Claude 3.5 Sonnet 等の Computer Use に対応）。
  • 指示（例: 「npm run dev でローカルサーバーを起動し、ブラウザで動作確認してバグを直して」）を与えるだけで、エージェントが自動でブラウザ（Puppeteer）を起動し、スクリーンショットやコンソールログを取得して自己検証を行う。
• MCP サーバーの追加:
  • Cline の設定画面で Playwright 等の MCP サーバーを登録することで、標準機能以外の高度なブラウザ操作を実行させることも可能。

🔗yolo mode

1. VS Code の設定画面を開く（ショートカット: Ctrl + ,）。
2. 設定の検索バーに Claude Code または permissions と入力する。
3. Extensions > Claude Code の項目内にある以下の設定を変更する。
   • Allow Dangerously Skip Permissions: チェックボックスにチェックを入れる。
   • Initial Permission Mode: ドロップダウンリストの値を default から bypassPermissions に変更する。
4. 設定を適用するため、起動している Claude Code のチャットセッションを一度閉じて再起動する。

🔗並列エージェント処理

• サブエージェントとエージェントチームがある。
  • サブエージェントは木構造、エージェントチームは完全グラフのイメージ。

🔗サブエージェント

• 以下みたいなのがいいんだろうなという予想

• worktree は git の標準機能

  • Claude の用語ではありません。git worktree は git に元から備わっている機能で、1つのリポジトリから複数の作業ディレクトリを生やせる仕組み
  • 通常 git checkout はブランチを切り替えると作業ディレクトリが上書きされますが、worktree を使うと別ディレクトリに同時に複数のブランチを展開できます。クローンを複数作るより軽量、というだけのもの。Claude とは無関係に昔からある

リポジトリ (.git)
  ├── /path/to/main         ← ブランチA をチェックアウト
  ├── /path/to/feature-1    ← ブランチB をチェックアウト（別ディレクトリ）
  └── /path/to/feature-2    ← ブランチC をチェックアウト（別ディレクトリ）

• 作業を DAG にして分割。何が終わってて何が終わってないのか
  • 同時並行して可能な作業を定期的に確認して作業開始
• ブランチごとに編集するディレクトリやファイルを MECE に分割
• 分割したものごとにサブエージェントで起動

親Claude
  ├─ Agent(prompt="task1をやって", cwd=/wt/task1)  ┐
  ├─ Agent(prompt="task2をやって", cwd=/wt/task2)  ├─ 並列実行
  └─ Agent(prompt="task3をやって", cwd=/wt/task3)  ┘

• 完成した PR を共通基盤系のものから順にマージしていく

🔗エージェントチーム

-　1 つのセッションがチームリーダーとして機能し、作業を調整し、タスクを割り当て、結果を統合します。チームメンバーは独立して動作し、それぞれ独自のコンテキストウィンドウで作業し、互いに直接通信

• https://dev.classmethod.jp/articles/claude-code-agent-teams-how-to-build/ を見る限り、エージェントの定義から作成まで全部やってくれているように見える。

🔗VSCode

要するに「複数フォルダ + 設定の束ね役」がworkspaceの本質で、単一フォルダ時は実質意識しなくてOK。

• 主な使いどころ
  • frontend/backend/sharedを横断して検索・編集
  • 別ディレクトリにあるライブラリと本体を同時に開く

🔗通常のフォルダを開く場合

VS Codeでフォルダを開くと「Single-folder workspace」になります。設定は .vscode/settings.json に保存され、そのフォルダ単体が作業対象です。

🔗.code-workspace ファイルを使う場合（Multi-root workspace）

*.code-workspace というJSONファイルを作ると、複数のフォルダを1つのワークスペースとしてまとめて開けるようになります。これが「ただのフォルダ」との一番の違いです。

例：

{
  "folders": [
    { "path": "frontend" },
    { "path": "backend" },
    { "path": "../shared-libs" }  // 親階層も指定可能
  ],
  "settings": {
    "editor.tabSize": 2
  },
  "extensions": {
    "recommendations": ["dbaeumer.vscode-eslint"]
  },
  "launch": { /* デバッグ設定 */ },
  "tasks":  { /* タスク設定 */ }
}

🔗フォルダ単体との違い

🔗設定の階層

User Settings (グローバル)
    ↓ 上書き
Workspace Settings (.code-workspace内 or .vscode/)
    ↓ 上書き
Folder Settings (multi-rootの各フォルダ.vscode/)