61
69

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

こんにちは。エンジニア 兼 講師のShotaです。

普段はエンジニアとしてAIツールを実案件に適用しながら開発を行い、同時に講師として得られた知見を体系化して受講生の方にお伝えする活動をしています。

AIツールを実案件に適用する際に事前に知っておくべき実践的なTipsのシリーズ第5回(最終回)。今回のテーマは「【AI駆動開発】Cursor@ファイル指定でコードレビュー工数50%減」です。

なお、本記事は私が提供しているAI駆動開発実践コースの内容から一部を抜粋して無料公開しているもので、実際の開発現場での知見に基づいています。

前回までの振り返り

前回前々回は、AIツールを使ったバグ修正、リファクタリングにおいて、以下の2つのポイントが効果的であることを確認しました:

  • タスクの細分化 - 複雑な修正を小さな単位に分割
  • ファイル名指定 - @マークを活用した明確な修正対象の指定

なぜ効果的なのかというと、以下の理由からでした。

✅ タスクの細分化の効果

  • 大きなタスクを別々のサブタスクに分割することで、AIが各修正を正確に理解
  • 修正内容を段階的に確認でき、手戻りを最小限に抑制
  • 各修正の影響範囲が明確で、レビューが容易

✅ ファイル名指定の効果

  • @ファイル名の指定により、AIが修正対象ファイルを正確に認識
  • 修正箇所が明確で、意図した通りの実装が実現

一方で、この手法はAI駆動開発実践コースで習得する7つのメソッドのうちの1つに過ぎないことが分かりました。

では、その7つのメソッドの概要とは?このメソッドの位置づけとは?他の6メソッドの詳細とは何なのでしょうか?

7つのメソッドの概要

開発の生産性と品質を両立するためのAIへの指示方法をまとめたものです。
以下の通り、どの開発プロセスで使用する指示方法なのかを整理しています。

image.png

AIへの指示といっても、そのプロセスは大きく3つのステップに分けられます:

①準備 → ②指示 → ③確認

7つのメソッドの位置づけは、②指示プロセスにおける具体的な指示方法です。

この指示方法に従った、実際のAIツールへの指示、修正結果のコードを示したのが、前回前々回のバグ修正、リファクタリングのTipsでした。

リファクタリング・バグ修正で使用したメソッドの位置づけ

実は、前回、前々回のバグ修正、リファクタリングは、7つのメソッドの「一括修正法」を使って実際にコードを修正した事例でした。

image.png

各メソッドは、実案件で実践できるように、上記の概要レベルだけでなく、詳細レベルの具体的な伝え方も整理されています。例えば一括修正法の伝え方はこの通りです。

[@ファイル名] + 
[コーディング規約 (オプション)] + 
[修正方針] 
で修正を依頼する

実際の使用例

このメソッドを使ってどうやって修正するのかというと、例えば前々回のリファクタリングの事例で言うと:

プロンプト:

@client/src/components/task-list.tsx
@client/src/components/task-dialog.tsx
@client/src/components/task-card.tsx

これらのファイルのエラー処理ロジック(エラーコードに応じたメッセージ設定)を@client/src/lib/error-utils.tsに共通関数化し、
各ファイルから共通関数を呼び出すよう修正してください。

修正結果:

// 修正前
} catch (error) {
  let title = "エラーが発生しました";
  let description: string;
  
  if (error instanceof Error) { // ❌ 重複したエラー処理
    if (error.message === ERROR_CODES.NOTFOUND_ERROR) {
      description = "対象のタスクが見つかりません。一覧を更新して最新情報をご確認ください。";
    } else if (error.message === ERROR_CODES.SERVER_ERROR) {
      description = "サーバーエラーが発生しました。しばらく経ってから再試行してください。";
    } else {
      description = "タスクの保存に失敗しました。ネットワーク接続を確認して再試行してください。";
    }
  }
}

// 修正後
} catch (error) {
  const { title, description } = getErrorMessage(error, "タスクの保存"); // ✅ 共通関数化
}

伝え方の構造

伝え方:

[@ファイル名] + 
[コーディング規約 (オプション)] + 
[修正方針] 
で修正を依頼する

プロンプト:

@client/src/components/task-list.tsx
@client/src/components/task-dialog.tsx
@client/src/components/task-card.tsx

これらのファイルのエラー処理ロジック(エラーコードに応じたメッセージ設定)を@client/src/lib/error-utils.tsに共通関数化し、
各ファイルから共通関数を呼び出すよう修正してください。

上記の伝え方と実際のプロンプト照らし合わせると:

  • [@ファイル名]@client/src/components/task-list.tsx... の部分
  • [修正方針]これらのファイルのエラー処理ロジック(エラーコードに応じたメッセージ設定)を... の部分

コーディング規約はオプションで、指定してもいいですが、毎回指示するのは手間なので、AIツール自体に設定してしまいます。この設定はカスタムルールなどと呼ばれ、具体的な設定方法などはコースの中で紹介しています。

タスクの細分化と7つのメソッドの関係性

前回前々回と、AIへの指示における2つのポイントが効果的だと説明してきましたが:

  • タスクの細分化 - 複雑な修正を小さな単位に分割
  • ファイル名指定 - @マークを活用した明確な修正対象の指定

後者のファイル名指定は伝え方の [@ファイル名] の部分だとして、前者のタスクの細分化の話は伝え方のどこにいった? という疑問があるかもしれません。

実は、タスクの細分化は7つのメソッドには含めていません。

なぜなら、前段でお話した通り、7つのメソッドは ①準備 → ②指示 → ③確認のうち、②指示プロセスの方法をまとめたもの で、タスクの細分化の話は、指示する前の準備段階、①準備プロセスの話 だからです。

要するに、AIに指示する前に、タスクの細分化のお膳立てを整えたうえで、7つのメソッドを使ってAIに指示すると、速く正確に作業してくれる、すなわち、開発の生産性と品質を両立することができます。

他の6メソッドの詳細

メソッドの全体像

7つのメソッドの概要に改めて触れます。では他に具体的にどのようなメソッドがあるのか、さらにもう一つご紹介します。

データフロー法

これは、コードレビューにおいてコード理解を効率化するために、アプリケーションのデータフローを短時間で理解するための質問方法 です。

image.png

具体的には:

[機能名] +
[アーキテクチャー]
で説明を依頼する

このような形式で質問します。

具体的なプロンプトとAIの回答

プロンプト:

タスク一覧表示機能のデータフローを、
下記のアーキテクチャに基づいて、
具体的なファイル名やコンポーネント名
などを踏まえて説明してください。

Frontend (React)
  - UI
  - Business Logic
  - API Access

Backend (Express + Drizzle ORM)
  - API EndPoint
  - Business Logic
  - Data Access

Database (PostgreSQL)
  - Table

AIの回答:

タスク一覧表示機能のデータフローは、以下のアーキテクチャに基づいて説明できます:

Frontend (React)
  - UI
    - コンポーネント名: TaskList(task-list.tsx)
    - タスクの一覧を表示するために、Reactのコンポーネントとして実装されています。TaskCard(task-card.tsx)コンポーネントを利用して、各タスクの詳細を表示します。
  - Business Logic
    - React Queryを使用してAPIからタスクデータを取得し、ローディング状態を管理します。
  - API Access
    - タスクデータの取得はuseQueryを用いて行われ、APIエンドポイント/api/tasksへのリクエストを通じてデータを取得します。

Backend (Express + Drizzle ORM)
  - API Endpoint
    - ファイル名: server/routes.ts(routes.ts)
    - タスクの取得、作成、更新、削除を処理するAPIエンドポイントを定義しています。GET /api/tasksエンドポイントがタスク一覧の取得を担当しています。
  - Business Logic
    - 各APIエンドポイントのロジック(例:タスクの取得)はこのファイル内で実装され、データベースからのデータ取得やエラーハンドリングを行います。
  - Data Access
    - drizzle-ormを使用してデータベースアクセスを行い、タスクデータに対するCRUD操作を行います。

Database (PostgreSQL)
  - Table
    - テーブル名: tasks(schema.ts)
    - タスクの情報を格納するtasksテーブルが定義されています。カラムにはid, title, description, status, created_at, updated_atが含まれます。statusはタスクの状態(未着手、進行中、完了)を表します。

このように、フロントエンドからバックエンド、そしてデータベースまで、タスク一覧表示機能はコンポーネントやエンドポイントを介してスムーズにデータを流通させ、ユーザーにタスク情報を表示する仕組みになっています。

一括修正法と同様に、データフロー法も伝え方の構造が明確に定義されています:

伝え方の構造

伝え方:

[機能名] + 
[アーキテクチャー]
で説明を依頼する

プロンプト:

タスク一覧表示機能のデータフローを、
下記のアーキテクチャに基づいて、
具体的なファイル名やコンポーネント名
などを踏まえて説明してください。

Frontend (React)
  - UI
  - Business Logic
  - API Access

Backend (Express + Drizzle ORM)
  - API EndPoint
  - Business Logic
  - Data Access

Database (PostgreSQL)
  - Table

上記の伝え方と実際のプロンプトを照らし合わせると:

  • [機能名]タスク一覧表示機能のデータフロー の部分
  • [アーキテクチャー]下記のアーキテクチャに基づいて... で指定された構成要素の部分

データフローを最初に理解する意味

なぜデータフローかというと、アプリケーションの処理の本質は①入力データ → ②データ変換 → ③出力データという一連のデータの流れだからです。

各アーキテクチャの要素がどのようにデータを変換し、データがどのように流れていくのかを理解できれば、アプリケーションの仕様を効率的に把握することができます。

また、これらの質問方法は段階的に理解を深めていく構造 になっています。

  • データフロー法 でアプリケーション全体を把握
  • ファイル法 で特定のファイルを理解
  • ブロック法 で特定のコンポーネントや関数の役割を把握
  • ロジック法 で特定の処理内容の詳細を理解

という流れです。

質問方法の効果的な使い方について

AIツールの機能には、コードを選択して右クリックしコードの説明を求める機能がありますが、なぜわざわざこちらから機能名やアーキテクチャを指定して質問をするのでしょうか?

一般的に、コード説明機能では「何を」説明するかは選択したコードで指定できますが、「どう説明させるか」の指示ができないため、説明の方法はツールのデフォルト機能に依存し、一般的にはプログラミング的視点(言語機能や文法の説明)での解説になることが多いです。

一方、データフロー法やその他メソッドでは、プロンプトで「何を」説明するかを指定する手間は必要ですが、「どう説明させるか」をプロンプトで明示することができるため、技術的知識の多い少ないにかかわらず機能の本質的な理解を早く得ることができます。

もちろん、デフォルトのコード説明機能でコード理解が進めばそちらを使うのも効率的です。また、すべてのメソッドを順番に使う必要はなく、疑問に思う箇所だけをピンポイントで質問するのも効果的なアプローチです。

以上、7つのメソッドの、前回前々回事例をご紹介した一括修正法に加えて、データフロー法のご紹介でした。少しでも皆様のお役に立つ部分があれば幸いです。

その他のメソッド

AI駆動開発実践コースでは、これらのメソッドに加えて、以下のようなメソッドを学ぶことができます:

  • 要件6か条
  • フェーズ法
  • データフロー法
  • ファイル法
  • ブロック法
  • ロジック法
  • 一括修正法

これらのメソッドの理論を図解や表を用いた解説動画で理解したうえで、ハンズオン実践動画をもとに実際に自分でAIツールに指示しながらアプリケーション開発の一連の流れを実践することができます。

理論と実践を実際のアプリケーション開発を通じて学ぶことで、実務で使える本物の実践力を身につけることができます。

まとめ

今回のTipsシリーズを通じて、以下のことが明らかになりました:

効果的なAI指示の基本構造

①準備(タスクの細分化)→ ②指示(7つのメソッド)→ ③確認

各ステップが重要で、7つのメソッドによる体系的な指示が成功の鍵

実証された手法の汎用性

  • 一括修正法がリファクタリングとバグ修正の両方で高い効果を発揮
  • @ファイル名 + 修正方針という簡潔な構造が様々な場面で活用可能

体系的なアプローチの重要性

  • 単発のテクニックではなく、開発プロセス全体を通じた体系的な方法論
  • 各メソッドが相互に連携し、開発の生産性と品質を両立

より詳しく学びたい方へ

今回の内容は「AI駆動開発実践コース」の一部を抜粋したものです。

コースでは、理論の体系的な習得と実践的なトレーニングの両方を通じて、AI駆動開発の実力を身につけることができます:

理論マスター

AI駆動開発を加速する7つのメソッドを完全習得。
図解・表を用いた丁寧な理論解説で、各メソッドの構造と使い方を体系的に理解できます。

実践トレーニング

実アプリ開発で要件定義〜テストまでの一気通貫ハンズオン。

要件定義プロセス

  • 要件6か条を使ったバイブコーディング実践でAIエージェントとの効果的な要件調整
  • フェーズ法によるスコープ分割で段階的な開発依頼、手戻りを最小化
  • AIが理解しやすい要件の伝え方で、意図通りの実装を実現

コードレビュープロセス

  • データフロー法でアプリケーション全体のアーキテクチャを短時間で把握
  • ファイル法・ブロック法・ロジック法で段階的にコード詳細を理解
  • フロントエンド(React)からバックエンド(Express + Drizzle ORM)、データベース(PostgreSQL)まで効率的にレビュー

コード修正プロセス

  • 一括修正法を使ったJSDocコメント追加による可読性向上
  • 一括修正法によるAPI呼出処理統一、エラーハンドリング共通化で保守性向上
  • 非同期処理エラーハンドリング、HTTPステータスコード対応によるアプリケーション安定性向上

テストプロセス

  • フルスタックテストでアプリケーションの全機能を網羅的に検証
  • テストで摘出したバグ(リソース存在チェック不足、バリデーションチェック不足)を一括修正法で修正
  • テスト→バグ修正のサイクルによる実践的な品質向上

各プロセスで7つのメソッドを実際に使いながら、AIに指示して開発を進めることで、理論を実務で使えるスキルに引き上げます。生産性と品質の両立を実現する実践力が身につきます。

なお、このたび皆様への感謝の気持ちを込めて、特別なご案内があります。

有料会員数200名突破記念

おかげさまで、「AI駆動開発実践コース」の有料会員数が200名を突破いたしました。

全5回に渡る実践Tipsシリーズをご覧いただいた皆様への感謝を込めて、特別クーポンをプレゼントいたします。

特別クーポンのご案内

【先着20名限定】20,000円OFFクーポン

【8月末まで】10,000円OFFクーポン

注意事項

  • 先着20名限定クーポンは上限に達し次第終了となります
  • 各クーポンの併用はできません
  • クーポンの譲渡・転売は禁止です

コース詳細はこちら

この実践Tipsシリーズは今回で完結となります。5回に渡ってお付き合いいただき、本当にありがとうございました。この記事が参考になりましたら、ぜひいいねをお願いします。今後も有益な情報をお届けしてまいりますので、フォローしていただけると幸いです。

61
69
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
61
69

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?