AIがプログラミングを変える! 「Cursor」 Vscodeに変わる有力エディタ

AIプログラミング第1回記事のアイキャッチです。サイボーグと金髪ツインテール少女 AIプログラミング
AIエディタ襲来!
スポンサーリンク

イントロダクション

つい先日、「Pythonで遊ぼう!基礎編 ① おすすめテキストエディタ5選」で、現在、個人開発者のプログラミングで使われている有力なテキストエディタを紹介しました。

AIプログラミング全盛のこの時代であっても、Github Copilotを導入すれば問題ないと「VSCode」を最有力候補に選出しました。

しかし、モリモリと評判を上げ始めている新しいエディタが登場したようなので、記事を分けて紹介させていただきます。

PR

プログラミング言語の人気オンラインコース
ITとソフトウェアの人気オンラインコース

AIプログラミングエディタ「Cursor」

日本語での読みは「カーソル」でいいかと思います。

以下が、カーソルが自らのダウンロードページで主張している利点です。

Cursorの利点
  • VSCodeからワンクリックで移行可能
  • VSCodeの拡張機能をすべて利用可能
  • AIファーストのコードエディター
  • AIとのペアプログラミング用に設計
  • Chat GPT内蔵
  • コード生成・編集・エラーを自動修正

私が実際に触った感じでも、書かれている内容に偽りはなく、VSCodeの拡張機能も動いている状態です。実際に触ってみましょう。

「Cursor」ダウンロード・インストール

下記公式HPにアクセスしてください。

Cursor - The AI-first Code Editor
Cursor is the IDE of the future, built for pair-programming with Powerful AI.
cursor1

「Download for Windows」をクリックすると、Windows用の.exeファイルのダウンロードが始まります。

MacやLinuxを利用している方の場合、Downroad for Mac などにHP表示が変わっているかと思います。希望のファイルと違うならば、Otherをクリックして該当するファイルをダウンロードしてください。

ダウンロードが完了したら、Cursor Setup……exeファイルを開きます。このとき、ファイルを開くとすぐにインストールが始まりますのでご注意ください。

cursor2

設定画面が登場したら、Languageの設定を変えたい方はここに日本語と記入してください。英語のままでも構いません。

「Continue」を押すと以下の画面に変化します。

cursor3

VSCodeの拡張機能をそのまま導入したい方は、「Use Extention」を押してください。

cursor4

その後、LogIn画面が表示されますが、まだサインアップが終わっていない方は、「Sign Up」を押してください。グーグルと連携してアカウントを作成するとすぐに完了します。

cursor5

サインアップまたはログインが完了すると、エディタが立ち上がります。

以上でインストールは完了です。

Cursorの日本語化

「Cursor」を最初に立ち上げると、VSCodeの拡張機能を導入しているのにJapanese Language Pack for Visual Studio Code」が有効になっていない状態になっているかと思います。設定していきましょう。

「Ctrl+Shift+P」を押すと、「コマンドパレット」が開きます。「Display」と入力するか、「Configure」と入力すると、「Configure Display Language」という選択肢が出てきますので、選択します。

cursor6
cursor7

「日本語」を選択してください。

cursor8

「日本語にスイッチするためにCursorをリスタートしますか?」と聞かれますので「Restart」を選択。

以上で日本語化は完了です。

Cursor AIの威力を体験!

AIプログラミングを体験するチュートリアルがCursor内に用意されていますので、以下でそれを簡単に実行してみましょう。

AIコーディング

画面左側にファイル一覧が表示されています。「python」フォルダから「main.py」を開いてみましょう。

cursor9

なにやらピンク色の文字で書かれています。英語ですが、内容は、順番に設定したステップを体験してみましょうというものです。

cursor10

新しい行で「Ctrl+K」を押してくださいとのことなので押します。

cursor11

AIとの対話インターフェイスが開きました。ここにAIへの指示(プロンプト)を書きます。GPT-3.5とGPT-4のどちらを使うかも選択ができます。

cursor12

さて、ピンク色の文字の指示をさらに読み進めてみます。「Ask for CLI-based game of TicTacToe.」とあります。TicTacToeとは、三目並べのことです。CLIベースの三目並べゲームを頼んでみましょうとのことなので、そのように書きます。

日本語ならば、「CLIベースの三目並べのゲームを作成してください。」とAIに指示(プロンプト)を入力してみてください。

cursor13

すると、ものすごい勢いでAIがプログラムを作成し始めます。コードに問題がなければ、AcceptまたはCtrl+Enterを押します。

以上でコーディングは終了です。

コードの実行・デバッグ

作成したファイルを実行してみましょう。

cursor14

画面左側の「main.py」を右クリックし、赤枠で囲んだ「ターミナルでPythonファイルを実行する」をクリックします。

cursor15

すると、SyntaxErrorが発生しました。コードにバグがあるようです。

cursor16

赤くなった部分をクリックすると、「Debug with AI」というボタンが出てきます。デバッグしてもらいましょう。

cursor17

英語で分かりにくいかもしれませんが、出てきたエラーメッセージを打ち込んでくださいと書いてありますので、エラーメッセージを打ち込んでみます。

cursor18

エラーの原因が指摘されました。エラーにカーソルを合わせると再生ボタンのところに、「Apply to Current File」とありますので、クリックして適用します。

cursor19

コードが修正されました。コードの緑色の方をクリックするか、チャット画面の「Accept Edit」を押して確定します。デバッグはこれで終了です。

バグが治っているか、もう一度ターミナルからコードを実行します。

cursor20

3目並べゲームが起動しました。作成成功です。

コードの改善

さて、このままでは三目並べのゲーム画面が物足りず、色なども付け足したいという希望が出たとします。そのような改善も、ChatGPTに依頼することが出来ます。

ピンク色の英語テキストで言う、ステップ3の部分です。

修正したいコードを選択して、「Ctrl+L」を押します。

コードがチャット画面に展開され、AIへの指示(プロンプト)入力画面が表示されます。

ここで、「三目並べの盤面をわかりやすくなるように追加して、ゲームに色を付けてください。」と入力します。

cursor21

すると、AIが再びものすごい勢いでコードの修正案を書き込んでいきます。

上のデバッグ時と同様に、緑色のコードを選択するか、「Accept Edit」を押します。

ゲームを遊んでみましょう。

cursor22

コードの改善が完了しました。

AIの破壊的な威力

ご覧になった通り、GPTチャットに少し指示を出しただけで、コーディング・実行・デバッグ・改善があっという間に終わってしまいました。

プログラミングでの人間の役割を考えると、Cursorのようなエディタをいじくり回せて、思い通りのプログラムを書かせられるか、ということが重要な要素になってくるのではないでしょうか。

AIの力を手軽に体感できる「Cursor」は、体験程度の利用ならば無料です。GPTをもっと使う方には課金プランもあります。ただし、Cursorで月額契約するよりも、OpenAIでAPIキーを取得して利用した方が、様々なサービスでAIを使うことが出来ますので、そちらをお勧めします。

ぜひ一度はこの驚異的な体験をしておくことをオススメします。

PR

プログラミング言語の人気オンラインコース
ITとソフトウェアの人気オンラインコース

コメント

タイトルとURLをコピーしました