AIファーストエディタ「Cursor」で大規模フロントエンド開発

1. はじめに

こんにちは。ATOM事業部フロントエンドテックリード兼デザイナーの河原です。
今回は話題のAIファーストエディタCursorを、Vue(Nuxt)を使った大規模なWEBアプリの開発現場で活用できるか試してみました。

Cursorとは

AIの活用を前提に設計されたコードエディターです。
Visual Studio Code（VSCode）をベースとして、ChatGPTが組み込まれています。
プロジェクト全体のコードを理解し、文脈に基づいた提案や最適化を行います。 プロジェクト全体を理解できるため、単なるコードスニペットの補完以上のことが可能です。 また、AIに特化した操作のユーザーエクスペリエンス（UX）に優れています。

  • 無料でも利用可能（回数などの制限あり）
  • プライバシーモードあり（コードをサーバーに保存させない）
  • VSCodeベースなので操作性は同じで、拡張機能も使える
  • OpenAIが出資している

2. 準備

2.1. Cursorのインストール

公式（https://cursor.sh）からインストーラをダウンロードして実行します。

  • 基本的にデフォルトのままで大丈夫ですが、Languageに「日本語」と入力するとAIの回答が日本語になります
  • VSCodeをインストールしている場合は、拡張機能や設定を引き継ぐことができます
  • 途中でサインインが必要なので、アカウントがない場合は作成します


インストール後、Cursorを起動すると次のような画面が表示されます。 ほぼVSCodeですね。右のペインでAIとチャットができます。

2.2. プライバシーモードに変更

必要に応じて、プライバシーモードに変更します。 プライバシーモードでは、コードなどのデータがCursorサーバーに一切保存されないとのこと。

  • 右上の歯車アイコンをクリックして「CURSOR SETTINGS」画面を開く

  • 下記の通り有効化に変更

2.3. 3rd Partyのライブラリを学習させる

必要に応じて、プロジェクトで利用する3rd Partyのライブラリの使い方を学習させます。

  • チャットに「@Add」と入力し、選択肢に表示される「Add new doc」を選択

  • URL入力フォームが表示されるので、学習させたいWebページのルートを指定

私は下記を学習させましたが、古い情報なので不要だったかも。

  • Nuxt2
  • Vuetify2

3. 活用例

公式のFeaturesに沿って試します。

3.1. Command K

ファイルの任意の位置、またはコードを複数行選択して「Command+K」を押すとAIにコードの変更を指示することができます。 1 ～ 50 行程度の修正向けです。

次の例では、空のファイルに指定して「SampleUserを表示するテーブルコンポーネント」と指示しています。 直接table要素を記述する形で生成してたので、途中でキャンセル。 用意されているテーブル表示用の共通コンポーネントを使ってほしいので、既存の類似コンポーネントを指定して「@AdvertiserTableを参考にして」と追加指示をします。

UIがとても洗練されていて、直感的に指示することができました。
既存のファイルを参考として指定できるのがとても便利。

上記以外にも色々と試してみましたが、生成コードの精度は40点〜80点の出来という感じです（あくまで個人的な感想です）。 100点にするためには追加指示を繰り返したり、手作業で修正する必要があります。

3.2. Chat

チャットを使用すると、コードベースを認識する AI と会話できます。 チャットはアクティブなファイルとカーソル位置を認識するため、「ここにバグはありますか？」とか「このファイルをレビューして」などと質問することができます。

次の例では、表示しているファイルのテストコードを書いてもらっています。

Codebase-wide

特定のファイルではなく、コードベース全体について質問することもできます。 チャットで 質問を入力後 Command+Enter を入力するか、「with codebase」ボタンをクリックすることで可能となります。

次の例では、プロジェクトの認証方式について質問しています。

4. まとめ

今回は話題のAIファーストエディタ「Cursor」を、Vue（Nuxt）を使った大規模なWebアプリケーションの開発現場で試してみました。 結果は、まさに次世代の開発スタイルを体験できるワクワクするものでした。

現時点では生成されるコードは100点満点というわけではなく、100点を目指すために繰り返しの追加指示や手作業での修正が必要となります。 しかし、これはCursor（正確にはChartGPT）だけでなく、生成AI全体に共通する課題です。

それでも、ReactやVueを使用した大規模なWebアプリケーション開発においてCursorを活用する価値は大いにあると感じました。 多くのエンジニアにとって、0から作成するよりも、60点の下書きをベースに開発を進める方が生産性が高いでしょう。 AI関連の操作のUXが高くAIが利用しやすい点もポイントが高いです。

今後のアーキテクチャ設計では、AI生成の活用しやすさも重要なポイントになってくると考えられます。 Cursorのようなツールは、私たちの開発スタイルに新たな変化をもたらすことでしょう。 今後ともCursorや他のエディタの進化に注目したいと思います。