Claude Codeで効率的にコーディングする方法

# 1週間Claude Codeでコーディングしてみた——実際に効果があったこと

先週の火曜日、私は壁にぶつかりました。引き継いだReact Nativeプロジェクトの47ファイルにわたって「型'undefined'は型'string'に割り当てられません」というTypeScriptエラーを凝視していました。前任の開発者はテストもコメントも残さず、6層ものpropsを通して`undefined`をまるで熱いジャガイモのように渡していました。私のいつものアプローチ——grepで検索、1ファイル修正、繰り返し——では2日かかるところでした。

ターミナルを開き、`claude code`と入力し、それが4分足らずでpropsの型付け全体を書き換えるのを見守りました。7ファイルが変更されました。ゼロのリグレッション（確認済み）。その瞬間、私はClaude Codeをおもちゃとして扱うのをやめ、決して眠らないシニア開発者のように使い始めました。

これが私の実際の使い方、問題点、そして注意しないと時間を無駄にするポイントです。

## Claude Codeの正体

Claude CodeはAnthropic製のターミナルベースのコーディングエージェントです。既存のプロジェクトディレクトリ内で動作し、ファイルを読み取り、直接編集できます。CursorやGitHub Copilotのチャットとは異なり、ファイルシステム上で動作し、`git commit`、テスト実行、さらには会話の途中で`npm install`による依存関係のインストールまで可能です。

macOS（Apple Silicon）でテストしましたが、LinuxやWSL2経由のWindowsでも動作します。インストールは1行です：

```bash

npm install -g @anthropic-ai/claude-code

```

その後、APIキーで認証します。有料のAnthropicアカウントが必要です——無料ティアではおもちゃのプロジェクト以外は対応できません。

## 時間を節約したセットアップ

Claudeに何かを依頼する前に、プロジェクトルートでこれを実行します：

```bash

claude code

```

これでインタラクティブセッションが開きます。最初に行うのはコンテキストを与えることです：

```

私はTypeScriptを使用したReact Nativeアプリを開発しています。プロジェクトは以下を使用しています：

- React Navigation v6

- 状態管理にRedux Toolkit

- テストにJest + React Native Testing Library

- 現在リンター未設定

package.jsonとtsconfig.jsonを読み、プロジェクトについて理解したことを教えてください。

```

これが重要です。Claude Codeはプロジェクト構造をスキャンし、セッション中に記憶します。活発な会話で約20～30分ほどコンテキストを保持し、その後ファイルパスを忘れ始めることがわかりました。複雑な作業をしている場合は、1時間ごとにセッションを再開してください。

## 実例：乱雑なコンポーネントのリファクタリング

ここでClaude Codeが真価を発揮します。800行にも及ぶ`UserProfile`コンポーネントがあり、API呼び出し、フォーム状態、レンダリングが混在していました。次のプロンプトを与えました：

```

src/components内で300行を超えるすべてのコンポーネントを見つけてください。

それぞれについて、以下に分割するリファクタリング計画を提案してください：

- ロジック用のカスタムフック

- レンダリング用のプレゼンテーションコンポーネント

- 同じ公開API（propsインターフェース）を維持

計画をREFACTOR.mdに書き、変更を加える前に私に確認を求めてください。

```

Claude Codeはディレクトリ内のすべての`.tsx`ファイルを読み、3つの肥大化したコンポーネントを特定し、詳細な計画を作成しました。その後、続行の許可を求めました。承諾すると、以下の処理を実行しました：

1. すべての状態ロジックを含む`useUserProfile.ts`を作成

2. JSXのみの`UserProfileView.tsx`を作成

3. 元の`UserProfile.tsx`を更新して両方を合成

4. `npx tsc --noEmit`を実行して型エラーをチェック

5. 差分を表示

全体で約90秒かかりました。差分は次のようになりました：

```diff

- const UserProfile: React.FC<UserProfileProps> = ({ userId, onError }) => {

- const [user, setUser] = useState<User | null>(null);

- const [loading, setLoading] = useState(true);

- const [error, setError] = useState<string | null>(null);

-

- useEffect(() => {

- fetchUser(userId).then(setUser).catch(setError).finally(() => setLoading(false));

- }, [userId]);

-

- // 200行以上のレンダリング...

- }

+ const UserProfile: React.FC<UserProfileProps> = (props) => {

+ const { user, loading, error } = useUserProfile(props.userId);

+ return <UserProfileView user={user} loading={loading} error={error} onError={props.onError} />;

+ }

```

## 問題点とその修正方法

これまでに3つの厳しい制限に直面しました。

**1. ファイルパスを幻覚することがあります。** 「authミドルウェアを更新して」と依頼したところ、実際のファイルが`server/middleware/auth.js`にあるのに`src/middleware/auth.ts`を作成しました。対策：プロンプトでは常に完全な相対パスを指定してください。

**2. 循環依存関係を処理できません。** 循環インポートのあるモジュールのリファクタリングを依頼したところ、コンパイルできないファイルが作成されました。エラーメッセージも不可解でした。対策：リファクタリングを依頼する前に`npx madge --circular src/`を実行し、循環について事前にClaudeに伝えてください。

**3. テストファイルを忘れます。** 「APIクライアントにエラーハンドリングを追加して」と依頼したところ、ソースファイルは更新されましたが、対応するテストファイルは変更されませんでした。テストを実行すると、モックデータが新しい型と一致せず失敗しました。対策：「テストファイル`src/__tests__/api.test.ts`も一致するように更新して」と明示的に指定してください。

## 決して失敗しないプロンプトパターン

何十ものセッションを経て、90%の確率で機能する構造に落ち着きました：

```

コンテキスト：[プロジェクトについて1文]

タスク：[何をするか1文]

制約：[絶対にやってはいけないことのリスト]

検証方法：[動作確認方法]

```

例：

```

コンテキスト：これはPrisma ORMを使用したExpress.js APIです。

タスク：GET /usersエンドポイントにページネーションを追加してください。`cursor`と`take`クエリパラメータを使用したカーソルベースのページネーションにしてください。

制約：

- 既存のレスポンス形状を変更しないでください——`cursor`と`hasMore`フィールドを追加してください

- 既存のエラーハンドリングパターンを維持してください

- 新しいパッケージをインストールしないでください

検証方法：`npm test`を実行して既存のテストがすべて合格することを確認し、エンドポイントがページネーションされたデータを返すことを確認してください。

```

これが機能するのは、Claude Codeが曖昧さに混乱するからです。「パフォーマンスを改善して」と言うと、コードベース全体を書き換えます。「GET /usersルートに60秒TTLのRedisキャッシュを追加して」と言うと、正確に実行します。

## 実際に機能するデバッグワークフロー

何かが壊れたとき、「なぜ壊れている？」とは聞きません——それは一般的なアドバイスにつながります。代わりに、こうします：

```

`npm run build`実行時にこのエラーが発生しています：

[ERROR] src/api/users.ts:42:3 - error TS2322: 型'string | undefined'は型'string'に割り当てられません

40-50行目の該当コード：

export function createUser(name: string | undefined): User {

return { name }; // ここでエラー

}

ファイル全体を読み、呼び出し箇所でnameがundefinedになる理由を見つけ、関数シグネチャを変更しない修正を提案してください。

```

Claude Codeはコールスタックを追跡し、undefinedの原因を見つけ、修正を提案します。ルートハンドラーが`createUser`を呼び出す前にリクエストボディを検証していないケースを見つけました。手動トレースの20分を節約できました。

## もっと早く知りたかったこと

Claude Codeには中断したところから再開できる`--resume`フラグがあります。しかし、ここにコツがあります：セッションを保存した場合のみ機能します。次のようにします：

```bash

claude code --resume

```

「前回のセッションが見つかりません」と表示された場合、セッションがなかったか、保存せずにターミナルを閉じたかのどちらかです。セッションは終了時に自動保存されますが、ターミナルを強制終了すると失われます。

また、Claude Codeはデフォルトで確認なしにファイルに書き込みます。これで設定ファイルを失いました。プロジェクトルートに`.claude`プロジェクトファイルを作成し、以下を追加してください：

```yaml

ask_before_edit: true

safe_files:

- "*.env"

- "node_modules/**"

- ".git/**"

```

これにより、誤ってAPIキーを公開リポジトリにコミットするのを防げます。

## 次のステップ（これをスキップしないで）

この記事を閉じてください。ターミナルを開いてください。よく知っている小さなプロジェクト——20ファイル未満のもの——に移動してください。`claude code`を実行し、次のように入力してください：

```

このプロジェクトのすべてのファイルを読んでください。その後、3つのことを教えてください：

1. 誰かが遭遇しそうな最も可能性の高いバグは何ですか？

2. 最も重複しているコードは何ですか？

3. 動作を変更せずに保守性を向上させるリファクタリングは何ですか？

その後、変更を加える前に私に確認を求めてください。

```

何と言うか見てみてください。おそらく、その指摘に驚くでしょう——私は驚きました。私の「シンプルな」TODOアプリには、何ヶ月も見逃していた状態管理の競合状態がありました。

それがClaude Codeの真の力です：コードを書くことではなく、見落としているものを示してくれることです。コード生成ツールではなく、すべてのファイルを読むコードレビュアーとして使えば、もう元には戻れません。