エンジニア界隈で需要が増えているテキストエディア「Cursor」。AI機能を搭載しており、チャットを通してコーディングやデバックのサポートをできるのが魅力です。
CursorにはComposerという機能が搭載されており、複数のファイルをデバッグしたりプロンプトを通してファイルの生成からコーディングまでを実施することも可能。人間の指示に沿って最適なシステムを作成する「AIエージェント」としての役割を担えることから注目を集めています。
関連記事
本記事ではCursorの機能「Composer」の特徴や使い方について紹介。コードを書かずにブラウザゲームを作る過程を例に解説します。
CursorのComposerとは
CursorのComposerはAIを活用したコードエディタ「Cursor」の強力な機能で、複数のファイルを同時に編集・生成できるツールです。
本機能によりプロジェクト全体のコードの修正や新機能の追加がスムーズに行え、開発の効率を大幅に向上させられるのが特徴。AIの力を借りながら効率的かつ正確にコードを管理できます。
CursorのComposer機能は大規模なプロジェクトや複雑なコード修正を行う際、その効果を最大限に発揮します。
CursorのChatとComposerの違い
CursorにはComposerと同じくAIとやり取りできる「Chat機能」が搭載されています。双方とも生成AIによるチャット機能を備えているので似ているのが特徴。具体的な違いは下記の通りです。
| 機能 | Chat | Composer |
|---|---|---|
| 用途 | 質問や相談 | コードの生成・補完 |
| 形式 | 対話型 | 直接コードを生成・挿入 |
| 適用範囲 | 幅広い（概念的な質問もOK） | コードの具体的な変更や生成 |
ChatはユーザーがAIと対話しながらコードに関する質問や、相談をするための機能です。たとえばプログラミングの概念やアルゴリズムの説明、より効率的なコードの書き方などの質問にチャット形式で答えられます。
Composerはエディタ内で直接コードを補完・生成する機能です。たとえば新しい関数やクラスの自動生成、プロジェクト内のコンテキストを考慮した適切なコード補完などを実行できます。
ChatはAIと会話しながら問題を解決するためのツールで、ComposerはAIが直接コードを補完・生成するための機能というのが双方の違いです。コードの理解や設計に関する相談をするならChat、すぐにコードを生成・修正したいならComposerの利用が適しています。
CursorのComposer機能でできること
CursorのComposerでできることはAIによるフォルダやコードの生成、デバック対応など多岐にわたります。具体的な内容は下記の通りです。
マルチファイル編集でプロジェクト全体を管理
Cursor Composerは一括で複数のファイルを編集・生成できるため、コードの整合性を維持しながら作業を進めることが可能です。個々のファイルを個別に修正する手間が省け、プロジェクト全体の管理がスムーズになります。
AIがサポートするコード生成と修正
自然言語で指示を入力するとAIがその内容を理解し、コードの生成や修正を提案します。そのため開発スピードが向上するだけでなく、人的ミスの削減にもつながります。
差分ビューで変更点を可視化
コードを編集する際、変更点を視覚的に確認できる「差分ビュー」機能が搭載されています。適用前に修正内容を詳細にチェックできるため、誤った変更を防ぎながら安心してコードを更新できます。
【Cursor Composerの使い方】コードを書かずブラウザゲームを作ってみた
今回はCursorのComposer機能を使い、ブロック崩しゲームをコードを書かずに作ってみます。事前にCursorのインストールが必要なので、まだの方は下記の記事を参考にインストールを済ませておいてください。
はじめにCursorを開き、ショートカット「Ctrl + Shift + @」でターミナルを開きます。
ブラウザゲームを作るためのフォルダを任意の場所で作ってください。今回はapp-testというフォルダ内で作成します。
Cursorのハンバーガーアイコンから「フォルダーを開く」をクリックします。
するとフォルダの指定画面が表示されるので、先ほど作成した「app-test」フォルダの場所を選択してクリックしましょう。
上記のようにCursorでフォルダを表示できたあと「Ctrl + i」を押すと画面右にComposerの画面が表示されます。赤枠のチャット欄に作りたいブラウザゲームの内容を記載すると、Composerが内容通りにファイルの作成やコーディングを実施します。
今回使用するプロンプトは下記の通りです。
今回はMozilla Developer Network (MDN) のWebサイトにある、純粋なJavaScriptで2Dブロック崩しゲームを作成するチュートリアルを読み込ませて作ってみます。
プロンプト内に「@」を指定すると、ファイルやWeb、サイトなどの参照元を指定できます。
プロンプトを実行すると、上記のようにComposerがファイルの作成とコーディングを実行してくれます。全てComposerができるのではなく、必要なソフトのインストールはこちらで実行する必要があります。
たとえば今回利用する「Flask」はPythonのフレームワークなので、自身でPCへインストールします。
【Flaskをインストールするコマンド】
pip install flask
Flaskをインストールしたあとはターミナルを開き、プロジェクトフォルダで「python app.py」コマンドを実行して下さい。
標示用のURLが出力されるので、こちらをブラウザへ貼り付けます。
ブラウザでブロックを崩すゲームが表示されました。CursorのComposerを使うと、このような流れで簡単なゲームを作成できます。
注意点としてプロンプトの長さや内容次第でフォルダが作成されなかったり、求めている内容のコーディングが実現できないこともあります。
そんなときはプロンプトを分割して実行したり、ChatGPTなどの生成AIで最適なプロンプトへ作り替えてもらうなどの対応が効果的です。
