ツール紹介2026-03-28

Cursor AI の始め方と初期設定
【2026年・完全ガイド】

バイブコーディングを始めるなら、まずCursorを使いこなすことが第一歩です。 CursorはVS Codeをベースに作られたAIコードエディタで、チャット・コード補完・複数ファイル同時編集が一つのツールで完結します。このガイドでは、インストールから最初のコード生成まで、初心者が迷わないように手順を解説します。

この記事でわかること

✓Cursorのインストール方法（Mac / Windows）
✓日本語設定とおすすめ初期設定
✓無料プランでどこまでできるか
✓.cursorrules の書き方と活用法
✓Chat / Composer / Tab の使い分け

1. Cursorとは何か

Cursorは2023年に登場したAI特化コードエディタです。VS Codeをフォークして開発されているため、拡張機能やキーボードショートカットはほぼそのまま使えます。

通常のエディタと最大の違いは、AIが「コードを書く共同作業者」として統合されている点です。単なるコード補完ツールではなく、「このファイルのこの関数を書き直して」「バグの原因を調べて修正して」という自然言語の指示でコードを変更できます。

ひとことで言うと：
Cursor = VS Code + AIチャット + 複数ファイル同時編集機能（Composer）

2. インストール方法

Mac の場合

①cursor.com にアクセスして「Download for Mac」をクリック
②ダウンロードした Cursor.dmg を開く
③ApplicationsフォルダにCursorをドラッグ＆ドロップ
④初回起動時にGitHub・Googleアカウントでサインアップ

Windows の場合

①cursor.com にアクセスして「Download for Windows」をクリック
②ダウンロードした CursorSetup.exe を実行
③インストールウィザードに従ってインストール（デスクトップショートカットを作成を推奨）

注意：既存のVS Code設定をインポートするか聞かれます。 VS Codeから移行する場合は「Import from VS Code」を選ぶと拡張機能・設定がそのまま使えます。

3. 初期設定（日本語・モデル選択）

日本語UIの設定

① Ctrl+Shift+P（Mac: Cmd+Shift+P）でコマンドパレットを開く
② Configure Display Language と入力して選択
③ ja（日本語）を選択 → 再起動

使用するAIモデルの設定

Cursor は複数のAIモデルに対応しています。バイブコーディングには以下のモデルがおすすめです。

モデル	おすすめ用途	速度
claude-sonnet-4-5	コード生成・複雑なバグ修正（推奨）	速い
gpt-4o	画像を含む質問・汎用タスク	速い
cursor-small	シンプルなコード補完（無料枠節約）	最速

設定場所: Cursor Settings → Models

4. 無料プランで何ができるか

Cursorの無料プラン（Hobby）では以下が使えます。バイブコーディングを試すには十分な量です。

✓ 使えるもの

• Tab補完（cursor-small）: 無制限
• Chatメッセージ: 50回/月（Premium）
• Composerリクエスト: 50回/月
• @コンテキスト指定

× 制限されるもの

• 50回超のPremiumモデル利用
• 高速モードでの優先処理
• BYOK（独自APIキー）

月50回を超えそうな場合：Claude.ai や ChatGPT で下書きを作り、 Cursor のChat/Composerは「コードへの反映」に絞って使うと消費を抑えられます。

5. .cursorrules の書き方

プロジェクトルートに .cursorrules ファイルを置くと、 CursorのAIが「このプロジェクトのルール」として参照します。毎回プロンプトに書かなくて済むのでバイブコーディングの精度が大幅に上がります。

# .cursorrules（Next.js + TypeScript + Supabase プロジェクトの例）

## 技術スタック
- Next.js 15 (App Router)
- TypeScript（strict: true）
- Supabase（認証・DB）
- Tailwind CSS v4
- Vercel にデプロイ

## コーディングルール
- 関数コンポーネントのみ使用（クラスコンポーネント禁止）
- Server Componentをデフォルト、必要な場合のみ 'use client'
- エラーハンドリングは必ず含める
- コメントは日本語で書く
- any型の使用禁止

## ファイル命名規則
- コンポーネント: PascalCase（UserCard.tsx）
- ユーティリティ: camelCase（formatDate.ts）
- 定数: SCREAMING_SNAKE_CASE

## 禁止事項
- console.log の本番コードへの混入
- magic number の直書き（定数化すること）

Cursor v0.44以降では .cursor/rules/ フォルダに複数ルールファイルを分割して管理することもできます。

6. Chat / Composer / Tab の使い分け

Tab

コード補完

コードを書きながらリアルタイムで次の行を提案します。Tabキーで受け入れ。

使いどころ：繰り返しパターン・定型コード・変数名の補完

Chat

AIとの対話

Ctrl+L（Mac: Cmd+L）で開く。コードについて質問したり、特定ファイルを @で参照しながら指示を出せます。

使いどころ：バグ原因の調査・コードの説明・設計の相談

Composer

複数ファイル同時編集

Ctrl+I（Mac: Cmd+I）で開く。複数のファイルにまたがる変更をまとめて指示できます。バイブコーディングの主戦場。

使いどころ：新機能追加・リファクタリング・コンポーネント生成

7. バイブコーディングを加速する7つのコツ

1.
@ファイル指定で文脈を渡す
@src/components/Header.tsx を修正して のようにファイルを指定すると、AIが余計なファイルを触らずに済みます。
2.
差分指示に切り替える
「全体をリファクタリング」ではなく「このif文だけをearly returnに書き直して」と限定する。70%の壁の突破法で詳しく解説しています。
3.
.cursorrulesに技術スタックを書く
毎回「Next.js App RouterでTypeScriptで...」と書かなくて済みます。プロジェクトの最初に作るのがおすすめ。
4.
エラーメッセージをそのまま貼る
ターミナルのエラーをコピーしてChatに貼るだけで原因と修正案が出てきます。
5.
Composerでテスト先行
「この機能のテストを先に書いて」→「テストが通るように実装して」の順で進めると品質が上がります。
6.
Git で小刻みにコミット
AIが壊しても git reset で戻れます。 1機能追加ごとにコミットするのが鉄則です。
7.
@web で最新情報を参照
@web Next.js 15 の新機能 のように指定すると、 Cursorがウェブ検索して最新情報を踏まえた回答をします。