最先端のWebマーケティングを発信するメディア

最先端のWebマーケティングを発信するメディア

AIコードエディタ「Cursor」とは?使い方やアプリ開発手順を紹介!

投稿日:

AI

SHARE
FacebookTwitterLineHatenaShare

Cursorとは、VSCodeをベースに作られたAIコーディングツールです。

VS Codeの使いやすさをそのままに、プロジェクト全体の流れを見た上で行うコード補完・バグ修正・リファクタリングといった機能を搭載していて、導入により開発スピードを大幅に向上させられます。

この記事では、Cursorの特徴や料金プラン、使い方を解説します。実際にToDoリストアプリを作った開発手順も紹介しているので、これからAI開発に挑戦したい方や、効率的なコーディング環境を探している方はぜひ参考にしてみてください。

Cursorとは

公式サイト:Cursor

Cursorとは、VS Codeをベースに構築されたAIコードエディタです。VS Codeの機能はそのままに、AIによるコード補完やバグ修正、リファクタリングなどが使えるので、使い慣れた開発環境で作業効率を高められます。

また、 Cursorは、コード全体を解析したうえで必要な処理を自動で提案・生成することが特徴です。AIが主体となってコード生成したものを、開発者が取捨選択するスタイルになるため、従来の開発フローを大きく変えるAIツールになると注目されています。

Cursorの特徴

Cursorの特徴は、プロジェクト全体の文脈を理解し、開発工程を0からサポートしてくれることです。そのほかにも、チャット形式のコード生成やAIによるエラー対応などの特徴があり、開発スピードを大幅に上げられます。

  • AIがコード補完やエラー対応を行う
  • ChatGPTと連携したAIチャット機能が使える
  • 日本語で指示を出せる
  • プロジェクト全体を理解して再構成する

それぞれの特徴についてくわしく解説します。

AIがコード補完やエラー対応を行う

Cursorでは、AIがリアルタイムでコードを解析し、次に書くべきコードを自動補完します。関数を定義した段階で処理内容を推測してコードを提示したり、引数の型を自動的に推論したりするので、一つひとつの実装にかける作業時間を削減できます。

また、記述中のコードのエラーを検出し、修正案を生成するAI機能が備わってることも特徴です。開発者が指示を出さなくてもAIが自立的にクオリティの高いコードを提案するので、作業効率を高めながらコードの品質も維持できるようになります。

AIチャットにコードの生成・質問ができる

Cursorには、ChatGPTと連携したAIチャットが標準搭載されていることも特徴です。AIチャットはエディタ内に配置されているので、作業内容に合わせたコード生成の指示を出せます。

また、「エラーの原因を探ってください」「他の関数を提案してください」などの質問に対しても、コードの内容を理解した上で回答を行います。Cursorでは、一般的な情報ではなく、現在開いているファイルやプロジェクトに即した具体的な提案を受けられるので、共同開発するパートナーのような感覚で使用可能です。

日本語で指示を出せる

Cursorは日本語での自然言語入力に対応しています。「この関数をリファクタリングして」「テストコードを書いて」「このエラーを直して」と日本語で指示を出すだけで、AIが目的に合ったコード生成を実行するので、コーディング初心者でも簡単に操作ができます。

また、「コードの説明をして」と指示を出せば、AIが作ったコードの解説を受けることも可能です。自分のタイミングで解説を聞けるので、専門用語を知らないコーディング初心者でも意図を理解した上で開発を進められます。

プロジェクト全体を理解して再構成する

Cursorには、プロジェクト全体をスキャンしてコード構造を把握する「Codebase Index」機能が備わっています。指定したコードのみの分析・補完を行うのではなく、全体の依存関係や規則などを理解した上で処理を行うので、一貫性のあるコード提案を受けられます。

また、関連ファイルを参照にしたコード補完ができ、プロジェクト内のクラスや変数などの関係性を維持する自然なコードを生成が可能です。Cursorは、実装の意図を汲み取った上で最適な処理を行うため、従来のコード生成AIに比べて質の高いコーディング生成が行えます。

CursorとGitHub Copilotの違い

Cursorと似たようなコード生成AIとしてGitHub Copilotがあります。GitHub Copilotは、コードの自動補完や部分的なサポートをメインに提供していて、開発者が入力を始めると次に来るコードを提案してくれるアシスタント的な存在です。一方、Cursorでは、全体のソースコード構造や文脈を理解した上で、ファイル全体にわたる修正や改善提案を行うことが可能です。

また、Cursorでは、外部URL参照機能があるため、サンプルコードや実装例を掲載するサイトから必要な情報を直接参照できます。そのままエディタに実装可能な形で反映できるのも特徴で、外部リソースの調査やコピペ作業が不要になるため、開発効率が大幅に向上します。

Cursorはプロジェクト全体の開発支援ツール、GitHub Copilotはコード補完に特化したアシスタントという違いがあるので、作業のスケールや目的に応じて使い分けると良いです。

Cursorの料金プラン

Cursorには、無料プランを含めた3つの料金プランが用意されています。

プラン Hobby Pro Business
料金 無料 20ドル/月 40ドル/月/1ユーザー
用途 個人向け 企業向け 企業向け
補完数 2,000回 無制限 無制限
低速プレミアム
リクエスト
50回 無制限 無制限
特徴 ・50回の低速プレミアムリクエスト
・Pro版の2週間のトライアル
・月500回の高速プレミアムリクエスト
・高性能モード使用可能
・チームの一括請求
・管理者向けダッシュボード
・セキュリティ強化(SAML / OIDC / SSO)
・プライバシーモードの適用

プレミアムリクエストとは、GPT-4、GPT-4o、Claude 3.5/3.7など高度なAIモデルによる回答生成のことで、複雑なタスクを処理したい場合や、より高精度な回答が欲しい場合に適しています。

無料プランであるHobbyでは、応答速度が遅い低速プレミアムリクエストを50回分使用可能です。Pro版とBussines版では、応答速度の速い高速プレミアムリクエストを無制限で使えるので、大規模な開発や本格的なコーディング作業をしたい際に適しています。

Cursorの始め方

Cursorは、クラウド上ではなくローカルエディタを用いて作業を行います。利用にあたって専用エディタをインストールする必要があるので、まずは公式HPにアクセスして「すべてのダウンロード」をクリックしましょう。

プラットフォーム一覧が表示されるので、該当する使用環境を選択し、インストールボタンを押しましょう。今回は、Windowsのダウンロード手順を一例として解説します。

インストールボタンを押すと、右上(Chromeの場合)にダウンロード履歴が表示されるので、「フォルダを開く」をクリックします。

フォルダを開いてダウンロードしたファイルを選択すると、タスクバーにアプリが追加されるので、アプリを開いて「同意する」→「次へ」を選択します。

すると、インストール先、スタートメニューフォルダーの指定、実行時の追加タスク等の選択画面に映るので、必要な設定をして「インストール」を開始します。

インストールが終わると以下の画面に切り替わるので、チェックをつけて「完了」を押します

タスクバーにアプリが表示されない又はアプリの場所が分からない場合、タスクバーにある検索窓で「cursor」と入力すると、アプリが表示されるので「開く」を押しましょう。

するとアプリが起動するので、アカウントを持っていない場合は「Sign Up」からアカウントを作成しましょう。

Cursorの初期設定

Cursorのインストールが完了したら、以下の初期設定を行う必要があります。

  • VS Codeの設定
  • テーマの選択
  • チュートリアル画面・取り扱いデータの同意
  • AIの応答言語・ターミナル設定

では実際に、操作画面を参考にしながら一つずつ解説していきます。

VS Codeの設定

アカウントを登録すると、VS Codeの連携設定を行う画面になります。VS Codeの連携により、VS Codeで作成していたデータをCursor上で操作できますが、VS Codeを持っていなくてもCursorの機能は使えます。連携させない場合は「Skip and continue」を選択してください。

テーマの選択

次に、テーマ設定を行います。テーマ設定は、操作画面のデザインを決めるものなので、好みや使いやすさに合わせて選ぶと良いです。多くのテーマから選びたい場合は、Continueの下にある「Explore othe themes」をクリックすると、さまざまなカラーパターンやスタイルのテーマ一覧が表示されるのでチェックしてみてください。

チュートリアル画面・取り扱いデータの同意

テーマ設定が終わると、Quick start画面に移動します。主要な操作方法とショートカットキーを説明するチュートリアル画面なので、そのまま「Continue」を押しましょう。

「Continue」を押すと、データの取り扱いに関する規約の同意画面になります。Cursorは、ユーザーのコードや操作履歴から学習する仕組みを持っています。コードからの学習は、設定メニューでいつでも無効にできるという内容なので、問題がなければチェックボックスを押して「Continue」を選択しましょう。

AIの応答言語・ターミナル設定

ここでは、AIの応答言語とターミナルからの起動を設定できます。

デフォルト状態では、自動的に言語を判断し応答する設定になっているので、日本語で対応してほしい場合は「Auto」→「Japanese」を選択します。ターミナルの設定では、「Install」をクリックすると、ターミナルでCursorを起動するためのコマンドが設置されます。アプリケーション一覧を開かなくてもすぐにアクセスできるようになるので、必要に応じて設定しましょう。

全ての操作が完了すると、下記画像のようなホーム画面に移動するので、実際に利用を開始できます。

Cursorの使い方

ここでは、Cursorの基本的な使い方を解説します。

  • Command+Kでコードの生成・修正をする
  • AIチャットで指示や質問をする
  • Lintエラーを修正する

画像付きで分かりやすく解説するので、実際に操作をしながら参考にしてみてください。

Command+Kでコードの生成・修正をする

コードの生成・修正は、command+Kのショートカットキーで行えます。まずは編集したいコードを選択し、command+Kでプロンプト入力ボックスを出しましょう。

プロンプト入力ボックスに出したい指示を入力して、右下の送信ボタンを押すとAIが最適なコードを考えてくれます。

このように、AIがコードを提案してくれます。提案を反映させる場合は反映させたいコードにカーソルを合わせて「Ctrl+Shift+Y」、提案を却下する場合は該当するコードにカーソルを合わせて「Ctrl+N」で削除できます。

AIチャットで指示や質問をする

今回は、「データリスト」を最適化してくださいと指示を出してみました。提案内容で進めたい場合は、「Accept」をクリックすると自動生成が開始されます。

生成が完了すると、「赤色背景=削除置き換え対象」「黄色背景=新しく追加したコード」を表示した画面になります。

コード全体に変更を適用したい場合はAIチャット画面の「Accept」をクリック、一部のコードに適用したい場合はコード編集画面の「Accept」をクリックします。

Lintエラーを修正する

エラー表示が出た場合、該当するコードにカーソルを合わせるとエラーメッセージの詳細を確認できるので、「Fix in Chat」を選択してコード修正案を確認しましょう。

右側のチャットで修正案を受け取れるので、採用したい提案がある場合はチェックリストをクリックします。

Cursorを使ってTodoリストアプリを作ってみた

実際に、Cursorを使ってTodoリストアプリを作ってみました。アプリの作成手順は以下のとおりです。

  • AIに作りたいアプリの概要を指示
  • templatesの中に新たなフォルダを作成する
  • 「app.py」ファイルを作成する

順番にみていきましょう。

①AIに作りたいアプリの概要を指示

まずは、デスクトップに空のフォルダ(「todolist」)を設置し、Open projectでフォルダを開きます。

フォルダを開きコード編集画面に移動したら、「Ctrl + I」でAIチャットを開きます。AIチャットには、以下のような指示を入力してプロジェクトの初期コードを生成します。

FlaskとSQLiteを使ってToDoリストアプリを作成したいです。HTMLとCSSを使った簡単なフロントエンドも含めてください。

AIがプロジェクト内容に応じて構築を始めるので、完了したら「Run」を押します。

Runを押すと、ターミナルでコマンドが実行され、templates フォルダがプロジェクト内に作成されます。

②templatesの中に新たなフォルダを作成する

templatesフォルダが作成されたことを確認したら、templatesの中で右クリック→「New File」でファイル名「index.html」のフォルダを作成します。

「index.html」のフォルダの中には、テンプレートコードを入力します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
  <meta charset=”UTF-8″>
  <title>ToDoリスト</title>
  <style>
    body { font-family: sans-serif; background: #f5f5f5; padding: 2rem; }
    h1 { color: #333; }
    form { margin-bottom: 1rem; }
    input[type=”text”] { padding: 0.5rem; width: 300px; }
    button { padding: 0.5rem 1rem; }
    ul { list-style: none; padding: 0; }
    li { background: #fff; padding: 0.5rem; margin-bottom: 0.5rem; border: 1px solid #ddd; }
    .done { text-decoration: line-through; color: gray; }
  </style>
</head>
<body>
  <h1>ToDoリストアプリ</h1>

  <form action=”/add” method=”post”>
    <input type=”text” name=”content” placeholder=”タスクを入力”>
    <button type=”submit”>追加</button>
  </form>

  <ul>
    {% for task in tasks %}
      <li class=”{{ ‘done’ if task[2] else ” }}”>
        {{ task[1] }}
        {% if not task[2] %}
          <a href=”/done/{{ task[0] }}”>✔</a>
        {% endif %}
        <a href=”/delete/{{ task[0] }}”>🗑</a>
      </li>
    {% endfor %}
  </ul>
</body>
</html>

③「app.py」ファイルを作成する

app.pyファイルが作られていない場合、左側のファイルツリーで右クリックして「New File」を選択し、「app.py」ファイルを作成しましょう。

app.pyファイルを作った後は、ターミナルで「pip install flask」を入力して実行します。実行が完了後はアプリを起動するために「python app.py」と入力し、「Running on http://127.0.0.1:5000」と出てきたら成功です。

今回は、このようなアプリが完成しました。簡易的なものなので機能が限られたシンプルなアプリですが、Cursor内で機能を追加すればタスクの期限設定や編集機能、検索機能などを備えた実用的なアプリにブラッシュアップできます。

まとめ

今回は、Cursorの特徴や料金プラン、使い方について解説しました。抑えておきたいポイントは以下のとおりです。

  • Cursorは、VS CodeベースのAIコードエディタ
  • GPTベースのチャットAIと連携し、コード補完や修正、エラー対応ができる
  • 日本語の自然言語指示にも対応しており、初心者でも扱いやすい
  • プロジェクト全体を分析し、文脈に沿った高精度な提案が可能
  • 無料プランでも基本機能が使え、ProやBusinessプランでさらに強化可能

Cursorは、コード補完だけでなく、AIによる文脈理解と再構成が可能な次世代AIコーディングツールです。プロンプト一つでコード生成やリファクタリング、デバッグができることが特徴で、従来の開発スタイルを大きく変えると注目を集めています。

使い方はとても簡単で、エディタ内でAIに質問したり、コード生成を依頼したりすることも可能です。開発者ではなく、AIが主体となってコーディングを行うので、プログラマと共同開発しているような感覚で作業できます。

Cursorは無料プランも備わっていて、課金をしなくてもAIに依頼をして簡易的なアプリを作成できます。Proプランの2週間トライアルも用意されているので、本格的な開発支援機能の導入の検討材料にしてみてください。

SHARE
FacebookTwitterLineHatenaShare

この記事を書いた人

やまたに
SEOマーケティング会社でライターとして勤務したのち、サングローブに入社。唯一得意なライティングで人生を乗り切ってきた。

UPDATE 更新情報

  • ALL
  • ARTICLE
  • MOVIE
  • FEATURE
  • DOCUMENT