クリエイターもAIコードエディタ「Cursor」を使って次世代コーディングを体験してみよう！

生成AIを安易に受け入れることができない立場の業種・企業がある一方で、生成AIを積極的に導入・活用していかなければ生き残れない業種・企業があります。その中でも特に、大きな革命の最中であるのが、プログラミングやコーディングの世界です。

生成AIの可能性に期待するエンジニア・プログラマーは多く、オープンソースといった考え方によって進歩してきたプログラミングにおいては、著作権に対する考え方や認識は、他のクリエイターとも大きく異なっています。もちろん、エンジニアやプログラマーの方々自身も生成AIに仕事を奪われる脅威は感じていると思いますが、その脅威は生成AIを使ったプログラミング・コーディングのあり方に向き合うことでしか解決できないでしょう。

そうした流れの中で、生成AIによるコーディング機能を搭載したツールが数多く登場しています。そんな中でも、コードエディタのシェア率トップである「VS Code」の牙城を切り崩すのではないかと囁かれているのが「Cursor（カーソル）」というAIコードエディタです。本記事では、「Cursor」の特徴や使い方についてクリエイターに向けて詳しく解説します。

目次

AIコードエディタ「Cursor」とは（基礎知識）

「Cursor」は、Anysphereというアメリカのスタートアップ企業によって開発されたAIを搭載した次世代のコードエディタです。ChatGPTをベースに開発され、自然言語のプロンプトでコードを作成・編集できる点が最大の特徴になっています。OSはMac、Windows、Linuxに対応しており、日本語を含む様々な言語に対応しています。VS Codeに非常に似たUIを採用し、操作感も近いためVS CodeからCursorへ移行するエンジニア・プログラマーも出始めており、2023年7月頃にリリース（ベータ版・正式版は同年12月頃）されてから急速にユーザー数を伸ばして注目を集めています。

Cursorのコーディング画面イメージ（公式サイト動画より）また、AIアシスタント機能によって、コードベースに関する質問に日本語で回答する機能や、自動デバック・エラー修正機能なども搭載されています。加えて、他のコードエディタにも搭載されているコードの自動補完機能や、コードのリファクタリング（プログラム動作を保ったまま内部構造を整理すること）機能もAIによって強化されています。

▶ 料金プラン
AIコードエディタには、Microsoft傘下のOpen AIとGitHubが共同開発したMicrosoft Copilot（旧GitHub Copilot）などがあり、VS Codeでも利用可能です。これらのサービスは有料で提供されていますが、Cursorは無料プランも提供されています。CursorもCopilotと同様の機能を搭載しており、Macユーザーにとっても気軽に導入できるAIコードエディタの一つです。

Cursorで提供されている各プランは、利用できる範囲などがそれぞれ異なりますので、下記の比較表を参考にしてみてください。回数制限はあるものの無料プランでもChatGPT-4を利用できるので、AIコードディタを試しに導入したい・体験したいといった方にも非常におすすめのツールです。

Cursorの料金プラン比較表

  FreeProBusiness月額料金 無料20ドル40ドル／ユーザーChatGPT-４の使用回数（高速） -月500回月500回ChatGPT-４の使用回数（低速） 月50回無制限無制限ChatGPT-3.5の使用回数 月200回無制限無制限備考   プライバシーモードの強化。一括請求機能あり

｢Cursor」の主要なAI機能

AIコードエディタと聞いて、皆さんが一番関心があるのは、どういう部分が機能強化されているのかといったことでしょう。Cursorには様々なAI機能が搭載されていますが、ここでは主なAI機能をピップアップして紹介します。

▶ コード生成
日本語、英語といった自然言語で記述したプロンプトからコードを自動的に生成できます。例えば「レスポンシブデザインのHTMLとCSSを生成して」「問い合わせフォームを生成して」といった指示を入れるとコードが自動生成されます。

自然言語によるプロンプト入力でコードが自動作成される▶ 自動補完
入力途中のコードを自動的に補完する機能です。一般的なコードエディタにも搭載されている機能ですが、生成AI機能によってさらに効率的に関数名、変数名、メソッド名などを入力できます。

▶ コード修正・デバッグ機能
コードのエラーや問題点を検知し修正案を提案する機能です。生成AIによって、一般的なコードエディタに搭載されているコード修正・デバック機能よりもより具体的で迅速に解決できる修正案を提案しデバック作業を大幅に効率化できます。

▶ チャット機能
AIアシスタントとチャット形式で対話形式で質問できる機能です。ベースはChatGPTですので、ChatGPTと同じようにコードに関する質問をしたり、タスクを指示することができます。基本的には有料でしか利用できないChatGPT-4も月50回まで利用できますので、コーディング関連の質問をするといった用途だけに限ってもCursorを利用するメリットがあると言えるでしょう。

▶ドキュメント検索
目的のドキュメントを素早く検索する機能です。関連のコードや情報をAIによってさらにすばやく検索・抽出することが可能です。

これらの機能以外にも、様々な機能が搭載されています。拡張機能も提供されており、VS Codeの拡張機能を引き継ぐことも可能です。

注意が必要なのは、AIでコーディングできるツールであっても一般的なコードエディタと同様に、全くコーディングの知識がないといった人が利用できる訳ではないという点です。生成されたコードに関して、ある程度知識を有していないとカスタマイズや実装ができませんので、プログラミングやコーディングの知識を有しているユーザーの作業効率を大幅にアップするためのAI機能だという点は留意しておきましょう。

 

｢Cursor」の初期設定と基本的な使い方

ここで「Cursor」を試しに使ってみようというMacユーザーの方に向けて、無料プランで利用する方法をダウンロードや初期設定を含めて簡単に説明します。

▶ インストール

1.Cursorの公式ページへアクセス ～ ダウンロード

Cursorの公式ページへアクセス 各設定が完了したら「Continue」をクリックCursorの公式ページへアクセスします。TOPページにある「Download」もしくは「Download for Free」というボタンをクリックしてインストーラーをダウンロードします。インストーラーを起動してインストールが完了して、Cursorを起動すると右上の画像のような初期設定画面が表示されます。最初の設定ではKeyboardやLanguageの設定があります。Keyboardは使い慣れているコードエディタのKeyboard設定を選択できます。ここでは、VS Codeを選択しておきます。その他の設定は、後でも変更できますので「Continue」をクリックして先に進みます。

2.拡張機能の受け継ぎ ～ データ設定

「Use Extensions」をクリックしてVS Codeの拡張機能を受け継ぐ 「Help  Improve Cursor」を選択画面が遷移するとVS Codeの拡張機能についての設定画面になります。VS Codeの拡張機能を受け継ぎたい場合は「Use Extensions」というボタンをクリックします。次にデータ設定の画面に遷移します。プライバシーモードは有料プランで提供されているサービスなので、無料プランで利用する場合は「Help  Improve Cursor」という項目を選択します。これは、Cursorの改善に自分の利用データの利用を許可するか否かの設定になります。

3.ログインもしくはサインアップ

ログインもしくはサインアップ EメールもしくはGoogleかGitHubのアカウントを選択データ設定が完了したら、ログインもしくはサインアップの設定になります。公式ページで最初に新規アカウント設定を行っている場合は、ログインします。まだアカウントを所有していない場合はサインアップしてアカウントを作成します。アカウント作成とログインは、EメールもしくはGoogleかGitHubのアカウントから可能です。

4.Cursorが利用できるようになる

アカウントからログイン Cursorが利用できる状態にここではGitHubのアカウントからログインしてみましょう（GitHubの使い方についてはこちらの記事も参照してみてください）。ログインが完了したら、右上の画像のようにCursorが利用できる状態になります。

▶ 日本語化する方法

1.「Command Palette」から「Configure Display Language」を選択

メニューバーから「Command Palette」を選択 「Configure Display Language」を選択画面上部にあるメニューバーから「View」をクリックし、表示されたメニュー項目の中から「Command Palette」を選択します。「Command Palette」が表示されたら画面上部にある入力欄に（> ではじまる欄）をクリックし「Configure Display Language」という項目を選択します。入力欄に頭文字のCを入れると該当項目を見つけやすくなります。

2.日本語を選択して再起動

「日本語（ja）」を選択 メニューが日本語化される「Configure Display Language」を選択すると左上の画像のように、言語を選択する項目が表示されますので「日本語（ja）」を選択します。選択すると右上の画像のように、メニューが日本語化します。

▶ プロンプトを入力して自動にコードを生成する方法
CursorのAI機能は数多くありますが、本記事で全てを扱うことは難しいので、今回はプロンプトを入力して自動にコードを生成する方法について簡単に説明します。

1.Commandキー＋Kを押してプロンプト入力欄を表示

Commandキー＋Kを押す プロンプト入力欄に日本語でプロンプトを入力コード記述画面にカーソルを合わせた状態でCommandキー＋Kを押すと、プロンプトを入力する欄が表示されます。このプロンプト入力欄に日本語でプロンプトを入力します。

2.プロンプトを入力しコードを生成

「Generate」をクリック 「Accept」をクリックここでは「スライダー付きのギャラリーを生成したいです。HTMLとCSSだけでなくJavaScriptも記述してください。」というプロンプトを入力してみます。プロンプトの入力が完了したら、プロンプト入力欄に「Generate」というボタンが表示されていますので、これをクリックします。コードが生成されるので、このコードで問題なければ「Generate」ボタンが表示されていた箇所に「Accept」ボタンが表示されていますので、これをクリックします。

3.生成されたコードを確認する

コードが生成される  上の画像のようにコードが生成されました。プロンプトでお願いしたようにJavaScriptのコードも生成されています。

このように生成AIを使うことによって簡単にコードが作成されます。ChatGPTに直接質問しても、同じようにチャット上でコード内容を回答してくれますが、Cursorならエディタ上にコードが記述されるので大変便利です。また、現在ChatGPTでは無料プランでもGPT-4-turboという高速なGPT-4を通常15メッセージまでお試し可能になっています。Cursorの無料プランで利用できるのはGPT-4の低速なバージョンですが、コーディング関連の質問はCursorで行うことによって、ChatGPT本体ではコーディング以外の質問に当てられるといったメリットもあるのです。

 

｢Cursor」のオススメの活用法 Best３

Cursorはプログラミング・コーディングの専門スキルを有する人にとっては作業効率アップに貢献し、初心者には自分一人では難易度の高いコード生成を強力にサポートしてくれるツールです。ここでは具体的にどんな作業領域でCursorが役立つのかおすすめの活用法を3つ紹介します。

▶ デザインコード生成
Cursorを使うことで、FigmaなどのWebデザインツールで作成したデザインデータをコードに変換する作業が大幅に効率化できます。デザイン情報をもとにHTML、CSS、JavaScriptなどのフロントエンド周りのコーディングを自動生成できます。また、エンジニアやプログラマーでなくても、ある程度知識があればPHPやSQLなどのバックエンド言語なども自動生成できるので、WordPressのカスタマイズやプラグイン開発なども可能になります。

▶ アニメーションコード生成
従来、Webブラウザやアプリ上で非エンジニアがアニメーションを実装するのは、専門知識や技術が必要で難易度が高い作業でした。しかし、Cursorを使えば、自然言語のプロンプトでアニメーションコードを作成できます。これにより、WebデザイナーやUI/UXデザイナーなど、クリエイティブな職種における表現の幅を大きく広げ、アイデアをより迅速かつ効率的に形にすることを可能にします。

▶ インタラクティブコード生成
ホバーエフェクト、トグルスイッチ、プログレスバー、スライダーなど情報提供だけでなくユーザーの操作や選択に応じて変化する双方向でやり取りを可能にするインタラクティブなコードは、HTMLやCSSといったマークアップ言語だけでなく、JavaScriptをはじめとしたプログラミング言語に関する知識が必要なものも多く、非エンジニアにとっては難易度が高い作業でした。Cursorを使えば、自然言語で記述したプロンプトからインタラクティブコードを生成できます。

プロンプト入力でプログレスバーの作成を指示して出力されたコードの一部Cursorは複雑なコーディングも容易に生成できるため、UI/UXデザイナーやWebデザイナーなど、Web制作・アプリ制作に関わるクリエイターにとって強力なツールです。

まとめ

AIコードエディタについて感度の高いエンジニア・プログラマーの方は、すでにCursorを導入している方も多いかと思います。また、コーディングが必要なデザイナー・コーダーの方も注目しているエディタでしょう。その一方で、生成AIの著作権問題に対峙しているクリエイターにとってみれば、CursorをはじめとしたAIコードエディタも同類のツールとして抵抗感を感じているという人も少なくないかもしれません。

しかし、生成AIを使ったコーディングは、多くのクリエイターの活動を助けてくれるツールとしての側面もあります。私も自身のポートフォリオサイトをカスタマイズする時に、ChatGPTやGeminiなどの生成AIに質問して、今までは自分ひとりで不可能だったコード作成をすることができるようになってきています。

AIコードエディタを活用すれば、エンジニア・プログラマーでなくても、自身の作品を効果的に見せていくサイトやアプリを作成できるようになります。おそらく、AIコーディングが進化すれば「RPGツクール」のように、簡単でクラシカルなゲーム開発であれば、自分一人で可能になるかもしれません。

自分が描いたキャラクターを使ったゲーム作品ができるかもと想像すると、なんだかワクワクしますよね。生成AIに関してはクリアしなければいけない課題も多くネガティブなニュースばかり散見しがちですが、Cursorを試用して次世代のコーディング・プログラミングを体験してみることは、多くのクリエイターにとっても有益でスキルアップへと繋がっていくのではないでしょうか。