今話題のCursorエディタを使用してみる

# Cursor とは？

Cursorエディタとは **AIでの支援機能** を搭載した次世代テキストエディタです。
既存エディタにおいても補完機能などは搭載しているものの、コードそのものを作ることはできず、結局書き手次第となっていました。

Cursorエディタでは、プロンプトで指示を入力するとコードをなんとゼロから作成することができます。
文面だけでは伝わりにくいので、早速見ていきましょう。

## ダウンロード

[こちら](https://www.cursor.com/ja) よりインストールします。

## 初期設定

初回起動すると、下記のような画面が表示されます。（2025/02時点）
ひとまず、デフォルトで進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/270ea14b-6393-41d8-a12e-0f6008b5003c.png)


VSCode を使っている場合、拡張機能を自動でインポートしてくれます！素敵！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/7d6bfb73-c9bf-4c73-83db-769c4e5ba306.png)

Cursorに対して、データの取り扱いについての選択
Cursorの改善に役立つとのこと。よくあるやつですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/f5de39e5-eca5-4495-ad24-cce2924a35fc.png)

Cursor のアカウントでログインします。
私はアカウントを持っていませんでしたが、githubのアカウントでサインアップできました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/da688938-0ce9-49c3-8a26-c948b6851abf.png)
----
### おまけ

◆ 日本語化する

下記ツールバーからコマンドパレットを実行します。（ctrl + shift + p でも可！）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/c82a083b-c2b8-4ec9-b194-04b7f568a719.png)

configure と入力して、「Configure Display Language」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/05e08e96-a657-40a8-8676-57c83a1bdfee.png)

日本語を選択します。
インストール後再起動を促されるので、そのまま再起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/780f4e3c-e75a-46f6-b208-0e65e0f974f5.png)
私はなぜかシグネチャエラーになりましたが、手動で再起動して再度↑の手順を試したところうまくいきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/30ad9166-cc3d-4511-b1c0-22f6cf7ee3a1.png)

----
◆ Live Serverのダウンロード

今回は、簡単なwebページの確認をするため拡張機能のLive Serverをダウンロードしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/e4f6cf45-0f3c-4173-8b3f-cb0990f8bbb3.png)

## AI支援機能実践編

### 初期実装

左上にチュートリアルが表示されていますが、一旦無視してひとまずテストプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/7d4afa4a-a589-4412-938d-6eca27b4bc7c.png)

ctrl + shift + k からプロンプトを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/41e07608-30ed-4ce6-836e-af6adb41a16a.png)

ひとまず、おおざっぱな実装指示を出します。
「アカウント登録画面をつくって」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/4a70f239-34a3-4f4b-b6a2-14f2d3c2aa94.png)

すると、下記のようにhtmlに出力されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/4a8761ed-a4f1-4403-8161-61036cc62c80.png)

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アカウント登録</title>
    <style>
        .container {
            max-width: 500px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>アカウント登録</h2>
        <form id="registerForm">
            <div class="form-group">
                <label for="username">ユーザー名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="email">メールアドレス</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">パスワード</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label for="confirmPassword">パスワード（確認）</label>
                <input type="password" id="confirmPassword" name="confirmPassword" required>
            </div>
            <button type="submit">登録する</button>
        </form>
    </div>

    <script>
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            if (password !== confirmPassword) {
                alert('パスワードが一致しません');
                return;
            }
            
            // ここでフォームの送信処理を実装
            alert('アカウント登録が完了しました');
        });
    </script>
</body>
</html>

```
それでは、Acceptをクリックしてコード提案を承認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/72879469-abf2-471b-8afe-d38858a3994e.png)

index.htmlを右クリックして、Open with Live Server から実際に動かしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/8c5dc088-39f4-4167-a998-4907c84c903a.png)

実際の画面表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/e29177a6-8f9c-4614-be67-1724a64025b6.png)

なんと、「アカウント登録画面をつくって」の一言でアカウント登録画面が作成できてしまいました。
パスワード確認のスクリプトもご丁寧に作られています。
もちろん、これだけではアカウント登録の情報としては足りないので更に指示出しをしていきます。

同じく、ctrl + k から
「必要な情報に電話番号、住所、生年月日を追加して」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/3d69401a-92ef-43da-9b23-3f985c4c32dc.png)

Acceptをクリックして、提案を承認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/71a469bd-340a-4058-aec2-3ec0acc72dae.png)

修正後の画面表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/b5ef5c37-d15d-4ad4-a0f2-153ed7f2c9ce.png)

追加の修正もコミットされました。

### 修正

それでは、込み入った修正指示をしていきます。
住所はこのままフリーテキストだとまずいので郵便番号、住所1/2/3で分離
さらにスタイルとして幅を少し広げたうえで、登録ボタンを中央に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/d13db309-9d69-4e6c-858d-fd01a04925b3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/289c6206-6ea4-4dba-8eeb-ea5a01cbc8a5.png)

修正後の画面表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/90e559d4-6fd3-4b48-9e3a-f0713ee04c2e.png)

なんと、プレースホルダもご丁寧に実装してくれました。
完全に意図を汲み取って実装してくれています。

### 追加実装

では次に既存のコンテンツだけでなく、更に追加の実装を指示してみます。
このままだと「登録する」ボタンを押下するとそのままアカウント登録が実行されてしまうので、確認のトーストを間に挟む実装を試みてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/2b92c583-4257-4312-a5c3-9457bdabd6dd.png)

修正後の画面表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/c2b07f65-f8e1-4b24-a7d1-d41e35b8ceeb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932826/8fba0012-8246-492e-aebd-9355485d6180.png)

見事、トースト表示も実装されました！

# 感想

話題になっていたCursorエディタを使用してみましたが、とにかくびっくりの一言です。
簡単なWebページの作成とはいえ、手動で1文字も実装作業をしていません。
またAI自身が意図を汲み取り、指示をしていない箇所すら実装をしていたのにも圧巻です。

VSCodeをフォークしたエディタでもあることから、VSCode使用者の親和性も高そうです。
エディタ移行はある程度の障壁がありますが、拡張機能含めそのまま利用できるので抵抗なく移行できると感じます。