AIエディター「Cursor（カーソル）」初心者向けガイド、VS Codeベースの使い勝手とは
ステップ4：Webページのカスタマイズ、Composer機能の利用
個々のファイルのカスタマイズでは、CursorのComposer機能が重要な役割を果たす。この機能は、各ファイルのコード修正・変更を効率的かつ視覚的に行えるもので、Cursorの人気要素の1つとなっている。 メイン画面で、「Cmd + Shift + I」を押すと、このComposer機能が表示される。 ※ウィンドウズ：Ctr + Shift + I 入力欄に、どのようにカスタマイズしたいのか、任意のプロンプトを入力する。 ここでは、AIコンテンツ制作を強みとする筆者（Gen Hosoya）のページを作成したいと入力。また、コンタクトフォーム、ソーシャルリンクを追加したい旨も記述した。 その際、入力欄上部にある「＋」アイコンをクリックし、どのファイルをターゲットするのかを提示。この場合「page.tsx」を選択する。また、プロジェクトファイル全体を参照させたいので、「＠Codebase」も加えておく。 必要な情報を入力し、Composer右下にある「Submit」ボタンをクリックすると、Cursorが自動でコードを編集してくれる。 コードが生成／編集されると、「diff view」というボタンが表示される。これは、元のコードと編集後のコードを比較するツール。以下のように赤色（元のコード）と緑色（新しいコード）が表示されるので、追記・変更箇所を一目で確認することが可能だ。右下にある「Accept」ボタンをクリックすると、追記・変更が反映される。 この追記・変更により、先ほどのデフォルトWebページがどのように変更されたのかを確認してみる。以下のように、トップにナビゲーションバーが配置され、名前、About Me、Cotanct Me、コンタクトフォーム、Sendボタンなど、さまざまな要素が追加されたことがわかる。
ステップ5：追加のカスタマイズ、部分編集機能の利用
ここからさらに要素を追加してみる。 メイン画面に戻り、メインチャットでpage.tsxを参照させ、筆者が最近書いた記事のリンクを貼り、これを「ワークス」の事例として追加してほしいと頼んでみた。 page.tsxに変更が加わり、それを承諾（Accept）。すると以下のように、「Recent Works」の項目が生成され、記事タイトルと概要、さらには「記事を読む」リンクまで生成された。リンクはしっかりと機能しており、それぞれの記事にアクセスすることができた。 次にこれらの記事項目にサムネイルを追加してみる。 この場合、ページ全体を読み込ませるのではなく、部分編集のほうが効率的なので、その機能を使ってみる。 Cursorメインページを開き、page.tsxのコードを表示する。 この中の「works」セクションを見つけ出し、そのセクションを選択し、「Cmd + K（ウィンドウズ：Ctr + K）」を押すと、選択箇所のみを対象とした指示を与えることが可能となる。 たとえば、ここでは「記事のサムネイルを表示したい」と入力し、「Submit」ボタンをクリック。 結果、以下のような画像要素が追加された。ただし、実際の画像は追加されていない。 その後メインチャットと部分編集機能を使い、何回か試行を繰り返すと、ページは以下のようになった。 モバイル向けのレスポンシブ対応も実装された。 以上のように、Cursorを使うことで、シンプルなWebサイトであれば、かなり短時間で構築することが可能だ。今回は触れていないが、GitHubとの統合によるバージョン管理も難しくはなく、またNext.jsの開発元であるVercel社が提供するプラットフォームを使えば、Cursorで構築したNext.jsプロジェクトを最適化された形で簡単にデプロイすることができる。 執筆時点でCursorは、主要モデルとしてClaude3.5 Sonnetを使っているが、今後、さらにコーディングに強いモデルが登場することで、Cursor自体の利便性もさらに高まっていくことが予想される。
執筆：細谷 元、構成：ビジネス＋IT編集部
