はじめに

私は普段からCursorを使用しており、
チャットによる開発支援では助けられた経験が何度もあります。
ただ、最近はチャットだけではなくCopilot++のコード補完機能にも助けられているので、
どのように活用しているかをまとめました。

目次

CursorのCopilot++の設定方法
実際の使用例
最後に

CursorのCopilot++の設定方法

右上の歯車マークからCursor Settingsを呼び出す

Cursor Settings　の Cursor Tabをenabledにする

以上でCursorのCopilot++が使用可能になります。
ただ、その下にも設定項目もあります。
現時点で私の方ではこれらの設定の違いについて厳密には把握しきれていませんが、
デメリットは特に感じていないため基本的にenabledにしておくことをお勧めします。

Model

使用するAIモデルを選択します。fastは応答速度を優先するが精度が落ちるモデルとのことです。
おすすめ：auto(default)

Partial Accepts

入力された内容から次の内容を予測して補完する機能。

Cursor Prediction

補完を受け入れた後にTabキーを押すと、次の行に移動してさらに補完する機能。

Chunked Streaming

大きなデータやコードを小さなチャンクに分割してストリーミングする設定です。
これにより、データの処理が効率的になり、応答時間が短縮されるとのことです。

Cached Typeahead

過去の入力パターンや頻繁に使用されるコードをキャッシュし、
より早く正確な補完を行う機能。

実際の使用方法

1.事前に宣言した内容の参照

メソッドを作成した際、それを利用する箇所に関して補完してくれます。
例えば下記のようにログを表示するようなメソッドを入力したとします。

const Home = () => {
  const handleClickHello = () => {
    console.log("hello")
  }

  return (
    <div>
      <h1>Home</h1>
      <p>welcome to my home page</p>
    </div>
  )
}

export default Home

すると、メソッドを利用しそうな箇所にカーソルがあった際、
メソッドを利用したコードを補完してくれます。
場合によってはメソッドを定義した段階で補完してくれることもあります。

2.引数の推定

Copilot++ではメソッドの引数の補完も行ってくれます。
まずは先ほど作ったhandleClickHelloメソッドをhandleClickMessageに変更します。
このとき、引数に「me」と打った段階で後の内容を補完してくれたのでTabを押します。

同時にconsole.log("hello")をconsole.log("message")に正す修正も補完してくれます。

次にその補完を受けいれた後はbuttonのonClickの引数に関しても補完してくれました。

この3回の修正に関して、カーソルを移動せずとも
Tabを連続で押して受けいれるだけで修正ができてしまいます。

3.styleの補完

styled-componentsを用いてボタンのスタイリングを行います。
まずは下記のようにStyledButtonと入力を続けると、よく入力するbuttonの内容が補完されます。

そしてTabを押すと補完が適用され、
すでにあるbuttonの近くにカーソルを持ってくると、
作成したばかりのStyledButtonを使用するように補完してくれます。

今度は通常のcssで設定してみます。
あらかじめ下記のように別ファイルでcssの設定を行います。

home.tsxにタブを戻し、
該当の箇所に合わせるとclassNameを使用したボタンが補完されます。
こちらは

4.ダミーデータの補完・複製

まずは、下記のようにダミーデータの型定義をしたとします。

type Dummy = {
  id: numberf
  title: string
  content: string
}

type DummyList = Dummy[]

ここでダミーデータを実際に作る際は補完で例を作ってくれます。
正確には「co」と入力した時点でその前に入力していたdummyListを使用して考えてくれます。

補完してくれた内容をTabで受け入れると、今度は実際にダミーデータを補完してくれました。

もう一度Tabで受け入れると補完が反映され、さらなる追加ダミーデータも補完してくれました。

typeにdateを追加すると時刻も補完してくれ、
それに続く内容は日付を1日ずつ足して補完してくれています。

さらに一番最後の行から改行すると新たなデータを補完してくれます。

もっと多くダミーデータを増やしたい場合はすでにある３行をそのままコピーし、
例えばidだけ4に変更すると規則性に基づいて4,5,6の続きのデータを補完してくれます。

listのstyled-componentsも作成することで、
楽にリストを作成することができました。

import styled from "styled-components"

type Dummy = {
  id: string
  title: string
  content: string
  date: string
}

type DummyList = Dummy[]

const DUMMY_LIST: DummyList = [
  { id: "1", title: "タイトル1", content: "内容1", date: "2021-01-01" },
  { id: "2", title: "タイトル2", content: "内容2", date: "2021-01-02" },
  { id: "3", title: "タイトル3", content: "内容3", date: "2021-01-03" },
  { id: "4", title: "タイトル4", content: "内容4", date: "2021-01-04" },
  { id: "5", title: "タイトル5", content: "内容5", date: "2021-01-05" },
  { id: "6", title: "タイトル6", content: "内容6", date: "2021-01-06" },
]

const Home = () => {
  const handleClickMessage = (message: string) => {
    console.log(message)
  }

  return (
    <div>
      <h1>Home</h1>
      <p>welcome to my home page</p>
      <StyledButton onClick={() => handleClickMessage("hello")}>Hello</StyledButton>
      {DUMMY_LIST.map((dummy) => (
        <StyledList key={dummy.id}>
          <p>{dummy.title}</p>
          <p>{dummy.content}</p>
          <p>{dummy.date}</p>
        </StyledList>
      ))}
    </div>
  )
}

export default Home

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  width: 100px;
`

const StyledList = styled.div`
  display: flex;
  flex-direction: row;
  font-size: 12px;
  gap: 10px;
  width: 240px;
  align-items: center;
  border: 1px solid #000;
  padding: 4px;
  margin: 10px;
`

5.React固有のコードの補完

Modalのstyled-componentsを追加します。

import styled from "styled-components"

const Home = () => {
  const handleClickMessage = (message: string) => {
    console.log(message)
  }

  return (
    <div>
      <h1>Home</h1>
      <p>welcome to my home page</p>
      <StyledButton onClick={() => handleClickMessage("hello")}>Hello</StyledButton>
      <Modal>
        <ModalContent>
          <p>モーダル</p>
        </ModalContent>
      </Modal>
    </div>
  )
}

export default Home

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  width: 100px;
`

const Modal = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  display: flex;
`

const ModalContent = styled.div`
  background-color: #fff;
  width: 500px;
  height: 300px;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
`

Modalのコンポーネントにopenの引数を与えてあげると、
useStateを用いて設定をしてくれます。
（この画像では「open={open}」を指定するまで出ませんでしたが、
「open={」の段階で補完が出たこともありました）

先ほどはModalのstyled-componentsにopenの引数はありませんでしたが、
カーソルを合わせるとその補完をしてくれます。

handleClickMessageをOpenに変えようと「handleClickO」の時点で補完を出してくれています。

続いて、openがあればcloseも必要であると推測し、
handleClickCloseのメソッドも保管してくれます。

そして、handleClickOpenのボタンの文言を削除し、
カーソルを合わせると文言の補完をしてくれたのでTabで受け入れて完成です。

最後に

今回は簡単なコードで試してみましたが、普段開発をする中でも、
入力から次はこのコードを入力するだろうと予測して補完をしてくれるため大変役に立っています。

またメソッドやファイル単位の記述量を極力減らし、
わかりやすい名前をつけることで補完の精度が上がるので、
人間とAIの両方に分かりやすいコードを書く習慣にも繋がると感じました。

Cursorを使用される際は是非Copilot++の設定を有効にすることをお勧めします。