CursorというAI搭載の最強エディターをご存知でしょうか？VSCodeの上位互換として昨今多くのエンジニアに使われており、私も愛用しています。
前回「Web制作でChatGPTでできる事例7選【現役コーダーが解説】」という記事では、ChatGPTを用いたコーディングを紹介しました。
記事の内容を復習すると、以下の作業をChatGPTに依頼していたのでした。
- コードを書いてもらう(JS,Sass.WordPress,)
- コードを書き換える(JS.WordPress,アクセシビリティ)
- コードを解説してもらう(JS.WordPress)
- コメントを書いてもらう
- エラーメッセージの解読
- コードをレビューしてもらう
- アニメーションの付与
しかし人によっては、
毎回ChatGPTの画面にコードコピペするの面倒くさいかも。。。
と思うかもしれません。実は私もここで上げた全ての作業をChatGPTにさせているわけではなく、「AIを搭載したエディター」で行うことのほうが実は多いです。
そこで今回はAI搭載エディターとして二強の
- Cursor
- Github Copilot
この２つに着目して違いを解説するとともに、私はCursorのほうが便利だと感じているのでその理由も解説し、
後半では私が今活用しているCursorの導入方法と実際の使い方を解説していきます。
Cursorはもはや「AI開発をしているエンジニア」にすら使われているので、ぜひ習得してください。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングを学習中の方はぜひご活用ください。
＼無料の入門編から本格企業サイトまで／
また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。
動画でもCursorの使い方を解説しました！！
Cursorとは？
CursorはAIを活用したコードエディターで、VSCodeを元にして作られています。なのでVSCodeの拡張機能をそのままCursorでも利用することが可能です。
見た目もほとんどVSCodeと一緒なのが分かると思います。
またChatGPTを搭載しているので、エディター上で
- コードの自動生成・編集
- チャットでの質疑応答
- 自動デバッグ・エラー修正
これらが可能です。
Cursorの料金・価格(2024/05時点)
| プラン | 価格 | 機能 |
|---|---|---|
| 無料 | 無料 | GPT-4の遅い利用 50回/月 GPT-3.5の利用 200回/月 Copilot++の完了 2000回/月 基本的なAIコードエディタ機能 プライベートデータコントロール |
| プロ | $20/月 | 無料プランの全機能 GPT-4の高速利用 500回/月 GPT-4の遅い利用無制限 GPT-3.5の利用無制限 Copilot++の完了無制限 Claude Opusの利用 10回/日 |
| ビジネス | $40/ユーザー/月 | プロプランの全機能 管理者用使用ダッシュボード 一括請求 プライバシーモードの強制 OpenAIのデータ保持ゼロポリシー |
無料プランだとGPT-4の利用が制限されていますが、基本的なAIコードエディタ機能が使えるので、まずは無料プランで試してみるのがいいと思います。
ただ、本格的に使うとすぐに無料枠を使い切ってしまうので、本腰入れて使うならプロプランを利用するのがいいと思います。
Github Copilotとの違いは？
Github CopilotはAIコードアシスタントです。このツールは、開発者がコードを書く際に自動補完やコードの提案を行うことで、コーディングプロセスを効率化します。
様々なエディターに搭載できますが、Web制作の場合はダントツでVSCodeに入れている方が多いと思います。
Github CopilotはよくCursorと比較されますが、一番大きな違いは「Copilotはエディターに入れるプラグイン、CursorはAIを搭載したエディターそのもの」という点だと思います。
簡単に表形式にまとめてみました。
| 観点 | GitHub Copilot | Cursor |
|---|---|---|
| モデル | OpenAI Codex | 独自モデル (GPT-4とGPT-3.5を利用) |
| 料金 | 無料プランなし 個人プラン: $10/月 企業プラン: $19/月 | 無料プランあり プロプラン: $20/月 ビジネスプラン: $40/ユーザー/月 |
| Chat | あり (コメントを使って説明) | あり (コードベースを理解したチャット) |
| Docs(外部URL参照機能) | なし | あり (コード定義やドキュメントの参照) |
| コード自動補完 | あり | あり (Copilot++) |
| ファイル横断 | なし | あり (リポジトリ全体を検索) |
| Figma for VS Codeが使えるか | あり | あり |
この中の違いで重要な部分は太字にしました。これらを鑑みて、どうして私がCursorを選ぶのかの理由を解説していきます。
Cursorを選ぶ理由
VSCodeを使ってるから別のエディター乗り換えは何となくヤダなぁ
と思っている方は多いですし最初は私もそう思ってたんですが、見た目も機能もVSCodeとほぼ一緒ですし、拡張機能も大体引き継げるので、特に導入に問題は無いと思います。
それ以上にCursorにはわざわざ導入する後押しになる、特筆すべき便利機能が多いので、一部紹介します。
コマンドを使用したファイル横断が便利
Cursorの強みとして、他のファイルを参照しつつ指令を出せるので、的確な答えを得やすくなります。
例えばHTMLを書いてからCSSを書く人が多いと思いますが、その場合CSS側でセレクタを用意するのが面倒くさいと思ったら、自動化することが可能です。
後で解説しますが、@Files機能を使えば別のファイルを読み込んだ上で指示を与えられるので、HTMLを読み込んで自動でCSSにセレクタを用意するのもお手の物です。
このように、自動でセレクタが用意されました。
他にも外部サイトをURLで複数読ませて学習させたりもできるので、これがCursorが使いやすい一つの要因になっています。
CursorでもCopilot++でコード補完できる！
もともとコード補完はGithub Copilotでしかできないと思われていたのですが、
2024年5月現在、Cursorには「Copilot++」という機能がデフォルトでオンになっており、これでCursorでもコードのリアルタイム補完機能が使えるようになりました。
これもCursorを使う大きな理由になるかと思います。
Figma for VS Codeが使える
Figma for VS Codeはデザインデータ上の値をエディターに自動反映できたりしてかなり強力なプラグインで、Cursorでは使えないと言われてました。
より現在はいつの間にアップデートがあったのか普通に使えますね。
ただFigmaの有料プラン加入が必要なのと、Web制作をしている人で実際にはFigma以外のデザインを貰う人が多いと思うので、
とても便利なのですが、今回はこの機能の説明は省こうと思います。
ちなみにデイトラWeb制作コースに所属しているとFigmaプロプラン(月額¥1.800)が二年間無料で使えます（総額¥43,200相当）
凄すぎますね。。。
こういった諸々の理由から、個人的にはCursorのほうが使いやすく感じています。
Cursorの導入方法
それでは早速Cursorを導入していきましょう。ここでは初期設定までを終わらせていきます。
Cursorのインストール方法
まずはCursor公式サイトにアクセスして、ダウンロードしてください。
その後、以下の画像のように設定して、「Continue」をクリック。
「Use Extensions」をクリック。
「Help Improve Cursor」を選択肢、「Continue」をクリック。
「Sign Up」でCursorに登録したら、完了です。
Cursorの日本語化
Cursorはデフォルトでは英語になっているので、日本語化していきます。
まずは画面上部の「View」→「Command palette」を選択。
その後、「Display Language」と検索してクリック。
「日本語」を選択。
「Restart」をクリック。
これで日本語になったはずです。
プライバシーモードを有効化する
案件で使用する場合は、コードを学習に使用されないようにしておいたほうがいいですので、プライバシーモードを有効化しておきます。
画面右上の歯車マークをクリック。
下の方にスクロールして、「Privacy mode」を「enabled」にしておきましょう。
Cursorの使い方-よく使う機能
筆者はCursorのプロプランを使用しています。
リアルタイムでのコード補完
コードを打ち込むとAIが推測して候補を出してくれます。
よくある処理ほど得意で、例えばヘッダーを作るときの例が下記です。
ヘッダーなんて大体構造が決まっているので、スパッと補完してくれます。
もし補完を適用したい場合は、タブキーを押せば反映されます。
まあ決まり切った処理はスニペットにまとめていたり、Emmetで事足りる場合も多いですが、スニペットにもまとめないような細かい処理を全部拾ってくれるのが嬉しいですね。
コードレビュー
自分の書いたコードをレビューしてもらうことも可能です。リファクタリングの際に重宝します。
以前書いたモーダルウィンドウのブログ記事の中のJSの処理をレビューしてもらうとします。
'use strict';
{
const open = document.getElementById('open');
const close = document.getElementById('close');
const modal = document.getElementById('modal');
const mask = document.getElementById('mask');
open.addEventListener('click', function () {
modal.classList.remove('hidden');
mask.classList.remove('hidden');
});
close.addEventListener('click', function () {
modal.classList.add('hidden');
mask.classList.add('hidden');
});
mask.addEventListener('click', function () {
modal.classList.add('hidden');
mask.classList.add('hidden');
});
}まずはレビューして欲しいコードを選択し、「Chat」を選択。
その後、レビューをお願いします。
そうすると、レビューポイントと改善案を提示してくれました。
複数ファイルを跨いだレビューも可能
また、ファイル読み込み機能(@Files)を使って複数ファイルを横断してレビューしてもらうことも可能です。
モーダルのJSのコードだけでなく、HTMLやSassのコードも見てもらいつつ、アクセシビリティに配慮した部分までレビューをもらおうと思います。
これは複数ファイルを横断しなければ指摘できない事項です。
右クリックして「Add Symbol to New Chat」を開くか、Macの場合⌘＋Lでチャットを開くことができます。
そして、ファイル読み込み機能である@Filesを検索し呼び出します。
読み込みたいファイルを選択します。
参照してほしいファイルを読み込んだら、指示出しをします。
今回はアクセシビリティの観点から、以下のモーダルコードのレビューをお願いしました。
<div id="open">
詳細をみる
</div>
<div id="mask" class="hidden"></div>
<section id="modal" class="hidden">
<p>He said that that that that that boy used in the sentence was wrong.<br>あの少年がその文で使ったあのthatは間違っていたと彼は言った。</p>
<div id="close">
閉じる
</div>
</section>body {
font-size: 16px;
height: 1300px;
}
#open,
#close {
cursor: pointer;
width: 200px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
padding: 12px;
margin: 16px auto 0;
background: #4caf50;
color: white;
position: relative;
top: 30%;
}
#mask {
background: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
}
#modal {
background: #fff;
color: #555;
width: 300px;
padding: 40px;
border-radius: 4px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
margin: 0 auto;
z-index: 2;
}
#modal p {
margin: 0 0 20px;
}
#mask.hidden {
display: none;
}
#modal.hidden {
display: none;
}'use strict';
{
const open = document.getElementById('open');
const close = document.getElementById('close');
const modal = document.getElementById('modal');
const mask = document.getElementById('mask');
open.addEventListener('click', function () {
modal.classList.remove('hidden');
mask.classList.remove('hidden');
});
close.addEventListener('click', function () {
modal.classList.add('hidden');
mask.classList.add('hidden');
});
mask.addEventListener('click', function () {
modal.classList.add('hidden');
mask.classList.add('hidden');
});
}
そうすると、見事に各ファイルを読み取ったうえでのレビューをしてくれて、
各ファイルの修正提案のコード例もくれました。
個人的にはCursorの中でもめちゃくちゃよく使う機能です。
@Docsでの外部URL参照
CursorはAIにChatGPTを使用しているので、基本的に最新情報には疎かったりします。
例えばポップオーバー APIを使用してポップオーバーコンテンツを作成してください！と指示すると、なぜかBootstrapを使用して実装しようとします。
ChatGPTに直接聞いても知らないようだったので、学習が弱いのだと思います。
そこで@Docsの出番です。これを使えば外部ドキュメントを学習させることができます。
今回は以下のドキュメントを学習させます。
Chat画面で@Docsを開き、
「Add new doc」を選択し、
読み込みたいドキュメントのURLを貼り、学習させます。
学習を終えたら、再度Popover APIでポップアップを作成するように指示します。
すると、今度はちゃんとドキュメントを見つつ、正しい回答を貰えました。
ポップオーバーも正しく開けました。
ファイル全体読み込み(@codebase)
いちいちファイルを読み込むの面倒くさい、もうプロジェクト全体のコードを読んで提案してくれない？
という強欲な人間もいると思います（私です）
そんなあなたでも満足できるの、あります。
Codebase Answersというプロジェクト内のコード全体を読んだうえで提案してくれる機能を紹介しましょう。
試しに、WordPress既存テーマの中で、検索ロジックがどこに書いてあるかプロジェクト全体の中で探索してもらいます。
膨大なファイル数があるWordPress既存テーマを理解するのに、まさに役立つ機能です！！
まずはChatを開きます。右クリックかショートカット⌘+lで開きます。
その後、
と書いた後、with codebaseをクリック。
すると検索機能に関連したファイルとコードを示してくれました。
プロジェクトにアサシンされたがコード全体が何をしているかすぐに把握したいときなど使えるかと思います。
これは結構負荷のある処理なので、ファイル数が多いとエラーを起こすこともあるようです。
@Filesでファイル読み込み→コード生成
Cursorで単純にコードを生成すると、前後の文脈を無視したコードを生成しやすいので、実際にコード生成を行う際は、ファイル読み込みと組み合わせて使うことが多いです。
そしてこのファイル読み込み機能のおかげで、コード生成がめちゃくちゃ使いやすくなっています。
例えばWeb制作でよくある「ページトップに戻るボタン」ってありますよね。
あれのHTML.CSSは既に完成していて、後はJavaScriptを書けばOKって状態だとします。
<a href="#top" class="back-to-top"><span>↑</span></a>
<a id="top"></a>body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #007BFF;
color: white;
text-decoration: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transition: background-color 0.3s ease;
}
.back-to-top:hover {
background-color: #0056b3;
}
従来ならここにJavaScriptの処理を書いてもらう場合、HTMLとCSSのコードをコピペして読み込ませたうえでコードを生成していましたが、
ファイル読み込みを使えばそんなことをしなくてもよくなります！
まず@Filesを選択。
そして読み込ませたいファイルを選択します。今回はJSファイルにindex.htmlとstyle.scssを読み込ませます。
そうしたら準備完了。指示を書いて「Generate」を押すことで、ページトップに戻る処理を書いてもらいます。
無事にページトップに戻る処理を書いてもらえました！
ちゃんと動作することを確認しました！文脈を読み取ったうえでコードを書いてくれるのがかなり助かりますね！
コードの書き換え
ここにフリーランスの税金を簡易計算する、自作のシミュレーターがあります。
<h1>税金シミュレーター</h1>
<form id="taxForm">
<label for="income">年収：</label>
<input type="number" id="income" required><br><br>
<label for="expenses">経費：</label>
<input type="number" id="expenses" required><br><br>
<label for="declaration">申告種類：</label>
<select id="declaration" required>
<option value="blue">青色申告</option>
<option value="white">白色申告</option>
</select><br><br>
<button type="button" onclick="calculateTaxes()">計算</button>
</form>
<h2>結果</h2>
<p id="results"></p>
<script>
function calculateTaxes() {
const income = parseFloat(document.getElementById('income').value);
const expenses = parseFloat(document.getElementById('expenses').value);
const declaration = document.getElementById('declaration').value;
// 青色申告控除
const blueDeclarationDeduction = 650000;
// 所得税の計算方法
const incomeTaxBrackets = [
{ limit: 1950000, rate: 0.05 },
{ limit: 3300000, rate: 0.10 },
{ limit: 6950000, rate: 0.20 },
{ limit: 9000000, rate: 0.23 },
{ limit: 18000000, rate: 0.33 },
{ limit: 40000000, rate: 0.40 },
{ limit: Infinity, rate: 0.45 }
];
// 住民税の定額部分と税率
const residentTaxFixedAmount = 5000;
const residentTaxRate = 0.10;
// 健康保険料の計算方法
const healthInsuranceRate = 0.10;
let taxableIncome;
if (declaration === 'blue') {
taxableIncome = income - expenses - blueDeclarationDeduction;
} else {
taxableIncome = income - expenses;
}
if (taxableIncome < 0) {
taxableIncome = 0;
}
// 所得税の計算
let incomeTax = 0;
let remainingIncome = taxableIncome;
for (const bracket of incomeTaxBrackets) {
if (remainingIncome > bracket.limit) {
incomeTax += bracket.limit * bracket.rate;
remainingIncome -= bracket.limit;
} else {
incomeTax += remainingIncome * bracket.rate;
break;
}
}
// 住民税の計算
const residentTax = taxableIncome * residentTaxRate + residentTaxFixedAmount;
// 健康保険料の計算
const healthInsurance = taxableIncome * healthInsuranceRate;
document.getElementById('results').innerHTML = `
<strong>所得税：</strong> ${incomeTax.toFixed(2)} 円<br>
<strong>住民税：</strong> ${residentTax.toFixed(2)} 円<br>
<strong>健康保険：</strong> ${healthInsurance.toFixed(2)} 円
`;
}
</script>しかし、現状では消費税を算出してくれません。よって、ここに消費税を出す機能も追加するために、コードの書き換えをCursorに依頼しようと思います。
まずはChatを開きます。
その後、@Filesでソースコードが書いてあるファイルを読み込みます。
そして、以下のプロンプトを書き、実行します。
その結果、消費税を算出する処理が追加されたことを確認します。
実際に使って動作を確認した結果、うまく機能しました！！
いや〜気持ちがいいですね！！
ChatGPTとCursorは両方必要？
ChatGPTもCursorも有料プランは月額¥3,000程度かかります。両方使うと毎月¥6,000かかるわけなので、なかなかの金額ですよね。。。
2024年5月時点では、どちらも同じChatGPTのモデルを使っているので、コーディングだけをするのならCursorだけ使うのも十分アリだと思います。
ただ、Cursorのプロプランでも意外に使用回数を超えてしまったり、時間帯によっては回答スピードが素のChatGPTより遅くなる気がしています。
私は両方課金して使っていますが、 それはこのようなブログ執筆などコーディング以外の用途でもかなり重宝するためです。
そうでなく、単純にコーディングのみにAI活用をするなら、今回紹介したCursorだけでも問題ないと思います。
AIツールでコーディングを爆速化しよう！
今回はCursorの使い方を解説してきましたが、こういったAIツールを使う人、使わない人ではかなり生産性が違ってきてしまいます。
Cursorは無料から使い始めることもできますし、導入しない理由はないでしょう。
是非使いこなして、学習も実務も快適に進めていって頂ければ！
超実践編では納期厳守の模擬案件を経験し、スキル面以外にコミュニケーションも徹底レビューを受けることができます。
最近は実案件のノウハウも多いですが、「納期が短い案件の中で、丁寧なコミュニケーションを本当に実践できますか？」
この課題では、極限まで実案件に近い状況で、発注者である私とコミュニケーションを取りながら、
- 見積書提出
- 実装→初稿提出
- レビュー→修正
- 再修正→納品
- 請求書
この流れを実践していただき、最後にzoomであなたに全体レビューを行います。
- 学習はだいたい終わったけど、納期までに納品できるか不安
- 中々継続と紹介で案件が回らない
このような中級者を飛躍させる超実践編、受講には条件がありますので、詳細はリンク先よりご確認下さい。
あなたの挑戦を待っています！！
＼レビューを受けて圧倒的な自信を身につける！／
ご寄付を頂けると今後の更新の励みになります！
検索機能のコードがどこに書いてあるか教えて？