概要
最近、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
を選択して、日本語を選択すればエディタの表記名を日本語にしてくれます。