🔥

Cursorを活用して初めて触るSaaS APIを調査から実装まで効率化する方法

Okamoto Hidetaka

2025/04/28に公開

Cursor

開発生産性

idea

SaaS製品のAPIを初めて使った開発では、APIの呼び出し方やレスポンスの理解などで予想以上に時間を消費することがあります。ドキュメントを読んでもAPI仕様やレスポンス構造をイメージするのは難しく、実際に触ってみないとわからないことが多いものです。
先日、AIコーディングアシスタント「Cursor」を活用して、初めて触るAPIの調査から実装までの効率化を行いました。予想以上に効率よく進められたため、本稿ではその手法について紹介します。

 Cursorの活用法：APIを理解させる結論から書くと、「CursorにAPIを直接呼び出させて、その結果を分析させる」というアプローチが効果的でした。APIを呼び出すための最小限の準備だけこちらで行い、あとはAPIの使い方の調査をCursorに依頼します。このようにして得られた調査結果を元に実装計画を立て、それを基にさらに指示を出すという流れで進行しました。
具体的な手順を見ていきましょう。

 まずはシンプルなコードでAPIを呼ぶ最初のステップは、APIにアクセスして実際のレスポンスを確認するための最小限のコードを書くことです。以下はBacklog APIにアクセスするためのHonoを使ったシンプルなデモAPIになります。
backlogApp.get('/projects', async (c) => {
    const backlog = c.get('backlog')
    // Returns information about your space.
    const user = await backlog.getMyself()
    const recentActivities = await backlog.getUserActivities(user.id, {
        count: 10
    })
    return c.json(recentActivities)
})
このシンプルなコードによって、Backlog APIを使用して現在のユーザー情報と、そのユーザーの最近のアクティビティ10件を取得することができます。このAPIをローカルで起動し、curlで呼び出せる状態にしておくとよいでしょう。

 Cursorに調査を依頼する次は、Cursorに調査を依頼する段階です。ここで大切なのは「何のためにこの調査をするのか」という目的も明確に伝えること。明確な目的意識があれば、より的確な調査結果が得られるでしょう。
このAPIは以下のコマンドで実行結果を取得できる。
APIレスポンスの性質や傾向をより詳細に把握したいので、調査とレポートをお願いします。
調査結果を元に、ユーザーが特定の日に取り組んだ作業内容（期限日の変更のみでコメントのないアクティビティなどは除外）を把握する仕組みを作ることを目指しています。そのことを念頭に置いて調査とレポートをしてください。

curl http://localhost:3000/backlog/projects
今回のケースでは「特定の日の有意義な作業内容を把握する」という目的を伝えました。単に「APIを調査して」と依頼するよりも、具体的なゴールを示すことで、より良い結果につながります。

 調査結果を受け取るCursorのエージェントに指示を出すと、以下のような詳細な分析結果を受け取りました。
BacklogAPIのアクティビティ分析レポート
1. APIレスポンスの構造と特徴
レスポンス基本構造
Backlog APIの/projectsエンドポイントは、ユーザーの最近のアクティビティを配列形式で返します。各アクティビティは以下の主要な情報を含んでいます：
id: アクティビティの固有ID
project: プロジェクト情報（ID、キー、名前など）
type: アクティビティのタイプ（数値形式）
content: アクティビティの詳細内容
  id: 関連するチケットなどのID
  key_id: チケット番号
  summary: タイトル
  description: 詳細説明
  comment: コメント情報（存在する場合）
  changes: 変更情報の配列（フィールド名、旧値、新値）
createdUser: アクティビティを作成したユーザー情報
created: アクティビティの作成日時
また、アクティビティの傾向や特徴に関する分析も提供されていました。
2. 分析結果と特徴
アクティビティの時系列順序:
アクティビティは作成日時順に並んでいて、最新のものが先頭に来ます。
作業内容を含むアクティビティの特定:
実質的な作業内容が含まれるのは主に以下のパターンです：
コメント付きのアクティビティ (content.comment.contentが空でない)
状態変更を含むアクティビティ (content.changes配列でfieldが"status"のもの)
担当者変更を含むアクティビティ (content.changes配列でfieldが"assigner"のもの)
このような詳細な調査結果により、実際のデータ構造やパターンを把握することができました。

 調査結果を基に実装案を依頼APIの調査結果を受け取った後、それを基にして実装案の提案をCursorに依頼しました。その結果、以下のような実装コードが生成されます。
// 特定の日のアクティビティを取得して実質的な作業内容だけをフィルタリングする関数
async function getDailyMeaningfulActivities(date) {
  const app = new Hono();
  
  // 日付のフォーマット（YYYY-MM-DD）
  const formattedDate = date.toISOString().split('T')[0];
  
  // APIからデータを取得
  app.get('/backlog/daily-report', async (c) => {
    const backlog = c.get('backlog');
    const user = await backlog.getMyself();
    
    // 特定の日の前後1週間のアクティビティを取得
    const activities = await backlog.getUserActivities(user.id, {
      count: 100 // より多くのアクティビティを取得
    });
    
    // 特定の日のアクティビティだけをフィルタリング
    const dayActivities = activities.filter(activity => {
      const activityDate = activity.created.split('T')[0];
      return activityDate === formattedDate;
    });
    
    // 実質的な作業内容を含むアクティビティだけを抽出
    const meaningfulActivities = dayActivities.filter(activity => {
      // コメントがある場合は含める
      if (activity.content.comment && activity.content.comment.content.trim()) {
        return true;
      }
      
      // 変更があり、単なる期限日変更以外なら含める
      if (activity.content.changes && activity.content.changes.length > 0) {
        // 期限日だけの変更かチェック
        const onlyMilestoneChange = activity.content.changes.every(change => 
          change.field === 'milestone');
        
        // 期限日変更のみではない場合を含める
        return !onlyMilestoneChange;
      }
      
      return false;
    });
    
    // プロジェクト別にグループ化
    const groupedByProject = {};
    meaningfulActivities.forEach(activity => {
      const projectKey = activity.project.projectKey;
      if (!groupedByProject[projectKey]) {
        groupedByProject[projectKey] = [];
      }
      groupedByProject[projectKey].push(activity);
    });
    
    return c.json({
      date: formattedDate,
      activities: meaningfulActivities,
      groupedByProject
    });
  });
}
この提案された実装は、APIの調査結果に基づいており、特定の日のアクティビティを抽出してプロジェクト別にグループ化するという目的に合致しています。まさに求めていた機能が実現されているといえるでしょう。

 実装案を適用して検証Cursorの「Apply to {ファイル名}」機能を利用して提案コードを適用し、実際の動作を確認してみました。基本的な機能は意図した通りに動くものの、完全なレポートデータ生成までは実装されていなかったため、さらなる指示が必要だと判断。追加の実装依頼を行うことにしました。

 追加実装の依頼提案に基づいて実装をしてみた。このままレポートデータを生成する処理の実装と、typescriptの型エラー解決まで進めて
この追加指示を受けて、Cursorは型定義の問題解決に取り組むとともに、レポートデータ生成処理も実装してくれました。何度か細かい調整を重ねていくうちに、最終的な実装が完成。目的としていた機能が実現されたのです。

 Cursorを効率的に使い方う４つのポイント初めてCursorを使う方に向けて、いくつかの効率的な使い方のポイントを紹介します。

 1: 目的を明確に伝える調査や実装の依頼をする際は、「最終的に何を作りたいのか」という目的を明確に伝えましょう。目的が具体的であればあるほど、より適切な調査結果や実装提案を得ることができます。曖昧な指示では、思い描いた結果と異なる提案になることもあるため注意が必要です。

 2: 小さなステップから始める一度に完成形を求めるのではなく、小さなステップから段階的に進めることをお勧めします。APIを呼び出すだけの最小限のコードから始め、調査→基本実装→検証→追加実装という流れで進めると、途中でつまずくリスクが減少します。

 3: コードの検証を忘れずにCursorの提案は優れていることが多いですが、実際の環境での検証は欠かせません。提案されたコードが意図通りに動作するかを確認してから次のステップに進むことで、安定した開発が可能になるでしょう。

 4: 段階的に指示を出していく最初の指示で完璧を求めず、対話を通じて段階的に実装を進めていく方法が効果的です。「この部分はこのように変更したい」「ここをもう少し詳しく」といった具合に、会話を重ねながら徐々に完成に近づけていくことで、より質の高い実装が実現できます。

 まとめ初めて触るSaaS APIを使った開発は、従来であれば多くの時間と試行錯誤を必要とするものでした。しかし、Cursorを活用することで、APIの調査から実装までをかなり効率的に進められることがわかります。
この記事で紹介したアプローチは以下のような流れになっています。
シンプルなコードでAPIを呼び出してみる
Cursorに詳細な調査を依頼する
調査結果に基づいた実装案をCursorに提案してもらう
段階的に機能を拡張して完成に近づけていく
このようなプロセスを通じて、初めて触れるAPIでも比較的短時間で使いこなせるようになりました。
Cursorを初めて使う方でも、明確な目的を持ち、ステップバイステップで進めれば、APIの調査から実装までスムーズに進められるはずです。ぜひ皆さんも、開発プロセスにCursorを取り入れてみてはいかがでしょうか。

デジタルキューブPublication

デザイン、アート、テクノロジーの交点に立ち価値を創造する。私たちの使命は、お客様のブランドと価値のストーリーに命を吹き込むことです。私たちは、デザイン、アート、テクノロジーの交点に立ち、クリエイティブへの情熱を刺激する体験を創造します。

Cursorの活用法：APIを理解させる

まずはシンプルなコードでAPIを呼ぶ

Cursorに調査を依頼する

調査結果を受け取る

調査結果を基に実装案を依頼

実装案を適用して検証

追加実装の依頼

Cursorを効率的に使い方う４つのポイント

1: 目的を明確に伝える

2: 小さなステップから始める

3: コードの検証を忘れずに

4: 段階的に指示を出していく

まとめ

Discussion