AI搭載コードエディタ「Cursor」で未来のプログラミングを体験せよ

話題のAI搭載コードエディタ「Cursor」が気になっている方は、まず付属のチュートリアル用プロジェクトで機能を試してみると良いです。簡単なチュートリアルですが、未来のプログラミングを体験できます。CursorはVSCodeのフォークなので、安心の使い心地です。

チュートリアル用プロジェクトはJavaScriptとPythonがありますが、今回はJavaScriptの方で試したのでその流れを紹介します。

Cursor をインストールする

Cursor のサイトからダウンロードしてインストールします。

Cursor を起動してチュートリアルを開始する

Cursor を起動したら、「.cursor-tutor ~」をクリックしてチュートリアルを開始します：

projects/javascript/src/ フォルダ内の index.js ファイルを開くと、チュートリアルの手順が記載されています。この Step 1-3 までを順に試していきます：

Step 1. コードの生成

index.js ファイルのコードの一番下で改行して実行すれば良いです。

Cmd+K (Mac) / Ctrl+K (Windows) で指示ウィンドウが表示されるので、「generate a react hook component that lets you play tictactoe」のように入力して、Generate ボタンを押すと生成されます：

とのことなので、まずは同ファイルにある App コンポーネントの <div> タグ内に、生成されたコンポーネントを含めます：

function App() {
  return (
    <div className="App">
      ...
      <TicTacToe />
    </div>
  );
}

ファイルをセーブします。

projects/javascript/ に移動して npm start で開発サーバを起動します：

cd projects/javascript
npm start

では、ブラウザで http://localhost:3000 にアクセスして確認してみましょう：

シンプルで機能は全然足りませんが、とりあえずプレイできるものが作れました。

生成されるコードは、同じプロンプトを使用しても変わることがあるので、上記と同じ結果になるとは限りません。パネルが横一列に並んでいたり、反応しなかったりする場合があります。その場合は、Reject をクリックしてやり直せば良いです。挙動が概ね正常であることを確認できたら、Accept ボタンを押して確定します。

Step 2. コードの追加・変更

前のステップで生成された全てのコードをハイライトして Cmd+K / Ctrl+K で、指示ウィンドウを表示させます。

とりあえず例の通り、「add inline styles, add a start screen, make it 4x4 instead of 3x3」と指示してみます：

ファイルをセーブして、ブラウザで確認してみましょう：

指示通りスタート画面が追加されてます。素晴らしい。

パネルが 4x4 になり、インラインスタイルでサイズもいい感じにしてくれています。下の段のパネルがずれていますが、こういう部分も同じ要領で指示を出して修正していけば良いでしょう。

てか「Hello World」が邪魔でしたね。削除してしまえばよかった。

最後に、指示ウィンドウの Accept ボタンで確定するのをお忘れなく。やり直す場合は Reject です。

Step 3. チャットで質問する

とりあえず生成されたコード全体について質問してみます。

コードをハイライトして Cmd+L / Ctrl+L で右サイドバーにコードがコピーされたら、その下のチャットで「explain what the code does」のように尋ねてみましょう：

かなり丁寧に説明してくれています。より詳細な説明が欲しい場合は、コードを部分的に指定して質問してみると良いです。

以上でチュートリアルは終了です。コードの生成、追加・変更、チャットといった主要な機能を試すことができました。これだけでも Cursor の威力を存分に感じられたのではないでしょうか。

補足

• この記事では、指示やチャットを英語で行いましたが、もちろん日本語でも機能します。ただし、ChatGPTや他のAIツールと同様に、英語を使った方が精度は上がります。

• Cursorは、50回まで無料でGPT-4を使えますが、そこから先はサブスクリプション登録するか、OpenAI API Keyを入力するかになります。GPT-3.5なら月200回まで無料なので、お金をかけずに使うことも可能です。