ローダー画像
WE ARE LAUGHSTYLER !

AIエディター「Cursor」とは?次世代コードエディターの実力

はじめに

プログラミングにAIを取り入れる時代が本格的に到来しています。その中で、今注目を集めているのが AIエディター「Cursor」 です。Visual Studio Code(VS Code)をベースに開発されたこのエディターは、ただのコード補完にとどまらず、開発者の「パートナー」として活躍する機能を備えています。
この記事では、Cursorの特徴や使い方、どんな人におすすめなのかを解説します。

Cursor(カーソル)とは?

Cursor は、VS Codeをベースに作られたコードエディターで、GPTベースのAIが統合されており、自然言語での指示に従ってコードの編集・生成・修正などを行えるのが最大の特徴です。
VS Codeに慣れている方でしたら違和感なく使用できると思います。

主な特徴:

  • 自然言語でのコード編集:「この関数を非同期にして」といった指示でコードを修正可能。
  • 既存コードの理解支援:知らないプロジェクトでも、コードの意図や処理内容を質問すれば解説してくれる。
  • チャットUI搭載:VS CodeのようなUIの中に、AIとのチャットウィンドウが統合されており、違和感なく作業ができる。
  • コードリファクタリングやバグ修正:エラーを検知して、解決策を提案したり、コードを整理したりする機能。

Cursorでできること

    コード生成・補完

    「ログイン画面をReactで作って」と打つだけで、必要なコードを生成してくれます。UIの細かい指定も自然言語で可能です。

    既存コードのリファクタリング

    複雑なコードを「もっと読みやすくして」と伝えると、関数分割や変数名の改善を提案してくれます。

    デバッグ支援

    エラーが出ている箇所をAIが分析し、何が問題なのか、どう直せばいいかを説明し、修正コードまで提示してくれます。

    プロジェクト理解の加速

    他人が書いたコードや既存の巨大プロジェクトでも、「この関数は何をしているの?」と聞くだけで概要を説明してくれるので、オンボーディングが圧倒的に早くなります。

    料金は?

    Cursorは基本的に無料で使用できますが、高度なAI機能を使うには有料プラン(Pro)が必要です。Pro版では、OpenAIのより高性能なモデル(GPT-4など)にアクセスでき、より正確で高度な応答が期待できます。

    まずはインストールから

    https://www.cursor.com/ja

    まずは上記URLからダウロードします

    インストールを進めます(画面はwindows版)

    アカウント作成

    インストールが完了しましたら、アカウント作成かGoogleやGitHubアカウントでサインインします。

    下記はGitHubアカウントでサインインした例です。サインインが完了すると、Cursorに戻れと指示が出ます。

    既にVSCodeを使用している場合は、以下の画面のようにVScodeから設定情報やプラグインなどを引き継ぐかどうか問われますので、お好みで選択します。今回は引き継ぐことにします。

    テーマはお好みで選択します。とりあずデフォルトで選択されているものでContinue。

    Privacyポリシーみたいなものにチェックを入れます。

    Language for AIの項目をJapaneseにしておきます。

    インストールは以上で完了しました。一度起動してみます。
    すると、VScodeで使用していたプラグイン関係すべてそのまま引き継いでくれています。右下の「Go Live」もそのまま生きています。

    日本語化設定

    デフォルトでは英語になっているため、日本語化をおこないます。

    View → Command Palette を選択します

    「Configure Display Language」という項目を探します。頭文字を入力しても絞り込むことができます。

    日本語を選択します。Curosorを再起動しないと有効にならないため、ここで一度再起動します

    使ってみる

    ファイル → 新しいファイル で新規ファイルを作成します

    ctrl + K (Macではcommand+K)を押すとプロンプトの入力フォームが表示されます。

    試しに以下のように入力してみます。

    「ログイン画面をReactで作って」と入力し、右下の↑をクリックすると

    ほんの数秒で以下のようなコードを作ってくれました。

    こちらも試してみます

    「phpでsendmailを使用したメール送信」と入力

    このままでは使用できませんが、基本的なものは作成してくれました。

    ちなみに、上記でのAIモデルはcluadeを使用しているようですが、geminiに切り替えて再度試してみます

    出力内容が違いますね。解説コメントが多数挿入されてより親切なイメージがあります。

    Cursorはバックエンドエンジニアのプログラマのみならずフロントエンドでも使用できます。
    javascriptでプルダウンメニューを作成して」を試してみます。
    HTMLタグとCSSも含めたコードを作ってくれました。プルダウンメニューの内容をもっと細かく指示すれば実務でも使用できるものを作ってくれそうです。

    Cursor使用するAIモデルについては、Cousor Settings から選択することが可能です。

    Chat機能

    Cursorにはチャット機能も備わっています。
    Ctrl+L(Macの場合はCommand+L)キーで右側にChatウインドウが開きます。

    試しに、さきほど作成してもらったコードに入力フォームも追加作成してもらいます。
    入力フォームも作成してください」と入力します。

    すると、プロジェクトが見つからないので新しいプロジェクトまで準備してくれるようです!
    しかもpakages.jsonまで。
    では作っていただこうということでAceccptをクリックすると、以下のようになりました。
    最初にプロジェクト用のディレクトを作成してけということですね。まるで自分専用のメンターが隣にいるような感覚です。

    他にもいろいろと機能はありますが、大体Cursorの実力を分かっていただけたでしょうか。開発者の「相棒」となるAIエディターですね。

    まとめ

    ursorは、単なるコード補完ツールを超えて、開発者の「相棒」となるAIエディターです。
    特に、既存コードの理解や自然言語による指示での編集、リファクタリング、バグ修正など、日々の開発を大きく効率化するポテンシャルを秘めています。
    AIを使った開発の第一歩として、ぜひCursorを試してみてはいかがでしょうか?

    a