Zenn
😎

🚀 Cursor Project Rules入門 - AIとの会話を10倍効率化する方法

に公開
AI
Cursor
AIエージェント
Vibe Coding
tech

こんな経験ありませんか？

「Cursorに頼んだけど、なんか微妙なコードが生成される...」

例えば：

  • 🤔 プロジェクトの構成を理解してくれない
  • 😅 毎回同じ説明をしなければならない
  • 😰 生成されたコードが自分のスタイルと合わない

実は、これらの問題は「Project Rules」で全て解決できます！

この記事では、初心者でも簡単に設定できるProject Rulesの使い方を、具体例たっぷりでお教えします。

📚 この記事で学べること

✅ Project Rulesって何？（3分で理解）
✅ 超簡単な設定方法（画面付きで解説）
✅ すぐ使える実例集（コピペOK）
✅ よくある困った時の解決法

読み終わる頃には、あなたのCursorが驚くほど賢くなっています！

🎯 Project Rulesって何？

一言で言うと

**「AIにあなたのプロジェクトを覚えてもらう機能」**です。

分かりやすい例え

例：料理を頼む場面

ルールなし（😞）：

あなた：「夕食作って」
AI：「何系がいいですか？和食？洋食？材料は？」
あなた：「うちは醤油ベースが多くて、冷蔵庫に○○があって...」
（毎回この説明が必要😅）

ルールあり（😍）：

あなた：「夕食作って」
AI：「いつもの醤油ベースで、冷蔵庫の○○を使った料理ですね！」
（一度教えれば覚えてくれる✨）

プログラミングでも同じです！

実際のコード例

ルールなし：

// よくある一般的なコード
function Button(props) {
  return <button>{props.children}</button>;
}

ルールあり：

// あなたのプロジェクトに最適化されたコード
import { FC } from 'react';
import { cn } from '@/lib/utils';
import { Button as UIButton } from '@/components/ui/button';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'destructive';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
  className?: string;
}

export const Button: FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  children,
  onClick,
  className
}) => {
  return (
    <UIButton
      variant={variant}
      size={size}
      onClick={onClick}
      className={cn(className)}
    >
      {children}
    </UIButton>
  );
};

差は歴然ですよね！

🚀 今すぐ試せる簡単設定

⚡ 方法1：自動生成（超オススメ！）

たった1行で設定完了！

  1. Cursorのチャット欄に以下を入力：
/Generate Cursor Rules
  1. AIが「何のルールを作りたいですか？」と聞いてくるので答える

例：

「Next.jsとTailwindを使ったWebアプリのルールを作って」
  1. 完了！ AIが自動でルールを作ってくれます ✨

🔧 方法2：手動設定（カスタマイズしたい人向け）

手順：

  1. ⌘ + Shift + P（MacOS）or Ctrl + Shift + P（Windows）
  2. 「File: New Cursor Rule」を選択
  3. ファイル名を入力（例：my-coding-style）
  4. ルールを書く

超シンプルなルール例：

# 私の開発スタイル

## 基本的なお願い
- TypeScriptを使ってください
- 関数コンポーネントでお願いします
- エラーハンドリングを忘れずに
- コメントは日本語でお願いします

## よく使う構成
- Next.js 14
- Tailwind CSS
- shadcn/ui

これだけでOK！ 難しく考える必要はありません。

💡 すぐ使える実例集

🎨 例1：React開発の基本ルール

ファイル名： react-basic.mdc

# React開発の基本ルール

## お願いしたいこと
- 関数コンポーネントを使ってください
- Propsの型をちゃんと定義してください
- ファイル名は`PascalCase.tsx`でお願いします

## よくある例
```tsx
// 良い例
interface ButtonProps {
  text: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ text, onClick }) => {
  return (
    <button onClick={onClick} className="px-4 py-2 bg-blue-500 text-white">
      {text}
    </button>
  );
};

避けてほしいこと

  • class コンポーネントは使わない
  • any型は使わない

### 🛠️ 例2：API作成のルール

**ファイル名：** `api-style.mdc`

```markdown
# API作成のお約束

## 基本的な形
```typescript
// こんな感じでお願いします
export async function POST(request: Request) {
  try {
    const data = await request.json();
    
    // 処理をここに書く
    
    return Response.json({ success: true, data: result });
  } catch (error) {
    console.error(error);
    return Response.json(
      { success: false, message: 'エラーが発生しました' },
      { status: 500 }
    );
  }
}

お願い

  • エラーハンドリングは必ずしてください
  • レスポンスは統一してください
  • console.errorでログを出してください

### 🧪 例3：テストファイルのルール

**ファイル名：** `test-style.mdc`

```markdown
---
description: "テストファイルを作成する時のルール"
globs: ["**/*.test.ts", "**/*.test.tsx"]
---

# テストの書き方

## 基本の形
```typescript
describe('コンポーネント名', () => {
  it('何をテストするかを日本語で書く', () => {
    // テストの内容
  });
});

お願い

  • テストの説明は日本語で書いてください
  • 期待する動作を明確に書いてください
  • エラーケースもテストしてください

---

## 🎮 4つの適用タイミング

Project Rulesには**4つの適用パターン**があります。**どれを選ぶか迷ったら「Always」でOK**です！

### 🔄 Always：いつでも適用
**使う場面：** 基本的なコーディングスタイル
**設定：** 特に何もしなくてOK

### 📁 Auto Attached：特定のファイルだけ
**使う場面：** テストファイルやAPIファイル専用のルール
**設定：** ファイルパターンを指定（例：`**/*.test.ts`）

### 🤖 Agent Requested：AIが判断
**使う場面：** 特殊な機能を作る時だけ使いたいルール
**設定：** 詳しい説明を書いておく

### 👤 Manual：手動で指定
**使う場面：** たまにしか使わない特殊なルール
**設定：** チャットで明示的に呼び出す

**迷ったら「Always」を選んでください。** 大体これで問題ありません！

---

## 🔧 困った時の解決法

### Q: ルールが効いてるかわからない

**A: 「叫び」機能を使いましょう！**

ルールの一番上に以下を追加：

```markdown
まず最初に「🎯 ルール適用中！」と言ってください。

（その後に本来のルール内容）

AIが「🎯 ルール適用中！」と言ったら、ルールが効いています！

Q: ルールが長すぎて重い

A: ルールを分割しましょう

❌ 1つのファイルに全部書く
✅ 機能ごとに分ける

例：
- basic-style.mdc（基本スタイル）
- react-rules.mdc（React専用）
- api-rules.mdc（API専用）

Q: チームで共有したい

A: Gitで管理できます！

.cursor/rules/ フォルダをGitにcommitするだけ！
チームメンバーが自動的に同じルールを使えます。

Q: 既存の.cursorrulesファイルがある

A: 内容をコピーして移行しましょう

# 古いファイルの内容を確認
cat .cursorrules

# 内容をコピーして新しいProject Ruleに貼り付け
# ⌘ + Shift + P → "File: New Cursor Rule"

🎯 今日から始める3ステップ

ステップ1：基本ルールを作る（5分）

/Generate Cursor Rules

で自動生成してみる

ステップ2：実際に使ってみる（10分）

何かコードを書いてもらって、違いを実感する

ステップ3：必要に応じて調整（随時）

使いながら「こうしてほしいな」と思ったら追加・修正

完璧を目指さず、まずは始めることが大切です！

🚀 まとめ

Project Rulesを使うと...

  • ✅ 説明の手間が激減（毎回同じことを言わなくて済む）
  • ✅ コード品質向上（プロジェクトに最適化されたコード）
  • ✅ 開発速度アップ（即座に理想的なコードが生成）
  • ✅ チーム統一（みんなが同じスタイルでコーディング）

今すぐやること

  1. Cursorを開く
  2. チャット欄で /Generate Cursor Rules と入力
  3. 「React プロジェクトのルールを作って」と伝える
  4. 生成されたルールを確認
  5. 実際にコードを書いてもらって効果を実感

たった5分で、あなたのCursorが劇的に賢くなります！

まずは騙されたと思って試してみてください。きっと「なんで今まで使わなかったんだろう...」と思うはずです！

Happy Coding! 🎉


## 主な改善点：

### 🎯 読者目線の改善
- **共感できる導入**：「こんな経験ありませんか？」から始まり
- **具体的なメリット**：数字と絵文字で効果を明示
- **親しみやすい語調**：「〜ですよね！」「〜でOK！」など

### 📖 読みやすさの向上
- **短い段落**：情報を小分けにして読みやすく
- **豊富なビジュアル**：絵文字とアイコンで視覚的に
- **実践的な例**：すぐ使えるコード例を中心に

### 🚀 行動を促す構成
- **今すぐできる**：具体的な手順を明示
- **段階的学習**：簡単なものから始められる
- **困った時のサポート**：Q&A形式で解決策を提示

Discussion