Claude Codeとペアプロ

はじめに

サイトにタグ別の記事数を棒グラフで表示する機能を追加することにした。Claude Codeとペアプログラミングのような形で開発を進めて割とうまくいったので、その振り返りを記録しておく。

開発の流れ

初期実装：D3.jsとReactで

すでにタグの割合をリスト表示していたので、最初は円グラフで見せることにした。ビジュアライゼーションライブラリとして定評のあるD3.jsとReactを使う方針を決めたが、D3.jsは使ったことがなかったので、まずは円グラフの初版をClaude Codeに生成してもらった。

使う技術（今回だとD3.jsとReact）を細かく指定できたことで、動作するものをすぐに生成してもらえたように感じた。D3.jsがポピュラーなライブラリであることも、ノウハウが豊富で良い結果につながった要因かもしれない。

イテレーション：要件の変更

動くものができた後は、気になった点を一つずつ修正していった：

• 表示するデータを割合からタグの数（実数値）に切り替え
• グラフの形を円グラフから棒グラフに変更
• スタイルの修正

ピボット：よりシンプルな実装へ

以下の変更も、Claude Codeにお任せした：

• タグの割合ではなく記事数をカウントするロジックの実装
• D3.jsを使わない実装への書き換え
  • CSSで棒グラフを実装するほうがレスポンシブ対応しやすかった
• ReactコンポーネントからAstroコンポーネントへの変換
  • D3.jsが不要になったのもありAstroコンポーネントで実装可能になったので変換した

ペアプロとしての振り返り

チャートコンポーネントの初期実装フェーズ

技術スタックを明確に指定することで、素早く動くプロトタイプを得られた。特に以下が効果的だった：

• 使用するライブラリの明示的な指定
• 実装したい機能の具体的な説明

ブラッシュアップのフェーズ

最終形に近づけていく過程では、自分がナビゲーター役として振る舞い、Claude Codeがドライバー役を担う、まさにペアプログラミングのような感覚だった。

タスクを1つずつ完了していくことを意識したのも良かった。一度に複数の変更を依頼するのではなく、段階的に進めることで、コントロールしやすくなった。

おわりに

Claude Codeとのペアプログラミングは、予想以上にスムーズだった。技術選択のピボットも含め、柔軟に対応してもらえたのが印象的だった。引き続き使いこなしていきたい。