コードを書いてもらう

Claude Code の最も強力な機能の一つが、コード生成です。自然な日本語で「こういうものが欲しい」と伝えるだけで、Claude がコードを書いてくれます。このページでは、コード生成の基本から実践的な使い方までを学びます。

自然言語でコードを書いてもらう

プログラミングの専門用語を知らなくても、やりたいことを日本語で伝えれば Claude がコードを書いてくれます。

例1: 関数を作ってもらう

> 2つの数値を受け取って、大きい方を返す関数を JavaScript で作ってください

Claude の応答:

src/utils/math.js を作成します。

/**
 * 2つの数値のうち、大きい方を返す
 * @param {number} a - 1つ目の数値
 * @param {number} b - 2つ目の数値
 * @returns {number} 大きい方の数値
 */
export function getMax(a, b) {
  return a > b ? a : b;
}

この内容で作成してよろしいですか？ (y/n)

例2: 画面を作ってもらう

> ユーザーが名前とメールアドレスを入力できるフォームを HTML で作ってください。
> 送信ボタンも付けてください。

例3: 既存コードに機能を追加する

> @src/App.tsx にダークモード切り替えボタンを追加してください

やりたいことを具体的に伝える

Claude に良いコードを書いてもらうには、何を実現したいかを具体的に伝えることが重要です。

あいまいな依頼と具体的な依頼の違い

あいまいな依頼

> ボタンを作って

Claude は作ってくれますが、デザインや動作があなたの意図と違うかもしれません。

具体的な依頼

> 「送信」というテキストのボタンを作ってください。
> - 青色の背景に白文字
> - クリックしたらフォームの内容を console.log に出力
> - ホバーしたら少し暗くなる
> - 角を丸くする（border-radius: 8px）

こちらの方が、意図通りのコードが生成されやすくなります。

複数ファイルにまたがる変更

Claude は一度の依頼で複数のファイルを作成・編集できます。

> ユーザー認証機能を追加してください。以下のファイルが必要です：
> - src/components/LoginForm.tsx（ログインフォーム）
> - src/components/RegisterForm.tsx（登録フォーム）
> - src/utils/auth.ts（認証ロジック）
> - src/types/user.ts（ユーザーの型定義）

Claude は各ファイルを順番に作成し、ファイルごとに許可を求めます。

src/types/user.ts を作成します。

export interface User {
  id: string;
  email: string;
  name: string;
  createdAt: Date;
}

この内容で作成してよろしいですか？ (y/n)
> y

✓ src/types/user.ts を作成しました

次に src/utils/auth.ts を作成します。
...

ポイント

複数ファイルの変更では、Claude はファイル間の依存関係を考慮してくれます。例えば、型定義ファイルを先に作り、それをインポートするファイルを後から作成します。

コマンドを実行してもらう

Claude Code はターミナルコマンドの実行もできます。

パッケージのインストール

> axios パッケージをインストールしてください

Claude の応答:

以下のコマンドを実行します：

npm install axios

実行してよろしいですか？ (y/n)

開発サーバーの起動

> 開発サーバーを起動してください

よく使うコマンド実行の例

> npm test を実行してテスト結果を教えてください

> このプロジェクトのビルドを実行してください

> 使われていないパッケージがないか確認してください

> ESLint を実行してコードの問題を見つけてください

注意

コマンドの実行も、ファイルの変更と同様に許可が必要です。どんなコマンドが実行されるか確認してから y を押しましょう。

テストコードを書いてもらう

Claude はテストコードを書くのも得意です。

> @src/utils/helpers.ts の関数すべてに対してテストを書いてください

Claude の応答例:

tests/utils/helpers.test.ts を作成します。

import { describe, it, expect } from 'vitest';
import { truncateString, formatDate } from '../../src/utils/helpers';

describe('truncateString', () => {
  it('短い文字列はそのまま返す', () => {
    expect(truncateString('hello', 10)).toBe('hello');
  });

  it('長い文字列は省略される', () => {
    expect(truncateString('hello world', 5)).toBe('hello...');
  });

  it('空文字列を処理できる', () => {
    expect(truncateString('', 5)).toBe('');
  });
});

...

この内容で作成してよろしいですか？ (y/n)

テストを実行して結果を確認する

テストを書いた後、そのまま実行を依頼できます。

> 今作ったテストを実行してください

npm test を実行します。

実行してよろしいですか？ (y/n)
> y

✓ truncateString > 短い文字列はそのまま返す
✓ truncateString > 長い文字列は省略される
✓ truncateString > 空文字列を処理できる
✗ formatDate > 日本語フォーマットで表示する
  Expected: "2024年1月15日"
  Received: "2024/01/15"

3 passed, 1 failed

> formatDate のテストが失敗しました。関数を修正してください

このように、テスト作成 → 実行 → 修正のサイクルを Claude と一緒に回せます。

ドキュメントを書いてもらう

コードだけでなく、ドキュメントの作成も依頼できます。

README の作成

> このプロジェクトの README.md を作成してください。
> 以下を含めてください：
> - プロジェクトの概要
> - セットアップ手順
> - 使い方
> - 技術スタック

コードへのコメント追加

> @src/utils/api.ts の関数すべてに JSDoc コメントを追加してください

API ドキュメントの生成

> src/api/ 内のエンドポイントを整理して、APIドキュメントを作成してください

実践的な会話の流れ

実際の開発で使えるやり取りの例を紹介します。

シナリオ: Todo アプリに「期限」機能を追加する

> Todo アプリに期限（deadline）機能を追加したいです。
> まず、現在のコードの構成を教えてください。

現在のTodoアプリの構成:
- src/types/todo.ts: Todoの型定義
- src/components/TodoItem.tsx: 個々のTodo表示
- src/components/TodoList.tsx: Todoリスト全体
- src/components/TodoForm.tsx: Todo追加フォーム
...

> ありがとうございます。まず型定義に deadline フィールドを追加してください

@src/types/todo.ts を編集します。

 export interface Todo {
   id: string;
   title: string;
   completed: boolean;
+  deadline?: Date;
   createdAt: Date;
 }

この変更を適用してよろしいですか？ (y/n)
> y

> 次に TodoForm に日付入力フィールドを追加してください

> 最後に TodoItem で期限切れの場合は赤く表示してください

このように、段階的に機能を追加していくのが効果的です。

うまくいかないときは

コード生成でうまくいかないときの対処法です。

エラーが出たらそのまま伝える

> さっき作ったコードを実行したら、以下のエラーが出ました：
> TypeError: Cannot read properties of undefined (reading 'map')
> 修正してください

意図と違うコードが生成されたら

> さっきのコードですが、ボタンの位置を左ではなく右寄せにしたいです。
> また、色は青ではなく緑にしてください。

一度に多くを求めすぎない

複雑な機能は小さなステップに分けて依頼しましょう。

> まず、データベースとの接続部分だけ作ってください。
> 動作確認ができたら、次のステップに進みます。

まとめ

やりたいこと	依頼の仕方
関数を作る	「〇〇する関数を作ってください」
画面を作る	「〇〇な画面を HTML/React で作ってください」
機能を追加する	「@ファイル に〇〇機能を追加してください」
コマンドを実行する	「npm install 〇〇 を実行してください」
テストを書く	「@ファイル のテストを書いてください」
ドキュメントを作る	「README.md を作成してください」
エラーを直す	エラーメッセージを貼り付けて「修正してください」

次のステップ

コード生成の基本を学んだら、次は効果的なプロンプトのコツに進みましょう。Claude から最高の結果を引き出すテクニックを学びます。