Cursor エディターへ移行した話

概要

最近、Cursorというエディタが賑わっており、様々な記事が書かれています。
cursor.sh Cursorの大まかな概要を確認すると、ChatGPTを主軸としたエディタであり、デバッグやプログラムの生成をChatGPTで自動で行ってもらえるそうです。 また、vscodeの機能はそのままで利用できるみたいなので、今まで利用してきたvscodeからCursorへ移行してみました。

インストール作業

Cursorのインストール方法は公式サイトからインストーラーをダウンロード してきて解凍するのみです。
解凍したインストーラを起動して手順通り進めると、vscodeの拡張機能を移行するか確認されたので、OKをクリックします。

使ってみて

実際のエディター画面は下記の通りで、ChatGPTの画面が右側で見えており、その他はvscodeと変わりません。

ChatGPT

上記の画面でも見えていますが、質問は日本語にも対応しています。
今回は「Next.js でログイン画面を作成して」と質問したところ、下記の返答が数秒でされました。

Next.jsでログイン画面を作成するには、以下の手順を参考にしてください。
1. 新しいページを作成します。例えば、pages/login.jsという名前で新しいファイルを作成します。

import React from 'react';

const LoginPage = () => {
  return (
    <div>
      <h1>ログイン</h1>
      <form>
        <div>
          <label>ユーザー名:</label>
          <input type="text" name="username" required />
        </div>
        <div>
          <label>パスワード:</label>
          <input type="password" name="password" required />
        </div>
        <button type="submit">ログイン</button>
      </form>
    </div>
  );
};

export default LoginPage;

2.フォームの送信を処理するための関数を追加します。この関数は、ユーザーがログインボタンをクリックしたときに呼び出されます。

import React, { useState } from 'react';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // ここでログイン処理を行います
    console.log(`Logging in ${username} with password ${password}`);
  };

  return (
    <div>
      <h1>ログイン</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>ユーザー名:</label>
          <input type="text" name="username" required onChange={e => setUsername(e.target.value)} />
        </div>
        <div>
          <label>パスワード:</label>
          <input type="password" name="password" required onChange={e => setPassword(e.target.value)} />
        </div>
        <button type="submit">ログイン</button>
      </form>
    </div>
  );
};

export default LoginPage;

この例では、ログイン処理は単にコンソールにログを出力するだけですが、実際にはここでAPIを呼び出したり、認証トークンを保存したりするなど、適切なログイン処理を行う必要があります。

日本語だけでなく、ソースコードも生成してくれています。
この機能はかなり便利です。

エディタの表記名を日本語に変更

小さいことではありますが、コマンドパレットを開いてConfigure Display Languageを選択して、日本語を選択すればエディタの表記名を日本語にしてくれます。