Cursorエディタ

Cursorエディタでのフロントエンド開発

概要

この記事では、Cursorエディタを使用したフロントエンド開発のメリットや具体的な利用方法について説明します。Cursorエディタの特徴やその利便性を学ぶことで、開発者が効率的に作業できる環境を整える方法を提案します。

1. はじめに

こんにちは。株式会社HRBrainでバックエンドエンジニアをしている、蔭山といいます。

株式会社HRBrainではアドベントカレンダーに参加しています。本記事は5日目になります。
今回は、なにかと話題の生成AIに乗っかりまして「AI時代のエディター Cursor」を紹介したいと思います。

コードエディターであるCursorは、AI技術を駆使してコーディング作業の効率を飛躍的に向上させるツールです。
この記事では、Cursorの特徴、インストール方法、オススメ機能を詳しく解説します。

2. Cursorの特徴

Cursorは、従来のコードエディターとは一線を画す、以下の3つの特徴を持っています。

  • AI技術の活用: Cursorは、AIを利用してコードの自動生成、エラーの検出、修正提案などを行います。

    • 有料プランに登録する他に、自分でOpenAI API Keyを登録して使うこともできます。

    • これにより、開発者はより高度なコーディング支援を受けることができ、生産性を大幅に向上させることができます。

  • 開発者向け設計: Cursorは、人気のコードエディターであるVS Codeをフォークして作られています。

    • VS Codeユーザーは、使い慣れたインターフェースと操作性をそのままに、CursorのAI機能を利用することができます。

    • また、VS Codeの拡張機能も一括でインポートできるため、スムーズに移行することができます。

  • OpenAIとのパートナーシップ: Cursorは、OpenAIの最先端技術を活用した機能開発を行っています。

    • 実際にOpenAI社から800万ドルの出資を受けており、AIを活用したコードエディターとして非常に期待されています。

3. 使い方

Cursorの使い方は非常に簡単です。

  1. Cursorをダウンロードし、インストールします。 (公式サイト: https://www.cursor.so/)

    • インストールが完了すると、初期設定画面が表示されます。

  2. 初期設定を行います。

    • a. VS Codeの拡張機能の自動インポート: VS Codeで使用していた拡張機能をCursorに自動でインポートすることができます。

    • b. Cursorコマンドのインストール: Cursorのコマンドをインストールすることで、ターミナルからCursorを起動したり、ファイルをCursorで開いたりすることができます。

  3. 無料プランで使用もできますが、本格的に開発する場合はProプランに登録するか、OpenAI API Keyを登録した方が、気兼ねなく使用できます。

  4. 完了！

補足: 拡張機能をインポートした場合、うまく動作しないことがあります。
その場合は、拡張機能の削除と再インストールを行うことで正常に動作するはずです。
現在確認しているものとして、日本語パッケージ拡張機能は再インストールしないと日本語化されないようです。

4. オススメ機能

Cursorは、公式サイトのFeatureページに記載されているように、多くの便利な機能を備えています。
(Featureページ: https://www.cursor.so/features )

私自身、個人開発やISUCONで使用していますが、業務でも導入したいほどに便利さを実感しています。
特に便利だと感じた機能を3つ紹介します。

4-1. コードの修正提案と適用

Cursorは、コードの修正を提案するだけでなく、適用するか否かを画面上で選択できる 機能があります。
Command + K でコードの提案を行わせた後、Command + Yですぐに適用できるため、非常にスムーズなワークフローを実現できます。
GitHub CopilotやChatGPTでは、コードの修正提案を受け取っても、それをコードに反映させるには、チャットからコピー＆ペーストする必要があり、手間がかかります。

4-2. codebase機能

Cursorのcodebase機能は、ソースコード全体をAIに学習させる ことで、より高度なコード分析や生成を可能にします。
ソースコード全体だけでなく、特定のフォルダ配下のみを参照させるなど、カスタム設定で与えるファイルを指定することもできます。

4-3. シンボル機能

Cursorのシンボル機能は、@~という記号を使って、特定のファイル、関数、構造体、Gitコミット、外部ドキュメントなどを参照 することができます。
この機能により、必要な情報に素早くアクセスすることができ、コードの理解と記述を効率化できます。

5. おすすめ機能 (追記)

Cursorは常に進化を続けており、便利な新機能が続々と追加されています。

5-1. copilot++

copilot++ は、GitHub Copilotのように、コードの記述中にリアルタイムでコードのサジェスト を行ってくれます。
Chat欄の「More」タブからcopilot++をONにすることで、この機能を利用できます。

5-2. Vision

Vision機能を使うと、Chat欄に画像を貼り付ける ことができます。
AIが画像を認識し、その内容に基づいたコード生成や提案を行うことができます。
例えば、Figmaのデザイン画像を貼り付けることで、そのデザインをHTML/CSSで再現するコードを生成することができます。

5-3. Note

Note機能は、変数や関数の説明とリファレンスを表示 する機能です。
AIがコードを解析し、変数や関数の意味や使い方を自動的にまとめてくれます。
いちいち定義元にジャンプする必要がないため、コードリーディングの効率が大幅に向上します。

6. さいごに

Vim, Emacs, Sublime Text, Atom等のエディター乱立時代からVS Code一強になったように、AI時代のエディターとしてCursorが台頭してくる のではないかと、私は感じています。

GitHub Copilotと組み合わせることで、さらに開発体験を向上させることができるので、おすすめです。
Cursorは無料で使用することもできますので、ぜひ皆さんも便利な機能を体感してみてください。

最後に株式会社HRBrainでは新しいメンバーを募集中です。
私自身も新卒で入社しているのですが、社内の雰囲気も良く、エンジニアとしても尊敬できる先輩がたくさんいます。
興味がありましたら、ぜひご応募ください！

それでは皆さん、良いCursorライフを❗

使用例

以下は、Cursorエディタでの簡単なHTMLコードの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テストページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>Cursorエディタを使ってこのページを作成しています。</p>
</body>
</html>

実際の使用効率の向上

機能 利点
リアルタイムコラボレーション 複数の開発者が同時に作業できる
プラグインサポート 開発フローに合わせてカスタマイズ可能
直感的なインターフェース 習得が容易で、すぐに利用可能

参考文献

詳しい情報については、以下のページを参照してください。
Cursorエディタ公式サイト

よくある質問

Cursorエディタは無料ですか？

一部の機能は無料で利用できますが、高度な機能は有料プランが必要です。

リアルタイムコラボレーションはどのように機能しますか？

開発者は同じプロジェクトに参加し、同時にコードを編集することができます。

Cursorエディタはどのプラットフォームで利用できますか？

Windows、Mac、Linuxのすべてのプラットフォームで利用可能です。

その他の参考記事:css cursor