Cursor AI セットアップガイド:インストールから最初のプロジェクトまで (2026年版)
Cursor AI コードエディタのセットアップと使用方法に関する完全初心者向けガイド
Hyperealで構築を始めよう
Kling、Flux、Sora、Veoなどに単一のAPIでアクセス。無料クレジットで開始、数百万規模まで拡張可能。
クレジットカード不要 • 10万人以上の開発者 • エンタープライズ対応
Cursor AI セットアップガイド:インストールから最初のプロジェクトまで (2026年版)
Cursor は VS Code をベースに構築された AI ネイティブのコードエディタであり、AI アシスタンスを開発ワークフローに直接統合します。インラインでのコード補完、複数ファイルの編集、機能全体を構築できるエージェントモード、そして Claude Sonnet 4 や GPT-4o といったモデルとの深い連携を提供します。
このガイドでは、インストールから Cursor の AI 機能を使った最初のプロジェクトの構築まで、順を追って解説します。
ステップ 1: Cursor のダウンロードとインストール
macOS
- cursor.com にアクセスし、Download for Mac をクリックします。
- ダウンロードされた
.dmgファイルを開きます。 - Cursor をアプリケーションフォルダにドラッグします。
- アプリケーションから Cursor を起動します。
# または Homebrew 経由でインストール
brew install --cask cursor
Windows
- cursor.com から
.exeインストーラーをダウンロードします。 - インストーラーを実行し、プロンプトに従います。
- スタートメニューに Cursor が表示されます。
Linux
# AppImage をダウンロード
wget https://download.cursor.com/linux/appImage/x64 -O cursor.AppImage
chmod +x cursor.AppImage
./cursor.AppImage
ステップ 2: 初期設定
Cursor を最初に起動すると、オンボーディングウィザードが表示されます。
アカウントの作成
- Sign Up または Log In をクリックします。
- メールアドレス、Google、または GitHub アカウントでサインアップします。
- 無料の Hobby プラン(月間 50 回の高速リクエスト)から開始されます。
VS Code 設定のインポート
VS Code から移行する場合、Cursor はすべての設定を自動的にインポートできます。
- オンボーディング中に Import from VS Code を選択します。
- Cursor は以下の項目をインポートします:
- 拡張機能 (Extensions)
- キーバインド (Keybindings)
- 設定 (settings.json)
- テーマ (Themes)
- スニペット (Snippets)
オンボーディングでこの手順をスキップした場合は、後で実行することも可能です:
Cursor > Settings > General > Import VS Code Settings
テーマとフォントの設定
Cursor はすべての VS Code テーマをサポートしています。好みの外観を設定しましょう:
- コマンドパレットを開きます:
Cmd+Shift+P(Mac) またはCtrl+Shift+P(Windows/Linux) - 「Color Theme」と入力し、好みのテーマを選択します。
- フォントの設定:Settings > Text Editor > Font Family から変更できます。
ステップ 3: Cursor の AI 機能を理解する
構築を始める前に、4 つの主要な AI 機能を理解しておきましょう:
| 機能 | ショートカット | 役割 |
|---|---|---|
| Cursor Tab | 自動実行 | タイピング中のインラインコード補完 |
| Chat | Cmd+L |
コードベースのコンテキストを用いたサイドパネルでの AI チャット |
| Inline Edit | Cmd+K |
AI への指示による選択範囲のコード編集 |
| Agent Mode | Cmd+L > Agent |
自律的な複数ファイルの編集およびターミナル操作 |
Cursor Tab (オートコンプリート)
Cursor Tab は、タイピング中にコードを提案するインラインオートコンプリートです。ファイル全体やプロジェクトのコンテキストを理解することで、従来のオートコンプリートを凌駕する精度を実現しています。
// 関数を書き始めると、Cursor Tab が補完します:
function calculateTax(amount: number, rate: number) {
// Cursor Tab の提案:return amount * (rate / 100);
}
Cursor Tab は自動的に有効になります。Tab キーで提案を受け入れ、Esc キーで破棄します。
Chat (Cmd+L)
チャットパネルでは、コードについて Claude や GPT と対話できます。関連するファイルはコンテキストとして自動的に含まれます。
主なチャット機能:
- @-mentions:
@filenameを使って特定のファイル、フォルダ、シンボルをタグ付け - Codebase search: プロジェクトをインデックス化し、セマンティック検索が可能
- Apply ボタン: コード提案をワンクリックでファイルに適用
- Agent モード: 自律的なマルチステップタスク実行への切り替え
Inline Edit (Cmd+K)
コードを選択して Cmd+K を押し、指示を入力すると、Cursor が選択範囲を書き換えます:
- コードブロックを選択します。
Cmd+Kを押します。- 「add error handling and input validation(エラーハンドリングと入力バリデーションを追加して)」と入力します。
- Enter を押します。
- 差分(diff)を確認し、適用(Accept)または破棄(Reject)を選択します。
Agent Mode
エージェントモードは最も強力な機能です。以下のことが可能です:
- 複数のファイルの読み書き
- ターミナルコマンドの実行
- パッケージのインストール
- 機能全体の設計から実装までを完結
チャットパネルの Agent 切り替えボタンをクリックして有効にします。
ステップ 4: AI モデルの設定
Cursor では、機能ごとに使用する AI モデルを選択できます。
Settings > Models に移動して設定します:
| 機能 | 推奨モデル | 理由 |
|---|---|---|
| Chat | Claude Sonnet 4 | スピードと質のバランスが最適 |
| Agent | Claude Sonnet 4 | マルチステップタスクに非常に優れている |
| Cursor Tab | デフォルト (Cursor-small) | 速度に最適化されている |
| Inline Edit | Claude Sonnet 4 または GPT-4o | 高速かつ正確 |
独自の API キーを追加して、個人のモデルアクセスを使用することも可能です:
- Settings > Models > API Keys に移動します。
- Anthropic、OpenAI、またはその他のプロバイダーのキーを入力します。
- モデルのドロップダウンからカスタムモデルを選択します。
// 例:独自の Anthropic API キーを使用する場合
{
"anthropicApiKey": "sk-ant-xxxxx",
"preferredModel": "claude-sonnet-4-20250514"
}
ステップ 5: 最初のプロジェクトのセットアップ
Cursor の AI 機能を使って、シンプルな Next.js アプリケーションを一から構築してみましょう。
プロジェクトの作成
Cursor 内のターミナル (Ctrl+`` ) を開き、以下を実行します:
npx create-next-app@latest my-cursor-project --typescript --tailwind --app --src-dir
cd my-cursor-project
Cursor でプロジェクトフォルダを開きます:File > Open Folder > my-cursor-project
Agent Mode を使った機能の雛形作成
チャットパネル (Cmd+L) を開き、Agent モードを有効にして、次のように入力します:
以下の機能を持つタスク管理機能を構築してください:
1. すべてのタスクを表示する /tasks のタスク一覧ページ
2. タイトル、説明、優先度のフィールドを持つ「タスク追加」フォーム
3. React の useState を使用したローカルステートでのタスク保存
4. タスクの完了マーク付与と削除機能
5. Tailwind CSS を使用したクリーンでモダンなデザイン
すべての型に TypeScript のインターフェースを使用し、Next.js App Router の慣習に従ってください。
Cursor のエージェントは以下の作業を行います:
- 新しいファイルにタスクの型(Types)を作成
- タスク一覧コンポーネントの構築
- タスク追加フォームの作成
- ページルートの設定
- Tailwind クラスによるスタイリングの追加
複数のファイルが作成・編集される様子を確認してください。適用する前に、diff ビューで各変更をレビューします。
Inline Edit による微調整
エージェントが初期コードを作成した後、インライン編集を使って特定の部分を微調整します:
- タスク一覧コンポーネントを選択します。
Cmd+Kを押します。- 「add drag-and-drop reordering with smooth animations(スムーズなアニメーション付きのドラッグ&ドロップ並べ替え機能を追加して)」と入力します。
- 変更をレビューして適用します。
デバッグに Chat を活用
動作しない箇所がある場合は、エラーをチャットに貼り付けます:
Cmd+Lでチャットを開きます。- 「I'm getting this error:(このエラーが出ています:)」と入力し、エラーメッセージを貼り付けます。
- チャットがプロジェクトのコンテキストを含めてエラーを分析し、修正案を提示します。
- Apply をクリックして修正を直接適用します。
ステップ 6: 設定すべき重要な項目
これらの設定により、Cursor の体験が大幅に向上します。
Cursor Rules ファイル
プロジェクトのルートに .cursorrules ファイルを作成し、プロジェクト固有の指示を Cursor に与えます:
あなたは Next.js 15 アプリケーションに取り組んでいるシニア TypeScript デベロッパーです。
技術スタック:
- Next.js 15 (App Router)
- TypeScript (strict mode)
- Tailwind CSS (スタイリング)
- shadcn/ui (コンポーネント)
ルール:
- 常に明示的な型定義を伴う TypeScript を使用すること
- デフォルトでサーバーコンポーネントを使用し、必要な場合のみクライアントコンポーネントを使用すること
- 既存のプロジェクト構造と命名規則に従うこと
- 簡潔で読みやすいコードを書き、意味のある変数名を使用すること
- すべての非同期処理にエラーハンドリングを追加すること
- コンポーネントにインタラクティブ性が必要な場合のみ "use client" ディレクティブを使用すること
推奨設定
Settings (Cmd+,) を開き、以下のように設定します:
{
"cursor.chat.defaultModel": "claude-sonnet-4-20250514",
"cursor.tab.enabled": true,
"cursor.tab.alwaysSuggest": true,
"editor.inlineSuggest.enabled": true,
"cursor.chat.showSuggestedFiles": true
}
便利なキーボードショートカット
| ショートカット | アクション |
|---|---|
Cmd+L |
AI チャットを開く / フォーカスする |
Cmd+K |
選択範囲のインライン編集 |
Cmd+Shift+K |
ターミナルのコンテキストを含めたインライン編集 |
Cmd+I |
Composer を開く (複数ファイルの同時編集) |
Tab |
オートコンプリートの提案を適用 |
Esc |
提案を破棄 |
Cmd+Shift+P |
コマンドパレット |
Cmd+. |
クイックフィックスの提案 |
ステップ 7: 必須拡張機能のインストール
Cursor はすべての VS Code 拡張機能をサポートしています。以下の拡張機能をインストールして環境を整えましょう:
# 必須の拡張機能 (Cursor の拡張機能パネルからインストール)
- ESLint
- Prettier
- Tailwind CSS IntelliSense
- Error Lens
- GitLens
- Auto Rename Tag
VS Code と同様に、Extensions パネル (Cmd+Shift+X) からインストールできます。
よくあるセットアップの問題と解決策
Cursor Tab が動作しない: Settings > Cursor Tab を確認し、有効になっているかチェックしてください。必要に応じて Cursor を再起動してください。
チャットのレスポンスが遅い: 無料ティアで「slow requests」を使用している可能性があります。Pro へのアップグレードを検討するか、Settings > Subscription でリクエストの残り数を確認してください。
VS Code から拡張機能がインポートされない: Settings > General > Import VS Code Settings に移動してください。同じマシンに VS Code がインストールされていることを確認してください。
エージェントモードが誤ったファイル構造を作成する:
明示的なプロジェクト構造のガイドラインを記載した .cursorrules ファイルを追加してください。エージェントはタスクを開始する前に必ずこのファイルを読み取ります。
メモリ使用量が高い: 使用していない拡張機能を無効にしてください。Cursor は VS Code の拡張機能アーキテクチャを継承しているため、多すぎる拡張機能は動作を重くする原因になります。
Cursor Free vs. Pro: アップグレードする価値はあるか?
| 機能 | Free | Pro (月額 $20) |
|---|---|---|
| 高速リクエスト | 50回 / 月 | 500回 / 月 |
| 低速リクエスト | 2,000回 / 月 | 無制限 |
| エージェントモード | 制限あり | 無制限(フル機能) |
| 優先キュー | なし | あり |
| 用途 | 学習、個人開発 | 日常的なプロフェッショナル利用 |
ほとんどの開発者にとって、Cursor がワークフローに合うかどうかを判断するには無料ティアで十分です。50 回の高速リクエスト制限に頻繁に達するようであれば、Pro は投資に値します。
まとめ
Cursor は 2026 年時点で最も有能な AI 駆動型コードエディタの一つです。特に VS Code からの移行であれば、セットアップは非常に簡単です。まずは無料ティアから始め、プロジェクト用に .cursorrules を設定し、雛形作成には Agent モード、微調整には Chat を活用してみてください。
プロジェクトで画像、動画、トーキングアバターなどの AI 生成メディアが必要な場合は、Hypereal AI が提供する開発者向け API を検討してください。Cursor で構築したアプリケーションに自然に統合できます。クレジットカード不要で、35 クレジット分を無料でお試しいただけます。
