【Cursorエディタ】新機能「Composer」はCursor版Claude Artifacts！
CursorはAIとペアプログラミングを行うために設計された、VS Codeベースのエディタです。
2024年7月13日に、「Composer」という新機能が追加されました。
Composerは、Claudeの「Artifacts」のような機能です。チャットでAIに編集指示ができます。
しかも、CursorのComposerは複数ファイルをまとめて編集できるので、Claude Artifactsよりも大規模なプロジェクトに適用できるでしょう。
また、複数ファイルを編集可能な機能としてInterpreter Modeがありましたが、その正当進化版のような印象です。
Composer機能の特徴
マルチファイル編集
Composerを利用すると、複数のファイルを同時に編集できます。これにより、関連するコードの変更を一度に行うことが可能になり、プロジェクト全体の整合性を保つことができます。
見やすいdiff
追加・削除 箇所がハイライトされたいつもの見やすいdiffで各ファイルの編集内容を確認できます。
AIサポート
ComposerのAIは、コードの補完や修正を提案します。これにより、コーディング速度が向上し、ミスを減らすことができます。例えば、関数の実装時に適切なコード例を提示してくれます。
Composerの使い方
設定の有効化
Cursor Editorを開き、右上の設定ギアをクリックします。
「Beta」セクションに移動し、「Composer」を有効にします。
Composerを起動（Ctrl＋I）
Composerを起動すると、Window下部にComposer入力画面がポップアップ表示される。
ファイルの選択
編集したいファイルを選び、Composerタブに追加します。
複数のファイルを同時に開くことで、関連するコードを一度に編集できます。
編集の開始
Composerタブ内で通常のエディタと同様にコードを編集します。
AIの提案を受け入れ、効率的にコードを修正できます。
使用例
基本設計書（basic_design.md）の画面設計を更新したので、コードに反映してもらいます。
なお、Composer入力欄にカーソルがあるときにTabキーで次のファイルを確認できます。
次の編集へ：Composer入力欄にカーソルがあるときに「Ctrl＋R」でComposerのチャット履歴を削除できるので、すばやく次の編集ができます。
想定用途
小規模な機能追加やバグ修正
Composerは、小規模な機能追加やバグ修正に役立ちます。これらのタスクでは、複数のファイルを一度に編集することが求められます。Composerを使用することで、関連するファイルを同時に編集し、一貫性のある変更を迅速に行うことができます。
リファクタリング
リファクタリング時には、関連する複数のファイルを一度に編集することで、作業効率が向上します。変数名の変更や関数のリファクタリングが一括して行えます。
大規模プロジェクト
Composerは、多くのファイルが関連する大規模プロジェクトで有効です。すべての関連ファイルを同時に編集することで、プロジェクト全体の一貫性を保ちながら迅速に変更を加えられます。
使用時の注意点
Composerには、作業中のファイルを編集してしまい、変更が失われるというリスクもあります。
そのため、コミット直後の変更がない状態で使うのがおすすめです。
まとめ
Cursor EditorのComposer機能は、開発者の生産性を向上させる強力なツールです。マルチファイル編集やAIサポート機能を活用することで、効率的かつ高品質なコードの作成が可能になります。
Cursor Editorを使用して、コーディング作業をさらに快適で効率的に進めましょう。
おまけ
使用例で使ったプロジェクトはこちらです。
基本設計書があるので、それを元にAIに編集指示が練習できます。
データサイエンス100本ノックでひたすらSQLを書いたことがありますが、
AIコーディング時代の100本ノックは設計書を元にAIにコードを書かせてアプリを完成させるようなものになるかもしれませんね。
