🤖

AIコーディングを成功させるためのポイント

に公開
AI
Windsurf
tech

筆者が考えるAIコーディングを成功させるためのポイントをまとめました。

1. 設計がすべての鍵

AIコーディング関係なく、開発では「設計の品質」が最終的な成果物を左右します。

むしろAIを活用する場合は、明確な設計図がないと的確な指示ができず、手戻りが多くなりがちです。

そこでまずは、設計時に押さえておきたいポイントをざっくり見ていきましょう。

1-1. 全体像の把握

(1) 画面設計 (UI/UX, デザイン)

  • どんな画面が必要かを洗い出す
    • まずは画面の一覧を作り、遷移やレイアウトを大まかに決める
  • ワイヤーフレームなどで整理し、UIの概要を明確化

(2) 機能設計

  • ユースケースやビジネス要件をもとに、必要な機能をリストアップ
    • デザイナーが画面設計を担当する場合は、機能設計をもとに画面設計の調整を行う等も発生する（機能設計・画面設計・データ設計は不可分）
  • フロントエンド・サーバサイド・データベースのデータフローを把握する
    • 必要に応じてシーケンス図を作成する（AIに文章化した内容を渡せば自動生成も可能）

(3) データ設計

  • 必要なデータを整理し、ERD（エンティティ関連図）を作成
    • テーブルやコレクションの主キー・外部キーの関連を明確にする
    • 既存のテーブル情報がある場合は、AIにERD作成を依頼するのも手

1-2. 詳細化

  • 全体像をもとに、機能ごとのタスクを細分化する
    • ※ あくまでも一例
      • フロントエンドなら画面/モーダル単位（必要に応じてさらにサブタスク化）
      • バックエンドならエンドポイント単位

(設計の方向性がブレないための整理が目的であり、すべてを厳密に書き込むことは想定していません。)

補足: 設計段階でのAI活用

  • プラクティスの検索
  • 図の生成
    • シーケンス図: 処理の流れを文章で書き起こし、AIに図の生成を依頼（筆者はmermaid形式で図を生成）
    • ERD: こちらも同様に生成可能。ERDのドキュメントがある場合は、そちらをベースに生成させることも可能。
  • コードベースの検索
    • 「ある機能の実装箇所を探して」「既存クラスと似た実装があるか」など、AIに訊くと候補を提示してくれる（Windsurfだと"@"mentionで可能）
    • しかし誤りが含まれる可能性があるため、鵜呑みは禁物。
  • 壁打ち役としてのAI
    • 設計アイデアをAIに提案させ、パフォーマンスや保守性との整合性などを検討。

2. 設計をもとにコードを書く

2-1. 基本方針: Prompt Engineering

AIにコーディングを依頼する際は、期待する成果物を明確かつ具体的に伝える必要があります。

  1. 明確な目的 (Objective) を示す
    • 例: 「新規でテストコードを書いてほしい」「既存関数をリファクタしてほしい」など。
  2. 関連コンテキストをすべて含める
    • 作業に必要な既存コードや仕様は、@-Mention機能などでAIに参照させる。
    • AIが知らない独自要件・設定は必ず明示する。
  3. 必要な制約 (Constraints) を明示
    • 例: 「React 18を使用」「Rails 7を使用」「セキュリティ要件」「パフォーマンス要件」など。
  4. 複雑なタスクはChat形式で進める
    • 実装方法のディスカッションや複数コードブロックを扱う場合は、インラインのコマンド指示よりも対話型を選択するほうが効率的。

参考: Prompt Engineering - Codeium Docs

2-2. 筆者が行なっている流れ

  1. TODOリストを作成する
    • 実装TODOリストそのものをAIに作らせるのもおすすめ。
  2. AIに投げてみる
    • 必要なクラスや関数を具体的に示し、パブリックインターフェイスの雛形をまず作ってもらう。
    • 「最初はモックデータでOK」など段階を明示しておくと、最小限のテストがすぐ書ける。
  3. テストコードを書く
    • インターフェイスが固まったら、テストコードをAIに書いてもらう。
  4. 必要最小限の実装
    • テストを通すために最小限の実装でOK。テストが成功することを確認してから具体実装を進める。
  5. リファクタしてコードを磨く
    • コードが乱雑な場合は「重複ロジックの整理」「メソッド分割」などをAIに指示して提案を再生成。
    • Editorと対話し複数の実装パターンを評価してもらう など 行う
    • 最終的な判断は人間が行うことで、品質を担保する。

参考: AI時代にこそTDDだと思う話

まとめ

  • 最初の設計を大事にする
    • 画面・機能・データ構造の整理をしっかり行い、抜け漏れを防ぐ。
  • AIのコード生成は、プロンプト（指示）の内容が命
    • 目的・制約・必要情報を明確に書き、AIを最大限活用する。
  • TDDや小さなサイクルで進めると、手戻りが少なく品質も安定
    • 必要最小限の実装 → テスト → リファクタを繰り返し、最終判断は人間が行う。
  • AIに頼りすぎず、レビューとテストをしっかり行う
    • AIの出力を鵜呑みにするのはリスクが高い。適切に検証・修正を加える。

これらを意識すれば、AIを活用しながらも破綻しにくく保守性の高いシステムを構築できます。ぜひ参考にしてみてください。

おまけ: Windsurf Editorの使用

AIコーディングのエディタはいくつかありますが、筆者はWindsurfを使っています。

WindsurfはVSCodeを基に開発されており、GPT-4やClaude Sonnetなどの生成AI機能が組み込まれているコードエディタです。

個人的に以下の嬉しさを感じました。

  • リアルタイムコラボレーション機能
  • ターミナル操作も自然言語で実行可能
    • Chat上Terminal上どちらでも自然言語でコマンドを依頼することが可能
    • 例: パッケージのインストール、開発サーバの起動、ディレクトリ・ファイルの作成、Git操作 etc
    • ※ Cascade使用時のTerminalコマンドの自動実行には、Allow listの登録が必要

先ほど2で説明した TDDもどき のサイクルで進めるうえでも、直感的にコード生成を依頼できるため、テストコードを書く煩わしさが大幅に軽減されると感じています。

参考: Windsurf - Cascade

Discussion