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

cursor

Last updated at 2025-02-14Posted at 2025-02-14

Cursor とは？

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

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

ダウンロード

こちらよりインストールします。

初期設定

初回起動すると、下記のような画面が表示されます。（2025/02時点）
ひとまず、デフォルトで進めます。

VSCode を使っている場合、拡張機能を自動でインポートしてくれます！素敵！

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

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

おまけ

◆ 日本語化する

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

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

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

私はなぜかシグネチャエラーになりましたが、手動で再起動して再度↑の手順を試したところうまくいきました。

◆ Live Serverのダウンロード

今回は、簡単なwebページの確認をするため拡張機能のLive Serverをダウンロードしておきます。

AI支援機能実践編

初期実装

左上にチュートリアルが表示されていますが、一旦無視してひとまずテストプロジェクトを作成します。

ctrl + shift + k からプロンプトを開きます。

ひとまず、おおざっぱな実装指示を出します。
「アカウント登録画面をつくって」

すると、下記のように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>