こんにちは。開発チームの生産性を限界突破させることに命を賭けているテックリードだ。
世の中には「CursorはVS CodeのフォークにAIが乗っただけのもの」という表層的な理解で止まっているエンジニアが溢れている。だが、それはランボルギーニのエンジンを積んだトラクターに乗っているようなものだ。本稿では、Cursorを単なる「コードを書いてくれるチャットボット」としてではなく、「開発文脈（Context）を完全に同期させた自律型コード生成エンジン」として運用し、React/Next.jsのモダンなエコシステムにおいて開発スピードを文字通り「桁違い」にする実践的アプローチを伝授する。
チュートリアルというお遊戯は卒業だ。今日から君のチームの基準を、プロフェッショナルのそれへと引き上げる。
—
1. チームの生産性を底上げする：Cursorの隠れた神ショートカット & 内部挙動の理解
AIエディタの真価は、コンテキスト（文脈）の切り替えコストをゼロにすることにある。マウスに手を伸ばした瞬間、君の脳内のフロー状態は途切れる。以下のキーボードショートカットは、指の迷いを消去し、思考スピードのままコードベースを操るための必須コマンドだ。
- `Cmd + I` (Ctrl + I) : Composer（マルチファイル編集モード）
- 単なるチャットではなく、プロジェクト全体の複数ファイルを同時に書き換える。抽象的な指示から、依存関係を壊さずにコンポーネントとAPIルートを同時生成する。
- `Cmd + L` (Ctrl + L) : Chat with Context
- 選択中のコードだけでなく、@symbols や @files を使って、特定のファイルやドキュメントを明示的にAIの短期記憶（Context Window）にロードする。
- `Cmd + K` (Ctrl + K) : Inline Generation
- エディタ上で範囲選択し、その場でコードの書き換え・リファクタリングを指示する。
- `@Codebase` の強烈な活用
- プロンプト内で `@Codebase` と入力すると、Cursorはローカルのベクトルデータベース（AST解析結果）からセマンティック検索を行い、関連ファイルを自動でコンテキストにインジェクトする。人間が「あれ、あのコンポーネントどこだっけ？」と探す時間は、この瞬間から消滅する。
—
2. チーム開発で絶対に避けて通れない「設定の共有化ルール」
個人のローカル環境だけでAIが賢くても、チーム全体のコード品質が担保できなければ意味がない。Cursorは `.cursorrules` という秘密兵器を通じて、プロジェクト単位でAIの「振る舞い」「アーキテクチャの制約」「コーディング規約」を強制することができる。
プロジェクトルートに `.cursorrules` を配置し、チーム全員のAI出力を完全に同期させろ。
実践的 `.cursorrules` 設定例
役割と基本姿勢
あなたは世界最高峰のTypeScript/React/Next.jsシニアアーキテクトです。
コードを生成する際は、保守性、型安全性、パフォーマンスを最優先し、冗長なコードやアンチパターンを排除してください。
技術スタックと制約事項
- フレームワーク: Next.js (App Router必須, `pages` ディレクトリの使用は禁止)
- 言語: TypeScript (Strictモード必須, `any` 型の使用は絶対禁止。必要に応じて `unknown` またはカスタムジェネリクスを使用)
- スタイリング: Tailwind CSS (クラスの順序は Tailwind CSS Prettier Plugin に従う)
- 状態管理: グローバルな状態は Zustand、サーバーサイドのデータフェッチは TanStack React Query または Next.js Server Actions を使用すること。
- コンポーネント設計: 原則として Server Components (RSC) をデフォルトとし、インタラクティブな要素が必要な場合のみ `”use client”` を明示して Client Component に分離すること。
コーディング規約
- コンポーネントはアロー関数で記述し、明示的なTypeScriptのインターフェース（Props）を定義する。
- エラーハンドリングは `try/catch` を適切に行い、ユーザーフレンドリーなフォールバックUI（`error.tsx` 等）を考慮する。
- テスト駆動の意識を持ち、生成するコードには必要に応じて Jest / React Testing Library のテストコードを伴わせること。
このファイルをリポジトリにコミットするだけで、チームメンバー全員のCursorが「厳格なシニアレビュアー」に変貌する。
—
3. ゼロからのNext.jsプロジェクト構築：AI駆動型開発の実践フロー
ここからが本番だ。Next.js (App Router) のプロジェクトを立ち上げ、Cursorの機能を極限まで引き出してタスクを爆速で完了させるプロセスを解説する。
Step 1: プロジェクトの初期化と環境構築
まずはターミナルを開き、最新のNext.js環境を構築する。ここでもCursorのインテグレーションを活用する。
最新のNext.jsプロジェクトをTypeScript, Tailwind CSS, App Router前提で作成
npx create-next-app@latest cursor-react-app –typescript –tailwind –app –src-dir –import-alias “@/” –use-npm
プロジェクトディレクトリに移動し、Cursorでプロジェクトを開く。
cd cursor-react-app
code .
Step 2: Composer (`Cmd + I`) を使った機能の実装
今回は、「ユーザー一覧を表示し、詳細モーダルを開けるダッシュボード機能」をゼロから作成するケースを想定する。
1. `Cmd + I` を押し、Composerパネルを開く。
2. 以下のプロンプトを投入する。
> プロンプト例:
> `@Codebase Next.jsのApp Routerを使用して、ダッシュボード画面（src/app/dashboard/page.jsonではない、page.tsx）を作成してください。以下の要件を満たすこと：
> 1. モックのユーザーデータ（ID, 名前, メール, ステータス）をJSONで用意し、サーバーサイド（RSC）で取得して表示する。
> 2. Tailwind CSSを用いて、レスポンシブなモダンなテーブルデザインにする。
> 3. 各行をクリックすると、詳細情報を表示するクライアントサイドのモーダルコンポーネント（src/components/UserModal.tsx）が起動するインタラクティブな仕組みを入れる。`”use client”` の分離を正確に行うこと。`
AIは自動的に `src/app/dashboard/page.tsx`、モックデータ、そして `src/components/UserModal.tsx` の複数ファイルを同時に生成・配置する。人間は生成されたコードの差分（Diff）を確認し、`Accept` を押すだけだ。
Step 3: 状態管理とAPI連携の拡張（Zustandの導入）
次に、このダッシュボードに「お気に入りユーザーのピン留め機能」をグローバル状態管理（Zustand）を使って追加する。
ターミナルを開かなくても、Cursorのチャット (`Cmd + L`) から直接パッケージのインストール指示も可能だが、まずは手動でZustandを入れる。
npm install zustand
次に、Cursorのインライン生成 (`Cmd + K`) を使って、ストアを作成する。
`src/store/useUserStore.ts` という空ファイルを作成し、`Cmd + K` で以下を指示する。
> プロンプト:
> 「Zustandを使用して、ピン留めされたユーザーのIDリストを管理するストアを作成して。ピン留めの追加・削除・トグル機能を持たせ、localStorageに永続化（persist middleware）する実装にすること。」
生成されるコードの美しさと型安全性の高さに驚くはずだ。
// src/store/useUserStore.ts
import { create } from ‘zustand’;
import { persist } from ‘zustand/middleware’;
interface UserState {
pinnedUserIds: string[]; // ピン留めされたユーザーのID配列
togglePin: (id: string) => void; // ピン留めの状態を反転させる関数
isPinned: (id: string) => boolean; // 指定したユーザーがピン留めされているか判定する関数
}
export const useUserStore = create
persist(
(set, get) => ({
pinnedUserIds: [],
togglePin: (id: string) =>
set((state) => ({
pinnedUserIds: state.pinnedUserIds.includes(id)
? state.pinnedUserIds.filter((userId) => userId !== id) // 既に存在する場合は削除
: […state.pinnedUserIds, id], // 存在しない場合は追加
})),
isPinned: (id: string) => get().pinnedUserIds.includes(id),
}),
{
name: ‘user-pin-storage’, // ローカルストレージのキー名
}
)
);
—
4. 開発効率を最大化する絶対入れるべき神プラグイン
CursorはVS Codeの拡張機能エコシステムをそのまま継承しているため、VS Codeの資産が100%活きる。その上で、AI開発とのシナジーが爆発するプラグインを厳選して導入しろ。
1. Tailwind CSS IntelliSense
- AIが生成する膨大なTailwindクラスの補完と、記述ミスのリアルタイム検出に必須。
2. Prettier – Code formatter
- AIが生成したコードのフォーマット揺れを、保存時に一瞬で `.prettierrc` の規約に統一する。
3. GitLens — Git supercharged
- 「なぜこのコードが書かれたのか（Blame）」を瞬時に把握し、AIに「このコードの意図を解説して」とコンテキストを渡す際の起点とする。
4. Error Lens
- エラーや型不一致をコード行の末尾にインライン表示する。AIが生成したコードに万が一の型エラーがある場合、視覚的に即座に気づき、`Cmd + K` で即座に修正させられる。
—
5. 実務を加速させるワークスペース設定（settings.json）
最後に、Cursor（VS Codeベース）のポテンシャルを極限まで引き出すための `settings.json` のベストプラクティスを公開する。これを `.vscode/settings.json` としてプロジェクトに配置、あるいは自身のグローバル設定に組み込め。
{
// 保存時に自動でコード整形とインポートの整理を行う（AI生成コードのゴミを残さない）
“editor.formatOnSave”: true,
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: “explicit”,
“source.organizeImports”: “explicit”
},
// TypeScriptのモジュール自動インポート時にパスエイリアス（@/）を優先する
“typescript.preferences.importModuleSpecifier”: “non-relative”,
// Tailwind CSSの補完を有効化する設定
“tailwindCSS.experimental.classRegex”: [
[“cva\\(([^)])\\)”, “[\”‘`]([^\”‘`])[/\”‘`]”]
],
// Cursor特有の設定：AIの提案スピードとコンテキストの最適化
“cursor.experimental.useNewContextSystem”: true,
// 開発中のノイズを減らすため、不要なファイルをエクスプローラーから隠す
“files.exclude”: {
“/.git”: true,
“/.svn”: true,
“/.hg”: true,
“/CVS”: true,
“/.DS_Store”: true,
“/Thumbs.db”: true,
“node_modules”: false // デバッグのためにあえて完全には隠さない設定も可
}
}
—
総括
Cursorを使いこなすということは、単に「コードを書いてもらう楽をする」ことではない。
「アーキテクチャの意思決定とビジネスロジックの設計に人間のリソースを100%集中させ、ボイラープレートや型定義、UIの骨組みといった機械的な実装をAIに超高速で並列処理させる」 という、開発パラダイムの完全な移行なのだ。
今回紹介した `.cursorrules` による規約のコード化、Composerによるマルチファイル同時生成、そしてショートカットによる圧倒的な手数の削減。これらをチームに導入した瞬間から、君たちのプロジェクトのベロシティは確実に次元が変わる。
さあ、エディタを開け。次のプロダクトを、圧倒的なスピードで形にしよう。