Cursorのセットアップメモ

# 背景・目的
コードエディタのCursorをインストールしたときのメモと特徴を整理しました。

# まとめ
下記に特徴を整理します。

|特徴|説明|
|:--|:--|
|機能|下記のような機能があります<BR>・Tabキー<BR>・マルチライン編集<BR>・スマートリライト<BR>・カーソル予測<BR>・チャット<BR>・インスタント適用<BR>・コードの参照<BR>・コードベース回答<BR>・画像を使用<BR>・ウェブに問い合わせ<BR>・ドキュメントを活用|
|Tabキー|強力なオートコンプリート機能があり、次の編集内容を予測する|
|マルチライン編集|Cursor は一度に複数の編集提案を行うことができ、時間を節約できる|
|スマートリライト|雑に入力しても、Cursor がミスを修正してくれる|
|カーソル予測|Cursor は次にカーソルを置く位置を予測し、コード内をスムーズに移動できるようにする|
|チャット|チャット機能を使うと、コードベースを“参照”できるAIと対話できる|
|インスタント適用|チャット内のコードブロック上部にある再生ボタンをクリックすると、チャットのコード提案をそのままコードベースに反映できる|
|コードベース回答|コードベースについて質問するには @Codebase や ⌘ Enter を使う|
|コードの参照|AI が利用するコンテキストとして @ 記号を使ってコードを参照できる|
|画像を使用|チャットの下にある画像ボタンを押すか、画像を入力ボックスにドラッグすると、チャットに視覚情報を追加できる|
|ウェブに問い合わせ|最新の情報を取得したい場合は @Web を使用する|
|ドキュメントを活用|よく使われるライブラリは @LibraryName で参照できる|
|エージェント|Cursor の agent モードは、エンドツーエンドでタスクを完了できる|
|コンテキストの自動取得|カスタムリトリーバルモデルを使い、Cursor はコードベースを理解できる|
|コマンドの実行|Cursor は自動でターミナルコマンドを作成・実行できる|
| エラーの繰り返し修正|Cursor は lint エラーを自動検知し、修正を適用できる|
|料金|下記の料金プランがあります。<BR>・Hobby<BR>・Pro<BR>・Business|


# 概要
## 機能
どのような機能があるか、下記を基に整理します。

https://www.cursor.com/ja/features

### Tabキー
- Cursor には強力なオートコンプリート機能があり、次の編集内容を予測する
- いったん有効にすると常時オンになり、最近の変更内容を考慮しつつ複数行にわたるコード提案を行う

#### マルチライン編集
- Cursor は一度に複数の編集提案を行うことができ、時間を節約できる

#### スマートリライト
- 雑に入力しても、Cursor がミスを修正してくれる

#### カーソル予測
- Cursor は次にカーソルを置く位置を予測し、コード内をスムーズに移動できるようにする

### チャット
- チャット機能を使うと、コードベースを“参照”できるAIと対話できる
- チャットは常に現在のファイルとカーソルを把握しているため、「ここにバグがある？」といった質問も可能
- 特定のコードブロックをコンテキストに追加するには⌘+Shift+L または “@.” を使う
- コードベース全体を対象にチャットしたい場合は、⌘+Enter で実行できる

#### インスタント適用
チャット内のコードブロック上部にある再生ボタンをクリックすると、チャットのコード提案をそのままコードベースに反映できる

#### コードベース回答
- コードベースについて質問するには @Codebase や ⌘ Enter を使う
- Cursor がコードベースを検索し、問い合わせに関連するコードを探し出す

#### コードの参照
- AI が利用するコンテキストとして @ 記号を使ってコードを参照できる
- @ を入力すると、フォルダ内のファイルやコードシンボルの一覧が表示される

#### 画像を使用
- チャットの下にある画像ボタンを押すか、画像を入力ボックスにドラッグすると、チャットに視覚情報を追加できる

#### ウェブに問い合わせ
- 最新の情報を取得したい場合は @Web を使用する
- Cursor はウェブを検索し、最新のデータを使って質問に答える

#### ドキュメントを活用
- よく使われるライブラリは @LibraryName で参照でき、自分で追加したい場合は @Docs → Add new doc を使う

### エージェント
- Cursor の agent モードは、エンドツーエンドでタスクを完了できる
- 実行が速く、プログラマーも常に確認できる仕組み
- Composer で “agent” を選択する

#### コンテキストの自動取得
- カスタムリトリーバルモデルを使い、Cursor はコードベースを理解できる
- 手動でコンテキストを追加する手間が軽減される

#### コマンドの実行
- Cursor は自動でターミナルコマンドを作成・実行できる
- デフォルトでは、すべてのコマンドに対して確認を求められる

#### エラーの繰り返し修正
- Cursor は lint エラーを自動検知し、修正を適用できる
- 手作業のデバッグを減らすことができる

### ⌘ K
- ⌘ K を使えば、AI でコードを編集・作成できる
- 編集したいときはコードを選択し、“Edit” をクリックして、どのように変更したいかを記述する
- まったく新しいコードを生成したい場合は、何も選択していない状態で ⌘ K を入力する

#### ターミナル ⌘ K
- ターミナルで ⌘ K を使うと、平易な英語で端末コマンドを書ける。Cursor が必要なコマンドに変換してくれる

#### クイック質問
- 特定のコードについて簡単な質問がある場合は、そのコードを選択し、“quick question” をクリックするとすぐに回答が得られる

## 料金プラン
3つのプランがある

||Hobby|Pro|Business|
|:--|:--|:--|:--|
|特徴|Pro板の2週間トライアル<BR>2000回の補完<BR>50回の低速プレミアムリクエスト|Hobbyの全機能<BR>500回/月の補完リクエスト<BR>無制限の低速プレミアムリクエスト<BR>1日10回のo1-mini利用|Proの全機能<BR>組織全体でのプライバシーモード<BR>チームの一括請求<BR>利用状況を確認できる管理社向けダッシュボード<BR>SAML/OIDC SSO|
|料金|無料|$20/月|$40/月|


### FAQ
#### 高速リクエストと低速リクエストとは
- プレミアムモデルの高速リクエストはバックエンドで最優先処理される
- Pro版の場合、高速リクエストの上限に達しても引き続きプレミアムモデルを使えるが、負荷が高い時にはリクエストが待機列に入ることがある

#### Cursor Tab とは
- Cursor のネイティブなオートコンプリート機能
- Copilot よりも強力で、特に強力なメモリを活用し、完全な差分を提案してくれる

#### プレミアムモデルとは
- 下記はプレミアムモデルに該当する
    - GPT-4
    - GPT-4o
    - Claude 3.5 Sonnet
- これらのモデルは月に500回の高速リクエストと無制限の低速リクエストが可能
- Claude 3.5 Haiku へのリクエストは 1/3 回分としてカウントされる

#### Cursor のすべての機能は API キーで使えるか
- いくつかの重要な機能（Tab やチャットからの Apply など）はカスタムモデルによって動作しているため、API キーによる課金はできない

#### どのようなコードが保存されるか
- 「プライバシーモード」を有効にすると、コードはあなたのマシン以外に保存されることはなく、学習にも使用されない
- そうでない場合、Cursor の改善を目的として、使用状況やテレメトリ情報（プロンプト、コードスニペット、エディタ操作など）を収集することがある


# 実践
## 前提
- MAC OSで試しています

## インストール

1. 下記のサイトに移動します
    https://www.cursor.com/ja

1. ダウンロード MACOSをクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/1c354d70-5408-4d7b-b687-08e700cfdc82.png)

1. Cursor-darwin-universal.dmgをクリックします
1. ドラッグ＆ドロップします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/5b4c52d5-1788-4570-ad29-875e484b4474.png)

1. Cursorをクリックします
1. 開きました

## セットアップ
1. 下記を設定して、「Continue」をクリックします
    1. Keyboard：VS Code
    1. Language for AI：日本語
    1. Codebase-wide：Enabled
    1. Add Terminal Command：
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/17b92944-fdb1-4cee-8dd9-e3df6c3eb6ff.png)

1. VS Codeの拡張機能を移管する場合は、「Use Extentions」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/84e43ed6-8478-45a6-8df1-00356a3835f9.png)

1. ポップアップが表示されるので、「許可」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/bf10408e-7d5d-4e3f-93f0-fe93b223c2da.png)

1. Data Preferenceで、「Privacy Mode」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/a7e5bcda-cbc6-49e5-a818-b01d9091c7b1.png)

1. アカウントを持っていない場合は、「Sign up」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/c037b276-239c-467f-811c-0e588eafeb0c.png)
1. ブラウザが開きますので、GitHubアカウントなどでアカウントを作成します
1. Authorize getcursorをクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/3b2d9131-2d9a-4bb9-9990-5aef7bcb8c61.png)
1. Yes, Log INをクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/1825ff28-a589-4066-880d-3f024b294e43.png)
1. Cursorを開きますかというポップアップが表示されるので、「Cursorを開く」をクリックします

1. 開きました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/60352145-7768-41ac-8af9-65f24b3e35f4.png)


## git clone
1. Clone repoをクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/5161a770-57ac-4c37-83e7-6d4a75a1d328.png)

1. GitHubのURLを入力します
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/4d694166-bfaf-426a-a970-13a0b9956e8d.png)

1. 「Select as Repository Destination」をクリックします
1. 「Would you like to open the cloned repository?」が表示されるので「Open」をクリックします


## 各種機能の確認
### コード生成
1. templatesフォルダを作成します
1. ses.yamlというCloudFormationテンプレートを作成します
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/0b0d717e-67e2-4337-b29f-c71f5bea09ff.png)

1. Command + Kを入力します
1. 表示されます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/59c95f51-2f72-4aab-982c-b9068df647f7.png)
1. モデルを複数選べるようです
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/9ca00582-a383-4183-8828-508dd026673b.png)

1. 「DKIMを登録するSESのCloudFormationテンプレートを書いて」と入力してみます
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/e2d8dbb6-c0e7-445d-b73b-865e38d2f83a.png)

1. 生成されました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/8ccc67e0-a92b-418f-9f7c-e580818d9d98.png)

    ```yml
    AWSTemplateFormatVersion: '2010-09-09'
    Description: 'AWS SES Configuration with DKIM'
    
    Parameters:
      DomainName:
        Type: String
        Description: The domain name to set up SES and DKIM for
        Default: example.com
    
    Resources:
      EmailDomain:
        Type: AWS::SES::EmailIdentity
        Properties:
          EmailIdentity: !Ref DomainName
    
      DkimConfiguration:
        Type: AWS::SES::DkimSigningAttributes
        Properties:
          EmailIdentity: !Ref DomainName
          SigningAttributes:
            DomainSigningPrivateKey: !Ref AWS::NoValue
            DomainSigningSelector: !Ref AWS::NoValue
            NextSigningKeyLength: RSA_2048
          SigningAttributesOrigin: AWS_SES
    
    Outputs:
      DkimTokens:
        Description: DKIM tokens for DNS configuration
        Value: !GetAtt EmailDomain.DkimTokens
      DkimDNSRecords:
        Description: DKIM DNS records to be added to your DNS configuration
        Value: !Join
          - "\n"
          - !Split
            - ","
            - !Join
              - ","
              - !GetAtt EmailDomain.DkimDNSTokens
    ```

1. Acceptするには、「Command + Enter」を入力します

### Codebase Answers
1. 画面右に「このコードを解説して」と入力します
1. 下記について説明してくれました
    - 各パートごとに解説
    - パラメータ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/d05de624-b7d4-4bdb-8bfa-38b1f271ce84.png)

1. 次に「このCloudFormationテンプレートの実行コマンドを生成して」と指定してみます
1. 生成してくれました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/7e4dfc5a-ad8b-4c46-b675-59b7a7ae74cc.png)

1. このまま「Run command」（Command + Enter）で実行してみます
    - ※ your-domain.comは自身のドメインに変更します

1. 失敗すると、すぐに修正されたコマンドを生成してくれました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/98c8e06a-656b-4143-b005-9bbe2e4873bd.png)

1. 次にCredentialでエラーが出ました
1. ここについては、自身のProfileを環境変数に設定しておきます
1. 一旦ここまでとしておきます

### エラーの修正 
1. Warningが表示されています
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/86aa3fc4-d408-4438-8693-904e7640cbb0.png)

1. 該当箇所をフォーカスすると、Syntax Errorが表示されました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/b863453f-7809-4f0e-bd40-35b4e802477f.png)

1. Fix in Chatをクリックします
1. 解決方法が表示されました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/fccad3b5-3204-4de0-af15-9f29fd7f17a0.png)

1. 実行します
1. 以下のメッセージが表示されました
    ```bash
    これでcfn-lintが正しくインストールされ、CloudFormationテンプレートの検証が可能になりました。エラーが解消されているはずです。
    もし問題が続く場合は、お知らせください。
    ```
1. ```@# ses-mail まだエラーが続くよ```と入力すると下記が表示されました
    ```bash
    brew install cfn-lint
    ```

1. 今回はここまでとします

# 考察
今回は、Cursorをインストールし簡単に使用してみました。個人的にはVSCodeより使いやすく親しみやすいです。
こ

# 参考
https://www.cursor.com/ja