ドクターメイトPublicationへの投稿
🤖

せめて5000兆人の分身がほしい - AI開発ツールとの付き合い方

-
に公開
AI
Claude
Claude Code
idea

はじめに

お仕事をするとき、自分の分身がせめて5000兆人はほしいですよね？
僕自身が優秀だから増やしたいわけではなく(優秀ではありますが)、他の方にお願いするのは準備も確認も大変なんです。

「一人でできなくもないがけっこう大変」くらいのタスクが積み重なるとしんどい……

そういう気持ちを拗らせると「お願いするのもめんどくさいので自分の分身をくれ」という欲求が生まれます。
また、チーム開発であっても個人の生産性の上限を引き上げることは大切なことです。

ごあいさつ

どうもこんにちは。
ドクターメイトという会社でエンジニアをしております。

僕は一日の大半(6h~)をプロダクト開発に費やしています。
残りの時間で

  • プロダクトに DesignSystem を導入する
  • 地震発生時の安否確認システム開発
  • その他会社の役に立ちそうなことの調査

をしています。

Devin によるプロダクト開発の作業洗い出し

僕が所属しているチームは主に、3つのフロントエンド(Next.js)と1つのバックエンド(GraphQL/axum(Rust)/CloudRun)を開発しています。
サーバサイドは前述の技術に加えて DDD やイベントソーシングも使用しているため、ボイラープレートが多くなり、ちょっとした機能追加でも考えることが増えがちです(そこが楽しいのですが)。

そこで Ask Devin を使用します。
対象のリポジトリを選択して、フロントエンドからバックエンドまで一通りの作業を手順化し把握しました。
Devin は Claude に比べるとポカ率が高い気がしますのであんまりあてにしてませんが、リポジトリを横断してコードのアタリをつけるにはちょうどいい AI です。
Devin はブラウザから起動できるので楽ですね。
ここでできた手順は Devin や Claude Code へのプロンプトにも使います。

Claude Code の知見集め

ターミナルにプロンプトを入れると考えてくれて、出てくる選択肢を あんまり見ずに y を連打してるだけでなんとなくできあがります。
便利は便利なんですが、雑なコードを出してくることがあります。

try {
  const users = await fetchUsers();
} catch (e) {
  // エラー処理これだけ！？
  console.error(e);
}

愚痴りたくなることは多々ありますが AI に全て任せるのはよくないです。
そこで分担を考えるために実際の作業をしながら自分なりの知見を集めることにしました。

1. 自分で実行しよう

チームのみんなに DesignSystem いれようぜ！と提案した手前、泥臭いことはできるだけ自分でやろうと思います。
プロダクト内のコードから色やフォントの値を調べることにしました。
よく出てくる styling 方法はすでに調べていましたので、それを条件に検索して Google Spreadsheet に出力するようにプロンプトを作りウキウキで Claude Code を実行。
あっという間に指定した Spreadsheet に出力されます。

やったぜ！

と2秒くらい喜びましたがよく見たら適当な値が入っています。kkkこいつマジで……
調査プロセスを見てみましたが log が膨大で調べるのが大変です。

その後も Devin や Claude Code によるコード調査を別件も含めて複数回行いましたが、どれも残念な結果となりました。
コード調査はどう考えてもお前らの得意分野じゃろがい

AI にコマンドを実行させた後、確認するのは大変です。
そこで調査スクリプトを Claude Code で作成し、コードベースで Claude Code と対話し、確認後自分で実行することにしました。
地道ではありますが、手戻りするよりかは心の負担が少なかったです。
無事、調査結果をチームに渡すことができました。

2. 一気に作らない

Cloud Scheduler + TiDB Cloud Serverless + Prisma + Slack API を使って地震発生時に Slack で安否確認アンケートを作ろうとしています。
その技術検証をすべて Claude Code で行いました。
0 -> 1 の開発は Claude Code の得意分野ですね。

少しつまることはありましたが、エラーメッセージをプロンプトにわたすだけでどんどん出来上がっていきました。

その後もプロダクト開発でも安否確認システム開発でも Claude Code を動かしてみました。
そこから次のことを学びました。

  • 最初に全体を説明し開発計画を共有する
  • 自分で動作確認する
  • 一気に作らない

なんだかんだ自分で動作確認しないと痛い目を見ます。
AI は const save = () => { /* 処理を実装 */ } みたいな手抜きを平気でします。
そ　こ　も　お　前　が　作　る　ん　だ　よ

また一気に作らない、ということがとても大切です。
一気に作らせたら一気に確認しなくてはなりません。
クソデカ PR を受け取ったときの気持ちを思い浮かべましょう。あれです。

3. AI とのコミュニケーションがしやすくなるライブラリを選ぶ

安否確認システムの管理画面の提案を行うために Next.js と Tailwind CSS で作ることにしました。
Next.js はプロダクト開発でも使っているので、特に深く考えず採用しました。
Tailwind CSS を選んだのは AI と相性がいいからです。

  • クラス名が標準化されているため AI が理解しやすい
  • ユーティリティファーストなので、複雑な CSS を書く必要がない
  • AI が生成したコードの意図が読み取りやすい

バックエンドに比べてフロントエンドを AI で作るのは難しくなりがちですが Tailwind CSS という共通認識のおかげで AI とのコミュニケーションが円滑になりました。

3カラムでおねがい
<div>
  <div>left</div>
  <div>center</div>
  <div>right</div>
</div>

このように雑にお願いしてもそれなりの画面が出てきます。
また left の仕様を伝えて Claude Code に書いてもらっている間に center の仕様を考えるという協業もでき、とても楽しかったです。

その他の AI ツール

Github Copilot

似たようなところを似たような修正作業をする、つらいですよね。
こういうコードがあったとします。

<div className={styles.x_a_1} />
<div className={styles.x_b_1} />
<div className={styles.x_c_1} />

x を y に 1 を 2 にかえて a, b, c は変えないってめんどくさくないですか？
Copilot を使うまでは選択範囲を置換していました。

Copilot は一箇所変えると次から変更をサジェストしてくれるようになります。
この例は簡単なものですが、かなり便利です。
css の内容からも予測してくれたりします。
精度がどんどん上がっている感じがしますね。今後も楽しみです。

Claude

壁打ちや事前のレビューなどに使っています。
Project にプロジェクトナレッジを入れて、複数のチャットでもコンテキストを継続できるようにしています。
かなりいい提案をしてくれるようになりました。

おわりに

こうやって見直すと人に依頼するのも AI に依頼するのも根本は変わらないですね。
丁寧に伝えれば丁寧に返ってくるところが特に似ています。
最近はメインのプロダクト開発の裏で AI を動かし並列で作業することができてきました。
AI に頼んでいたモノが打ち合わせ中に出来たときはとても嬉しかったです。

Rust の実装は型とアーキテクチャがきっちりしているからか、かなりしっかり作ってくれる感じがします。
フロントエンドはバックエンドに比べて自由になりがちですので、パターン化させて AI が理解しやすいようにするとよさそうですね。
地道に AI と対話しながら進める方法もいいですが AI 先駆者たちを見習って効率的に開発できるようにしたいです。

今は FigmaMCP と Claude Code を連携させてフロント実装を自動化できないか試行錯誤しています。

そんな感じでちょいちょいムカつくこともありますが AI とうまくやっていけるかもしれません。
5000兆人の分身には少し届きませんが、地道に分身を増やしていこうと思います。

ドクターメイト
ドクターメイトPublication

ドクターメイト株式会社のテックブログです。

Discussion