AIでの開発を楽にするために  もう1つAIを使う

AIでの開発を楽にするために  もう1つAIを使う鈴木まー東葛.dev

自己紹介鈴木まー型のサポートを使ったプログラミングや、  アジャイル開発、DDDのような開発の考え方が好きなプログラマーです。   そのスキルを活かして、プロレス団体の写真や動画を編集し、SNS や YouTube に投稿したり、公式サイトを開発したりしています。  
さらに、その運用を楽にするために、  TypeScript で CQRS ライクなサポートシステムも開発しています。

コーディングエージェントによって  コードを書くこと自体は爆速になった

AIに実装を任せているはずなのに人間は相変わらず忙しい

人間は新しく  実装依頼・差分確認・修正依頼を  する必要が出てきた

今度はこれらを楽にする必要がある

大変なのは  AIに伝わる形へ  毎回整理する必要があるから

人間はプロンプトを作成することをしないで、別の生成AI にプロンプトを作成させる

この生成AIは人間とコーディングエージェントの間に立ってコミュニケーションをしやすくしてくれる

これをこのスライドないでは開発整理AIと呼ぶ

開発整理AIは何をするのか

開発整理AIは人間とコーディングエージェントの間に立つ

やりたいことを、コーディングエージェントに伝わるプロンプトへ変える

人間が伝えたい文書を考える開発整理AIがプロンプトを考えるコーディングエージェントににそのプロンプトを人間が開発整理AIが書いたのを渡して開発の依頼をするコーディングエージェントが開発をする

人間が開発整理AIに渡すメッセージタスク一覧ページで、期限切れのタスクを目立たせたい。ただし、既存のタスク追加・編集・削除の動きは変えたくない。

開発整理AIが作ったプロンプト:  開発整理AI:  次の内容で実装してください。   目的:  タスク一覧ページで、期限切れタスクが分かる表示を追加する。   やってほしいこと:  1. 既存のタスク一覧表示の流れを確認する。  2. 期限日が今日より前のタスクを「期限切れ」と判定する。 
3. 期限切れタスクにだけ、分かりやすいラベルを表示する。 

変更内容を、人間が理解しやすい形へ変える

コーディングエージェントが実装をする人間が変更差分を取得するその差分を開発整理AIに渡して人間が理解しやすい形にしてもらう

人間が開発整理AIに渡すテキストこの変更で何が変わったか、人間が理解しやすい形に整理して。 --- a/src/components/TaskCard.tsx +++ b/src/components/TaskCard.tsx export function TaskCard({
task }: Props) { + const today = new Date(); + const dueDate = new Date(task.dueDate); + const isOverdue = !task.completed && dueDate < today;

開発整理AIが作成するプロンプト変更概要: タスクカードに「期限切れ」ラベルを表示する処理が追加されています。変更された場所: - src/components/TaskCard.tsx - dueDate と
today を比較する処理良い点: - 変更範囲は TaskCard の表示周辺に収まっています。気になる点: - new Date() をコンポーネント内で直接使っているため、テストや日付境界の確認が少ししづらくなる可能性があります。

人間がレビューをした結果をコーディングエージェントに伝えやすくする

人間がレビューして伝える内容を考える開発整理AIがそれをより具体的かつ網羅的にプロンプトをつくる

人間が開発整理AIに渡すテキスト期限切れ判定を TaskCard の中に直接書いているのが気になる。  TaskCard は表示だけに寄せたいので、  期限切れかどうかを判定する処理は外に出したい。  この内容を、コーディングエージェントに渡す修
正プロンプトにして。

開発整理AIが考えるテキスト   期限切れ判定の責務を TaskCard から切り出してください。目的: TaskCard が日付比較の詳細を直接持たないようにし、表示コンポーネントの責務を軽くする。対象:
src/components/TaskCard.tsx 修正してほしいこと: 1. TaskCard 内にある期限切れ判定を外へ切り出してください。 2. TaskCard は、判定結果を使ってラベルを表示するだけにしてください。 3. 判定条件は現在の挙動を維持してください。 - completed が true のタスクは期限切れにしない - dueDate が現在日より前なら期限切れにする

些細なLintエラーをコーディングエージェントに伝えて修正をしてもらう

Lintを実行させて、ささいなエラーをみつけるそれのエラーメッセージを開発整理AIに伝えて、コーディングエージェントに伝えるプロンプトを考えてもらう

人間が開発整理AIに渡すテキスト Lintエラーが出た。エラー内容を修正させるプロンプトをつくって src/components/TaskCard.tsx 12:10 error 'isOverdue' is assigned a
value but never used 28:7 error Unexpected console statement

開発整理AIが作ったプロンプト:  以下のLintエラーを修正してください。エラー内容: src/components/TaskCard.tsx 12:10 error 'isOverdue' is assigned a
value but never used 28:7 error Unexpected console statement 対象: src/components/TaskCard.tsx 修正してほしいこと: 1. 未使用の isOverdue を確認し、不要であれば削除してください。 2. console.log が残っている場合は削除してください。 3. 修正後に npm run lint を実行してください。禁止事項: - Lintログに出ていないファイルは変更しないでください。 - 表示仕様や保存処理は変更しないでください。 - 関係ないリファクタはしないでください。 - テスト期待値は変更しないでください。

クラスやディレクトリの肥大化は AIにまかせると正しく設計できない可能性があるので、人間が判断をしてそれを開発整理AIに伝えてプロンプトをつくってもらう

コーディングエージェントに  コピペして貼り付けるのは  面倒では？

開発整理AIが書いたプロンプトを  人間が確認することで  プロンプト自体をレビューできる

人間が確認することで  開発の主導権は  人間に残る

いままで説明した例をおこなうことによって  人間がプロンプトを考える作業はほぼ皆無になる

AIを使った開発が楽になると同時に開発スピードが上がる

この開発フローで変わること

人間が  毎回プロンプトを  考えなくてよくなる

差分確認は読む場所が整理される

それぞれが  得意なことに集中する

人間は  全部を抱えなくてよくなり AI駆動開発はもっと楽にできる

ご清聴ありがとうございました

AIでの開発を楽にするために もう1つAIを使う

AIでの開発を楽にするために もう1つAIを使う

More Decks by suzuki masayuki

Featured

Transcript

AIでの開発を楽にするために  もう1つAIを使う

AIでの開発を楽にするために  もう1つAIを使う