Cursor入門 ── AI搭載コードエディタで直感的にコードを書く
Cursorとは ── AIネイティブなコードエディタ
Cursor（カーソル）は、VS Codeをベースに作られた「AIネイティブ」なコードエディタ。見た目や操作感はVS Codeとほぼ同じだが、エディタの根幹にAI機能が組み込まれている点が決定的に異なる。
従来のエディタでは、GitHub CopilotなどのAI拡張機能を「後付け」でインストールする形だった。Cursorはそうではなく、エディタそのものがAIと対話する前提で設計されている。コードを書く、質問する、修正する、リファクタリングする──すべてのワークフローにAIが自然に溶け込んでいる。
VS Codeとの関係
CursorはVS Code（正確にはそのオープンソース版であるCode OSS）をフォークして開発されている。そのため以下の特徴がある。
- 見た目・操作感がVS Codeとほぼ同じ ── VS Code経験者なら違和感なく移行できる
- VS Codeの拡張機能がほぼそのまま使える ── お気に入りの拡張機能を諦めなくていい
- 設定（settings.json）やキーバインドも互換 ── VS Codeの設定をそのままインポート可能
- テーマも共通 ── VS Code用のカラーテーマがそのまま動作する
「VS Codeを卒業する」わけではない
CursorはVS Codeの上位互換と考えてOK。VS Codeでできることは基本的にすべてできる上に、AI機能が追加されている。ただしVS Codeとは別アプリなので、両方を同時にインストールして使い分けることもできる。
なぜCursorが選ばれるのか
バイブコーディングのツールは複数あるが、Cursorが特に初心者に人気な理由をまとめると以下の通り。
| 理由 | 詳細 |
|---|---|
| GUIで直感的 | ターミナル操作が不要。マウスとキーボードだけで完結 |
| コードが見える | AIが何を書いたか、自分の目で確認しながら進められる |
| Accept/Reject方式 | AIの提案を一つずつ確認して受け入れ or 拒否できる |
| 学習コストが低い | VS Codeを使ったことがあればほぼゼロ |
| 日本語で指示できる | チャット欄に日本語で指示を書けばAIが理解してくれる |
| 無料プランがある | お金をかけずに試せる |
Claude Codeとの違い
バイブコーディングを始めるとき、「CursorとClaude Code、どちらを使えばいい？」という疑問が出てくる。それぞれの特徴を比較しよう。
| 比較項目 | Cursor | Claude Code |
|---|---|---|
| 操作方法 | GUIエディタ | ターミナル（CLI） |
| 見た目 | VS Codeと同じ画面 | コマンドライン（黒い画面） |
| コード補完 | リアルタイムで候補表示（Tab補完） | なし（対話で生成） |
| ファイル操作 | 自分でファイルを開いて確認 | AIが自動でファイルを探して編集 |
| マルチファイル編集 | Composerモードで対応 | 標準で対応（得意） |
| プロジェクト全体の理解 | @codebase指定で参照 | 自動的にコードベースを探索 |
| 向いている人 | コードを見ながら進めたい人 | 全部AIに任せたい人 |
| 料金 | 無料プランあり / Pro $20/月 | API従量課金（月$5〜$50程度） |
どちらを選ぶ？
「コードを見ながらAIに手伝ってもらいたい」→ Cursor。「コードは見なくていいから全部やって」→ Claude Code。両方使い分けるのもアリ。初心者はまずCursorで「AIとコードを書く感覚」を掴み、慣れてきたらClaude Codeも試すのがおすすめ。
インストールと初期設定
ダウンロードとインストール
公式サイトにアクセス
cursor.com にブラウザでアクセスし、「Download」ボタンをクリック。Mac / Windows / Linux に対応。
1分インストーラーを実行
ダウンロードしたファイルを開いてインストール。Macなら .dmg を開いてApplicationsにドラッグ。
2分アカウント作成・ログイン
初回起動時にCursorアカウントの作成を求められる。メールアドレスまたはGitHubアカウントで登録。
2分VS Codeの設定をインポート
VS Codeがインストールされていれば、設定・拡張機能・キーバインドの自動インポートを選択できる。
1分AIモデルの選択
設定画面でAIモデルを選択。GPT-4o、Claude 3.5 Sonnet などから選べる。デフォルトのままでもOK。
1分VS Codeからの移行手順
VS Codeを既に使っている人は、以下の手順でスムーズに移行できる。
- 設定のインポート: Cursorの初回起動時に「Import VS Code Settings」を選択
- 拡張機能の確認: インポート後、拡張機能一覧（Cmd + Shift + X）で必要なものが入っているか確認
- キーバインドの確認: 特にカスタマイズしていたショートカットが引き継がれているか確認
- テーマの確認: カラーテーマも自動でインポートされる
VS Codeと同時起動する場合の注意
CursorとVS Codeは別アプリなので同時起動可能だが、同じプロジェクトフォルダを両方で開くとファイルの競合が起きる可能性がある。同じプロジェクトは片方だけで開くようにしよう。
日本語化の設定
Cursorは初期状態では英語UIになっている。日本語化する方法は以下の通り。
- Cmd + Shift + X で拡張機能パネルを開く
- 検索欄に「Japanese Language Pack」と入力
- 「Japanese Language Pack for Visual Studio Code」をインストール
- 再起動すると日本語UIに切り替わる
おすすめの初期設定
Cursorを快適に使うために、最初にやっておきたい設定を紹介する。
| 設定項目 | 場所 | おすすめ値 | 理由 |
|---|---|---|---|
| Auto Save | Settings → Files | afterDelay (1000ms) | 保存し忘れを防ぐ |
| Tab Completion | Cursor Settings → Tab | 有効 | AIのTab補完を使う |
| Font Size | Settings → Editor | 14〜16 | 読みやすいサイズに |
| Word Wrap | Settings → Editor | on | 横スクロールを減らす |
| AI Model | Cursor Settings → Models | claude-3.5-sonnet | 精度が高い |
| Privacy Mode | Cursor Settings → Privacy | 必要に応じてON | コードを外部送信したくない場合 |
3つの主要AI機能を徹底解説
Cursorの中核となるAI機能は3つ。それぞれの使い方と活用シーンを詳しく見ていこう。
1. AIチャット（Cmd + L）
エディタの右側にチャットパネルが開き、AIと対話しながらコードを書ける機能。ChatGPTのような感覚で使えるが、エディタと統合されている点が最大の強み。
基本的な使い方
- Cmd + L でチャットパネルを開く
- テキストボックスに日本語で指示を入力
- AIがコードの変更を提案
- Accept で適用、Reject で拒否
チャットで使える指示の例
このファイルにログイン機能を追加してこのコンポーネントにバリデーション処理を加えてこのファイルのエラーハンドリングを改善してこのコードが何をしているか日本語で説明して@メンション機能
チャットでは @ を使って参照先を指定できる。これがCursorの大きな強みだ。
| メンション | 機能 | 使用例 |
|---|---|---|
@ファイル名 | 特定のファイルを参照させる | @index.html このHTMLにスタイルを当てて |
@フォルダ名 | フォルダ内の全ファイルを参照 | @src フォルダ構成を説明して |
@codebase | プロジェクト全体を参照 | @codebase この機能はどこで定義されてる？ |
@web | Web検索結果を参照 | @web Reactの最新バージョンは？ |
@docs | 公式ドキュメントを参照 | @docs Next.js のルーティングについて教えて |
@codebaseを活用しよう
プロジェクト全体について質問したいときは @codebase を先頭に付ける。AIがプロジェクト内のファイルを自動的に検索して、適切なコンテキストを読み取ってくれる。「@codebase このプロジェクトの構成を説明して」のように使うと便利。
2. インラインエディット（Cmd + K）
コードの特定の箇所を選択して、その部分だけをAIに書き換えてもらう機能。チャットのようにパネルを開かず、コード上で直接編集指示を出せる。
基本的な使い方
- 書き換えたいコードをマウスで選択
- Cmd + K を押す
- 表示される入力欄に指示を入力
- AIが選択範囲を書き換え
- Accept / Reject で適用を判断
インラインエディットの活用例
- リファクタリング:
この関数をもっと読みやすくして - 型の追加:
TypeScriptの型を追加して - コメント追加:
日本語のコメントを追加して - エラー修正:
このバグを修正して - 変換:
このclassコンポーネントを関数コンポーネントに変換して
選択なしでCmd+Kも使える
コードを選択せずにCmd+Kを押すと、カーソル位置に新しいコードを生成してくれる。「ここにフォームのHTMLを追加して」のように使える。
3. Tab補完（Copilot++）
コードを書いている最中に、次に書くべきコードをAIがリアルタイムで予測・提案する機能。グレーのテキストで候補が表示され、Tabキーで受け入れる。
Tab補完の特徴
- コンテキストを理解: 今開いているファイルだけでなく、プロジェクト内の他のファイルも参照して予測
- 複数行の予測: 1行だけでなく、関数全体やブロック全体を予測することもある
- 学習する: プロジェクト内のコーディングスタイルを学習し、一貫した提案をしてくれる
Tab補完が特に便利なシーン
| シーン | 具体例 |
|---|---|
| 繰り返しパターン | 似たような関数を複数書くとき、2つ目以降を自動補完 |
| ボイラープレート | import文やexport文の定型パターン |
| テストコード | テスト関数名から中身を予測 |
| データ定義 | 配列やオブジェクトの残りの要素を予測 |
| コメントからコード | コメントを書くと、それに対応するコードを予測 |
Composerモード ── マルチファイル編集
Composer（コンポーザー）は、複数のファイルを同時に編集できるCursorの上位機能。通常のチャット（Cmd+L）は1ファイルの編集が基本だが、Composerは「ファイルAを作成して、ファイルBを修正して、ファイルCに追記して」といった複数ファイルにまたがる作業を一度にこなせる。
Composerの起動方法
- Cmd + I でComposerパネルを開く
Composerの活用例
新しいユーザー登録ページを作って。
- pages/register.tsx にページコンポーネント
- components/RegisterForm.tsx にフォームコンポーネント
- lib/auth.ts に認証ロジック
- styles/register.module.css にスタイルこのように指示すると、Composerが4つのファイルをまとめて生成・編集してくれる。
チャット vs Composer の使い分け
| 場面 | 推奨機能 |
|---|---|
| 1つのファイルの修正・質問 | チャット（Cmd+L） |
| 特定箇所の部分修正 | インラインエディット（Cmd+K） |
| 複数ファイルの新規作成 | Composer（Cmd+I） |
| 機能追加（複数ファイルに影響） | Composer（Cmd+I） |
| コードの説明・質問 | チャット（Cmd+L） |
Composerはバイブコーディングの本領発揮
「ログイン機能を作って」と一言伝えるだけで、必要なファイル群をまとめて生成してくれる。これがバイブコーディングの醍醐味。複数ファイルにまたがる作業はComposerに任せよう。
.cursorrules ファイルの活用
.cursorrulesは、プロジェクトのルート（一番上のフォルダ）に置く設定ファイル。AIに「このプロジェクトではこういうルールに従って」と事前に指示しておける。
.cursorrulesの作り方
プロジェクトのルートフォルダに .cursorrules というファイルを作成し、ルールを記述する。
# プロジェクトルール
## 言語とフレームワーク
- このプロジェクトはNext.js 14（App Router）を使用
- TypeScriptで記述すること
- スタイリングはTailwind CSSを使用
## コーディング規約
- 関数コンポーネントを使用（classコンポーネントは使わない）
- 変数名はcamelCase、コンポーネント名はPascalCase
- コメントは日本語で書く
- エラーハンドリングは必ず行う
## ファイル構成
- pages/ にページコンポーネント
- components/ に共通コンポーネント
- lib/ にユーティリティ関数
- types/ に型定義.cursorrulesに書くと効果的な内容
| カテゴリ | 記述例 | 効果 |
|---|---|---|
| 使用技術 | 「React + TypeScript + Tailwind CSS」 | AIが適切なライブラリを前提にコードを書く |
| コーディング規約 | 「変数名はcamelCase」 | 一貫したコードスタイルを維持 |
| 禁止事項 | 「anyは使わない」 | AIが型安全なコードを書く |
| ファイル構成 | 「APIルートは app/api/ 以下」 | 正しい場所にファイルを作成 |
| 言語指定 | 「コメントは日本語で」 | AIが日本語のコメントを付ける |
.cursorrulesの注意点
.cursorrulesは便利だが、あまりに長く複雑なルールを書くとAIのコンテキストウィンドウを圧迫する。重要なルールを簡潔にまとめよう。目安は200行以内。
実践的な使い方 12選
Cursorを使ったバイブコーディングの具体的な活用シーンを紹介する。
1. HTMLページをゼロから作る
シンプルなプロフィールページを作って。名前、自己紹介、スキル一覧を含めて。
デザインはモダンでシンプルにして。Tailwind CSSを使って。2. エラーメッセージを貼って修正してもらう
以下のエラーが出ます。修正してください。
TypeError: Cannot read properties of undefined (reading 'map')3. 既存コードの説明を求める
このファイルの処理の流れを初心者向けに日本語で説明して。
各関数が何をしているか、一つずつ教えて。4. テストコードを自動生成
この関数のユニットテストを書いて。正常系と異常系を両方カバーして。
Jestを使って。5. APIの呼び出しコードを生成
OpenWeatherMap APIから東京の天気を取得して表示するコードを書いて。
fetch APIを使って、エラーハンドリングも入れて。6. データベーススキーマの作成
ブログアプリのデータベーススキーマを作って。
ユーザー、記事、コメント、カテゴリのテーブルが必要。
Prismaスキーマで書いて。7. レスポンシブデザインの実装
このページをスマホ対応にして。
768px以下で1カラムに、それ以上で2カラムのレイアウトにして。8. フォームにバリデーションを追加
この入力フォームにバリデーションを追加して。
- メールアドレスの形式チェック
- パスワードは8文字以上
- 名前は必須
エラーメッセージを日本語で表示して。9. 既存コードのリファクタリング
この関数が長すぎるので、小さな関数に分割して。
各関数の責務を明確にして、読みやすくして。10. README.mdの自動生成
@codebase このプロジェクトのREADME.mdを作成して。
セットアップ手順、使い方、技術スタック、ディレクトリ構成を含めて。11. Git操作の補助
今の変更内容を確認して、適切なコミットメッセージを日本語で3つ提案して。12. コードレビュー
このファイルのコードレビューをして。
セキュリティ上の問題、パフォーマンスの改善点、可読性の問題を指摘して。料金プランの詳細
| プラン | 月額 | Tab補完 | AIチャット | Composer | 使用モデル |
|---|---|---|---|---|---|
| Free | $0 | 2,000回/月 | 50回/月（低速） | 利用可能（回数制限あり） | 基本モデル |
| Pro | $20 | 無制限 | 500回/月（高速） | 無制限 | GPT-4o, Claude 3.5 Sonnet 等 |
| Business | $40 | 無制限 | 無制限 | 無制限 | 全モデル + 管理機能 |
プラン選びのポイント
- まず無料プランで始める: 月2,000回のTab補完と50回のチャットは、学習目的なら十分
- 毎日使うならProへ: 日常的にCursorを使うなら、月$20は十分元が取れる投資
- チームで使うならBusiness: 管理機能やプライバシー設定が充実
無料プランで十分始められる
月2,000回のコード補完と50回のチャットは、「まずは触ってみたい」「週末だけ使う」という学習目的なら十分。使い込むようになってから有料プランを検討しよう。ProプランはGPT-4oやClaude 3.5 Sonnetなど高性能モデルが使えるのが大きな魅力。
VS Code拡張機能との互換性
CursorはVS Codeベースなので、VS Codeの拡張機能がほぼそのまま使える。ただし一部の注意点がある。
互換性のある主要な拡張機能
| 拡張機能 | 用途 | Cursorでの動作 |
|---|---|---|
| Prettier | コードフォーマット | 問題なく動作 |
| ESLint | コードの品質チェック | 問題なく動作 |
| Japanese Language Pack | 日本語化 | 問題なく動作 |
| GitLens | Git履歴の可視化 | 問題なく動作 |
| Tailwind CSS IntelliSense | Tailwindの補完 | 問題なく動作 |
| Prisma | Prismaスキーマのハイライト | 問題なく動作 |
| Thunder Client | API テスト | 問題なく動作 |
注意が必要な拡張機能
- GitHub Copilot: CursorのAI補完と競合するため、無効にすることを推奨。両方有効にするとTab補完が混乱する
- 他のAIコーディング拡張: Cursor内蔵のAIと機能が重複するため、基本的に不要
- リモート開発系: SSH接続やWSL連携は一部制限がある場合がある
GitHub Copilotとの併用は避けよう
CursorのTab補完（Copilot++）とGitHub Copilotは機能が完全に重複する。両方有効にすると補完候補が二重に出て混乱するため、CursorではGitHub Copilotを無効にしよう。
よくあるトラブルと解決法
トラブルシューティング一覧
| トラブル | 原因 | 解決法 |
|---|---|---|
| AIが応答しない | APIへの接続エラー | インターネット接続を確認。しばらく待って再試行 |
| Tab補完が出ない | 設定でオフになっている | Cursor Settings → Features → Tab Completionを確認 |
| 日本語が文字化けする | ファイルのエンコーディング | ステータスバーでUTF-8を選択 |
| 拡張機能が動かない | バージョンの非互換 | 拡張機能を最新版にアップデート |
| Composerが使えない | プランの制限 | 無料プランでも利用可能。ログイン状態を確認 |
| AIの回答が的外れ | コンテキスト不足 | @ファイル名でファイルを指定し、具体的に指示する |
| 補完がGitHub Copilotと競合 | 両方が有効 | GitHub Copilot拡張を無効化 |
| 動作が重い | メモリ不足 | 不要なタブを閉じ、拡張機能を整理 |
AIの回答精度を上げるコツ
AIの回答が的外れなときは、以下を試してみよう。
- ファイルを明示的に指定する:
@index.tsx このファイルの...のように対象を明確に - エラーメッセージをそのまま貼る: 自分で要約せず、エラー全文を貼る方が正確
- 段階的に指示する: 一度に大きな指示を出さず、小さなステップに分ける
- .cursorrulesを活用する: プロジェクトの前提条件を事前に伝えておく
- 「初心者向けに説明して」と付け加える: 難しい説明が返ってきたら遠慮なくリクエスト
ショートカットキー早見表
よく使うCursorのショートカットをまとめた。
| ショートカット | 機能 | 使用頻度 |
|---|---|---|
| Cmd + L | AIチャットを開く | 毎日使う |
| Cmd + K | インラインエディット | 毎日使う |
| Cmd + I | Composerを開く | よく使う |
| Tab | AI補完を受け入れる | 常時 |
| Esc | AI補完を拒否 | 常時 |
| Cmd + Shift + P | コマンドパレット | よく使う |
| Cmd + P | ファイルを素早く開く | よく使う |
| Cmd + Shift + X | 拡張機能パネル | たまに使う |
| Cmd + , | 設定を開く | たまに使う |
| Cmd + Z | 元に戻す | よく使う |
| Cmd + S | ファイルを保存 | 常時 |
| Cmd + B | サイドバーの表示/非表示 | よく使う |
Cursorを使った学習ロードマップ
バイブコーディング初心者がCursorで段階的にスキルアップしていく道筋を示す。
基本操作に慣れる
インストール、日本語化、AIチャット（Cmd+L）でHTMLページを作ってみる。まずは「AIに聞けば教えてくれる」体験を積む。
3〜5時間3つのAI機能を使い分ける
チャット・インラインエディット・Tab補完の使い分けを覚える。簡単なWebページを作りながら練習。
5〜8時間Composerでマルチファイル
Composer（Cmd+I）を使って複数ファイルの同時生成に挑戦。ToDoアプリなどの小さなプロジェクトを作る。
8〜10時間.cursorrulesとワークフロー確立
.cursorrulesを設定し、自分なりのワークフローを確立。@メンション機能も使いこなす。
5〜8時間本格的なプロジェクトに挑戦
ポートフォリオサイト、ブログ、ダッシュボードなど、実用的なプロジェクトをCursorで構築。
継続FAQ ── よくある質問
Q1. Cursorは完全無料で使えますか？
Freeプランがあり、無料で始められます。月2,000回のTab補完と50回のAIチャットが使えます。学習目的や週末の趣味利用には十分ですが、毎日本格的に使うなら月$20のProプランがおすすめです。
Q2. プログラミング経験ゼロでも使えますか？
使えます。Cursorの最大の魅力は「日本語でやりたいことを伝えれば、AIがコードを書いてくれる」こと。プログラミングの知識がなくても、「こういうページを作って」と指示するだけでコードが生成されます。ただし、生成されたコードの意味を少しずつ理解していくと、より効果的に使えるようになります。
Q3. VS Codeのままでいいのでは？ 乗り換えるメリットは？
VS Codeでも GitHub Copilot 等の拡張でAI補完はできますが、Cursorはエディタ全体がAI前提で設計されている点が違います。@メンション、Composer、.cursorrulesなど、AI連携機能がはるかに充実しています。バイブコーディングをするなら、Cursorの方が圧倒的に効率がよいです。
Q4. CursorでどのAIモデルを使うのがおすすめですか？
Claude 3.5 Sonnet がコーディング精度と速度のバランスが良くおすすめです。GPT-4oも高性能ですが、コード生成においてはClaude系の評価が高い傾向にあります。Proプランでは複数モデルを切り替えて使えるので、タスクに応じて使い分けるのもよいでしょう。
Q5. Cursorで作ったコードの著作権はどうなりますか？
Cursorで生成したコードの利用権はユーザーにあります。商用利用も可能です。ただしAIが学習データから類似コードを生成する可能性はあるため、重要なプロジェクトではライセンスの確認を推奨します。Cursor自体の利用規約も確認しておきましょう。
Q6. オフラインでも使えますか？
エディタとしての基本機能はオフラインでも動作します。ただし、AIチャット・Tab補完・ComposerなどのAI機能はインターネット接続が必要です。AI機能なしの場合は、VS Codeと同じ使い勝手になります。
Q7. WindowsとMacどちらでも使えますか？
Mac、Windows、Linuxの3プラットフォームに対応しています。ショートカットキーはMacではCmd、WindowsではCtrlに読み替えてください（例: Cmd+L → Ctrl+L）。
まとめ ── Cursorはバイブコーディングの最良の入り口
Cursorは「コードを見ながらAIと一緒に作る」という体験を提供するツール。プログラミングの雰囲気を味わいながら、AIの力を最大限に借りたい人に最適だ。
Cursorの3つの強みを改めて整理すると:
- 直感的なGUI ── VS Codeベースだから馴染みやすく、ターミナル操作が不要
- 3つのAI機能の使い分け ── チャット・インラインエディット・Tab補完で、あらゆる場面に対応
- 段階的に学べる ── 無料プランで始めて、慣れたらComposerや.cursorrulesで高度な使い方へ
まずはインストールして、AIチャットに「Hello Worldのページを作って」と入力してみよう。AIとコードを書く体験が、きっとプログラミングへの見方を変えてくれるはずだ。
次の記事: もっと手軽に始めたいなら、ブラウザだけで完結するBoltを。
