はじめに

こんにちは、エンジニアの@makishy(きしだしょーきち（仮）)です。
AIコーディング盛り上がっていますね。数日で目まぐるしくAIツールが発表され、キャッチアップだけでも大変、という方も多いのでは？
今回は、非常に人気の高いClaude CodeというAIコーディング支援ツールを使ったコーディング方法をご紹介したいと思います。

Claude Codeとは

Claude Codeは、Anthropic社が開発したターミナル（コマンドライン）上で動作するAIコーディング支援ツールです。従来のサジェスト型のAIコード生成ツールとは異なり、プロジェクト全体のコードベースの構造や依存関係を自律的に理解し、自然言語での指示だけで修正・生成・テスト・デプロイまで一連の開発フローを自動化できるのが特長です。また、ターミナル上で動作するツールとなっているため、gitへのコミットや、クラウドプロバイダーが提供するcliなどと連携させてデプロイ先のログ解析を行うといったコード生成に留まらない高度な利用も行うことができます。

AIコーディングとは

AIコーディングとは、人工知能（AI）を活用して、プログラミングコードの自動生成やコーディング作業の支援・自動化を行う手法や技術の総称です。Vibeコーディングという類似の言葉もありますが、個々では敢えて区別して使おうと思います。

Vibeコーディング

2025 年初頭に AI 研究者の Andrej Karpathy 氏によって提唱されました。自然言語を使った話し言葉などの平易な入力からコードの生成、改良、デバッグを行うようAIツールに指示をするプロセスを指します。エンジニアはコードの存在を忘れ、コードを完全に理解する必要がないといった大胆なコンセプトです。

プロトタイプやモックのようなちょっとしたアプリであればこれで十分なケースも多いですが、実際のユーザーに利用してもらうようなアプリケーションとして品質を担保するためには、従来型の開発プロセスに適合させたアプローチが必要となるため、ここでは敢えて「AIコーディング」という用語を使い区別して説明しようと思います。

ベストプラクティスを知ろう

Claude Codeでは、ありがたいことに平易な説明でベストプラクティスの紹介をしてくれています。

そちらを参考に一般的な開発ワークフローを解説したいと思います。

Claude Codeを使った開発フローのポイント

ベストプラクティスの一般的な開発フローがまとめられています。代表的なものをいくつかご紹介します。

探索 → 計画 → コーディング → コミット

探索からコミットまでのプロセスでは、雑な指示で一度にコーディングするのではなく、AIによる思考のプロセスを通じながらエンジニアによるチェックを挟んで進めるのがポイントなようです。

ファイルや URL を Claude に読み込ませる。まだコードを書かせない段階で背景理解させる。 複雑な問題にはサブエージェント活用も有効。
「考えて」<「一生懸命考えて」<「もっと一生懸命考えて」<「超考えて」といったキーワードで Claude に計画立案（思考モード）を促し、代替案を比較評価。
有効なプラン確認後、コードを書かせ、必要に応じてその都度実装の妥当性を検証。
コード完成後、コミットと Pull Request を作成し、README や changelog の更新も行わせる。

計画フェーズをしっかり挟むことで、深い思考を要する問題でも精度が高まります。
Claude Codeの特徴として指示に対して即座にコーディングを進めようとする傾向にあるため、コードを作成しないように明示的に指示し、考えをまとめさせるのがポイントなようです。
品質を確保しながら開発を進める上では、AIも人間も思考を繰り返しながら細かくチェックする方法が良さそうですね。

テスト作成 → コミット → コーディング → 反復 → コミット

AIコーディングはテスト駆動開発(TDD)とは非常に相性がよいです。TDDのプラクティスに則って反復的に開発する方法が紹介されています。

期待される入出力に基づき Claude にテストを書かせる。ただし、「まだ実装は書かない」よう明示。
テストを実行し、失敗を確認させる。
テストが良ければコミット。
Claude に実装させ、テストに合格するまで繰り返し修正。実装がテストに過剰に適合していないか、別エージェントに確認させると効果的。
最終的にコミット。

TDD と組み合わせることで、逐次検証しながら進められ、高い品質に仕上がります。
TDDにおいても、Claudeにテストのみ作成し、プロダクションコードは作成しないことを明示的に指示するのがポイントのようですね。

コード → スクリーンショット → 反復

Puppeteer などの MCP ツールや手動でスクリーンショットを Claude に渡す。
参照するデザインモックや画像を提示。
Claude にコード実装させ、結果をスクリーンショットしてもらいながら、モックに一致するまで反復修正。
満足できる結果になったらコミット。

視覚的出力を見ながら改善を重ねる形式で、最終成果物の品質が非常に向上します。

サンプルコードで体験してみる

今回は、上述の中からTDDのプラクティスを体験してみたいと思います。
お題は、説明を簡単にするためTypescriptで実装する簡易電卓アプリにしてみたいと思います。
Claudeに指示したプロンプトとその結果を載せるので参考にしてみてください。

事前にClaude Codeのインストールが必要です。
未インストールの方は以下の手順に従ってインストールを行ってください。

下準備

README.md作成

ターミナルで次のように作業ディレクトリを作成し、Claude Codeを起動します。

mkdir calculator_app
cd calculator_app
claude

次のプロンプトを指示して実行

最初にこのアプリの情報を書き込むのでREADME.mdファイルの雛形を作成して

結果

プロジェクト直下にREADME.mdが作成される

README.md(長いので一部省略)

# Calculator App

## 概要
シンプルで使いやすい電卓アプリケーションです。

## 機能
- 基本的な四則演算（加算、減算、乗算、除算）
- パーセント計算
- 正負の切り替え
- 小数点計算
- クリア機能

## 技術スタック
- HTML5
- CSS3
- JavaScript (Vanilla)

## セットアップ
...略..


## ファイル構成
calculator_app/
├── index.html    # メインのHTMLファイル
├── styles.css    # スタイルシート
├── script.js     # JavaScriptロジック
└── README.md     # このファイル

## 開発環境
- Node.js: v22.12.0

## ライセンス
[ライセンスタイプを記載]

## 作者
[作者名を記載]

特に指示しないとWebアプリとして作り初めてしまうようですね。

README.mdの内容修正

README.mdの概要を目的に合わせて修正します。今回は説明を簡単にするためCLIツールにしたいので概要を次のような文章に変更しました。その他の部分は、AIに修正させるので変更なし。

## 概要
シンプルかつ実演しやすいTypeScript製の簡易電卓CLIツール。
UIなし、入出力が明確でTDDの流れが伝わりやすいアプリとして開発する。

次のプロンプトを指示して実行

README.mdの概要にアプリの特長を書いたので、その内容に即してREADME.mdの説明を修正して

結果

README.mdがJestを使った内容に書き換わる

README.md(長いので一部省略)

# Calculator App

## 概要
シンプルかつ実演しやすいTypeScript製の簡易電卓CLIツール。
UIなし、入出力が明確でTDDの流れが伝わりやすいアプリとして開発する。

## 機能
- 基本的な四則演算（加算、減算、乗算、除算）
- 数式の評価と計算結果の表示
- エラーハンドリング（ゼロ除算、不正な入力など）
- 対話形式での連続計算

## 技術スタック
- TypeScript
- Node.js
- Jest（テストフレームワーク）
- npm（パッケージ管理）

## セットアップ
...略...

## 使い方
...略...


### コマンド例
> 5 + 3
8
> 10 * 2
20
> 15 / 3
5
> exit


## ファイル構成
calculator_app/
├── src/
│   ├── calculator.ts   # 計算ロジック
│   └── index.ts       # エントリーポイント
├── tests/
│   └── calculator.test.ts  # テストファイル
├── dist/              # ビルド出力ディレクトリ
├── package.json       # プロジェクト設定
├── tsconfig.json      # TypeScript設定
├── jest.config.js     # Jest設定
└── README.md         # このファイル


## 開発環境
- Node.js: v22.12.0
- TypeScript: 5.x
- Jest: 29.x

## 開発コマンド
...略...

## TDD開発フロー
1. まずテストを書く（RED）
2. テストが通る最小限のコードを実装（GREEN）
3. コードをリファクタリング（REFACTOR）
4. 1-3を繰り返す

## ライセンス
[ライセンスタイプを記載]

## 作者
[作者名を記載]

無事READMEの修正が完了するとClaudeから次のような修正結果の解説があります。

⏺ README.mdの内容を確認して、TypeScript製のCLIツールという特長に合わせて修正します。
...
省略
...
⏺ README.mdをTypeScript製CLIツールの特長に合わせて修正しました。主な変更点：

  1. 機能: CLIツールに適した機能説明に変更
  2. 技術スタック: TypeScript、Node.js、Jestに更新
  3. セットアップ: npm installとビルド手順を追加
  4. 使い方: CLI操作例を追加
  5. ファイル構成: TypeScriptプロジェクトの構造に変更
  6. 開発コマンド: テスト、ビルド、開発モードのコマンドを追加
  7. TDD開発フロー: RED-GREEN-REFACTORサイクルの説明を追加

TDDのRED-GREEN-FEFACTORサイクルも理解していて内容は良さそうなので、次に進みます。（Gitコミットはお忘れなく）

ClaudeCodeは変更前の状態に正確に戻す機能がないので、こまめにGitにコミットしながら進めることをおすすめします。

テストコードを書く

ここからが本番です。Claudeは雑に指示を出すとプロダクションコードも含めて一度にコーディングを進めてしまう傾向があるため、テストコードのみを書くように指示を与えます。
プロンプトは例えば次のような感じです。

次のプロンプトを指示して実行

基本的な四則演算の加算機能をついて必要なテストを生成して。TDDの手順に従って実装を進めたいので指示があるまでプロダクションコードは生成しないで。

結果

ファイルの状況

テストに必要なファイルが一式生成される。

ターミナルの表示

コーディング計画とテストコード生成まで実行されていることが確認できる。
（プロダクションコードは指示どおり生成されない）

テストコード

必要なライブラリのインポートやプロダクションコードが未実装なためエラー状態。

プロダクションコードを書く

テストコードではエラーが出ているものの、内容自体は問題がなさそうなのでプロダクションコードの実装に進みます。

次のプロンプトを指示して実行

四則演算の加算機能をついてプロダクションコードを実装して。実装後はテストコードを実行し、エラーが出る場合はエラーがなくなるまで修正を繰り返して。

結果

ファイルの状況

ターミナルの表示

プロダクションコードが生成され、すべてのテストが成功していることを確認できる。

TDDのREDフェーズなので敢えてエラーになることを確認。

プロダクションコードを実装し、すべてのテストが成功することを確認。

プロダクションコード

非常にシンプルなので、まぁリファクタリグの必要はないですね。（汗

export class Calculator {
  add(a: number, b: number): number {
    return a + b;
  }
}

あとは、その他の機能（減算、乗算、除算など）についても同様の手順で進めていくことになります。

さいごに

Claude Codeのベストプラクティスを参考に簡易電卓アプリをTDDにて開発してみましたが、いかがでしたでしょうか？
今回の例では非常にシンプルな実装なのでTDDによる恩恵はあまり感じにくいかもしれないですが、普段後回しになってしまいがちなテストコードもAIツールを使うことで簡単に実装ができることを体験できました。
Claude Codeをうまく活用することで品質の高いアプリケーションの開発が期待できそうです。

AIを活用した開発は日進月歩で進化していますが、まずは触ってみて体験してみると一気に理解度があがりますね。
興味を持たれた方、ぜひClaude Codeを使ってAIコーディングを始めてみてください！