Claude codeでworktreeを使いこなす

-- Views

November 11, 26

スライド概要

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

各ページのテキスト
1.

Claude Code で worktree を使いこなす

2.

自己紹介 富永 青 / NCDC株式会社 主にフロントエンド、ときどきバックエンドも担当 AIツールは主にClaudeデスクトップアプリを使用 趣味はゲーム全般 最近はFallout76をプレイ中 Claude Code で worktree を使いこなす 2

3.

並行開発でこういうことありませんか Claude で変更した差分を VS Code やブラウザで確認 ↓ 差分が見つからない ↓ ブランチが変わっていないことに気づく ↓ なぜかエラーでブランチが切り替えられない Claude Code で worktree を使いこなす 3

4.

この発表のゴール AIエージェントの並行開発でローカル確認を楽にしたい まず、こうなる原因を探る Claude Code で worktree を使いこなす 4

5.

.claude/worktrees/ を開いてみる 編集されていたのはここ エラーに出ていたパスを辿ると .claude/worktrees/ に 行き着く 開くと、見覚えのないディレクトリが7つ並んでいる 自分が見ていたのは親。Claude が触っていたのはこの中 Claude Code で worktree を使いこなす 5

6.

.claude/worktrees/ の正体 正体は Git の標準機能「git worktree」 Claude は git worktree add でこのディレクトリを作っている git worktree list を叩くと、作成されたワークツリーが並ぶ 作成と自動削除をアプリが代行しているだけ さっきの7つも全部 worktree。放っておくと溜まる(掃除は後半で) Claude Code で worktree を使いこなす 6

7.

1リポジトリ・複数ディレクトリ が共有だから、同じブランチは2 箇所で開けない .git worktree はフォルダをもう1つ作るので、両方を同時に開 ける でもコピーではない。履歴もブランチも1つを共有している だから2箇所で同じブランチは掴めない。 Claude Code で worktree を使いこなす 7

8.

git worktree でできること できること 作る ブランチを指定してフォルダを増やす 見る いくつあるか、どのブランチかを一覧する 消す 使い終わったフォルダを片付ける Claude Code で worktree を使いこなす コマンド git worktree add <path> -b <branch> git worktree list git worktree remove <path> 8

9.

共有されるもの、されないもの gitignoreに登録されたものは共有されない 共有される 共有されない コミット・ブランチ・タグ .env リモート設定・フック設定 node_modules が来ないので環境変数が読めず、起動しない node_modules が来ないので依存が見つからない 自動生成された worktree でも同じ。Git の制約は越えられない エージェントはこれを知らないので、延々と .env を探し始めたりする .env Claude Code で worktree を使いこなす 9

10.

解決法 1 worktree をやめる Claude Code で worktree を使いこなす 10

11.

並行で走らせないなら、worktree はやめていい .claude/settings.json { "worktree": { "bgIsolation": "none" } } メリット ここまでの問題が全部起きない 覚えることがゼロ Claude Code で worktree を使いこなす デメリット 並行作業ができない 11

12.

解決法 2 親からgit switch --detach して確認する Claude Code で worktree を使いこなす 12

13.

worktree で書いて親で確認する ・ node_modules ・DB が揃っているのは親だけ worktree 側で環境を整えるより、確認を親に寄せる方が早い worktree は編集専用。サーバーは立てない .env Claude Code で worktree を使いこなす 13

14.

detach とは ブランチを経由せず、コミットを直接見る状態 通常 detached HEAD ──▶ feat-login ──▶ a1b2c3d HEAD ─────────────────▶ a1b2c3d 見えるファイルはどちらも同じ。違うのは HEAD の指し先だけ ブランチを掴まないので、worktree と取り合いにならない # ブランチ名を渡すと、その最新コミットを開く $ git switch --detach feat-login HEAD is now at a1b2c3d ログイン画面を追加 # 特定のコミットを見たいときはハッシュを渡す $ git switch --detach 9f8e7d6 Claude Code で worktree を使いこなす 14

15.

Claude の指示とスキルでコントロールする 指示 — CLAUDE.md - 作業は worktree 側で行う - 作業用 worktree ではサーバーを起動しない - 動作確認は親で `git switch --detach <ブランチ>` してから スキル — /peek 使い方 /peek /peek feat-login /peek 1234 中でやっていること 作業中のブランチ 指定したブランチ PR番号 1. 親の未コミット変更を確認 2. switch --detach で切り替え 3. 依存とDBに差分があれば更新 4. 見ているコミットを報告 コミットのたびに /peek を叩き直せば、画面が最新になる Claude Code で worktree を使いこなす 15

16.

メリット エージェントが作業中のブランチを、作業を止めず に親で動かして見られる 並行開発しつつ、確認環境は親の1つだけで済む Claude Code で worktree を使いこなす デメリット 手で直したら、コミットして /peek し直す (保存しただけでは親に出てこない) 親で編集してもコミットできない。 どのブランチにも乗らず迷子になる VS Code ではどのブランチを見ているか分かりにく い (detached はハッシュ表示になる) 16

17.

おまけ 掃除はスケジュールタスクに任せる worktreeが増えていくとストレージを圧迫していく ブランチの整理と合わせてスケジュールタスクでやるのがおすすめ マージ済みの worktree を、ブランチごと整理して。 最終コミット時刻つきで一覧を出してから消す。 削除は git worktree remove と git branch -d だけ使う(--force と -D は禁止)。 Claude Code で worktree を使いこなす 17

18.

まとめ 1. 並行で走らせると、エージェントは git worktree を作る 2. detach はコミット単位で切り替える。 ブランチを掴まないので競合せず、worktreeと相性がいい 3. worktree の管理も detach も、エージェントに任せよう Claude Code で worktree を使いこなす 18