Cursorエディタの使い方をCopilotと比較しつつ徹底解説！Web制作での活用事例も

CursorというAI搭載の最強エディターをご存知でしょうか？VSCodeの上位互換として昨今多くのエンジニアに使われており、Copilotの機能も搭載しています。

前回「Web制作でChatGPTでできる事例7選【現役コーダーが解説】」という記事では、ChatGPTを用いたコーディングを紹介しました。

記事の内容を復習すると、以下の作業をChatGPTに依頼していたのでした。

GPTにさせること

コードを書いてもらう(JS,Sass.WordPress,)
コードを書き換える(JS.WordPress,アクセシビリティ)
コードを解説してもらう(JS.WordPress)
コメントを書いてもらう
エラーメッセージの解読
コードをレビューしてもらう
アニメーションの付与

しかし人によっては、

エンジニアさん

毎回ChatGPTの画面にコードコピペするの面倒くさいかも。。。

と思うかもしれません。実は私もここで上げた全ての作業をChatGPTにさせているわけではなく、「AIを搭載したエディター」で行うことのほうが実は多いです。デイトラWeb制作コースのような優良なおすすめプログラミングスクールでも、AI搭載エディターの使用は前提になりつつあります。

そこで今回はAI搭載エディターとして二強の

Cursor
Github Copilot

この２つに着目して違いを解説するとともに、私はCursorのほうが便利だと感じているのでその理由も解説し、

後半では私が今活用しているCursorの導入方法と実際の使い方を解説していきます。

CursorはもはやWeb制作を独学し始めたばかりの人でも使うべきなので、ぜひ本記事を参考に導入してください。

Cursor開発のAnysphereが、Andreessen HorowitzやStripe、GitHubなどの創業者から$60Mの資金調達を発表 CursorはAIを搭載したコードエディタで、OpenAI、Midjourney、PerplexityなどのAIスタートアップのエンジニアを中心に、3万人以上のユーザーが月額$20または$40を支払って利用中とのこと

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

動画でもCursorの使い方を解説しました！！
Cursorとは？
Cursorの料金・価格(2024/05時点)
Github Copilotとの違いは？
Cursorを選ぶ理由
Cursorの導入方法
Cursorの使い方-よく使う機能を紹介
ChatGPTとCursorは両方必要？
CursorとCopilotに関するよくある質問
AIツールでコーディングを爆速化しよう！

動画でもCursorの使い方を解説しました！！

Cursorとは？

CursorはAIを活用したコードエディターで、VSCodeを元にして作られています。なのでVSCodeの拡張機能をそのままCursorでも利用することが可能です。

見た目もほとんどVSCodeと一緒なのが分かると思います。

Cursorエディタの使い方をCopilotと比較しつつ徹底解説！Web制作での活用事例も

また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コードエディタ機能が使えるので、まずは無料プランで試してみるのがいいと思います。

ただ、本格的に使うとすぐに無料枠を使い切ってしまうので、本腰入れて使うならプロプランを利用するのがいいと思います。

しょーごログのWeb制作ロードマップをされている方なら、もう初級Exとかの段階で使い始めてもいいと思います。

Github Copilotとの違いは？

Cursorエディタの使い方をcopilotと比較して徹底解説！どっちが良い？Web制作での活用事例も

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公式サイトにアクセスして、ダウンロードしてください。

Cursorエディタの使い方を徹底解説！copilotとどっちが良い？Web制作での活用事例

その後、以下の画像のように設定して、「Continue」をクリック。

「Use Extensions」をクリック。

「Help Improve Cursor」を選択肢、「Continue」をクリック。

「Sign Up」でCursorに登録したら、完了です。

Cursorの日本語化

Cursorはデフォルトでは英語になっているので、日本語化していきます。

まずは画面上部の「View」→「Command palette」を選択。

その後、「Display Language」と検索してクリック。

「日本語」を選択。

「Restart」をクリック。

これで日本語になったはずです。

プライバシーモードを有効化する

案件で使用する場合は、コードを学習に使用されないようにしておいたほうがいいですので、プライバシーモードを有効化しておきます。

画面右上の歯車マークをクリック。

下の方にスクロールして、「Privacy mode」を「enabled」にしておきましょう。

Cursorの使い方-よく使う機能を紹介

リアルタイムでのコード補完
コードレビュー
@Docsでの外部URL参照
ファイル全体読み込み(@codebase)
@Filesでファイル読み込み→コード生成
コードの書き換え

筆者は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の出番です。これを使えば外部ドキュメントを学習させることができます。

今回は以下のドキュメントを学習させます。

ポップオーバー API

Chat画面で@Docsを開き、

「Add new doc」を選択し、

読み込みたいドキュメントのURLを貼り、学習させます。

学習を終えたら、再度Popover APIでポップアップを作成するように指示します。

すると、今度はちゃんとドキュメントを見つつ、正しい回答を貰えました。

ポップオーバーも正しく開けました。

④：ファイル全体読み込み(@codebase)

ありさちゃん

いちいちファイルを読み込むの面倒くさい、もうプロジェクト全体のコードを読んで提案してくれない？

という強欲な人間もいると思います（私です）

そんなあなたでも満足できるの、あります。

Codebase Answersというプロジェクト内のコード全体を読んだうえで提案してくれる機能を紹介しましょう。

試しに、WordPress既存テーマの中で、検索ロジックがどこに書いてあるかプロジェクト全体の中で探索してもらいます。

しょーご

膨大なファイル数があるWordPress既存テーマを理解するのに、まさに役立つ機能です！！

まずはChatを開きます。右クリックかショートカット⌘+lで開きます。

その後、

検索機能のコードがどこに書いてあるか教えて？

と書いた後、with codebaseをクリック。

すると検索機能に関連したファイルとコードを示してくれました。

プロジェクトにアサシンされたがコード全体が何をしているかすぐに把握したいときなど使えるかと思います。

しょーご

これならCSS設計を考慮したコード生成もしてくれるかも、、、

これは結構負荷のある処理なので、ファイル数が多いとエラーを起こすこともあるようです。

⑤：@Filesでファイル読み込み→コード生成

Cursorで単純にコードを生成すると、前後の文脈を無視したコードを生成しやすいので、実際にコード生成を行う際は、ファイル読み込みと組み合わせて使うことが多いです。

そしてこのファイル読み込み機能のおかげで、コード生成がめちゃくちゃ使いやすくなっています。

例えばWeb制作でよくある「ページトップに戻るボタン」ってありますよね。

あれのHTML.CSSは既に完成していて、後はJavaScriptを書けばOKって状態だとします。

<a href="#top" class="back-to-top"><span>&uarr;</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でソースコードが書いてあるファイルを読み込みます。