トップ ITツールCursor使ってみた！AIが教えてくれるエディタ

ITツール

2024年4月15日 10:00

Cursor使ってみた！AIが教えてくれるエディタ

Cursorとは？未来のエディタを体験しよう

Cursorは、AI とのペアプログラミング用に設計されたエディタです。Visual Studio Code（VSCode）を基に開発され、その強力な機能にChatGPTのようなAIを組み込むことで、コーディング作業を自動化し、プログラミングに関する幅広い業務をサポートします。このツールは、コードの自動生成からデバッグ、さらには質問応答まで、豊富な機能を備えています。

この記事では、プログラミング初心者向けにCursorの便利な使い方や使ってみた開発事例などを説明します。

インストール方法

以下のリンクの公式ページから、インストールできます。

インストール後は、以下のように設定画面が出てきます。

Languageの箇所は「日本語」と記載することで、日本語での文章生成が可能でした。

設定後、AIを使うためには、アカウント作成が必要でした。以下のような画面に遷移し、Githubアカウントから、Cursorアカウントを作成することができました。

Cursorの基本：AIが支えるエディタ機能

Cursorは、AIの力を借りてプログラミング作業を効率化するエディタです。開発者がコードを書く際に自動で提案を行うコード補完機能を備えています。これにより、プログラミングの速度が向上し、タイピングの負担が軽減されます。また、潜在的なエラーをリアルタイムで指摘し、解決策を提案することで、デバッグのプロセスもスムーズになります。

今回は簡単なHTMLをCursorを使ってコードを補完してみました。

以下に途中まで書いたHTMLがあります。

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>中満悠人</h1>
    <ul>
      <li>1月</li>
      <li>2月</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

Cursorで補完したい範囲を選択「Add to Chat」をクリックします。

すると、右側のチャット欄に、ソースコードが追加されます。

ソースコードの下に、少し分かりにくいのですが、AIへの命令文を書くことができます。

今回は「これの続き書いて」と補完してみました！！

そうすると、ChatGPTやGeminiなどの生成AIと同じように、ソースコードを書いてくれます。

生成後のソースコードに付随した、「Replay」、「Apply」「Copy」も便利なポイントです！

Replay：コードの再生成
Apply：右のエディタに生成したコードを反映
Copy：生成したコードのコピー

なぜCursorがWEB業界で注目されているのか

CursorがWEB業界で注目を集めているのは、その先進的なAI機能によりプログラミングの学習と実践の障壁を大きく下げるからです。このエディタは、コードの自動補完やエラー訂正を提供し、開発者がより効率的にコーディング作業を行えるよう支援します。特に、未経験者が技術を習得しやすい環境を提供する点が、多くの注目を集めています。

さらに、Cursorはプログラミング業務を自動化し、複雑なコードの理解を助けることで、開発プロセスを加速します。ChatGPTのようなAI技術を搭載しており、質問に即座に回答することで、学習過程での疑問点をクリアにすることが可能です。これにより、WEB技術に関する知識を面接で話せるレベルまで効率的に高めることができるのです。

このように、Cursorは開発者の生産性向上だけでなく、技術学習のプロセスを支援する点でWEB業界から高い評価を受けています。未経験からWEB業界へのキャリアチェンジを目指す人々にとって、Cursorは学習から実務まで幅広く役立つツールとして、その可能性を広げています。

実際にCursorを使ってみた体験談

フルスタックで働く、若手のフロントエンドエンジニアに、Cursorを使ってもらいました。

初心者から見たCursorの使いやすさ

実際にCursorを使ってみたら、「思ったより簡単だった！」って感じました。特に、VSCodeしか使ったことない私にとって、Cursorのインターフェースが直感的で理解しやすいのは大きなポイント。コードを書くときに、どう書けばいいのか迷ったら、AIがすぐにサジェストしてくれるんです。これがもう、めちゃくちゃ便利！
さらに、エラーが出たときの解決策をAIが提案してくれるので、自分一人でコードを修正することができました。「これ、どうしてエラーになるの？」と思ったら、Cursorが優しく教えてくれるんですよ。本当に、プログラミング初心者にとって救世主みたいな存在ですね。Cursorを使い始めてからは、プログラミングに対する恐怖心がだいぶ減りました。自分でもちょっとずつコードが書けるようになってきた感じがして、嬉しい限りです。

効率的に学べるCursorの秘密

プログラミング学習中や経験の浅い時期は、エラーや思ったような出力とならないときに質問できる人がいなかったり、質問自体がわからなかったりして頭を悩ませることがあると思います。

Cursorを使えばエラーの解決も素早く、悩む時間を減らせます。Cursorは開発者がコーディング中に直面するあらゆる問題に対して、適切な提案と解決策をリアルタイムで提供してくれます。この瞬時のサポートにより、プログラミングの基礎を固めながら、高度なテクニックにも迅速にアクセスできるようになります。

さらに、Cursorは単にエラーを指摘するだけではなく、なぜそのエラーが生じたのか、その背後にあるプログラミングの概念と原理を説明してくれます。このアプローチにより、ユーザーはコードを書く技術だけでなくプログラミング言語の根本的な理解も深めることができます。結果として、学習者はより自信を持ってプログラミングスキルを習得し、効率的に知識を拡大できるのです。

Cursorプランについて

Cursorには無料プランと有料プランが用意されています。具体的な比較表は次のとおりです。

無料プランでは、GPT-4とGPT-3.5の利用回数に制限がありますが、基本的なAIによるコードの保管やエラー検知機能を利用することができます。

	Baiscプラン	Proプラン	Businessプラン
料金	無料	20ドル/月	40ドル/月
GPT-3.5	200回/月	無制限	無制限
slow GPT-4	50回	無制限	無制限
fast GPT-4	✖️	500回/月	500回/月
AIコーディング機能	○	○

Cursor公式 Pricing https://cursor.sh/pricing

まとめ

Cursorは、AI技術を活用してプログラミング作業を効率化する画期的なエディタツールです。Visual Studio Codeをベースに開発されたこのツールは、ChatGPTなどのAIを組み込むことで、コードの自動補完やデバッグ支援、質問応答などの多岐にわたる機能を提供します。これにより、プログラミング初心者から経験豊富な開発者まで、幅広いユーザーがコーディングの速度と品質を向上させることができます。特に、プログラミングの学習過程において、Cursorは質問に即座に答えることが可能であり、エラーの背景にある概念を理解するのに役立つなど、学習支援の面でもその価値を発揮します。

Cursorの導入により、WEB業界での注目度が高まっている理由は明白です。このツールは、開発プロセスの自動化によりプログラミング業務を大幅に効率化し、複雑なコードの理解を容易にします。また、実際にCursorを使用した開発者からのフィードバックは圧倒的に肯定的であり、その使いやすさと効率的な学習支援が特に高く評価されています。未経験からWEB業界へのキャリアチェンジを目指す人々にとって、Cursorは技術的な障壁を低減し、学習から実務までサポートする貴重なツールとして、大きな可能性を秘めています。

参考記事

この記事を書いた人

フルスタック株式会社代表取締役中満悠人

2022年3月に当社を設立。クラウドサービスの導入支援、WEBエンジニアの育成事業を経営。大阪出身、高専出身。