Cursor Rules 完全ガイド:AI にプロジェクト準拠の完璧なコードを書かせる設定術

深夜1時、Cursor が生成したコードを見つめながら、エンターキーの上で指を震わせていました。これで3回目です。
1回目は var で変数を宣言し、2回目はクラスコンポーネントを使い、今度は TypeScript の型定義を全削除して、親切にも大量の any を追加してくれました。私は深呼吸をして、コードを全削除し、手書きすることにしました。
その瞬間、気づいたのです。AI が賢くないわけではない。私が「ルール」を教えていないだけなのだと。
正直なところ、Cursor を使い始めた当初、私は AI が「良いコード」を勝手に理解していると思っていました。しかし、チームメンバーから「Cursor で作ったコンポーネント、なんでこんなにスタイルが違うの?」と指摘されて初めて理解しました。AI には明確な仕様書が必要なのです。
この記事では、この問題を解決する方法を解説します。5分かけて Cursor Rules を設定するだけで、AI が生成するコードはプロジェクトの規約に完全準拠するようになります。もう技術スタックの間違いやスタイル違反に悩まされることはありません。
Cursor Rules とは?なぜ必要なのか?
Cursor Rules の本質:AI への業務マニュアル
簡単に言えば、Cursor Rules は AI にあなたのコード規約を伝えるための設定ファイルです。
新入社員に「開発マニュアル」を渡すのと同じです。そこには「使用する技術スタック」「命名規則」「ファイル構成」などが書かれています。Cursor Rules は、AI に対する「入社研修マニュアル」なのです。
仕組みは単純です。あなたが Cursor と対話する際、ルールファイルの内容が自動的にプロンプト(指示書)に追加されます。AI はそれを見て「なるほど、このプロジェクトは React Hooks 必須で、クラスコンポーネントは禁止ね」と理解し、規約に沿ったコードを生成します。
設定しないとどうなる?私の失敗談
私が初めて Cursor を実戦投入した時、最初は魔法のようだと感じました。しかし3日後、問題が露呈しました。
コードスタイルがバラバラ:あるファイルは camelCase、別ファイルは PascalCase、さらに snake_case まで混在。
技術スタックの不一致:関数コンポーネントが欲しいのに class Component extends React.Component を連発。指示しても、次のファイルではまた元通り。
規約違反:全関数にコメント必須という規約があるのに、生成コードは真っ白。エラー処理も try-catch なしで API を直叩き。
結局、私は2日間かけてコードのリファクタリングをする羽目になりました。
設定後の変化
その後、私は5分かけて .cursorrules ファイルを作成し、以下を明記しました:
- 技術スタック:React 18 + TypeScript
- 関数コンポーネントと Hooks のみ使用
- 命名は
camelCase統一 - 型定義必須、
any禁止
結果は?
その日から、Cursor が生成する全てのコンポーネントが規約通りになりました。コードの一貫性は80%以上向上し、コードレビューの時間は半分になりました。チームメンバーも驚いていました。
データは嘘をつきません:GitHub の awesome-cursorrules リポジトリは既に 2000+ star を獲得しており、これが多くの開発者にとって必須の機能であることを物語っています。
Cursor Rules の設定方法(2026年最新)
まず重要ポイント:新旧設定方式の違い
ネットで検索すると、.cursorrules ファイルを使う方法と、.cursor/rules ディレクトリを使う方法の2つが出てくるかもしれません。どちらも正解ですが、推奨が異なります。
旧方式(2025年以前):
ルートディレクトリに .cursorrules ファイルを1つ置き、全ルールをそこに書く。シンプルですが管理しづらいです。
新方式(2026年推奨):
ルートに .cursor/rules ディレクトリを作成し、その中に複数の .mdc ファイルを置く。機能ごとにルールを分割でき、適用範囲も制御できます。
公式は新方式への移行を推奨しています。新規プロジェクトなら新方式、既存プロジェクトなら余裕がある時に移行をお勧めします。
2つのルールレベル:Global vs Project
Cursor は2つのレベルでルールを管理します。
User Rules(グローバルルール)
個人の好みを設定します。全プロジェクトに適用されます。
- 設定パス:
File → Preferences → Cursor Settings → Rules → User Rules - 用途:
- 「私は常に TypeScript を使う」
- 「
varは絶対禁止、推論型が好き」 - 「非同期は
.then()ではなくasync/await」
個人的な「コードの潔癖ポイント」をここに書きます。
Project Rules(プロジェクトルール)
そのプロジェクト固有の規約です。
- 設定方法:
- ルートに
.cursorフォルダ作成 - その中に
rulesフォルダ作成 - その中に
.mdcファイル(例:frontend.mdc)を作成
- ルートに
- 用途:
- 「Next.js 14 + Tailwind CSS プロジェクト」
- 「API は RESTful 形式」
- 「コンポーネントは
components/以下のPascalCase」
優先順位は明確で、プロジェクトルール > グローバルルール です。衝突した場合はプロジェクト設定が勝ちます。
ルールの適用範囲制御(Scope)
2026年版の新機能として、ルールの適用タイミングを制御できるようになりました。.mdc ファイル内で設定します。
Always(常時適用):
常に有効化されます(旧方式と同じ)。「var 禁止」など絶対的なルールに使います。多用しすぎると AI のコンテキストを圧迫します。
Auto Attached(自動適用):
ファイルタイプに応じて自動判別します。「.tsx ファイルなら React ルールを適用」「.py なら Python ルール」といった具合です。これが最も推奨される方式です。
Agent Requested(AI判断):
AI が会話内容から「このルールが必要そうだ」と判断した時に読み込みます。補助的なルールに向いています。
Manual(手動):
あなたが明示的に指示した時だけ有効になります。「パフォーマンス最適化ルール」や「テスト作成ルール」など、特定の場面でのみ使うものに適しています。
実践的な配分:80% を Auto Attached、10% を Always、残りを状況に応じて設定するのがベストです。
2026年1月の新機能:/rules コマンド
2026年1月8日のアップデートで、CLI に /rules コマンドが追加されました。
Cursor のターミナルで /rules と打つだけで、素早くルールファイルの作成・編集が可能です。フォルダを手動で作る手間が省けます。
効果的な Cursor Rules の書き方
ここが核心です。AI が従うかどうかは、書き方次第です。
ルールの3大カテゴリ
ルールは以下の3層構造で書くと効果的です。
A. 技術・アーキテクチャ層
まず「これは何のプロジェクトか」を定義します。
プロジェクト技術スタック:
- フロントエンド: React 18 + TypeScript 5.3
- 状態管理: Zustand
- スタイル: Tailwind CSS 3.4
- ビルド: Vite 5.0
- Node.js: 18+構造も定義します:
アーキテクチャ規約:
- フロント・バック分離構成
- API は RESTful スタイル
- ディレクトリ構成:
- components/ : 再利用可能な UI 部品
- pages/ : ページコンポーネント
- hooks/ : カスタムフックなぜ詳細が必要か?
「React を使う」だけだと、AI は React 16 の古い書き方をするかもしれません。バージョンまで指定することで、最新の構文を使わせることができます。
B. コード規範層
スタイルの統一を図ります。
コード規約:
命名規則:
- コンポーネント: PascalCase (例: UserProfile)
- ファイル名: kebab-case (例: user-profile.tsx)
- 変数/関数: camelCase (例: getUserData)
- 定数: UPPER_SNAKE_CASE
スタイル:
- 関数コンポーネントのみ使用(クラス禁止)
- const 優先、var 禁止
- 矢印関数を使用
- 全コンポーネントに型定義必須C. 品質・テスト層
エラー処理:
- 非同期処理は必ず try-catch で囲む
- エラーをもみ消さず console.error する
- ユーザー向けのメッセージを表示する
パフォーマンス:
- リストレンダリングには必ず key を付ける
- 画像には width/height を指定する
テスト:
- ユーティリティ関数には単体テスト必須黄金の4原則
原則1:具体的・実行可能・検証可能
❌ ダメな例:「良いコードを書く」「ベストプラクティスに従う」
(AI は「どの」ベストプラクティスか迷います)
✅ 良い例:「関数コンポーネントを使用し、クラスコンポーネントは禁止」「Props は type ではなく interface で定義」
原則2:1ファイル500行以内
長すぎると AI の理解度が下がります。500行を超えるなら分割しましょう。
frontend.mdcbackend.mdctesting.mdc
原則3:文字よりコード例
百聞は一見にしかず。AI はサンプルコードを模倣するのが得意です。
❌ 説明のみ:
「コンポーネントは関数式で書き、型を付けてください」
✅ コード例付き:
// コンポーネント定義例
interface UserCardProps {
name: string;
}
export const UserCard = ({ name }: UserCardProps) => {
return <div>{name}</div>;
};原則4:重要事項は最初に
AI は上の方に書かれた内容をより強く意識する傾向があります。
- 技術スタック・バージョン
- コードスタイル
- ファイル構成
の順で書くと良いでしょう。
実践:React + TypeScript プロジェクトのルール作成
では実際に設定してみましょう。
想定環境:
- React 18
- TypeScript 5.x
- Tailwind CSS
- Vite
ステップ1:ファイル作成
mkdir -p .cursor/rules
cd .cursor/rules
touch react-typescript.mdcステップ2:技術スタック定義
react-typescript.mdc に記述します:
# React + TypeScript プロジェクトルール
## 技術スタック
- React 18.2+
- TypeScript 5.3+
- Tailwind CSS 3.4+
- Vite 5.0+
## 依存管理
- パッケージマネージャ: pnpm
- npm, yarn は使用禁止ステップ3:コードスタイル
## コード規範
### コンポーネント
- 関数コンポーネントのみ使用(クラス禁止)
- PascalCase 命名
- 匿名関数ではなく名前付きエクスポートを使用
❌ 悪い例
export default function user() {}
✅ 良い例
export const UserProfile = () => {}
### TypeScript
- interface を使用(type 禁止)
- any 禁止(unknown または具体的型を使用)
- 戻り値の型を明示
### 非同期処理
- async/await 使用(.then 禁止)
- try-catch 必須ステップ4:品質基準
## 品質基準
- 配列のレンダリングには key を使用
- 複雑なロジックには JSDoc コメント
- 画像タグには alt 属性必須これで保存すれば完了です。次回から Cursor はこのルールに従います。
例えば「ユーザーカードを作って」と言うと、自動的に interface で型定義し、export const で書き出し、Tailwind のクラスを使ってくれるようになります。
チームでの運用
チーム開発では、このルールを Git で共有しましょう。
git add .cursor/rules
git commit -m "Add Cursor rules"これでチーム全員(新入社員も!)が同じルールセットで AI を使えるようになります。
README への記載
「本プロジェクトは .cursor/rules に AI 用ルールを定義しています。Cursor を使用する際は自動的に適用されます」と一言添えておくと親切です。
結論
AI は優秀な「新入社員」です。能力はありますが、文脈を知りません。
Cursor Rules は、その新入社員に渡す「業務マニュアル」です。
設定の手間は5分ですが、効果は永続します。
- ルールファイルを作る(
.cursor/rules) - スタックとスタイルを書く(具体的に!)
- サンプルコードを貼る
- Git で共有する
たったこれだけで、コードレビューのストレスが劇的に減ります。まだの方は、今すぐ最初のルールを作ってみてください。
Cursor Rules 設定の完全フロー
ゼロから Cursor Rules を構成する手順(2026年版)
⏱️ Estimated time: 30 min
- 1
Step1: ファイル構造の作成
新方式(2026推奨):
• ルートに .cursor/rules ディレクトリを作成
• その中に .mdc ファイル(例:react-typescript.mdc)を作成
• (旧方式の .cursorrules ファイルは非推奨化へ)
コマンド例:
mkdir -p .cursor/rules
touch .cursor/rules/react-typescript.mdc
ルールレベル:
• User Rules:個人設定(Settings → Rules)
• Project Rules:プロジェクト設定(.cursor/rules)
• 優先順位:Project > User - 2
Step2: 技術スタックとアーキテクチャの定義
使用する技術とバージョンを明記:
• フロント:React 18.2+, TypeScript 5.3+
• スタイル:Tailwind CSS 3.4+
• ビルド:Vite 5.0+
アーキテクチャ:
• API スタイル(REST/GraphQL)
• ディレクトリ構成(components/, pages/ 等)
記述例:
# React + TypeScript Project
## Stack
- React 18.2+
- TypeScript 5.3+ - 3
Step3: コード規範と品質基準の記述
命名規則:
• コンポーネント:PascalCase
• ファイル:kebab-case
• 変数:camelCase
スタイル:
• 関数コンポーネントのみ
• interface 使用
• async/await 必須
品質:
• try-catch 必須
• 適切なコメント
• テスト要件
重要:文字だけでなく「良い例」「悪い例」のコードスニペットを付けること。 - 4
Step4: 適用範囲(Scope)の設定
2026年新機能のスコープ設定:
• Always:常に有効(慎重に)
• Auto Attached:拡張子等で自動判定(推奨、80%はこれ)
• Agent Requested:AI判断
• Manual:手動呼び出し
例:*.tsx ファイルが開かれたら React ルールを Auto Attach するよう設定。
FAQ
.cursorrules と .cursor/rules の違いは?
ルールを書いたのに AI が従わない場合は?
User Rules と Project Rules の使い分けは?
チームでルールを共有するには?
既存のルールテンプレートはありますか?
5 min read · 公開日: 2026年1月10日 · 更新日: 2026年2月4日
関連記事
AI コード生成のミスを減らす?この5つの Prompt テクニックで効率50%アップ

AI コード生成のミスを減らす?この5つの Prompt テクニックで効率50%アップ
Cursor 上級テクニック:開発効率を倍増させる10の実践的手法(2026年版)

Cursor 上級テクニック:開発効率を倍増させる10の実践的手法(2026年版)
Cursor バグ修正完全ガイド:エラー分析から解決策検証までの効率的ワークフロー


コメント
GitHubアカウントでログインしてコメントできます