Windows11でのCursor開始手順

# サマリ
Windows11でのCursor開始手順（インストール方法）についてまとめました。

# 背景
もうAIに関するニュースを見ない日がないほど日々AIの進展・活用が進んでいる今日この頃。
さすがにAIエディターにも触れておかないとと思い、
インストールしてみました。

# ゴール
Windows11へのCursorのインストール

# 対象読者
- Cursorを使ってみたい方
- 自分（備忘）

# 環境
- ホストOS：Window11 Home　24H2

# そもそも
Cursor（カーソル）とは、AI機能を搭載したエディターで、
VS Code（Visual Studio Code）をベースにして開発されているので、
VS Codeを使っている人は同様の使用感で使うことが出来ます。

AI機能搭載エディタはほかにもGithubCopilot等もありますが、
VS CodeになじみがあるのでCursorを試してみることにしました。

# インストール手順
それではやっていきます。

### インストーラのダウンロード
下記の公式サイトにアクセスします。

https://www.cursor.com/ja

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/e57bada3-040e-4986-9862-683f1de6e5b5.png)

ダウンロードをクリックすると、インストーラがダウンロードされました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/8c5ddb2f-f2dd-4b40-9e2d-f84ec85ee2bf.png)


### インストーラの実行

ダブルクリックして実行します。
使用許諾に同意しないと次に進めないので同意します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/ccd39746-8d74-4f63-ac4c-091458fe2169.png)

インストール先を選択します。
今回はデフォルトの保存先にします。

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/ceef680e-72dd-42a7-90c6-30986b6f73a6.png)

スタートメニューにショートカットを作成するか選択します。
今回は選択しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/394235c1-1286-46a7-a152-e38d4a07bb41.png)

追加タスクの選択では、
デフォルトでは下二つにチェックが入っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/e7352573-2cac-4ecf-9431-d9d26feae7a2.png)

各項目と今回した選択についてです。
- デスクトップ上にアイコンを作成する
→文字の通りですね、デスクトップから起動することはないのでチェックしません
- エクスプローラーのファイルコンテキストメニューに[Cursorで開く]アクションを追加する
→エクスプローラーでファイルを右クリックしたら[Cursorで開く]という選択が出るようになります。
　まだお試しで使うだけなのでチェックしません。今後がっつり使うなら変えるかもしれません。
- エクスプローラーのディレクトリコンテキストメニューに[Cursorで開く]アクションを追加する
→上と同じですね、ディレクトリについてです。こちらも一旦チェックしません。
- サポートされているファイルの種類のエディターとして、Cursorを登録する
→.txtや.py等のファイルをデフォルトで開くアプリとしてCursorを登録するかの選択です。
　まだがっつり使い込むか決めていないのでチェックを外します。
- PATHへの追加(再起動後に使用可能)
→PowerShellなどのコマンドラインからcursorコマンドの実行ができるようになります。
　がっつり使うか決めていないですが、特に追加しておいて不便はないと思ったのでチェックしておきます。

というわけで、下の画像の形で次へを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/7b4c2482-c271-4e30-be1a-d7aaea90c205.png)

インストールの準備が完了ということで、
設定した内容の再確認です。（親切…！）

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/7143eb78-5519-45dd-be6f-3701223aa0aa.png)

インストールが始まります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/243c6d77-8723-42f6-a147-ac6b0d064443.png)

セットアップできました（おぉ～

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/d44a7c9c-4301-480f-a337-2926945f92e9.png)

### 起動・ログイン

Cursorが起動されました。
アカウント持っていないので、SignUpを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/d2014f1e-13ff-4efc-91c8-a833096fccac.png)

ブラウザでアカウント作成画面が出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/b6771973-1024-4309-aa6a-1b89e731a678.png)

今回はメールアドレスでサインアップします。
名前とアドレスを打ち込むと認証コードがメールで届くので打ち込みます。
パスワードを打ち込んで完了です。

すると、CursorDesktop（先ほどインストールしたアプリ）にログインするか聞かれます。
そのままログインしたいので、Yes,Log inをクリックします。

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/9c4c48a0-9e2e-41e9-bd20-1d43f3083e8a.png)


### 初期設定
ログインしたら、初期設定として
VSCodeから設定をインポートするか聞かれます。
インポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/4b925420-266c-464a-8318-6ddfc54cd455.png)

拡張機能やほかのプロファイル設定もインポートするか聞かれます。
特に問題ないかと思うので、インポートをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/0407f579-d1ec-4ed1-a56f-a3ee2231ebce.png)

テーマを選択できます。
何かかっこいいのでMidNightDarkにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/bec33d48-b00e-48dc-94f5-5f6e5696c802.png)

クイックスタートということで、
キーバインド（キーボードの割り当て）の設定についてです。
VS Code、Vim、Emacs、Sublime Textとあるので、
自分が普段使い慣れているエディタを選択したら問題ないかと思います。
VS Codeにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/990058e7-431e-4c60-ad5d-38d4c0800a3f.png)

次は、データ共有についてです。
デフォルトでは、Cursorはコードから学習する（最初１日はオフで、それ以降学習する）ということですが、
設定でオフにできるとのことなので、とりあえずチェックして前に進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/a10eb150-9a9d-4c06-ad66-61737e352cb3.png)

設定の確認ということで、
AIからのレスポンス言語の選択と、ターミナルでCursorを開けるようコマンドのインストールです。
（これインストーラ起動時にPATH追加したような…あまり気にせず進めます（おい））

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/8172c1e8-60e8-4ad2-9107-d773615a51b0.png)

無事、開けました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/0d8fe964-5cef-4565-8cf1-9468e8f8dc47.png)

# お試し
適当にHTMLを作成してもらいました。
ctrl+lで自由にAIに質問したりできます。
ctrl+kでエディタの任意の行でAIにコード追記・修正させたりできます。

勝手にコード作成してくれます。
（お試しなので内部スタイルシートになっていますがご愛嬌で・・）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/88584de8-1097-4eec-a89d-7a74e64423ec.png)

おぉ～
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/7af57c58-8185-42a7-bfd0-b1469685ec8b.png)

エディタ画面の下にRejectとAcceptがあるので、
問題なければAcceptします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/be6ebb8a-fc8d-46d7-a422-c4c9757e4760.png)

追加でCSSの追加や見栄えの良さをお願いしたらすぐにこんな形になりました。
マウスホバーエフェクトもあっという間に…！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/2ac93b36-5494-46bb-b615-b67a54d59fdf.png)

AIチャットにコピペして改善して…というのは今までやったりしていましたが、
エディター上でコードをみながらその場で自動修正もできるの便利すぎますね…！

タブ補完もあり、
こんな感じで次のリストを書こうとしたら、上で書いているコードから予測して提案してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/275c93c0-a799-4f47-bba2-a6ada7c619c1.png)


# 参考
以下の記事を参考にさせていただきました。
（簡単な操作方法についても載っています）
ありがとうございます。

https://qiita.com/ryamate/items/94a6170c4661242b4c1c#1-cursor-%E3%82%92%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%82%8B%E3%81%BE%E3%81%A7%E3%81%AE%E6%89%8B%E9%A0%86

https://zenn.dev/umi_mori/books/ai-code-editor-cursor/viewer/install

https://zenn.dev/ak/articles/f1f0a7a8688398

# 結果・まとめ
無事Cursorのインストールができ、ほんの少しだけ触ってみることが出来ました。
機能を使いこなすにはまずはいろいろ触ってみないといけませんが、ちょっと触れただけでも便利なのがわかります。
いやしかしすごいですね～
こんなに実用的に使えると、働き方もガラッと変わりますね…！
全部のキャッチアップは難しくとも、少しでもおいて行かれないように気になったものは触れていきたいと思います。