Cursor 101

Cursor チュートリアル 1 - Tab 機能の使用

AI 支援プログラミングの最もシンプルで直接的な形式とは何でしょうか?なぜ異なる AI エディタが Tab 機能を実装しているのに、体験がこれほど異なるのでしょうか?Cursor の Tab 機能はどのような能力を提供しているのでしょうか?

著者: 鳥飛魚躍 | 原文リンク

Cursor は AI 支援プログラミングのために3つの主要機能を提供しています:

  1. Tab 機能
  2. プロンプトボックス機能(Cmd + K)
  3. チャット機能(Cmd + L)

このチュートリアルでは、ユーザーに Cursor の魔力を最もよく示す Tab 機能に焦点を当てます。

なぜ異なる AI エディタが Tab 機能を実装しているのに、体験がこれほど異なるのでしょうか?Cursor の Tab 機能はどのような能力を提供しているのでしょうか?

Tab 機能とは何か?

AI 支援プログラミングの最もシンプルで直接的な形式とは何でしょうか?それは、現在のコードコンテキストに基づいて自動的にコード補完の提案を生成し、ユーザーが Tab キーだけでコードを修正および完成できるようにすることです。

これ以上にシンプルで直接的な支援方法は考えられません。ユーザーは要件を記述する必要がなく、AI が直接提案を提供します。これが最も自然で直接的な支援方法です。

Cursor の Tab 機能は、まさにそのようなプログラミング支援ツールです。GitHub Copilot や MarsCode と比較して、Cursor の最大の利点はコード編集能力にあります。コードの挿入だけでなく、既存のコードを修正することもでき、これは Cursor が公式ドキュメントで繰り返し強調している点です:

Cursor のコード修正能力

より詳細な比較は、以前の記事「なぜ Github Copilot を放棄するのか?」でも見ることができます。

Tab の基本機能

複数行補完

最も基本的な機能はコード生成で、現在のカーソル位置に基づいて直接コード補完の提案を生成します。以下のように:

Cursor のコード生成

この例では、関数定義と最初の行だけを入力したかもしれませんが、Cursor の Tab 機能は残りのコードをインテリジェントに補完できます。

しかし、Cursor の Tab 機能はこれだけではありません。複数行の編集もサポートしており、直接複数行のコード補完提案を生成できます。以下のように:

Cursor の複数行補完

Tab 機能は、現在のカーソルでの修正に基づいて複数行のコード補完提案を生成します。上の例では、"Block" を入力すると、他の類似の部分も "Block" で補完することを提案します。

注意:上記の例では、Tab がコード補完を提案する際、提案される補完コードはグレーのコードとして表示されます。

Tab の高度な機能

スマート書き換え(Smart Rewrite)

Cursor の Tab 機能は単純なコード補完だけではありません。既に書かれたコードをインテリジェントに書き換えることもできます。これが Cursor が最も誇る「コード編集」機能です。小さな変更から大規模なリファクタリングまで、この機能は非常に役立ちます。

Cursor のスマート書き換え

コードの書き換え(または修正)を行う際、Cursor のコード修正提案はグレーのコード提案ではなく、プロンプトボックスの形で表示されます。

カーソル予測(Cursor Prediction)

上記で紹介した機能はすべて、Cursor が現在のカーソル位置に基づき、コードのコンテキストと組み合わせて補完または修正提案を行います。

さらに進んで、

Cursor は次に編集する可能性のある位置を予測することもできます。この強力な機能は「カーソル予測」と呼ばれています。(Cursor が Cursor と呼ばれる理由が分かったような気がします)

Cursor のカーソル予測

上の例では、関数の名前を変更すると、Cursor は下の赤丸の位置の関数名も変更すべきだと予測しています。

Cursor カーソル予測例2

同様に、この例では updates 変数の名前を updatesToServer に変更すると、Cursor は下の updates 変数も updatesToServer に更新すべきだと予測します。

小技

Tab in Peek

Cursor の Tab 機能はメインの編集ウィンドウだけでなく、"Go to Definition" や "Go to Type Definition" のプレビューウィンドウでも使用できます。この機能は新しい関数パラメータを追加する際に特に便利です。

例えば、関数定義を修正し、その関数を使用しているすべての箇所を素早く修正する必要がある場合、この機能は非常に便利です。特に vim ユーザーにとっては、gd コマンドと組み合わせて、まず関数定義を修正し、その後すべての呼び出し箇所を素早く修正できます。

Cursor のプレビューウィンドウでの Tab 機能の使用

上の例では、ユーザーがプレビューウィンドウで Tab 機能を使用して関数定義を修正し、新しいパラメータを追加しているのが分かります。

この機能は、コードのリファクタリングの効率を大幅に向上させ、新機能の追加や既存のインターフェースの修正をより簡単かつ迅速に行うことができます。

部分的な受け入れ

Ctrl/⌘ と右矢印キーを押すことで、提案の次の単語を受け入れることができます。これにより、コード補完のプロセスをより細かく制御できます。

Tab 機能の将来の発展

使用体験の観点から、Tab 機能のコンテキスト参照にはまだ改善の余地があります。例えば、他のファイルから修正したコードに戻ってきた時、Tab 機能の提案のエラー率が比較的高くなります。

Cursor のブログNext Action Predictionで言及されている将来の計画によると、Tab 機能は将来、ファイルをまたいだコード生成提案をサポートし、現在のファイルのコード提案生成に限定されなくなります。これは、Cursor がプロジェクト全体のコンテキストをより良く理解し、より正確で有用なコード提案を提供できるようになることを意味します。

まとめ

総じて、Cursor の Tab 機能は強力で直感的な AI 支援プログラミングツールです。このチュートリアルを通じて、あなたはそれについて十分な理解を得られたはずです。

しかし、Cursor の強力さは見た目ほど単純ではありません。深く研究してみると、Cursor のチームが非常に多くの改善と最適化作業を行っていることがわかります。

Cursor の Tab 機能は自社開発のモデルを使用しており、Cursor のブログでは、モデルのトレーニング方法や最適化の詳細について多くの言及があります。興味のある方はぜひ見てみてください。