新しいエディタ「Cursor」を使ってみた。
この投稿は、Optimind Advent Calendar 2023の10日目の記事です🎄⛄️
はじめに
Cursorとは、VSCodeをフォークし、ChatGPTを搭載している新しいコードエディタです。
色々な方が記事を発信されていて、とても興味が湧いたので早速自分も試してみました。
インストールと初めての起動
公式サイトからダウンロードし、インストールを終えると、はじめに簡単な質問がいくつか設けられており、回答後すぐに立ち上がりました。
VSCodeをベースにしているということで、起動時から拡張機能やテーマ、ショートカットキーなど、即時反映されました。
私は普段、VSCode Neovimの拡張機能を入れて使っているのですが、 init.vim の設定やプラグインなども問題なく使えたので嬉しい限りです🙌
日本語化
初めて起動する際に、AIの言語として日本語を選択することができます。
これと別に、エディタの表示言語も日本語化したかったため、以下の記事を参考にさせていただきました。
サクッと触ってみたこと
起動後の初期画面では、 ~/.cursor-tutor が開かれます。
この中にはPythonとReactのチュートリアルが含まれており、Cursorの基本的な操作をお手軽に試すことができます。とっても便利。
コードの生成・編集
エディタ上で、Cmd+K を呼び出すことで、コードの生成や編集をお願いすることができます。
まず手始めに、何も選択しないで「カウンターのコンポーネントを作ってください。」というざっくりなお願いをしてみました。
すると、すぐに動くカウンターを生成してくれました。
実際に作ってもらえたコード
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: 0};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
count: state.count + 1
}));
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>
Increase
</button>
</div>
);
}
}
今度は、生成してくれたカウンターコンポーネントのコード部分を選択した状態で Cmd+Kを呼び出し、「カウンターのコンポーネントを、加算と減算ができるボタンがある形に変更してください。」とお願いしました。
こちらもすぐに編集してくれ、追加で「リファクタしてください。」ともお願いしてみました。
リファクタ後はclass componentからfunction componentに変更してくれました。
実際に編集・リファクタしてもらえたコード
function Counter() {
const [count, setCount] = React.useState(0);
const handleIncrease = () => {
setCount(prevCount => prevCount + 1);
};
const handleDecrease = () => {
setCount(prevCount => prevCount - 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrease}>
Increase
</button>
<button onClick={handleDecrease}>
Decrease
</button>
</div>
);
}
編集をお願いした際には生成されたコードがそのまま上書きされるのではなく、差分を表示してくれて、Acceptで反映させるのか、Rejectで却下するのかを選ぶことができます。
インデントの修正や不要な行の削除も自動的に行ってくれて、これも地味に便利。
ちなみに、ファイルを超えた生成は行なってくれないので、ここは手動で用意する必要がありますね。
例えば、「カウンターのコンポーネントを作ってください。」とお願いした時に、別ファイルにCounterコンポーネントを切り出して新たに生成するわけではなく、現在のファイル内に生成されます。
現在のコードに対して質問
Cmd+L を呼び出すことで、質問をすることができます。
これは、ブラウザ版ChatGPTで質問するのと同じ感覚で使えるなと思いました。
ブラウザ版の場合、コードに対して質問したいときは都度コピペする必要がありますが、Cursorでは選択範囲に対して Cmd+L することでそのまま質問できるので、アプリを切り替えるアクションが必要ないのは楽で良いですね。
公式ドキュメントを指定して質問
Cursorには、Symbols機能 があり、チャットの入力欄で @ を打ち込むと、特定のファイル・ディレクトリ内すべてを読み込んで回答してくれるなど、より詳しいコンテキストでやりとりすることができます。
また個人的に嬉しいなと思ったのが、@Docs と打ち込むと、公式ドキュメントの中から自分の欲しい答えを見つけてくれます。
@Docs と打ち込んで候補を見ることもできますし、そのまま @{{モジュールやサービスの名称}} を打ち込んでもOKです。
時間がなくて公式ドキュメントの中から欲しい情報をすぐ探せないときなんかは、すごくありがたいですね！
おわりに
最後までお読みいただき、ありがとうございました！🎉
オプティマインドでは「多様性が進んだ世の中でも、全ての人に物が届く世界を持続可能にする」という物流業界の壮大な社会課題を解決すべく、 一緒に働く仲間を大募集中です。 少しでも興味が湧いた方は是非お気軽にカジュアル面談をお申し込みください！
Discussion