はじめに - なぜ今Cursorなのか？
「GitHub Copilotは聞いたことあるけど、Cursorって何？」
「AIでコード書くのって、本当に実用的なの？」
こんな疑問を持っている方も多いのではないでしょうか。
私も最初は半信半疑でした。しかし、実際にCursorを使い始めてから開発体験が劇的に変わりました。定型的なコードを書く時間が激減し、本当に考えるべき設計やアーキテクチャに集中できるようになったのです。
この記事では、AIエディタを使ったことがない方に向けて、Cursorの基本から実践的な活用方法まで、余すところなく解説します。
この記事で得られること：
- Cursorの基本機能と特徴
- 実際のコーディングシーンでの活用例
- 開発効率が劇的に向上する理由
- 今すぐ始められる導入手順
それでは、次世代のAIエディタ「Cursor」の世界へご案内します。
Cursorとは？ - 3分で理解する基礎知識
Cursorの正体
Cursorは、VS Codeをベースに開発されたAI搭載コードエディタです。
- 2023年頃から急速に普及
- OpenAI（GPT-4）、Anthropic（Claude）など複数のAIモデルに対応
- VS Codeの拡張機能がそのまま使える
- Windows、Mac、Linux全てに対応
単なる「AIが使えるエディタ」ではなく、エディタそのものにAIが深く統合されている点が最大の特徴です。
VS Codeとの決定的な違い
| 項目 | VS Code | Cursor |
|---|---|---|
| AI統合 | 拡張機能で追加 | ネイティブ統合 |
| コード補完 | 基本的な補完 | 文脈理解した高度な提案 |
| チャット機能 | 別ウィンドウ | エディタ内統合 |
| 複数ファイル編集 | 手動 | AIが自動判断 |
| 学習コスト | 既存ユーザーは低い | ほぼ同じ（VS Code互換） |
なぜ今、開発者がCursorに注目しているのか
- コーディング速度が2-3倍になる体験談が多数報告されている
- プログラミング初心者でも高品質なコードが書けるようになる
- VS Code拡張機能がそのまま使えるため、移行コストが低い
- 複数のAIモデルを選択できる柔軟性
- 無料プランでも十分に実用的
Cursorの主要機能を徹底解説
Cursorには主に5つの強力な機能があります。それぞれ詳しく見ていきましょう。
【機能1】Cursor Tab - 次世代のコード補完
使い方： コメントや関数名を書いて Tab キーを押すだけ
# ユーザーリストをソートして上位10件を取得する関数
# ↓ Tabキーを押すと以下のようなコードが自動生成される
def get_top_users(users: list, n: int = 10) -> list:
"""
ユーザーリストをスコアでソートし、上位n件を返す
Args:
users: ユーザーのリスト（各要素は{'name': str, 'score': int}の形式）
n: 取得する件数（デフォルト: 10）
Returns:
スコアの高い順にソートされた上位n件のリスト
"""
return sorted(users, key=lambda x: x['score'], reverse=True)[:n]
特徴：
- 単なる補完ではなく「次にやりたいこと」を予測
- コメントを書くだけで関数全体を生成
- 複数行にわたる提案も可能
- ドキュメント文字列（docstring）まで自動生成
【機能2】Cmd+K / Ctrl+K - インラインでAIに指示
使い方： コードを選択 → Cmd+K（Mac）または Ctrl+K（Windows） → 自然言語で指示
// 既存のJavaScript関数を選択して指示
// 指示例：「この関数をTypeScriptに変換して」
// Before
function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
// After（AIが自動変換）
interface Item {
price: number;
name: string;
}
function calculateTotal(items: Item[]): number {
return items.reduce((sum, item) => sum + item.price, 0);
}
よく使う指示例：
- 「エラーハンドリングを追加して」
- 「この関数を非同期に変換して」
- 「TypeScriptの型定義を追加して」
- 「コメントを日本語で追加して」
- 「テストコードを生成して」
【機能3】Cmd+L / Ctrl+L - AIチャット
使い方： Cmd+L（Mac）または Ctrl+L（Windows）でチャットパネルを開く
特徴：
- プロジェクト全体の文脈を理解した上で回答
- コードベース全体を参照した提案が可能
- エラーメッセージの解説や修正方法を提示
チャット例：
あなた：「このエラーの原因を教えて」
TypeError: Cannot read property 'name' of undefined
Cursor：
このエラーは、オブジェクトが undefined の状態で
そのプロパティにアクセスしようとしたときに発生します。
ファイル user.js の23行目を確認すると、
user オブジェクトが存在する前に user.name を
参照しようとしています。
以下のように修正することをお勧めします：
if (user && user.name) {
console.log(user.name);
}
または、オプショナルチェーン演算子を使用：
console.log(user?.name);
【機能4】Composer - 複数ファイル同時編集
使い方： Cmd+I（Mac）または Ctrl+I（Windows）でComposerを起動
最も革新的な機能と言われるのがこのComposerです。
指示例：「ログイン機能を追加して」
→ Cursorが自動で判断して以下を実行：
1. /components/LoginForm.tsx を作成
2. /api/auth/login.ts を作成
3. /pages/login.tsx を作成
4. /utils/authHelper.ts を更新
5. /types/user.ts に型定義を追加
特徴：
- フロントエンド＋バックエンドを一度に実装
- 必要なファイルを自動生成・編集
- プロジェクト全体の整合性を保ったまま変更
- 「どのファイルを触るべきか」の判断をAIに任せられる
【機能5】@ 機能 - 特定のコンテキストを参照
使い方： チャットやComposerで @ を入力してコンテキストを指定
@ファイル名 - 特定のファイルを参照
例：@user.ts このファイルのバグを修正して
@docs - 公式ドキュメントを参照
例：@docs Reactの最新のHooksを使ってコンポーネントを作成
@web - Web検索して最新情報を取得
例：@web Next.js 15の新機能を使った実装例を教えて
@codebase - プロジェクト全体を参照
例：@codebase 認証処理がどこに実装されているか教えて
活用例：
あなた：@docs Reactの useEffect の正しい使い方を教えて
Cursor：
Reactの公式ドキュメントによると、useEffect は
副作用を実行するためのHookです。
基本的な使い方：
useEffect(() => {
// 副作用の処理
return () => {
// クリーンアップ処理（オプション）
};
}, [dependencies]); // 依存配列
注意点：
1. 依存配列を正しく設定する
2. クリーンアップ関数を忘れない
3. 無限ループに注意
Cursorで開発効率が爆上がりする理由
ここからは、なぜCursorを使うと開発効率が劇的に向上するのか、具体的に解説します。
1. 開発速度が圧倒的に向上する
定型コードの自動生成
// 例：RESTful APIのCRUD操作
// 「ユーザーのCRUD APIをExpressで実装」と指示するだけ
// ↓ 以下のようなコードが数秒で生成される
import express, { Request, Response } from 'express';
import { User } from '../models/User';
const router = express.Router();
// GET /users - 全ユーザー取得
router.get('/', async (req: Request, res: Response) => {
try {
const users = await User.findAll();
res.json(users);
} catch (error) {
res.status(500).json({ error: 'Internal server error' });
}
});
// GET /users/:id - 特定ユーザー取得
router.get('/:id', async (req: Request, res: Response) => {
try {
const user = await User.findByPk(req.params.id);
if (!user) {
return res.status(404).json({ error: 'User not found' });
}
res.json(user);
} catch (error) {
res.status(500).json({ error: 'Internal server error' });
}
});
// POST /users - ユーザー作成
router.post('/', async (req: Request, res: Response) => {
try {
const user = await User.create(req.body);
res.status(201).json(user);
} catch (error) {
res.status(400).json({ error: 'Invalid request' });
}
});
// PUT /users/:id - ユーザー更新
router.put('/:id', async (req: Request, res: Response) => {
try {
const user = await User.findByPk(req.params.id);
if (!user) {
return res.status(404).json({ error: 'User not found' });
}
await user.update(req.body);
res.json(user);
} catch (error) {
res.status(400).json({ error: 'Invalid request' });
}
});
// DELETE /users/:id - ユーザー削除
router.delete('/:id', async (req: Request, res: Response) => {
try {
const user = await User.findByPk(req.params.id);
if (!user) {
return res.status(404).json({ error: 'User not found' });
}
await user.destroy();
res.status(204).send();
} catch (error) {
res.status(500).json({ error: 'Internal server error' });
}
});
export default router;
従来の作業時間： 1～2時間
Cursorを使った場合： 5～10分
約10倍以上の効率化が実現します。
ドキュメント検索の時間が激減
従来の開発フロー：
1. 「React Hooks useEffect 使い方」でGoogle検索（3分）
2. 複数の記事を読み比べる（10分）
3. Stack Overflowで事例を探す（5分）
4. 公式ドキュメントを確認（5分）
5. ようやくコードを書き始める
Cursorを使った場合：
1. Cmd+L でチャットを開く（1秒）
2. 「useEffectの使い方を教えて」と質問（5秒）
3. すぐにコード例が表示される
4. そのままコードに適用
時間削減： 約20分 → 30秒
リファクタリングが瞬時
# 同期処理を非同期に変更したい場合
# Before（従来：手動で書き換える必要がある）
def fetch_user_data(user_id):
user = database.get_user(user_id)
posts = database.get_user_posts(user_id)
comments = database.get_user_comments(user_id)
return {
'user': user,
'posts': posts,
'comments': comments
}
# Cursorでの作業（選択して「非同期に変換」と指示するだけ）
# After（数秒で完成）
async def fetch_user_data(user_id):
user_task = database.get_user_async(user_id)
posts_task = database.get_user_posts_async(user_id)
comments_task = database.get_user_comments_async(user_id)
user, posts, comments = await asyncio.gather(
user_task,
posts_task,
comments_task
)
return {
'user': user,
'posts': posts,
'comments': comments
}
2. コード品質が向上する
ベストプラクティスに沿った実装
Cursorが生成するコードには、以下が標準で含まれます：
// 例：フォーム送信処理を実装した場合
async function handleSubmit(event) {
event.preventDefault(); // デフォルト動作の防止
// バリデーション
if (!validateForm()) {
return;
}
try {
// ローディング状態の管理
setIsLoading(true);
// CSRFトークンの自動付与（セキュリティ対策）
const response = await fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': getCsrfToken(),
},
body: JSON.stringify(formData),
});
// エラーハンドリング
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// 成功時の処理
showSuccessMessage('送信が完了しました');
resetForm();
} catch (error) {
// エラー時の処理
console.error('送信エラー:', error);
showErrorMessage('送信に失敗しました。もう一度お試しください。');
} finally {
// ローディング状態の解除
setIsLoading(false);
}
}
含まれているベストプラクティス：
- ✅ エラーハンドリング
- ✅ ローディング状態の管理
- ✅ セキュリティ対策（CSRF）
- ✅ ユーザーフィードバック
- ✅ 適切なHTTPステータスチェック
型安全性の確保
// TypeScriptでAPI呼び出しを実装する指示をすると…
// 型定義も自動で生成される
interface User {
id: number;
name: string;
email: string;
role: 'admin' | 'user' | 'guest';
createdAt: Date;
}
interface ApiResponse<T> {
data: T;
status: 'success' | 'error';
message?: string;
}
// 型安全な関数
async function fetchUser(userId: number): Promise<ApiResponse<User>> {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error(`Failed to fetch user: ${response.statusText}`);
}
return response.json();
}
// 使用例（型チェックが効く）
const result = await fetchUser(123);
if (result.status === 'success') {
console.log(result.data.name); // 型安全
// console.log(result.data.age); // コンパイルエラー（ageは存在しない）
}
テストコードの自動生成
// 関数を選択して「テストコードを生成」と指示
// 元の関数
function calculateDiscount(price: number, discountRate: number): number {
if (price < 0 || discountRate < 0 || discountRate > 1) {
throw new Error('Invalid input');
}
return price * (1 - discountRate);
}
// 自動生成されるテストコード
describe('calculateDiscount', () => {
it('正常な割引計算ができる', () => {
expect(calculateDiscount(1000, 0.2)).toBe(800);
expect(calculateDiscount(5000, 0.5)).toBe(2500);
});
it('割引率0%の場合、元の価格を返す', () => {
expect(calculateDiscount(1000, 0)).toBe(1000);
});
it('割引率100%の場合、0を返す', () => {
expect(calculateDiscount(1000, 1)).toBe(0);
});
it('負の価格でエラーをスローする', () => {
expect(() => calculateDiscount(-100, 0.2)).toThrow('Invalid input');
});
it('負の割引率でエラーをスローする', () => {
expect(() => calculateDiscount(1000, -0.1)).toThrow('Invalid input');
});
it('100%を超える割引率でエラーをスローする', () => {
expect(() => calculateDiscount(1000, 1.5)).toThrow('Invalid input');
});
});
テストコード生成のメリット：
- エッジケースも考慮されたテストが自動生成
- テスト駆動開発（TDD）がやりやすくなる
- カバレッジが向上する
3. 学習効率が飛躍的に向上する
新しい技術への適応が早い
例：Next.js App Routerを初めて使う場合
従来：
1. 公式ドキュメントを読む（1時間）
2. チュートリアルを実践（2時間）
3. サンプルコードを探す（30分）
4. ようやく自分のプロジェクトに適用
Cursorを使う場合：
「Next.js 14のApp Routerを使って、
ブログ記事一覧ページを作成して」
→ 5分後には動くコードが完成
→ コードを読みながら理解を深める
AIが先生になってくれる
あなた：「このコードの useState はなぜ配列で返すの？」
const [count, setCount] = useState(0);
Cursor：
useState が配列で返す理由は、
「分割代入」を使いやすくするためです。
配列の場合：
const [count, setCount] = useState(0);
const [name, setName] = useState('');
// 任意の変数名を使える
もしオブジェクトだったら：
const {state: count, setState: setCount} = useState(0);
const {state: name, setState: setName} = useState('');
// 毎回リネームが必要で面倒
また、useState を複数使う場合でも、
配列の順序で自動的に区別されるため、
コードがシンプルになります。
実践を通じた学習
従来の学習フロー：
理論学習 → サンプル写経 → 理解 → 実践
（学習に数日～数週間）
Cursorを使った学習フロー：
実践（AIと共に作る） → コードを読んで理解 → 応用
（数時間～1日で実践レベルに）
4. 単調作業からの解放
ボイラープレートコードが不要
// 「Expressサーバーのプロジェクトを初期化」と指示するだけで…
// package.json
{
"name": "my-express-app",
"version": "1.0.0",
"scripts": {
"dev": "nodemon src/index.ts",
"build": "tsc",
"start": "node dist/index.js"
},
"dependencies": {
"express": "^4.18.0",
"cors": "^2.8.5",
"dotenv": "^16.0.0"
},
"devDependencies": {
"@types/express": "^4.17.0",
"@types/node": "^20.0.0",
"typescript": "^5.0.0",
"nodemon": "^3.0.0",
"ts-node": "^10.9.0"
}
}
// tsconfig.json
// .env
// src/index.ts
// src/routes/
// src/controllers/
// src/middleware/
すべて自動生成されます！
ドキュメント作成も自動
# README.md（自動生成される）
# My Express App
Node.js と Express を使用したRESTful APIサーバー
## 必要要件
- Node.js 18.x 以上
- npm または yarn
## インストール
\`\`\`bash
npm install
\`\`\`
## 環境変数
\`.env\` ファイルを作成し、以下の変数を設定してください：
\`\`\`
PORT=3000
DATABASE_URL=your_database_url
\`\`\`
## 開発サーバーの起動
\`\`\`bash
npm run dev
\`\`\`
## API エンドポイント
### ユーザー
- \`GET /api/users\` - 全ユーザー取得
- \`GET /api/users/:id\` - 特定ユーザー取得
- \`POST /api/users\` - ユーザー作成
- \`PUT /api/users/:id\` - ユーザー更新
- \`DELETE /api/users/:id\` - ユーザー削除
## テスト
\`\`\`bash
npm test
\`\`\`
## ライセンス
MIT
マルチタスクが楽になる
従来の開発中の思考：
「あれ、この関数の引数の順番なんだっけ？」
→ ドキュメント確認（集中力が途切れる）
「このライブラリの import 文は…」
→ Google検索（集中力が途切れる）
「エラーメッセージの意味がわからない」
→ Stack Overflow（集中力が途切れる）
Cursorを使った場合：
エディタ内で全て完結
→ 集中力を保ったまま開発継続
→ フロー状態を維持できる
5. チーム開発での恩恵
コードレビューの質が向上
レビュー前にCursorに依頼：
「このプルリクエストをレビューして、
問題点や改善案を教えて」
→ 指摘事項を事前に修正できる
→ レビュワーの負担が軽減される
→ レビューの観点がより高度に
知識の平準化
新人エンジニア：
「認証機能を実装したいけど、書き方がわからない」
Cursorに指示：
「JWT認証を使った認証機能を実装して」
→ ベテランが書くような品質のコードが生成される
→ チーム内のスキル差を埋められる
コーディング規約の徹底
// .cursorrules ファイルでプロジェクトルールを定義
You are an expert in TypeScript, React, and Next.js.
Code Style:
- Use functional components with hooks
- Prefer const over let
- Use async/await instead of .then()
- Add JSDoc comments to all functions
Naming Conventions:
- Components: PascalCase
- Functions: camelCase
- Constants: UPPER_SNAKE_CASE
- Files: kebab-case
→ Cursorが自動的にこれらのルールに従ったコードを生成
今すぐCursorを始めるための3ステップ
実際にCursorを使い始めるまでの手順を解説します。所要時間は約20分です。
Step 1: インストール（5分）
1-1. 公式サイトからダウンロード
- Cursor公式サイト にアクセス
- 「Download」ボタンをクリック
- OSに合わせたインストーラーをダウンロード
- Windows:
.exeファイル - Mac:
.dmgファイル - Linux:
.AppImageまたは.debファイル
- Windows:
1-2. インストーラーを実行
- Windowsの場合：ダウンロードした
.exeファイルをダブルクリック - Macの場合：
.dmgファイルを開いて、Cursorをアプリケーションフォルダにドラッグ - Linuxの場合：ターミナルで実行権限を付与して実行
# Linux の例
chmod +x cursor-*.AppImage
./cursor-*.AppImage
1-3. VS Codeからの移行（オプション）
Cursorを初回起動すると、以下を自動でインポートできます：
- ✅ VS Codeの設定（settings.json）
- ✅ キーバインド（keybindings.json）
- ✅ インストール済みの拡張機能
- ✅ スニペット
- ✅ テーマ
移行手順：
1. Cursor起動時に「Import from VS Code」を選択
2. インポートする項目にチェック
3. 「Import」ボタンをクリック
4. 数秒で移行完了
注意点：
- VS Codeとの併用も可能（設定は独立）
- いつでもVS Codeに戻れる（リスクなし）
Step 2: 初期設定（5分）
2-1. アカウント作成
- Cursorを起動
- 右上の「Sign In」をクリック
- 以下のいずれかでサインアップ：
- GitHub アカウント（推奨）
- Google アカウント
- メールアドレス
2-2. AIモデルの選択
初期状態ではデフォルトのモデルが選択されていますが、変更も可能です：
Settings（⚙️アイコン） → AI Model
選択できるモデル：
- GPT-4（高品質、やや遅い）
- GPT-3.5（高速、品質も十分）
- Claude 3.5 Sonnet（バランス型）
- Claude 3 Opus（最高品質）
最初は GPT-3.5 または Claude 3.5 Sonnet がおすすめ
2-3. おすすめの初期設定
Settings → Cursor Settings
✅ Cursor Tab
→ Enable（オンにする）
→ これがCursorの核となる機能
✅ Privacy Mode
→ 企業コードを扱う場合は検討
→ コードがAIサービスに送信されなくなる
✅ Autocomplete
→ Enabled（デフォルトでオン）
□ Telemetry
→ 好みに応じて
2-4. テーマとフォントの設定（お好みで）
Settings → Appearance
人気のテーマ：
- GitHub Dark（VS Code標準）
- Dracula
- One Dark Pro
- Material Theme
フォント：
- Fira Code（リガチャ対応）
- JetBrains Mono
- Source Code Pro
Step 3: 簡単なコードで試してみる（10分）
3-1. 最初のプロジェクトを開く
File → Open Folder
→ 任意のフォルダを選択
または
新しいフォルダを作成：
mkdir cursor-test
cd cursor-test
code .
3-2. Cursor Tabを試す
新しいファイルを作成：test.py
# フィボナッチ数列を生成する関数
# ↑ ここまで書いて Tab キーを押す
# すると以下のように自動生成される：
def fibonacci(n: int) -> list:
"""
フィボナッチ数列をn番目まで生成する
Args:
n: 生成する数列の長さ
Returns:
フィボナッチ数列のリスト
"""
if n <= 0:
return []
elif n == 1:
return [0]
fib = [0, 1]
for i in range(2, n):
fib.append(fib[i-1] + fib[i-2])
return fib
# 使用例
if __name__ == "__main__":
result = fibonacci(10)
print(result) # [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
驚きポイント：
- コメントだけで関数全体が生成された
- エラーハンドリングも含まれている
- 使用例まで自動で追加された
- ドキュメント文字列（docstring）も完璧
3-3. Cmd+K（インライン編集）を試す
上記の関数を選択して Cmd+K（Windows: Ctrl+K）
指示：「型ヒントを詳細にして、エラー時に例外を投げるように修正」
数秒後：
from typing import List
def fibonacci(n: int) -> List[int]:
"""
フィボナッチ数列をn番目まで生成する
Args:
n: 生成する数列の長さ（正の整数）
Returns:
フィボナッチ数列のリスト
Raises:
ValueError: nが0以下の場合
"""
if not isinstance(n, int):
raise TypeError("n must be an integer")
if n <= 0:
raise ValueError("n must be greater than 0")
elif n == 1:
return [0]
fib: List[int] = [0, 1]
for i in range(2, n):
fib.append(fib[i-1] + fib[i-2])
return fib
3-4. Cmd+L（AIチャット）を試す
Cmd+L（Windows: Ctrl+L）でチャットパネルを開く
あなた：「Pythonでクイックソートを実装するコードを教えて」
Cursor：
クイックソートの実装例です：
def quick_sort(arr: list) -> list:
"""
クイックソートアルゴリズムでリストをソートする
時間計算量: O(n log n)（平均）、O(n²)（最悪）
空間計算量: O(log n)
"""
if len(arr) <= 1:
return arr
pivot = arr[len(arr) // 2]
left = [x for x in arr if x < pivot]
middle = [x for x in arr if x == pivot]
right = [x for x in arr if x > pivot]
return quick_sort(left) + middle + quick_sort(right)
# 使用例
numbers = [3, 6, 8, 10, 1, 2, 1]
sorted_numbers = quick_sort(numbers)
print(sorted_numbers) # [1, 1, 2, 3, 6, 8, 10]
このコードは、ピボット（中央の要素）を基準に
リストを3つに分割し、再帰的にソートしています。
そのままコードを挿入：
チャットの右上にある「Insert at Cursor」ボタンをクリックすると、カーソル位置にコードが挿入されます。
試してみるべき機能 TOP3
1位：Cursor Tab（コード補完）
おすすめ度：★★★★★
やること：
1. コメントで「やりたいこと」を書く
2. Tab キーを押す
3. 生成されたコードを確認
最初はこれだけでも十分価値がある
2位：Cmd+K（インライン編集）
おすすめ度：★★★★★
やること：
1. コードを選択
2. Cmd+K を押す
3. 自然言語で指示
「リファクタリングして」
「コメントを追加」
「TypeScript に変換」
など、何でも指示できる
3位：Cmd+L（AIチャット）
おすすめ度：★★★★☆
やること：
1. Cmd+L でチャットを開く
2. 質問や指示を入力
「このエラーの原因は？」
「この関数を最適化する方法は？」
「テストコードを書いて」
エディタ内で完結するのが便利
参考リンク
お知らせ（採用情報）
最後にお知らせとなりますが、AppTime では一緒に働くメンバーを募集しております。
詳しくは採用情報ページをご確認ください。
みなさまからのご応募をお待ちしております。