開発環境ガイド

Claude Codeで開発する

調べる→計画する→作る→確かめる

Claude Codeに任せるときの、失敗しにくい進め方です。

Claude Code にいきなり「作って」と頼むと、目的とずれたものができる ことがあります。次の4段階で進めると、やり直しが減ります。

4つの段階

段階やること権限モード
1. 調べる関係するファイルを読んで、現状を理解してもらうplan
2. 計画するどのファイルをどう変えるか、計画を書いてもらうplan
3. 作る計画に沿って実装してもらう通常
4. 確かめるテストやビルドで動作を確認し、コミットする通常

1. 調べる

計画モードで始めます。起動時に指定するか、起動後に Shift + Tab で plan mode にします。

claude --permission-mode plan
src/auth の中を読んで、ログインとセッションの扱いを理解してください。
環境変数でパスワードなどを管理している方法も見てください。

計画モードでは、ファイルは変更されません。

2. 計画する

Googleでのログインを追加したいです。どのファイルを変える必要がありますか?
流れも含めて、計画を作ってください。

出てきた計画を読み、おかしいところは直してもらいます。Ctrl + G を押すと、計画をエディタで直接編集できます。

3. 作る

計画に納得できたら、計画モードを抜けて(承認する、または Shift + Tab)、実装を頼みます。

計画のとおりに実装してください。実装したらテストを実行して、失敗したら直してください。

4. 確かめる・記録する

変更内容を確認して、わかりやすいメッセージでコミットしてください

変更が小さいとき(誤字の修正、変数名の変更など)は、計画を飛ばして、直接頼んでかまいません。「変更内容を1文で説明できる」なら、計画は不要です。

「確かめる方法」を最初に渡す

いちばん効果が大きいのは、Claude Code が自分で正しさを確認できる方法を渡す ことです。確認する方法があれば、Claude Code は「作る→確認→直す」を、自分で繰り返せます。

渡すもの頼み方の例
テスト「実装したら、テストを実行して、通るまで直して」
ビルド「直したら npm run build を実行して、エラーが出ないことを確認して」
期待する結果「user@example.com は有効、user@.com は無効になるようにして。例で確認して」
画面「このデザインに近づけて。結果のスクリーンショットを撮って、違いを直して」

確認できない変更は、公開しないでください。Claude Code は、それらしく見えるコードを、エッジケース(まれな条件)を考えずに出すことがあります。テストや実行結果という 証拠 を見せてもらい、自分でも確認してください。

指示を具体的にする

方針悪い例良い例
対象を絞る「foo.py のテストを書いて」「ログアウト中の場合を対象に、foo.py のテストを書いて」
見本を示す「カレンダーを追加して」「HomeWidget と同じ作りで、カレンダーを追加して」
症状を伝える「ログインを直して」「セッション切れのあと、ログインに失敗する。src/auth/ のトークン更新を調べて、失敗するテストを書いてから直して」

大きな機能は「インタビュー」から始める

作りたいものがまだぼんやりしているときは、Claude Code に質問してもらいます。

[作りたいもの]を作りたいです。細かい点を、私に質問してください。
画面、データの扱い、例外の場合、迷いそうな点を聞いてください。
聞き終えたら、仕様をSPEC.mdに書いてください。

仕様ができたら、/clear で会話をリセットして、SPEC.md を読ませて実装を始めます。

失敗しやすいパターン

  • 会話が散らかる: 1つの会話で、関係のない作業を次々に頼む → /clear でリセットする
  • 直しを繰り返す: 2回直しても直らない → /clear して、分かったことを含めて頼み直す
  • CLAUDE.md が長すぎる: 大事なルールが埋もれる → 不要な行を削る
  • 調べ物が大きすぎる: 「全部調べて」と頼む → 範囲を絞る

確認する

  • 計画モードで調べてもらい、計画を読んでから実装に進んだ
  • 確認する方法(テストやビルド)を、頼むときに伝えた
  • 変更をコミットする前に、内容を自分でも見た

参考

Esc で閉じます