LoginSignup
8
11

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

Posted at

はじめに

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

image.png

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

インストール

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

セットアップ

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

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

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

しておくと良いと思います!😆
image.png

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

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

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

(一応アカウント連携プロセス中のスクショです)
Authorize App.png

作成できたらCursorアプリに戻りましょう!😃
Screenshot 2023-11-24 at 13.58.28.png

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

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

# はじめる

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

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

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

問題が発生した場合、またはフィードバックがある場合は、お気軽に hi@cursor.so までご連絡ください。

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

AIコード生成

KキーにてAIを呼び出します!
image.png

gpt-3.5かgpt-4は選択式で選べます😃
Screenshot 2023-11-24 at 18.56.19.png
(無料プランだとgpt-4は月50回までという利用制限があるようです)

試しに、「fizzbuzzを作成して。」とお願いしてみました!
image.png

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記事作成

8
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
11