演習：はじめてのタスクを依頼してみる

ゴール

この演習では、意図的にバグを仕込んだ小さなExpressアプリを題材に、Claude Codeへバグ修正を依頼します。指示を出す、Claude Codeが提示する修正内容を確認する、修正結果を動作確認する、という一連の流れを実際に手を動かして体験することがゴールです。演習終了時には、コードの不具合をAIに調査・修正してもらい、その結果を自分でレビューするという基本的な作業サイクルが身についている状態を目指します。

準備するもの

• Node.jsがインストールされている環境（バージョン18以降を推奨）
• 前レッスンまでにセットアップが完了しているClaude Code
• 演習用のプロジェクトファイルを配置する作業ディレクトリ

演習用のプロジェクトは、TODOリストを管理する簡易的なAPIサーバーです。以下の2つのファイルを用意します。

package.json

{
  "name": "todo-api-exercise",
  "version": "1.0.0",
  "description": "Claude Code演習用の簡易TODO API",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.19.2"
  }
}

app.js

app.js

const express = require("express");
const app = express();
app.use(express.json());

let todos = [
  { id: 1, text: "牛乳を買う", done: false },
  { id: 2, text: "レポートを書く", done: false },
];

app.get("/todos", (req, res) => {
  res.json(todos);
});

app.post("/todos", (req, res) => {
  const newTodo = { id: todos.length + 1, text: req.body.text, done: false };
  todos.push(newTodo);
  res.json(newTodo);
});

// バグ: 存在しないidを指定した場合の処理が抜けている
app.put("/todos/:id/done", (req, res) => {
  const todo = todos.find((t) => t.id === parseInt(req.params.id));
  todo.done = true; // todoがundefinedの場合にエラーになる
  res.json(todo);
});

app.listen(3000, () => {
  console.log("Server running on port 3000");
});

このコードには、PUT /todos/:id/done に存在しないidを指定して呼び出すと、サーバーがクラッシュするというバグが仕込まれています。このバグをClaude Codeに発見・修正してもらいます。

手順

ステップ1: プロジェクトディレクトリを作成する

作業用のディレクトリを作成し、その中に上記のapp.jsとpackage.jsonを配置します。

mkdir todo-api-exercise
cd todo-api-exercise
# app.js と package.json をこのディレクトリ内に作成

ステップ2: 依存関係をインストールする

プロジェクトディレクトリの直下で、Expressをインストールします。

npm install express

ステップ3: Claude Codeを起動する

プロジェクトディレクトリの直下でclaudeコマンドを実行し、Claude Codeを起動します。プロジェクトルートで起動することで、Claude Codeがapp.jsやpackage.jsonを自動的に認識できる状態になります。

claude

ステップ4: バグ修正を自然言語で依頼する

起動後のプロンプトに対して、発生している問題を具体的に伝えます。次のような指示文を入力してください。

PUT /todos/:id/done で存在しないidを指定するとサーバーがクラッシュします。
原因を調べて修正してください。

Claude Codeはapp.jsを読み込み、該当するエンドポイントの処理を確認したうえで、原因の説明と修正案を提示します。

ステップ5: 修正内容を確認し、適用する

Claude Codeが提示した修正内容（該当のtodoが見つからない場合に404エラーを返すなどの対応）を確認します。内容に問題がなければ、そのまま適用してもらいます。差分の内容が意図と異なる場合は、遠慮せずに修正を依頼し直してください。

ステップ6: 動作確認を行う

修正が適用されたら、サーバーを起動し、存在しないidを指定して動作確認を行います。

npm start

別のターミナルを開き、以下のように存在しないid（例では999）を指定してリクエストを送ります。

curl -i -X PUT http://localhost:3000/todos/999/done

修正前はサーバーがクラッシュしていた状況に対し、修正後は適切なエラーレスポンス（404など）が返り、サーバープロセスが落ちずに動作し続けることを確認します。あわせて、存在するidを指定した場合に正しくdoneが更新されることも確認しておきましょう。

curl -i -X PUT http://localhost:3000/todos/1/done

つまずいた時のヒント

• プロジェクトディレクトリの外でClaude Codeを起動してしまっている: claudeコマンドは、対象プロジェクトのルートディレクトリで実行する必要があります。別の場所で起動するとapp.jsを認識できないため、コマンドを実行した場所を確認してください。
• 依頼内容が曖昧で、意図と異なる修正になった: 「いい感じに直して」のような抽象的な指示では、意図しない実装になることがあります。「存在しないidの場合は404エラーとJSON形式のメッセージを返す」のように、期待する挙動を具体的に伝えて依頼し直しましょう。
• npm installでエラーが出る: package.jsonの内容や、実行しているディレクトリが正しいかを確認してください。Node.jsのバージョンが古い場合はアップデートも検討しましょう。
• 修正後の動作確認を省略してしまう: AIが提示したコードは、必ず自分の目で差分を確認し、実際にリクエストを送って動作を確かめる習慣をつけてください。修正が完了したという説明を鵜呑みにせず、動作確認まで行って初めてタスクが完了したとみなします。

発展課題

• POST /todosなど他のエンドポイントについても、不正な入力（textが空、あるいは存在しない場合など）に対するバリデーションを追加するよう、Claude Codeに依頼してみましょう。
• 今回修正したPUT /todos/:id/doneの挙動を確認するテストコードを、Claude Codeに書いてもらいましょう。存在するidと存在しないidの両方のケースを含めることがポイントです。
• DELETE用のエンドポイント（DELETE /todos/:id）を新規に実装するよう依頼し、既存のバグ修正と同様の観点（存在しないidを指定した場合の挙動）が考慮された実装になっているかをレビューしてみましょう。

ここまでで、Claude Codeに対して具体的な指示を出し、修正内容をレビューし、動作確認を行うという基本的な作業サイクルを体験しました。次章では、複数ファイルにまたがる変更やGitとの連携など、より実践的なワークフローを扱う限定コンテンツをご用意しています。続きは 第3章 でご確認ください。