.cursor/rules のベストプラクティス
.cursor/rules は、チームが一貫したコーディング標準を維持し、コラボレーションを改善するのに役立つ強力な機能です。このガイドでは、ルールを効果的に設定および管理するためのベストプラクティスを説明します。
.cursor/rules について
.cursor/rules は以下を行う設定システムです。
- プロジェクト全体のコーディング標準を定義
- コード組織化を自動化
- 一貫したパターンを強制
- チームコラボレーションを改善
基本設定
ルールファイルの作成
プロジェクトのルート�?.cursor/rules ファイルを作成します。
mkdir .cursor
touch .cursor/rules
基本構�?
典型的なルールファイルの構造：
version: 1.0
rules:
- name: "コンポーネント構�?
pattern: "src/components/**/*.{ts,tsx}"
template: |
import React from 'react'
interface ${ComponentName}Props {
// プロパテ�?
}
export const ${ComponentName}: React.FC<${ComponentName}Props> = () => {
return (
<div>
{/* コンポーネントの内容 */}
</div>
)
}
- name: "サービス�?
pattern: "src/services/**/*.ts"
template: |
import { ApiClient } from '../utils/apiClient'
export class ${ServiceName}Service {
private client: ApiClient
constructor() {
this.client = new ApiClient()
}
// サービスメソッド
}
ベストプラクティ�?
1. 一貫した命名規�?
ルールに明確で説明的な名前を使用�?
rules:
- name: "Reactコンポーネン�?
description: "標準的なReactコンポーネント構�?
pattern: "src/components/**/*.tsx"
- name: "APIサービス"
description: "REST APIサービステンプレート"
pattern: "src/services/**/*.ts"
2. モジュール化された組�?
関連するルールをグループ化�?
rules:
# コンポーネントルー?
- name: "コンポーネン?関数?
pattern: "src/components/**/*.tsx"
- name: "コンポーネン?クラ?
pattern: "src/components/**/*.class.tsx"
# サービスルー?
- name: "サービス/REST"
pattern: "src/services/rest/**/*.ts"
- name: "サービス/GraphQL"
pattern: "src/services/graphql/**/*.ts"
3. テンプレート変数
説明的なテンプレート変数を使用：
rules:
- name: "コンポーネントテンプレー?
pattern: "src/components/**/*.tsx"
template: |
interface ${ComponentName}Props {
${PropName}: ${PropType}
}
export const ${ComponentName} = ({
${PropName}
}: ${ComponentName}Props) => {
return (
<div>
{${PropName}}
</div>
)
}
4. ドキュメント
ルールに明確なドキュメントを含める：
rules:
- name: "APIサービス"
description: |
APIサービスクラスのテンプレート?
標準的なCRUD操作とエラー処理を含みます?
pattern: "src/services/**/*.ts"
template: |
/**
* ${ServiceName} サービス
* ${ServiceDescription} を処理します
*/
export class ${ServiceName}Service {
// 実装
}
5. エラー処?
エラー処理パターンを含める：
rules:
- name: "サービスエラー処?
pattern: "src/services/**/*.ts"
template: |
try {
// サービスロジック
} catch (error) {
if (error instanceof ApiError) {
// APIエラーの処理
} else {
// その他のエラーの処理
}
throw error
}
高度なパター?
1. 条件付きテンプレート
テンプレートで条件を 使用?
rules:
- name: "プロパティ付きコンポーネント"
pattern: "src/components/**/*.tsx"
template: |
${HasProps ? `
interface ${ComponentName}Props {
// プロパテ?
}
` : ''}
export const ${ComponentName}${HasProps ? ': React.FC<${ComponentName}Props>' : ''} = () => {
// 実装
}
2. 共有パターン
再利用可能なパターンを定義：
patterns:
typescript-header: |
/**
* @file ${FileName}
* @description ${FileDescription}
* @created ${Date}
*/
rules:
- name: "コンポーネン?
pattern: "src/components/**/*.tsx"
template: |
${patterns.typescript-header}
// コンポーネントの実装
最適化のヒント
-
*ファイル組織?
- 関連ファイルをグループ�?
- 一貫したディレクトリ構造を使用
- 命名規則に従�?
-
テンプレート効率
- テンプレートを焦点を絞って具体的�?
- 冗長なコードを避ける
- 共通要素に共有パターンを使�?
-
パフォーマンスの考慮事項
- パター ンの複雑さを制�?
- 具体的なファイルパターンを使�?
- 過度に広範なマッチを避け�?
一般的なパター�?
Reactコンポーネン�?
rules:
- name: "React関数コンポーネン�?
pattern: "src/components/**/*.tsx"
template: |
import React from 'react'
import styles from './${ComponentName}.module.css'
export interface ${ComponentName}Props {
// プロパテ�?
}
export const ${ComponentName}: React.FC<${ComponentName}Props> = () => {
return (
<div className={styles.container}>
{/* コンポーネントの内容 */}
</div>
)
}
サービスクラ�?
rules:
- name: "サービスクラ�?
pattern: "src/services/**/*.ts"
template: |
import { injectable } from 'inversify'
import { ApiClient } from '@/utils/apiClient'
@injectable()
export class ${ServiceName}Service {
constructor(private apiClient: ApiClient) {}
async getAll(): Promise<${EntityName}[]> {
return this.apiClient.get('/${entityPath}')
}
async getById(id: string): Promise<${EntityName}> {
return this.apiClient.get(`/${entityPath}/${id}`)
}
}
その他のリソース
- Cursor 設定ガイド
- コード組織化パターン
結論
.cursor/rules の効果的な使用は、コードの一貫性とチームの生産性を大幅に向上させることができます。これらのベストプラクティスに従うことで、保守可能でスケーラブルなコード構造を作成できます。
関連記事
- コード生成
- プロジェクト設定ガイド