AIコードエディタ｢Cursor｣の導入 | 画像付きで解説

近年、AIを活用した開発ツールが急速に進化しています。
その中でも特に注目されているのが、AIコードエディタ｢Cursor｣です。

Cursorは、AIと会話しながら共に開発していくことができる開発環境で、従来のエディタとは一線を画すツールとして世界中の開発者から注目を集めています。
弊社の開発作業でも必須のエディターとして｢Cursor｣を利用しております。
設計や実装回りの検討に｢ChatGPT｣を利用し、実際の実装においては、この｢Cursor｣のAIに指示を出して共に開発を進めています。

今回は｢Cursor｣を新規に導入する機会がありましたので、Cursorとはどのようなツールなのか、Web制作者としておすすめできる理由、そしてインストールからログインまでの手順を画像付きで解説していきたいと思います。

1.Cursorとは

Cursorは、AIと共同でプログラミングができるコードエディタです。
見た目や操作感は Visual Studio Code（VSCode） に非常に近く、VSCodeユーザーであればほぼ違和感なく使うことができます。

最大の特徴は、AIがエディタの中に統合されていることです。例えば次のようなことが可能になります。

• コードを書きながらAIに質問できる
• プロジェクト全体をAIが理解してくれる
• バグの原因をAIが分析してくれる
• 新しいコードをAIが生成してくれる

つまり、AIとペアプログラミングをするような感覚で開発ができるエディタとなります。

2.Web制作者としてCursorをおすすめする理由

2.1.コードの理解が圧倒的に速くなる

既存のコードを読むときに、開発規模の大きさや、複数のプロジェクトを見ていたりすると、どうしても｢このファイルは何をしていたっけ？｣、｢この関数はどこで使われていたっけ？｣と理解するのに時間がかかることがあります。

Cursorでは、｢このファイルの役割を説明して｣とAIに聞くだけで、コードの内容を整理して説明してくれます。

なので、既存サイトの改修や、他社が作ったコードの解析などで非常に役立ちます。

2.2.バグ調査が圧倒的に速い

エラーが出たとき、そのエラーメッセージや該当コードをそのままAIに見せることで、原因の候補を提示してくれます。

特に JavaScript、PHP、WordPress、API連携 などのデバッグでは非常に役立ちます。

2.3.コード生成のスピードが速い

例えば「WordPressのカスタム投稿タイプを作るコードを書いて」と指示すると、必要なコードをすぐに生成してくれます。

あえて簡単な例で記載していますが、もっと具体的な指示を出せば、高度な開発作業についても必要なコードを即座に生成してくれます。

そのため、コードを書く時間を大幅に削減できるため、開発効率が大きく向上します。

3.Cursorを導入する前に準備するもの

Cursorの利用には GitHubアカウント があるとスムーズです。

GitHubは世界中の開発者が利用しているコード管理サービスで、無料でアカウントを作成できます。

4.Cursorのダウンロード

まずはCursorの公式サイトのダウンロードページへアクセスします。

https://cursor.com/ja/download/

Windows/Macのどちらでも利用できます。
利用しているPCのCPUに応じた版数をダウンロードすると良いでしょう。

cursorのダウンロード画面

5.Cursorのログイン

Cursorを起動するとログイン画面が表示されます。

GitHubアカウントでログインする方法が最も簡単です。
(｢Log In｣を押下すると、ログイン画面に遷移します。)

cursorの初期画面

cursorのログイン画面

6.GitHub認証

ブラウザ側でGitHubの認証画面が表示されます。
問題なければ Authorize Cursor をクリックします。

GitHub認証

7.無料トライアルの案内

Proプランの7日間無料トライアルの案内が表示されることがあります。
まずは試すだけの場合は Skip for now を選択すれば問題ありません。

Proプランの7日間無料トライアルの案内

8.データ共有設定

Cursor改善のためのデータ共有設定が表示されます。
これは通常はOFFにしますね。

データ共有設定

9.Review Setting

こちらは、環境に合わせて接続設定を行ってください。

Review Setting画面

10.Cursorログイン完了

「You’re all set!」の画面が表示されればセットアップ完了です。
ブラウザを閉じてCursorアプリに戻れば利用できます。

Downloadとありますが、今回は既にダウンロード済みなので、そのまま閉じて大丈夫です。

セットアップ完了

11.まとめ

• 既存コードの解析
• バグ調査
• コード生成
• 開発スピードの向上

AIと一緒に開発するスタイルは今後ますます一般的になっていく中で、Webサイト制作やシステム開発に従事する方で、まだ｢cursor｣を使ったことが無いという方は是非使ってみてください。