Cursor 2.0でAIアプリを開発する方法

TL;DR

Cursor 2.0では、Composer 1でコードを生成し、プランモードで実装計画を立て、ブラウザモードで画面を確認しながらUIを修正できる。複数モデルの並行利用、音声入力、ルールやメモリ、コードベースの索引化も組み合わせると、開発作業を効率化できる。

Transcript

はい、どうもシです。今回はカーソル 2.0入門ということで、ま、カーソルが かなり進化しましたよっていうところで、 もう一度入門動画撮っていこうかなと思い ます。ま、8ヶ月前ぐらいに私カソル入門 の動画出して、ま、結構反響がありました ので、ま、新しい部分紹介しようかなと 思います。じゃ、始める前にカーソロって どういう機能がね、追加されたのかって いうと、ま、大きく4つありまして、ま、 1つ目からコンポーザー1のモデルが導入 されたってとこですね。私は今まで クロードコードメインで使ってたんです けど、ま、コンポーザー1はこれね、精度 もいいですし、高速に出力されるので最近 こちら使ってます。で、2つ目が複数の モデルを同時に立ち上げて、ま、 キットワーク3というのを使って、え、ま 、独立... Read More

Key Insights

• Composer 1は、ポートフォリオサイトのHTML、CSS、JavaScriptを高速に生成でき、講師が日常的に使用しているモデルである。
• Cursor 2.0のブラウザモードは、エディター内でローカル画面を表示し、修正したいUIをクリックして対象を具体的に指示できる機能である。
• Cursor 2.0は、Git Worktreeを使って複数モデルに独立した作業を割り当て、開発処理を並行して進められる構成を備えている。
• プランモードは、すぐにコードを生成させるのではなく、実装計画を先に立ててからポートフォリオサイトなどの開発へ進むための選択肢である。
• コードベースの索引化は、プロジェクト内のファイルを目次のように整理し、AIが必要な情報を見つけやすくする仕組みである。
• ルール、メモリ、カスタムコマンドは、出力言語などの方針、チャット間の文脈、繰り返し使う指示をCursorへ保持させる機能である。
• MCP設定は、SupabaseやPlaywrightなどの接続を管理し、JSON形式の設定を追加して外部ツールや文書を利用可能にする項目である。
• 料金設定は、契約プランの使用量を確認し、上限超過後の従量課金を許可するか、許可する金額をいくらにするか管理できる。
• 🎬 このチャンネルの他の動画:
  • Claude CodeとExpoでスマホアプリを作る方法
  • 個人開発SNSをゼロから4万人に広げる方法
  • Bolt.newで高品質なLPを作る方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Cursor 2.0でポートフォリオサイトを作る方法は？

空のプロジェクトフォルダーをCursorで開き、AIパネルのモデルをComposer 1へ変更して、HTMLとCSSを使ったポートフォリオサイトの作成を依頼する。実演ではJavaScriptも含むファイルが生成され、index.htmlをLive Serverで開いてブラウザ表示を確認している。

Q: Cursor 2.0の基本ショートカットは何ですか？

Ctrl+Lは右側のAIチャット、Ctrl+Bは左側のサイドバー、Ctrl+Jは下部パネルの開閉に使う。ブラウザモードはCtrl+Shift+Pから呼び出すと説明されている。Macでは左側サイドバーの操作としてCommandを押しながらBを使う方法が示されている。

Q: Cursor 2.0のComposer 1とは何ですか？

Composer 1は、Cursor 2.0へ導入されたコード生成モデルである。講師は精度と出力速度を評価し、現在は主力として使用している。実演では、簡単な日本語の依頼からHTML、CSS、JavaScriptを含むポートフォリオサイトを短時間で生成している。

Q: Cursor 2.0のブラウザモードでUIを修正する方法は？

Ctrl+Shift+Pからブラウザモードを開き、ローカルサーバーで動く画面をCursorエディター内に表示する。修正したいUI部分を画面上でクリックすると、その場所を対象として具体的な変更指示を出せるため、コード上の位置を自分で探す作業を減らせる。

Q: Cursorのプランモードは何に使いますか？

プランモードは、実装前にAIへ作業計画を作らせたい場合に使う。設定ではエージェントを標準モードまたはプランモードにでき、実演ではComposer 1でサイトを生成した後、プランへ切り替えて、計画を立てた上でポートフォリオサイトを作る流れに進んでいる。

Q: Cursor 2.0のモデルはどう選べばよいですか？

通常の開発ではComposer 1を中心に使い、解決が難しい課題ではGPT-5 Codexなど別のモデルやMaxモードを試す方法が紹介されている。設定画面には複数のモデルが初期状態で用意されているため、講師は最初から細かく変更する必要はないとしている。

Q: Cursorのコードベース索引化は何のために必要ですか？

コードベース索引化は、プロジェクト内のファイル群をAIが検索しやすい状態にするための機能である。本の目次に相当する仕組みとして説明され、新しいファイルの自動索引化や手動同期にも対応する。対象外にしたいファイルはCursor用の除外ファイルで指定できる。

Q: Cursorでルールやメモリを設定する方法は？

設定画面のルール、メモリ、コマンドの項目から管理する。全体ルールには、すべて日本語で出力するといった共通方針を登録できる。メモリを有効にするとチャット間で文脈を共有でき、頻繁に繰り返す指示はユーザーコマンドとして保存できる。

Q: CursorのMCPサーバーを追加する方法は？

設定画面のToolsとMCPを開き、利用したいMCPサーバーのJSON設定を追加する。実演ではSupabase、Playwright、Chrome DevToolsなどが表示され、不要な接続は削除できると説明されている。Next.js関連のMCP設定を貼り付ける例では、接続後に最新文書を参照できるとしている。

Q: Cursorの料金と従量課金はどう設定しますか？

アカウント管理画面で契約プランと使用量を確認し、上限超過後の従量課金を許可するか設定する。講師は月額20ドルのプロプランを利用し、追加10ドルまでの従量課金を許可している。それ以上支払いたくない場合は、該当するトグルをオフにする方法が示されている。

Summary & Key Takeaways

• 最初にCursorをインストールし、基本画面とショートカットを確認する。Ctrl+LでAIチャット、Ctrl+Bで左側のサイドバー、Ctrl+Jで下部パネルを開閉でき、Ctrl+Shift+Pからブラウザモードを呼び出せる。VS Codeから移行する場合は、設定画面のインポート機能で拡張機能を反映できる。

• 設定は基本的に初期状態でも利用できるが、料金と従量課金の上限、通知、プライバシー、モデル、MCP、ルール、メモリ、索引化を用途に応じて確認する。講師は月額20ドルのプロプランを利用し、超過時の従量課金を10ドルまで許可している。モデルはComposer 1を中心に、難しい課題では別モデルへの切り替えを提案している。

• 実演では空のフォルダーをCursorで開き、Composer 1へHTMLとCSSを使った自己紹介用ポートフォリオサイトの作成を依頼する。生成されたHTML、CSS、JavaScriptは、Live Server拡張機能からブラウザで確認できる。続いてプランモードによる計画作成や、ブラウザモードで画面を見ながらUIを指定する流れが紹介される。