1はじめに：やりたいこと別「進め方レシピ」

このページは、料理本の「目的別レシピ集」みたいなものです。「バグを直したい」「新しい機能を足したい」「ぐちゃぐちゃのコードを整理したい」「中身を理解したい」——やりたいことが決まったら、どの順番で・どのコマンドを使うかを、そのままマネできる形で並べました。

まずは下のフローチャート（＝枝分かれする地図）で、自分がどのレシピに進めばいいか確認しましょう。「何をしたい？」から4つの道に分かれています。

flowchart TD
  S["何をしたい？"] --> Q{"目的はどれ？"}
  Q -->|"動きがおかしい"| A["レシピA　バグを直す"]
  Q -->|"新しい部品を足す"| B["レシピB　機能を追加"]
  Q -->|"散らかったコードを整える"| C["レシピC　リファクタ"]
  Q -->|"中身を知りたい"| D["レシピD　コードを読む"]
  A --> E["まずは小さく試す"]
  B --> E
  C --> E
  D --> E
  E["共通のコツへ"] --> F["完成"]
    

2レシピA：バグを直す 初級

「動くはずなのに動かない！」——そんなときの直し方です。コツはいきなり直さないこと。まず「どこが・なぜ」おかしいのかを突き止めてから手を動かします。お医者さんが、薬を出す前にちゃんと診察するのと同じですね。

🪜進める順番（8ステップ）

1. ① まず再現する「どう操作したら、どんな変な結果になるか」を Claude Code に伝えます。再現できないバグは直せないので、ここが出発点です。
2. ② 原因の場所を探すあやしいファイルを @src/ のように @ で指定して「このあたりが原因かも、調べて」と頼みます。@ はファイルパスの補完（＝候補を出してくれる機能）です。
3. ③ 直し方を先に確認する/plan（プランモード）を使って、いきなり書き換えずに「どう直すつもりか」を説明してもらいます。納得してから進めれば安全です。
4. ④ 直してもらう計画にOKを出したら、実際にコードを修正してもらいます。
5. ⑤ テストを実行する! を行頭につけると Bashモード（＝そのままコマンドを実行）になります。例：!npm test でテストを走らせ、直ったか確かめます。
6. ⑥ 変更内容を見る/diff で「どこをどう書き換えたか」の差分（＝前と後のちがい）を確認します。意図しない場所を触っていないかチェック。
7. ⑦ ダメなら巻き戻す直しが間違っていたら Esc+Esc で直前のコード変更を巻き戻せます。やり直しが効くので安心です。
8. ⑧ 巻き戻せることを覚えておくセーブは自動チェックポイント。ダメだったら /rewind でいつでも修正前に戻れます。

# ① 再現と③ 計画を一気に伝える例
ログイン後に画面が真っ白になります。@src/pages/ あたりが原因かも。
まず原因を調べて、/plan でどう直すか先に教えてください。

# ⑤ テストを実行（行頭の ! でそのまま動く）
$ !npm test

# ⑥ 変更差分を確認
/diff

sequenceDiagram
  participant U as あなた
  participant C as ClaudeCode
  participant F as ファイル
  participant T as ターミナル
  U->>C: バグの様子を伝える
  C->>F: あやしい所を読む
  F-->>C: 中身を返す
  C-->>U: 原因と直し方の計画
  U->>C: この計画でOK
  C->>F: コードを直す
  U->>T: テストを実行
  T-->>U: 結果（合格か不合格か）
  Note over U,C: ダメなら Esc Esc で巻き戻し
  Note over U,C: セーブは自動（チェックポイント）
    

3レシピB：新しい機能を追加する 中級

「ボタンを増やしたい」「検索機能をつけたい」など、新しいものを作るレシピです。バグ直しよりも変更が大きくなりがちなので、作業を別の部屋（＝隔離環境）に分けて、本番を汚さずに進めるのがコツです。

🪜進める順番（7ステップ）

1. ① やりたいことをはっきり伝える「誰が・何を・どうできるようにしたいか」を具体的に。例：「ユーザーが投稿を検索できる窓を、トップ画面の上につけたい」。あいまいだと迷子になります。
2. ② 計画を立ててもらう/plan で全体の段取りを先に確認。大きな機能ほど、設計図を見てから着工するのが安全です。
3. ③ （任意）隔離環境を用意する-w（--worktree）を使うと、本番と切り離した作業環境で進められます。実験が失敗しても本番は無傷です。
4. ④ 実装してもらう計画どおりにコードを書いてもらいます。一気にではなく、小さなまとまりごとに進めると確認しやすいです。
5. ⑤ テストする! でテストや実行コマンドを走らせ、ちゃんと動くか確認します。
6. ⑥ 安全チェックをする/security-review で、追加したコードに危ない穴（＝脆弱性）がないか点検してもらいます。新機能は外から攻撃されやすいので大切です。
7. ⑦ 確認して保存・コミット/diff で最終確認したら、!git add や !git commit で記録（＝コミット）して完成です。

# ③ 隔離した作業環境で起動する例
$ claude --worktree

# ⑥ 追加したコードの安全チェック
/security-review

# ⑦ 動いたら記録する
$ !git add .
$ !git commit -m "検索機能を追加"

sequenceDiagram
  participant U as あなた
  participant C as ClaudeCode
  participant F as ファイル
  participant G as Git
  U->>C: 作りたい機能を具体的に伝える
  C-->>U: 計画（plan）を提示
  U->>C: 隔離環境で進めて
  C->>F: 新しいコードを書く
  U->>C: テストして安全チェックして
  C-->>U: テスト結果とレビュー結果
  U->>G: 確認できたらコミット
  G-->>U: 記録が残った
    

4レシピC：コードを整理する（リファクタ） 中級

リファクタ（＝動きは変えずに、中身をきれいに整えること）のレシピです。部屋の模様替えに似ていて、一気に全部動かすと何がどこにあるか分からなくなるのが落とし穴。だから「小さく刻んで、一歩ごとに確認」が鉄則です。

🪜進める順番（4ステップ）

1. ① 安全地点は自動で確保チェックポイントはお願いごとに自動保存。整理前の状態へは /rewind でいつでも戻れます。模様替え前の写真は自動で撮られているイメージ。
2. ② 小さく刻んで依頼する「この関数だけ名前を分かりやすく」「この1ファイルだけ重複を消して」のように、1回の依頼を小さく区切ります。
3. ③ 1ステップごとに確認1つ直すたびに /diff で差分を見て、テストも回します。「壊れていないこと」を確認してから次へ進みます。
4. ④ 壊れたら戻すもし動かなくなったら Esc+Esc や /rewind で戻します。お願いごとに自動で作られたチェックポイントから、整理前の地点を選んで戻せば、いつでもやり直せます（/checkpoint も /rewind の別名です）。

# ① セーブは自動チェックポイント。戻りたいときは
/rewind

# ② 小さく刻んで依頼（1回1つだけ！）
@src/utils.js の中で、同じ処理が2回書いてある部分を
1つの関数にまとめてください。動きは変えないでね。

# ③ すぐに差分を確認
/diff

flowchart TD
  S["安全地点は自動で保存"] --> A["小さく1つだけ直す"]
  A --> B["diff とテストで確認"]
  B --> C{"動いてる？"}
  C -->|"はい"| D{"まだ整理する？"}
  C -->|"いいえ"| E["Esc Esc で戻す"]
  E --> A
  D -->|"はい"| A
  D -->|"いいえ"| F["整理おわり"]
    

5レシピD：コードベースを理解する（探検） 初級

「この大きなプロジェクト、何がどうなってるの？」を知るためのレシピです。ポイントは編集せずに、読むだけ。観光地をまず歩いて回って地図を頭に入れる感覚です。手を加えないので、こわさはゼロです。

🔭探検のやり方

1. ① 見たい範囲を広げる起動時に --add-dir、あとからなら /add-dir で、参照できるフォルダ（＝見てよい範囲）を追加します。関連するコードもまとめて読めるようになります。
2. ② 読むだけモードにする/plan（プランモード）にしておくと、Claude Code は「読む・考える・提案する」までで、勝手にファイルを書き換えません。探検にぴったりの安全モードです。
3. ③ 素朴な質問をする「ログインの処理はどのファイル？」「このプロジェクトは何をするもの？」と、知りたいことをそのまま聞きます。
4. ④ 脇道は /btw で聞く本題とは別のちょっとした疑問は /btw で質問。これは履歴に残らないので、メインの会話の流れを汚さずに済みます（btw＝by the way＝「ところで」）。

# ① 見られる範囲を追加して起動
$ claude --add-dir ../shared-library

# ② 読むだけの安全モードに
/plan

# ③ 素朴に質問
このプロジェクトの全体像を、初心者向けに3行で教えて。
ログイン処理はどのファイルにありますか？

# ④ 脇道の疑問は履歴を汚さず聞く
/btw ところで package.json って何のファイル？

sequenceDiagram
  participant U as あなた
  participant C as ClaudeCode
  participant F as ファイル
  U->>C: add-dir で見る範囲を広げる
  U->>C: plan で読むだけモードに
  U->>C: 全体像を教えて
  C->>F: 関係するファイルを読む
  F-->>C: 中身を返す
  C-->>U: わかりやすく要約
  U->>C: btw で脇道の質問
  C-->>U: 履歴を汚さず答える
  Note over U,F: ファイルは一切書き換えない
    

64つのレシピ早見表

どのレシピで何を使うか、ひと目で見比べられる表にまとめました。迷ったらここを見て、自分の目的の行をたどってください。

7全レシピ共通のコツ

どのレシピでも効く「魔法の4か条」です。この4つを守るだけで、作業の安全度と成功率がぐっと上がります。困ったときはこのページに戻って唱えてください。

🧭困ったときのお守りコマンド