株式会社グローバルゲート公式ブログ
AI時代のコードエディタ【Cursor】を試す
こんにちは、株式会社グローバルゲートのモーリーです。
4月ということで、当社の本社がある大阪では万博の開催があと2週間に迫っています。
楽しみというよりもきちんと開幕できるのかが不安視されている実情ではありますが、大阪府民としては盛り上がることを願うばかりです。
さて、今回はCursorというエディタについてご紹介したいと思います。
新時代のAIエディタという触れ込みですが、果たしてどのようなものなのでしょうか。
Cursorとは？
プログラマ向けのエディタはVisualStudio Code（VSCode）が圧倒的多数派ですが、CursorはそのVSCodeをフォークして（派生して）開発されたAIによる開発支援を密に組み込んだエディタです。
「コードのためのAIアシスタント」としての機能が統合されており、単なる補完ではなく、自然言語でコードの説明、リファクタリング、デバッグ、テストコード生成など、幅広い作業をAIと対話しながら進めることができます。
最大の特徴はエディタ内に組み込まれたチャットUIで、現在のコードやフォルダ構成を把握した上での質問や編集が可能な点です。
ちなみに…VSCodeとの関係は？
VSCodeをフォークして開発されているということで、UIやショートカットなどの画面構成は非常によく似ています。そのため、VSCodeユーザーが移行しても戸惑うことはほとんどありません
さらにVSCode向けの拡張機能も互換性があり、ほとんどのものがそのまま動作するのも嬉しいところです。
VSCode
Cursor
Cursorのインストール
インストールは難しいことはありません。
インストーラーをダウンロードし、実行します。
Cursorの日本語化
「Japanese Language Pack for VS Code」というVSCode用の日本語化用拡張機能がそのまま使えます。
インストールしてエディタを再起動したらインターフェイスが日本語になります。
実際に使ってみる
細かな設定はいろいろとありますが、ひとまず使ってみましょう。
いくつかプログラムを書く作業を試してみます。
プログラムを書くときにAIを活用している、と言っても、コードの一部をコピーしてChatGPTに貼り付けて回答を待つ、という使い方をされている方も多いと思います。
Cursorは統合型エディタであるため、ファイルやフォルダの生成まで含めて包括的な作業を実行することができます。
ホームページを作ってみる
まずはホームページを作れるかどうか試してみます。
空のフォルダ内で右クリックし、「Cursorで開く」を選択します。
New chat欄にプロンプトを入力します。
プロンプトでサイト構成とお店の特徴を伝えました。
タイプをAgentにするとファイル生成まで含めて行ってくれます。Sendをクリックすると実行されます。さぁ、どうでしょうか？
ファイルの生成やコードの記述が自動で進んでいきます。
結果は・・・こちらです！
ひゃ～！すごい！ちゃんとできてる！！！！！！！！
HTMLがしっかりしているのも高評価です。エディタで作ったら全部position:absoluteになっていた時代もあったというのに…
できあったものに修正をお願いしてみましょう。
一見上手く修正してくれたように見えますが、文字の一部が背景と同色になってしまいました（メニュー名が白文字になってしまった）
変更の度合いによってはすべて1から生成し直すか、AIに頼らず手作業で行ったほうがいいかもしれません。
今回お願いしたイタリア料理店は比較的シンプルなデザインでした。
ではもっと弾けたデザインは対応できるのでしょうか？
ということで、VTuberの公式サイトを想定して作ってもらいました。
魚介類に詳しい新人VTuber、白良浜（しららはま）うみうしの公式サイトです。
サンプルはこちら
配色にセンスを感じますが、まだ弾けっぷりが足りないですね。
Cursorでは画像の添付もできますので、見本となるWebサイトのスクリーンショットを提示してみるとどうなるでしょうか。
星街すいせいさんのWebサイトのキャプチャを添付し、改めて1からサイト制作をお願いしてみました。
サンプルはこちら
おおっと、これはなかなかいいんじゃないでしょうか。
深海のような背景のきらめきも雰囲気が出ています。浮遊感のあるアニメーションエフェクトも面白いと思いました。
生成AIは特定の単語に強く影響されるケースがあり、今回の場合は「うみうし」が強い影響力を持ってしまったようです。
なお、白良浜うみうしのイメージはChatGPTで生成しました。
Vデビューした際はよろしくお願いします。
アプリを作ってみる
次はもう少し難しいアプリを作ってみたいと思います。
Flutterでフラッシュ暗算ゲームを作ってもらいましょう。
おお～、ちゃんと動きます！
（難しくて正解のときの表示が確認できなかった…）
Flutterアプリの開発時に必要なコマンド実行までできるのも統合型エディタならではのメリットです。
画像（SVG）を作ってみる
Cursorには画像生成機能はありませんが、内部がテキストであるSVGなら生成できるかもしれませんので試してみます。
SVGとしては正しい出力ができましたが、クオリティはちょっと…という結果になりました。違うAIにお願いしたほうがよさそうです。
まとめ
ということで、今回はAIエディタ「Cursor」をご紹介しました。
プログラマの間ではCursorをメインに使う方も増えつつあり、賢く使えば劇的に生産性を上げることができそうです。
私も引き続き試してみたいと思います。
【関連記事】
