Zenn
🤖

CursorにOSSのコードを解説してもらう方法と注意点

2023/12/10に公開
OSS
Cursor
生成 AI
tech

はじめに

今年の秋頃からにわかに話題になっているAI搭載エディタ「Cursor」、使ってみました。本当にすごいですね。自分にとって、これまでのプログラミング体験がひっくり返ってしまうほどの衝撃です。

CurSorの使い方を試しているうちに「OSSのコードを読むのを手伝ってもらったら良いかも？」と思い、実際にやってみたので紹介します。

Cursorのダウンロード方法や使い方、どんなことができるのかは書きません。別で詳しい記事がたくさんあるので、そちらを読んでください。

本記事ではCursorを使ってみたらこんな感じで便利だったよ、という具体例や、使ってみてわかった注意点を紹介します。Cursorが気になっている、これからCursorを使ってみようという方にとって役に立つ情報です。

本記事は「テックキャンプ公式コミュニティ Advent Calendar 2023」の10日目の記事です。
https://adventar.org/calendars/8952

背景

筆者は今、Ruby on Rails7の目玉機能であるHotWireについて勉強しています。

勉強中疑問点が浮かんだので、HotWireの実装を読むためにOSSになっている部分のコードリーディングをすることにしました。その時、Cursorを使ってOSSのコード全体を読み込ませたらいい感じに回答してくれるんじゃない？と思い、やってみました。すると実際いいい感じになりました。

読んだコードについてはこちらの記事→【コードリーディング】Turbo Driveによるリクエストの「インターセプト」はどう行われているのか調べてみたで紹介しています。

やり方の解説

前項ではこちらの記事を書くに至った背景を説明しました。本項では、Cursorを使ったOSS
今回は例として、私が試してみたTurboのリポジトリでのやり方を紹介しています。

GitHubからOSSのコードをダウンロードする

まず、GitHubから好きなOSSのコードをダウンロードします。
以下の画像で示したボタンからzipでダウンロードしても良いですし、git cloneコマンドやGitHub CLIでダウンロードしても大丈夫です。

Zipの場合は解凍しておきましょう。

ローカルのPCでCursorを使ってOSSのコードを開く

Cursorを起動し、Cursorのヘッダーメニューにある「ファイル」→「ファイルを開く」と選択するか⌘ + oで先ほどダウンロードしたフォルダを開くことができます。Turboの場合は以下のようになりました。

AIとのチャットを開く

OSSのフォルダを開けたら、AIに質問するための
以下の画像で示した箇所をクリックすると、AIへ質問するためのチャットが出現します。

「more」の部分をクリックすると、あらかじめChatGPTに指定しておきたいことを設定できます。
タイマーのアイコンからは、以前に質問した履歴を確認できます。

コード全体を読んでもらってから質問する

チャットでの質問時は、「@ ~ 」という構文でさまざまなものをAIに渡す(回答のソースにしてもらう)ことができます。

コマンド 説明
@codebase 今開いているフォルダの中身全てを把握させる。
@docs 特定のWebドメイン配下のページを把握させる。
@file 今開いているフォルダの特定のファイルを指定。
@folder 今開いているフォルダの中の特定のフォルダを指定。
@code 今開いているフォルダの中の関数やクラス、HTML/CSSを指定。

このうち@codebaseを利用することで、今開いているフォルダの中身のコード全てを読んでもらった上で色々質問することが可能です。

実際の質問例

Turbo全体のフォルダを開いた状態でCursorに質問した例を一部紹介します。

その前に、質問の背景を知らないとわかりづらいためTurboについてごく簡単に説明しておきます。

TurboはJavaScriptのライブラリです。ユーザーがフォームを送信したりリンクをクリックした挙動を監視し、同期ではなく非同期のリクエストに変換する機能を提供します。

この変換部分について、具体的にどのようなコードで実現しているのかを調査した際の質問です。

以下が筆者の質問及びCursorの回答の例です。

質問:
@codebase
Ruby on Rails7でTurboDriveが有効なとき、data-turbo属性がついたリンクがクリックされた場合最初に発火するのはどのコードですか？

Cursorの回答

質問:
@Codebase
なんでユーザーがdata-turbo属性の要素をクリックしたからってそのLinkInterceptorクラスのメソッドが動くんですか？addEventListener的なやつがどこかで定義されているからじゃないの？

Cursorの回答

質問:
ここで呼び出されるlinkClickInterceptedメソッドは何をやっているの？

Cursorの回答

質問:
その後、実際に非同期のfetchリクエストがサーバに送られる部分の具体的なコードを見せてほしいです

Cursorの回答

注意点

ここまでCursorを使いOSSのコードを読んでいく方法やその例を説明してきました。
ここからは、やってみてわかった注意点を紹介します。

Cursorの回答は全てが正しいわけじゃない

コードを読んでいって達成したかった目標について、自分なりに納得がいくまでにそれなりの時間を要しました。

AIにコードを読み込んでもらって質問していく、という方法を実施する前までは、「コードを読んでくれるならほとんど解説してくれそうじゃん！」と楽観的に考えていました。

ただ、いざやってみると想像以上におかしな回答が返ってきます。

一番はじめに「Turboはどんなコードによってユーザーのクリックイベントをインターセプトしているの？」と聞いて返ってきたコードがこちらです。

間違ったコード例
document.addEventListener('turbo:click', function (event) {
  const link = event.target;
  if (link.getAttribute('data-turbo') == 'false') {
    return;
  }
  event.preventDefault();
  Turbo.visit(link.href);
});

「ふーんそうなんだ」と思い、このコードを前提にいくつか質問してみたもののなんだか話が噛み合いません。おかしいと思ってファイル検索をしてみたら、このコード自体がTurboのソースのどこにも存在していなかったのです。

これは典型的な生成AIのハルシネーション(間違ったことをしれっと伝えてくるやつ)だなと感じ、すぐに質問を切り替えました。特に具体的なコード例を示してきたときは、それが本当に存在するものなのか確認が必要です。

いくら解説してほしいコードを全て読み込んでいるとはいえ、その精度には限界があることを念頭におくべきです。

その後はAIの回答をヒントに自分でもソースコードを追っていって追加で質問したり、都度AIの回答したコードが実在するかや説明があってそうかを常に考えながらコードリーディングをしていきました。

良い回答を得られるかは、質問者の「質問する力」にかかっている

質問には、良い質問と悪い質問があります。

ここで言う良い質問とは、質問者が本当に得たい情報を短時間で回答してもらえる質問です。

悪い質問とは、質問者が得たい情報を最終的に得ることができなかったり、それを得るまでに回答者との問答が長い間続いてしまうような質問です。

いきなりなにかを聞くのではなく、達成したいことや現在の課題、前提や背景、参考情報を伝えたりした上で質問すると、良い質問に近づきます。

例えば、今回筆者がTurboについて質問したとき、先ほどの注意点で挙げた「存在しないコード」を念頭にしてしまったことがありました。これは前提を間違えているのですから、何を聞いても正しい回答が返ってくるわけがありません。

相手がAIではなく人間であっても、前提が間違っている質問、背景がわからない質問、そもそも何が達成したいかわからない質問をされた場合、質問者が求める回答を一発で返すことは難しいです。

ではどうすれば良いかというと、何度も質問を作ることで、経験値を貯めて精度を上げていく必要があります。ChatGPTなどのAIを使うメリットの1つはいくらでも気兼ねなく質問できることです。変な質問をしたとしても「嫌がる」ということがありません。また、「的確に質問する術を教えてください」と聞くこともできます。

「良い質問をする」ことを意識しながらたくさん質問を繰り返し、「質問する力」を高めましょう。

無料版だと質問できる回数や性能に制限がある

Cursorは無料で利用できます。その場合、ChatGPT4への質問を50回/1ヶ月まで利用することができます。その後はChatGPT3.5に切り替わり、こちらは月に200回まで質問できます。

一方、Cursorに課金することで、ChatGPT4の高速バージョン500回/1ヶ月まで利用可能になります。その後は低速のChatGPT4に切り替わり、これは無制限で利用できるようです。
本家のChatGPTと違い、Cursorは必要なコードや情報を手軽に読み込ませて使えるので、エンジニアであれば課金する価値は十分にあります。

最後に

AI搭載エディタCursorを使ってOSSのコードリーディングを行う方法や、実際にやってみて感じたこと、注意点を書きました。

Cursorにさまざまな情報を渡した上でどんなふうに質問すべきかは、もっと改善の余地がありそうです。

今回実際に質問した数は記事で紹介した例よりもずっと多いです。試行錯誤した感じだと、@を使ってコードベースを渡したときと、ファイルやフォルダ、docsを渡したときとでそれぞれ挙動が違いそうです。

より具体的なコードを渡すほど詳細を答えてくれやすくなるものの、その分正確に回答できるコードベースの範囲が狭くなる印象があります。

他の人が書いたコードを読み解くという意味ではもっと有用な使い方もありそうですし、これからどんどん使い方の事例が出てくるのが楽しみですね！

また、生成AIを使った調査についてはCursorだけではなくC他のAIも併用したり、ネットや本も活用するなど、自分で情報ソースをコントロールすることが大切ですね。

Discussion