🔰話題のAIエディタ「Cursor」のインストール・AIコード生成まで！

はじめに

Cursor（カーソル）というAIエディタが便利らしく、Cursorのインストール方法から、AIでのコード生成までの流れをご紹介です😃

ちなみにこちらのCursor、
・エディタ→VSCodeベース
・AI→ChatGPTベース
のようです！🙌

インストール

まずは公式サイトからインストールしましょう😆

セットアップ

インストールできたら立ち上げましょう〜

立ち上がったら最初の画面では、

1. Languageに「日本語」を入力
2. Command Lineの+ Install "cursor"をクリックしてコマンドラインに登録

しておくと良いと思います！😆

Continueで進んだ次の画面では、VSCodeの拡張機能をCursorでも使うか聞かれるので、Use Extensionsを選んでおくと便利です！

次にCursorへのログインorサインアップを求められるため、初めてであればSigh UpにてCursorアカウントを作成しましょう！

グーグルかGitHub連携でのアカウント作成も可能です！

（一応アカウント連携プロセス中のスクショです）

作成できたらCursorアプリに戻りましょう！😃

これでAIエディタCursorが使用できる状態になりました！🙌🎉🎉🎉
ベースがVSCodeなのでかなり似てますね！😳

ちなみにGetting startedに書かれている英語は以下のような感じです
グーグル翻訳使いました😆

＃ はじめる

カーソルへようこそ。 基本は次のとおりです。

• コードを強調表示します。 Cmd+K を押して編集を促します。
• 右バーのボタン (右上) をクリックしてチャットを開きます。
  • コードをハイライト表示して Cmd+Shift+L を押すと、AI がコードの特定の部分に集中します
  • リポジトリ全体について尋ねるには、「コードベースあり」ボタンを試してください。
  • ドキュメントをインポートするには @ を使用します
• lint エラーの上にマウスを移動します。 「チャットで修正」をクリックします。
• ターミナルエラーの上にマウスを置きます。 「自動デバッグ」をクリックします。

Cursor を使用して編集を生成し、バグを見つけ、コードを検索し、ドキュメントについて学び、コードを説明してみてください。

問題が発生した場合、またはフィードバックがある場合は、お気軽に [e-mail] までご連絡ください。

「リポジトリ全体について尋ねる」機能が気になります😳😳

AIコード生成

⌘＋KキーにてAIを呼び出します！

gpt-3.5かgpt-4は選択式で選べます😃

（無料プランだとgpt-4は月50回までという利用制限があるようです）

試しに、「fizzbuzzを作成して。」とお願いしてみました！

fizzbuzz.js

for (let i = 1; i <= 100; i++) {
  let output = '';
  if (i % 3 === 0) output += 'Fizz';
  if (i % 5 === 0) output += 'Buzz';
  console.log(output || i);
}

一応実行結果です😃

$ osascript -l JavaScript fizzbuzz.js
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
Fizz
22
23
Fizz
Buzz
26
Fizz
28
29
FizzBuzz
31
32
Fizz
34
Buzz
Fizz
37
38
Fizz
Buzz
41
Fizz
43
44
FizzBuzz
46
47
Fizz
49
Buzz
Fizz
52
53
Fizz
Buzz
56
Fizz
58
59
FizzBuzz
61
62
Fizz
64
Buzz
Fizz
67
68
Fizz
Buzz
71
Fizz
73
74
FizzBuzz
76
77
Fizz
79
Buzz
Fizz
82
83
Fizz
Buzz
86
Fizz
88
89
FizzBuzz
91
92
Fizz
94
Buzz
Fizz
97
98
Fizz
Buzz

すごいです！😆

おわりに

お読みいただきありがとうございました。
この記事では、Cursorエディタのインストール方法からAIによるコード生成までを紹介しましたが、Cursorを利用することで得られるメリットはさまざまです。例えば、AIによるコード生成は開発プロセスを加速させ、効率的なコーディングを実現することができます。

最後に、Cursorを使う際には、自分のスタイルや開発フローに合わせてカスタマイズすることをお勧めします。自身のコーディングスタイルやニーズに合わせて、Cursorを最大限に活用してください。皆さんの開発体験がより充実したものになることを願っています！

ありがとうございました！

また、VSCodeベースのためすごく入りやすいと思いました！
どなたかの参考になれば嬉しいです！

（「おわりに」の文章のほとんどをChatGPTに考えてもらいました…！すごい…😂）

参考

cursor

MacでJavaScript実行

Qiita記事作成